WordPress : Ajouter des div supplémentaires aux éléments de navigation WordPress
WordPress : comment modifier la structure HTML de wp_nav_menu ? 🧱
- 1· Objectif — Ajouter un
<div class="alignme">autour des éléments du menu principal pour un contrôle CSS précis. - 2· Problème —
wp_nav_menu()génère du HTML standard difficile à personnaliser sans “hacker” le cœur. - 3· Solution propre — Créer un Walker personnalisé (ex :
Add_Div_Walker) en surchargeant la méthodestart_el(). - 4· Exemple — Dans
functions.php:- Créer une classe qui hérite de
Walker_Nav_Menu. - Insérer les balises HTML souhaitées dans
start_el(). - Passer la classe via l’argument
'walker' => new Add_Div_Walkerdanswp_nav_menu().
- Créer une classe qui hérite de
- 5· Avantage — Total contrôle sur l’output HTML des menus WordPress, sans casser la structure native.
➡️ Créez un Walker personnalisé pour injecter vos <div> et balises à l’endroit précis où vous en avez besoin.
Quel est le moyen le plus simple de modifier la sortie générée par mon wp-menu à partir de
<ul class="primary-menu">
<li class="menu-item">
<a href="">nav link</a>
<ul class="sub-menu"></ul>
</li>
</ul>
à
<ul class="primary-menu">
<li class="menu-item">
<div class="alignme">
<button></button><a href=""></a><button></button>
</div>
<ul class="sub-menu"></ul>
</li>
</ul>
?
J’ai besoin de ce type de « helper div » car je dois aligner les trois éléments d’une certaine manière et indépendamment d’un éventuel contenu supplémentaire (par exemple, un sous-menu) à l’intérieur du li.
J’utilise wp_nav_menu() par défaut et en tant que créateur de thème pour la première fois, je ne sais pas où trouver la « configuration » du menu. Une idée où je devrais regarder de plus près ?
Solution n°1 trouvée
ajouter la classe walker dans wp_nav_menu « new Add_Div_Walker ». vérifiez mon code ci-dessous.
$menu = array(
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'walker' => new Add_Div_Walker
);
wp_nav_menu( $menu );
// add this below code in your functions.php file.
class Add_Div_Walker extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("t", $depth);
$output .= "n$indent<div class='alignme'>
<button></button><a href=''></a><button></button>
</div><ul class='submenu'>n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("t", $depth);
$output .= "$indent</ul>n";
}
}
0 commentaire