web-dev-qa-db-fra.com

Ajoutez <span> dans la <a> sortie de <? wp_nav_menu ()?>

Actuellement, j'utilise:

<?php echo  wp_nav_menu( array( 'menu' => 'main-menu','depth'=> 1,'items_wrap' => '<ul class="navigation_ul">%3$s</ul>' ) ); ?>

Je veux atteindre:

<ul class="navigation_ul">
        <li id="menu_1">
        <a href=""  class="active">
            <span class="left_arrow"></span>
            <span class="middle_text">About Us</span>
            <span class="right_arrow"></span>
        </a></li>
        <li id="menu_2">
        <a  href="">
            <span class="left_arrow"></span>
            <span class="middle_text">Downloads</span>
            <span class="right_arrow"></span>
        </a></li>
        <li id="menu_3">
        <a href="">
          <span class="left_arrow"></span>
            <span class="middle_text">For Learning</span>
            <span class="right_arrow"></span>
    </a></li>
        <li id="menu_4">
          <a href="">
            <span class="left_arrow"></span>
            <span class="middle_text">Support</span>
            <span class="right_arrow"></span>
        </a></li>
    </ul>

Mais je ne l'obtiens pas de cette façon. S'il vous plaît, aidez-moi à trouver la solution qui est très urgente.

menus
1
Priya jain

Selon le Codex, wp_nav_menu() a quelques paramètres pour ajouter du HTML ou des entités avant et après le HTML généré. Les paramètres que vous voulez sont link_before et link_after et pour obtenir l'effet recherché, procédez comme suit:

'link_before' => '<span class="left_arrow"></span><span class="middle_text">',     
'link_after'  => '</span><span class="right_arrow"></span>'
3
Howdy_McGee

Ne pas répondre à la question mais peut-être répondre au problème:

  1. Si les flèches sont utilisées pour des fonctionnalités (par exemple, elles font quelque chose lorsque l'on clique dessus) qui nécessite Javascript (probablement si c'est le cas), utilisez ensuite le javascript pour insérer les éléments car ils sont inutiles sans JS. De plus, si c'est le cas, assurez-vous qu'il y a remplacements de texte pour les icônes.
  2. Si les flèches sont purement décoratives, pensez à utiliser du CSS pur. Avec Dashicons , vous pouvez appliquer la police de dashicons à la fois à .navigation_ul a::before et à .navigation_ul a::after, puis appliquer le glyphe correct à chacun séparément. En recherchant "arrow" dans la page Dashicons, vous découvrirez les trois styles proposés.
0
mrwweb