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

16

Estoy creando un menú para mi sitio web. La está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>

He podido entender cómo personalizar la <ul>etiqueta, para deshacerme de la <div>etiqueta automática . Pero ahora, quiero personalizar la <li>etiqueta para poder asignar un classnombre diferente para controlar el comportamiento específico a través de CSS. Cuando uso el wp_nav_menu()resultado es el 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 deshacerse de la idde las <li>etiquetas y cambiar el classpara reflejar el nombre de la página que desea establecer el vínculo. Básicamente quiero generar lo mismo que el primer fragmento de código en esta publicación.

La razón por la que hago esto es que uso imágenes personalizadas controladas por mi CSS en lugar de texto sin formato.

es posible? ¿Qué estrategia debo usar para superar este problema?

theme-development menus navigation cristiano
fuente
Aquí puede agregar diferentes clases en ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links
Rameez SOOMRO

Respuestas:

14

Use un andador personalizado , elimine todo lo que no necesita y agregue sus clases. Aquí hay un andador que uso para obtener una lista con marcado limpio: T5_Nav_Menu_Walker_Simple .

Su también podría filtrar 'nav_menu_css_class'o 'wp_nav_menu_items'. Pero una clase de caminante es más fácil de entender y controlar en mi opinión.

fuxia
fuente
Gracias Toscho, acabo de encontrar que en la nueva versión de Wordpress (3.3) podemos agregar clases personalizadas para cada elemento del menú que resuelva mi problema. Probé el script que me sugirió (T5_Nav_Menu_Walker_Simple) que elimina todo <li>, ¿cómo podemos controlar qué elementos queremos conservar?
Cristiano
1
@ Christian Puedes cambiar el andador según lo necesites, es solo un ejemplo muy básico. Para ver qué información está disponible, agregue un print_r( $item, TRUE )a cada uno li. Luego decida qué hacer con él. :)
fuxia
Esto me señaló en la dirección correcta, lo que necesitaba era wp_nav_menu , pero necesitaba cambiar el parámetro 'container_class', para trabajar para mi caso de uso particular, donde en alguna condición cambié el menú principal por otro, pero necesitaba el Las clases deben ser consistentes para CSS.
D. Dan
10

vaya a apariencia> menús - seleccione el menú que desee - vaya a "opciones de pantalla" en la parte superior derecha, seleccione "clases css" - agregue una clase a cada elemento del menú.

Q Studio
fuente
1

Establecer la <li>clase en nav-link, ya que bootstrap 4.3 lo necesita:

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 puede desarmar el idatributo en esa matriz.

Cweiske
fuente
0

Como se mencionó en el último póster, puede agregar sus propias clases a través de la apariencia> menús con clases CSS marcadas en las opciones de la pantalla. En el andador, puede acceder a lo que ingresa allí a través de:

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

Incluso he usado esto para agregar imágenes previamente nombradas en el menú, un poco flakey, pero funciona.

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