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 class
nom 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 id
dans les <li>
balises et changer class
pour 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?
la source
Réponses:
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.la source
<li>
, comment pouvons-nous contrôler quels éléments nous voulons conserver?print_r( $item, TRUE )
à chacunli
. Décidez ensuite quoi en faire. :)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.
la source
Définir la
<li>
classe surnav-link
, car bootstrap 4.3 en a besoin:Vous pouvez également désactiver l'
id
attribut dans ce tableau.la source
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:
J'ai même utilisé cela pour ajouter des images pré-nommées dans le menu - un peu floconneux, mais cela fonctionne.
la source