wp_nav_menu(): cómo cambiar la clase del elemento <li> en WordPress

Question

wp_nav_menu(): cómo cambiar la clase del elemento <li> en WordPress

26 dic 2011, 22:02:46

Vistas: 91.1K

Votos: 20

Estoy construyendo un menú para mi sitio web. El código estático 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>

He podido entender cómo personalizar la etiqueta <ul> para eliminar la etiqueta <div> automática. Pero ahora quiero personalizar la etiqueta <li> para poder asignar diferentes nombres de class y controlar comportamientos específicos mediante CSS. Cuando uso wp_nav_menu() el resultado es:

    <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 eliminar el id en las etiquetas <li> y cambiar la class para que refleje el nombre de la página a la que quiero enlazar. Básicamente quiero obtener el mismo resultado que en el primer fragmento de código de esta publicación.

La razón por la que hago esto es que uso imágenes personalizadas que controlo mediante mi CSS en lugar de texto plano.

¿Es esto posible? ¿Qué estrategia debería usar para solucionar este problema?

Christian

205

desarrollo de temas menús navegación

Comentarios

Aquí puedes agregar diferentes clases en ul > li >a https://sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links/

Rameez SOOMRO

9 jun 2018 09:38:49

Todas las respuestas a la pregunta

Comentarios

Gracias Toscho, acabo de descubrir que en la nueva versión de Wordpress (3.3) podemos agregar clases personalizadas para cada elemento del menú, lo cual resuelve mi problema. Probé el script que me sugeriste (T5_Nav_Menu_Walker_Simple) que elimina todo del <li>, ¿cómo podemos controlar qué elementos queremos conservar?

Christian

26 dic 2011 23:20:50

@Christian Puedes modificar el walker según lo necesites, es solo un ejemplo muy básico. Para ver qué información está disponible, agrega un print_r( $item, TRUE ) a cada li. Luego decide qué hacer con esa información. :)

fuxia

27 dic 2011 00:44:34

Esto me orientó en la dirección correcta, lo que necesitaba era el wp_nav_menu, pero necesitaba cambiar el parámetro 'container_class' para que funcione en mi caso particular, donde bajo cierta condición reemplazaba el menú principal por otro, pero necesitaba que las clases fueran consistentes para el css.

D. Dan

25 ene 2018 17:16:34

ve a apariencia > menús - selecciona el menú que desees - ve a "opciones de pantalla" en la parte superior derecha, selecciona "clases css" - añade una clase a cada elemento del menú..

Q Studio

2.53K

22 sept 2012 13:49:25

Establecer la clase <li> como nav-link, ya que Bootstrap 4.3 lo requiere:

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én puedes eliminar el atributo id de ese array.

cweiske

178

22 abr 2019 21:30:37

Esta es una forma muy sencilla de llamar a la clase li y reemplazar fácilmente "cualquier clase". Solo sigue las instrucciones.

Usa este código en el área del menú de navegación.

<?php
            $consult_menu = wp_nav_menu(array(
                    'theme_location' => 'topmenu',
                    'menu_id' => 'menu', 
                    'menu_class' => 'navbar-nav m-auto',
                    'echo' => false
                )
            );
            $consult_menu = str_replace('menu-item', 'nav-item', $consult_menu);
            echo $consult_menu;
            ?>

Luego inspecciona tu código en el navegador. Encuentra la clase predeterminada de WordPress y luego reemplaza str_replace(**"clase_predeterminada_aqui"**,**"nueva_clase_li_aqui"**,$consult_menu);

| Nota: $consult_menu aquí es el nombre de mi tema, puedes usar cualquier nombre aquí.

Muhammad Mohibbullah

21

21 feb 2022 19:20:37

Como mencionó el último comentarista, puedes agregar tus propias clases a través de apariencia > menús con las clases CSS marcadas en las opciones de pantalla. En el walker, puedes acceder a lo que ingreses allí mediante:

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

Incluso he usado esto para agregar imágenes con nombres predefinidos en el menú - un poco inestable, pero funciona.

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

RPB1001

1

13 jun 2013 08:36:59

fuxia 107K · Accepted Answer · 2011-12-26T22:48:28Z

Utiliza un walker personalizado, elimina lo que no necesites y añade tus clases. Aquí tienes un walker que yo uso para obtener una lista con un marcado limpio: T5_Nav_Menu_Walker_Simple.

También podrías filtrar 'nav_menu_css_class' o 'wp_nav_menu_items'. Pero en mi opinión, una clase walker es más fácil de entender y controlar.

fuxia

107K

26 dic 2011 22:48:28