web-dev-qa-db-fra.com

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

Je construis 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 été en mesure de comprendre comment personnaliser la balise <ul> pour supprimer la balise automatique <div>. Mais maintenant, je souhaite personnaliser la balise <li> pour pouvoir attribuer un nom class différent afin de contrôler un comportement spécifique via CSS. Lorsque j'utilise la wp_nav_menu(), le résultat est le suivant:

    <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 souhaite supprimer la id dans les balises <li> et modifier la class afin de refléter le nom de la page vers laquelle je souhaite créer un lien. Fondamentalement, je veux sortir la même chose que le premier extrait de code dans ce post.

La raison pour laquelle je le fais est que j’utilise des images personnalisées contrôlées par mon CSS au lieu du texte brut.

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

theme-developmentmenusnavigation
15
Christian

Utilisez un custom walker , supprimez tout ce dont vous n’avez pas besoin et ajoutez vos classes. Voici un guide 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 marcheurs est plus facile à comprendre et à contrôler à mon avis.

12
fuxia

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

10
Q Studio

Comme le dernier poster l'a mentionné, vous pouvez ajouter vos propres classes via apparence> menus avec les classes CSS cochées dans les options de l'écran. Dans le walker, vous pouvez accéder à ce que vous 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 floconneuses, mais cela fonctionne.

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

Définir la classe <li> à 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 supprimer l'attribut id dans ce tableau.

0
cweiske