wp_nav_menu (), comment changer la classe <li>?

16

Je crée un menu pour mon site Web. La statique ressemble à ceci:

<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>

J'ai pu comprendre comment personnaliser la <ul>balise, pour se débarrasser de la <div>balise automatique . Mais maintenant, je veux personnaliser la <li>balise pour pouvoir attribuer un classnom différent pour contrôler un comportement spécifique via CSS. Lorsque j'utilise la wp_nav_menu()sortie, c'est comme suit:

    <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>

Je veux me débarrasser de iddans les <li>balises et changer classpour refléter le nom de la page que je veux établir un lien. Fondamentalement, je veux sortir la même chose que le premier extrait de code dans ce post.

La raison pour laquelle je fais cela, c'est que j'utilise des images personnalisées qui sont contrôlées par mon CSS insted de texte brut.

Est-ce possible? Quelle stratégie dois-je utiliser pour surmonter ce problème?

theme-development menus navigation

— Christian
source

Ici, vous pouvez ajouter une classe différente dans ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links

— Rameez SOOMRO

14

Utilisez un déambulateur personnalisé , supprimez tout ce dont vous n'avez pas besoin et ajoutez vos classes. Voici un déambulateur que j'utilise pour obtenir une liste avec un balisage propre: T5_Nav_Menu_Walker_Simple .

Vous pouvez également filtrer 'nav_menu_css_class'ou 'wp_nav_menu_items'. Mais une classe de marcheur est plus facile à comprendre et à contrôler à mon avis.

— fuxia
source

Merci Toscho, je trouve juste que dans la nouvelle version de Wordpress (3.3), nous pouvons ajouter une classe personnalisée pour chaque élément de menu, ce qui résout mon problème. J'ai essayé le script que vous m'avez suggéré (T5_Nav_Menu_Walker_Simple) qui supprime tout du <li>, comment pouvons-nous contrôler quels éléments nous voulons conserver?

— Christian

1

@Christian Vous pouvez changer le déambulateur selon vos besoins, ce n'est qu'un exemple très basique. Pour voir quelles informations sont disponibles, ajoutez un print_r( $item, TRUE )à chacun li. Décidez ensuite quoi en faire. :)

— fuxia

Cela m'a montré dans la bonne direction, ce dont j'avais besoin était le wp_nav_menu , mais je devais changer le paramètre 'container_class', pour travailler pour mon cas d'utilisation particulier, où j'ai à certaines conditions échangé le menu principal pour un autre, mais j'avais besoin du les classes doivent être cohérentes pour css.

— D. Dan

10

allez dans apparence> menus - sélectionnez le menu que vous voulez - allez dans "options d'écran" en haut à droite, sélectionnez "classes css" - ajoutez une classe à chaque élément de menu.

— Q Studio
source

1

Définir la <li>classe sur nav-link, car bootstrap 4.3 en a besoin:

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);

Vous pouvez également désactiver l' idattribut dans ce tableau.

— cweiske
source

0

Comme la dernière affiche mentionnée, vous pouvez ajouter vos propres classes via l' apparence> menus avec les classes CSS cochées dans les options d'écran. Dans le déambulateur, vous pouvez accéder à ce que vous y entrez via:

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

J'ai même utilisé cela pour ajouter des images pré-nommées dans le menu - un peu floconneux, mais cela fonctionne.

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

— user2080750
source