web-dev-qa-db-fra.com

Comment insérer du code personnalisé dans la structure wp_nav_menu?

J'ai pu utiliser <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => false ) ); ?> pour créer le menu dans mon thème. J'ai déconné avec 'items_wrap' mais je ne pouvais pas le faire afficher correctement.

J'ai besoin d'ajouter une image et un conteneur div dans le sous-menu ul avant les liens. C'est la structure que je veux:

    <ul id="nav">
    <li><a href="#">Page</a>
        <ul>
            <img src="<?php bloginfo('template_directory'); ?>/images/nav_ul_tab.png" class="nav_ul_tab" />
            <div class="nav_spacer">
                <li><a href="#">Sub Page</a></li>
                <li><a href="#">Sub Page</a></li>
                <li><a href="#">Sub Page</a></li>
            </div>
         </ul>
    </li>
   </ul>
menuscssnavigation
1
Luke

Ce que vous voulez, c'est un balisage invalide. Les seuls enfants qu'une ul puisse avoir sont li. Utilisez CSS à la place:

#nav ul
{
    padding-top:    40px; /* Your image size. */
    background:     url(/path/to/your/image/img.png) top center no-repeat transparent;
}
5
fuxia

Nous pouvons insérer l'image via Jquery. Voici le code. Avant d’exécuter ce code, assurez-vous que JQuery JavaScript doit être chargé dans votre page.

<script type="text/javascript">
   jQuery(document).ready(function(){
        jQuery("#nav li ul .nav_spacer").before('<img src="<?php bloginfo('template_directory'); ?>/images/nav_ul_tab.png" class="nav_ul_tab" />')
   });
</script>
0
Manimaran