web-dev-qa-db-fra.com

ajout de code HTML personnalisé à la fonction wp_nav_menu

J'aimerais implémenter du code html personnalisé dans la fonction wp_nav_menu de WordPress afin de pouvoir ajouter une boîte modale d'amorçage à un lien de menu de navigation, mais je ne sais pas comment s'y prendre. Le message https://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu explique en partie comment y parvenir en élargissant la classe de marcheur.

Mon objectif est de créer le balisage suivant à l'aide de la classe de randonneur pour créer le code HTML personnalisé à la fin.

<div class="menu-primary-navigation-container">
    <ul id="navigation" class="clearfix">
        <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-273 current_page_item menu-item-275">
            <a href="http://sandpit.jonathanbeech.co.uk/">Home</a>
        </li>
        <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
            <a href="http://sandpit.jonathanbeech.co.uk/about/">About</a>
        </li>
        <li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191">
            <a href="http://sandpit.jonathanbeech.co.uk/portfolio-two/">Portfolio</a>
        </li>
        <li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269">
            <a href="http://sandpit.jonathanbeech.co.uk/articles/">Articles</a>
        </li>
        <li>
            <a href="#myModal" role="button" data-toggle="modal">Contact</a>
        </li>
    </ul>
</div>

Je n'arrive pas à comprendre comment modifier les codes start_el et end_el pour obtenir le code figurant dans le dernier élément de la liste, car mes compétences en php ne sont pas bonnes.

Aucune suggestion?

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Copy all the start_el code from source, and modify
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        // Copy all the end_el code from source, and modify
    }
}
menustwitter-bootstrap
5
Jonathan Beech

Pour ajouter ce dernier élément de la liste, vous n'avez pas besoin d'un Walker personnalisé. Il y a un crochet qui vous permettra de clouer ça sur .

function add_last_nav_item($items) {
  return $items .= '<li><a href="#myModal" role="button" data-toggle="modal">Contact</a></li>';
}
add_filter('wp_nav_menu_items','add_last_nav_item');

Ce ne serait de toute façon pas start_el et end_el que vous auriez besoin de modifier. Ceux-ci génèrent les éléments individuels de la liste. Ce n'est pas l'endroit pour ajouter un autre article. Je pense que vous auriez probablement besoin de monter jusqu'au parent de Walker_Nav_MenuWalker class pour arriver à un endroit où vous pouvez ajouter de nouveaux éléments, mais cela ne vaut pas la peine de simplement ajouter des éléments.

10
s_ha_dum