Supposons que vous ayez un site Web multilingue avec le plugin Polylang activé et que vous souhaitez afficher des drapeaux de langue à la fin de votre menu de navigation.
Concrêtement voici comment ajouter des <li> dans le menu <ul> déja créé par WordPress grâce à votre choix de menu fait dans l'administration "Apparence > Menus".
Cette démarche est valable pour Polylang mais pas que. Si vous souhaitez simplement rajouter par exemple un élément à votre menu pour afficher le bouton de mode nuit comme sur mon site, la démarche est similaire.
Tout ce que vous avez à faire est d'injecter une fonction dans wp_nav_menu().
Voici le tuto pratique en 2 étapes :
1/ Ouvrez header.php et modifier le array de wp_nav_menu comme suivant :
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'items_wrap' => my_nav_wrap() ) ); ?>
</nav>
Ici le point important est l'ajout de 'items_wrap' => my_nav_wrap() la fonction wp_nav_menu
2/ Ouvrez functions.php et ajoutez le code de la fonction comme suivant :
Ce code est adapté pour afficher les langues de Polylang en fin de menu. Pour un autre usage que Polylang, voir plus bas.
//POLYLANG ajout manuel des langues en fin de menu WP
function my_nav_wrap() {
$wrap = '<ul id="%1$s" class="%2$s">';
// get nav items as configured in /wp-admin/
$wrap .= '%3$s';
if (function_exists("pll_the_languages")){
$arr = pll_the_languages(array("show_flags" => 1, "echo" => 0,"show_names" => 0, "raw" => 1)) ;
foreach($arr as $menu){
$wrap .= "<li class='polylang'><a href='".$menu['url']."'>".$menu['flag']."</a></li>";
}
}
// close the <ul>
$wrap .= '</ul>';
// return the result
return $wrap;
}
Et voici le résultat final obtenu :
Pour un usage autre que Polylang, la base est la même mais sans la fonction if (function_exists("pll_the_languages"))
Cela vous permet de créer autant de <li> que désiré tout en leur donnant des class ou ID selon vos besoins :
<?php
function my_nav_wrap() {
// default value of 'items_wrap' is <ul id="%1$s" class="%2$s">%3$s</ul>'
// open the <ul>, set 'menu_class' and 'menu_id' values
$wrap = '<ul id="%1$s" class="%2$s">';
// get nav items as configured in /wp-admin/
$wrap .= '%3$s';
// the static link
$wrap .= '<li class="my-static-link"><a href="#">My Static Link</a></li>';
// close the <ul>
$wrap .= '</ul>';
// return the result
return $wrap;
}
Plus de détails sur la configuration de Polylang
En suivant la doc technique de Polylang vous pouvez choisir d'afficher les langues sous forme de drapeaux, de liste déroulante ou simplement de texte par exemple. N'hésitez pas à y jeter un oeil si vous consultez cet article justement pour l'appliquer à Polylang 😉🌎
Laisser un commentaire