web-dev-qa-db-fra.com

Comment donner des classes personnalisées au widget Menu WordPress

J'ai créé un widget de menu personnalisé, qui est en fait une réplique du widget par défaut fourni par les fichiers WordPress principaux.

Mais je suis confronté à quelques défis, il n'est pas en mesure d'accueillir mon menu personnalisé, mes cours.

J'ai vérifié la page dans le navigateur et il rend ce genre de HTML →

J'ai reçu une réponse sur le point de résoudre mon problème. Donc, en bref, je suis un peu instruit maintenant qu'avant. Le problème est le suivant → Si je l’utilise → 'menu_class' => 'footer-menu', une nouvelle classe est injectée dans la balise <ul></ul>, mais ce n’est pas souhaitable. Je veux injecter ma classe dans la balise div.

Actuellement, cette structure est à venir → <div class="menu-menu-1-container"><ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul></div>

Mais je le veux comme ça →

<nav class="footer-menu"> <ul id="menu-menu-3" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"> <a href="http://codepen.trafficopedia.com/site01/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li> </ul> </nav>

Donc, je pense que si d’une manière ou d’une autre je peux injecter un new class dans le paramètre container + changer sa structure de div en nav alors tout semble être corrigé.

Le Live WP Link

menuswidgets
1
The WP Novice

(Mis à jour en fonction des commentaires ci-dessous.)

<div class="menu-menu-1-container"> provient du conteneur de menus par défaut de WP. Vous pouvez personnaliser la balise utilisée (div, ul, etc.) ou indiquer à WP de ne pas utiliser de conteneur, ainsi que définir l'ID et/ou la classe (menu-menu-1-container , etc.) en utilisant les arguments container, container_class et container_id lorsque vous appelez wp_nav_menu.

<ul id="menu-menu-4" class="menu"> - vous pouvez facilement changer cette classe et cet ID en incluant menu_class et menu_id lorsque vous appelez le menu, vers la fin de votre bloc "Affichage frontal":

$nav_menu_args = array(
    'fallback_cb' => '',
    'container' => 'ul',
    'container_class' => 'my_custom_container_class',
    'container_id' => 'my_custom_container_id',
    'menu' => $nav_menu,
    'menu_class' => 'my_custom_css_class',
    'menu_id' => 'my_custom_css_id'
);

Changez la classe et l'ID en ce que vous voulez, variables ou quoi que ce soit. Assurez-vous que si vous affichez plusieurs menus sur une seule URL, définissez l'ID sur une variable dynamique afin de ne pas avoir plusieurs menus avec le même ID.

Si vous avez besoin de personnaliser davantage, La référence de code de WP sur wp_nav_menu répertorie tout ce que vous pouvez modifier. Si cela ne suffit pas, envisagez de vous lancer dans une promenade personnalisée.

2
WebElaine