home iconInicio / wordpress / wp_nav_menu (), ¿cómo cambiar <li> clase?

wp_nav_menu (), ¿cómo cambiar <li> clase?

    • vote up icon 17 vote down icon
    • translation icon
    • view icon70949 calendar icon2011-12-26

    Estoy creando unmenúparami sitio web. Laestática se ve así: 

     <nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

    Hepodidoentender cómopersonalizar laetiqueta <ul>para deshacerme de laetiqueta automática <div>. Pero ahora quieropersonalizar laetiqueta <li>parapoder asignar unnombre de class diferentepara controlar un comportamientoespecífico através de CSS. Cuando usoel wp_nav_menu()el resultadoesel siguiente: 

         <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

    Quiero deshacerme del iden lasetiquetas <li> y cambiar la classpara reflejarelnombre de lapágina. Quiero vincularme a. Básicamente,quierogenerar lomismo queelprimerfragmento de códigoen estapublicación.

    La razónpor la que hagoestoes que utilizoimágenespersonalizadas controladaspormi CSSen lugar detextoplano.

    ¿Esestoposible? ¿Quéestrategia debo utilizarpara superaresteproblema?

    theme-development menus navigation
    • Aquípuede agregar una clase diferenteen ul> li> a https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

4  respuestas

  • votos
    • accept answer icon
    • translation icon
    • calendar icon 2011-12-26

    Utilice un andadorpersonalizado ,eliminetodo lo quenonecesite yagregue sus clases.Aquí hay un andador que utilizopara obtener una lista conmarcado limpio: T5_Nav_Menu_Walker_Simple .

    Tambiénpuedefiltrar 'nav_menu_css_class' o 'wp_nav_menu_items'.Pero una clase de caminanteesmásfácil deentender y controlaren mi opinión.

    • Gracias Toscho,acabo de descubrir queen lanueva versión de Wordpress (3.3)podemos agregar una clasepersonalizadapara cadaelemento delmenú que resuelvemi problema.Probéel script queme sugirió (T5_Nav_Menu_Walker_Simple) que quitatodo del `
    • `,¿cómopodemos controlar quéelementos queremos conservar?
  • @Christian Puedes cambiarel andador comonecesites,es solo unejemplomuybásico.Para ver quéinformaciónestá disponible,agregue un `print_r ($item,TRUE)` a cada `li`.Luego,decida qué hacer con él.:)
  • Estome señalóen la dirección correcta,lo quenecesitabaerael ** wp_nav_menu **,**pero **necesitaba cambiarelparámetro 'container_class',para quefuncioneparami caso de usoparticular,donde,por alguna condición,cambiéelprincipalmenúpara otro,peronecesitaba que las clasesfueran consistentespara css.
    • translation icon
    • calendar icon 2012-09-22

    vaya a losmenús de apariencia> - seleccioneelmenú que desee - vaya a "opciones depantalla"en laparte superior derecha,seleccione "clases css" - agregue una clase a cadaelemento delmenú ..

    • translation icon
    • calendar icon 2019-04-22

    Establecer la clase <li>en nav-link,ya quebootstrap 4.3 lonecesita: 

     function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

    Tambiénpuede desactivarel atributo iden esamatriz.

    • translation icon
    • calendar icon 2013-06-13

    Comomencionóel últimopóster,puede agregar suspropias clases através de menús de apariencia> con las clases de CSSmarcadasen las opciones de lapantalla.Enel andador,puede acceder a lo queingresa através de: 

     $item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

    Incluso he usadoestopara agregarimágenes connombreprevioen elmenú,unpocoescamosas,perofunciona. 

     <img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">