web-dev-qa-db-fra.com

comment changer le balisage / classes de menu Wordpress

Je construis mon premier site Web sur WordPress, et je voulais demander si quelqu'un sait comment changer les balises dans le menu Wordpress. En gros, je veux que le balisage de ma navigation WordPress corresponde à ce que j'ai fait dans mes modèles statiques.

<div class="topNav">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Mes siūlome</a></li>
          <li class="dropdown">
            <a class="dropbtn">if Has subMenu</a>
            <div class="dropdown-content">
              <a href="#"> Sub1</a>
              <a href="#"> Sub2</a>
              <a href="#"> Sub3</a>
            </div>
          </li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

Cependant, je reçois quelque chose comme ça

<div class="menu-topnav-container">
   <ul id="menu-topnav" class="menu">
      <li id="menu-item-89" class="some random wordpress classes">
         <a href="#">about</a>
         <ul class="sub-menu">
            <li id="menu-item-90" class="some random wordpress classes"><a 
               href="http://test">example</a></li>
         </ul>
      </li>
      <li id="menu-item-92" class="some random wordpress classes"><a 
         href="http://2">example</a></li>
   </ul>
</div>

Je sais que je dois utiliser une classe de marcheur personnalisée, mais je ne sais pas comment l'appliquer. :( quelqu'un peut m'aider avec cela. J'ai besoin de cette structure de balisage parce que je ne veux pas réécrire tout le code CSS.

theme-developmentmenusnavigationwalkerhtml5
1
Eiwa

Changer le CSS est le moyen le plus simple d'appliquer vos styles souhaités.

Comme Jack l'a mentionné, une autre solution consiste à créer un marcheur personnalisé. Le Codex a une bonne vue d'ensemble.

La troisième option est un moyen heureux - vous pouvez personnaliser le menu partiellement avec votre appel wp_nav_menu(). Par exemple, cet appel

wp_nav_menu(array(
    'menu' => 'myMenu', // change this to call your desired menu
    'container_class' => 'topNav', // changes outer <div> class
    'items_wrap' => '<ul>%1$s</ul>' // strips id & class from <ul>
));

vous donnera cette sortie:

<div class="topNav">
   <ul>
      <li id="menu-item-89" class="some random wordpress classes">
         <a href="#">about</a>
         <ul class="sub-menu">
            <li id="menu-item-90" class="some random wordpress classes"><a 
               href="http://test">example</a></li>
         </ul>
      </li>
      <li id="menu-item-92" class="some random wordpress classes"><a 
         href="http://2">example</a></li>
   </ul>
</div>

il y a donc moins de CSS à changer, mais vous n'avez pas non plus besoin de construire un Walker entier.

2
WebElaine