web-dev-qa-db-fra.com

ajouter une classe d'envergure et une balise i à l'intérieur de la balise d'ancrage du lien wp_nav_menu

J'ai trouvé des exemples d'ajout d'une classe à des éléments de niveau supérieur, nous pouvons donc afficher une flèche dans les éléments de menu avec des sous-éléments, mais il semble terrible de faire face aux classes WordPress déjà intégrées, ne peut pas afficher la flèche avec survol actuel et CSS , ça ruine tous les états.

Le menu de navigation actuel est comme ceci <li><a>Text</a></li>

Est-il possible d'ajouter un <span class="something"><i class="something"></i></span> à la place des balises parent <a></a>?

Exemple

<li class="main-nav__item">
      <a class="main-nav__item-link" href="index.html">
            <span class="main-nav__item-icon-wrapper">
                   <i class="main-nav__item-icon icon-home"></i>
            </span>
            <span class="main-nav__item-content">Home</span>
      </a>
</li>
<li class="main-nav__item">
        <a class="main-nav__item-link" href="index.html">
               <span class="main-nav__item-icon-wrapper">
                     <i class="main-nav__item-icon icon-Blog"></i>
               </span>
               <span class="main-nav__item-content">Blog</span>
        </a>
</li>

Le code actuel ajoute les balises en dehors des balises parent

class Walker_Nav_Menu extends Walker {

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"main-nav\">\n";
    }
}
menusnavigationwalker
1
ASMSaief

Vous pouvez utiliser les arguments wp_nav_menu () comme suit:

wp_nav_menu( array(
    'menu'          => 'Whatever Your Menu Name Is',
    'link_before'   => '<span class="main-nav__item-icon-wrapper"><i class="main-nav__item-icon icon-home"></i></span><span class="main-nav__item-content">',
    'link_after'    => '</span>'
) );

link_before et *_after ajoutera n'importe quoi avant/après le texte à l'intérieur le lien où juste l'argument normal before et after ajoutera n'importe quoi avant/après le lien entier} mais toujours dans l'élément de liste .

Cela les ajoutera à all les éléments de la liste mais vous pouvez utiliser CSS pour les styler ou ne pas les afficher comme vous le souhaitez et je pense que c'est plus rapide et plus facile que de travailler avec un marcheur.

1
Howdy_McGee