WordPress: Modifier un menu dynamiquement
Dans cet article nous allons voir comment modifier un menu dynamiquement dans WordPress.
Dans cet exemple, nous allons remplacer une partie du menu en nous servant du ‘filtre’ WordPress suivant: ‘wp_nav_menu_items’.
Il nous permettra d’injecter notre élément à la suite des autres éléments déjà configurés dans l’admin de WordPress.
Dans notre menu de navigation, nous allons afficher certains éléments suivant si l’utilisateur est connecté, ou pas.
Si l’utilisateur est connecté:
Il y aura son nom, un lien pour se déconnecter et un lien pour voir les détails de son compte.
Si l’utilisateur est déconnecté:
Il y aura un lien pour se connecté.
'wp_nav_menu_items' , Comment ça marche ?
Le Filtre ‘wp_nav_menu_items‘, prend deux arguments, $items et $args.
$items contient le menu chargé par WordPress ( Donc il pourrait contenir le menu du Footer, la barre de navigation etc… ).
$args contient tout les paramètres du menu. Voici la liste de toutes les infos que vous pourriez en retirer.
add_filter( 'wp_nav_menu_items', 'ajouter_au_menu_nav_eloou', 10, 2 );
function ajouter_au_menu_nav_eloou( $items, $args ) {
return $items;
}Les conditions, pourquoi et comment ?
Comme vu précédemment, nous avons besoin de différentes conditions pour être sûr qu’on modifie le bon menu, au bon moment.
Nous allons nous servir de cette fonction WordPress, ‘ is_user_logged_in() ‘ , afin de regarder si l’utilisateur est connecté sur son compte en nous retournant un ‘ true ‘ ou ‘ false ‘.
Nous allons aussi nous servir de la variable ‘ $args ‘, dans la section précédente. Elle nous permet de vérifié que c’est le bon menu en regardant le ‘ theme_location ‘.
Le ‘theme_location’ sera le nom que vous avez déclaré lorsque vous avez initialisé le menu dans le fichier functions.php
Exemple:
register_nav_menu(‘ main-navigation ‘,__( ‘ Menu principal ‘ ));
Ci-dessous ma condition:
Ligne 1
Si l’utilisateur est connecté ET le menu qui est chargé par WordPress s’appel ‘ main-navigation ‘.
Ligne 4
Si l’utilisateur n’est pas connecté ET le menu qui est chargé par WordPress s’appel ‘ main-navigation ‘.
if (is_user_logged_in() && $args->theme_location == 'main-navigation') {
}
elseif (!is_user_logged_in() && $args->theme_location == 'main-navigation') {
}Changer le menu si l'utilisateur est connecté
Pour faire cela, nous allons prendre la variable qui tiens le contenu du menu et ajouter nos éléments.
Ligne 3 et 4
Nous sommes dans la condition “Si l’utilisateur est connecté”, donc nous pouvons prendre quelques informations sur cette personne en utilisant la fonction WordPress: wp_get_current_user();
Ensuite nous allons chercher le nom de cette personne en fouillant la variable $user.
Ligne 6
Maintenant à nous d’ajouter le nouveau contenu au menu existant.
J’ai rajouté:
- Un ‘ dropdown ‘ avec le nom de l’utilisateur et une icône : ligne 8,9,10.
- Un élément avec une url vers les détails de son compte : ligne 14.
- Un élément avec une possibilité de se déconnecter : ligne 19.
if (is_user_logged_in() && $args->theme_location == 'main-navigation') {
$user = wp_get_current_user();
$word = $user->data->display_name;
$items .= '
<li>
<a href="">'.'
<i class="fas fa-user"></i>'
. $word .'
</a>
<ul>
<li>
<a href="https://www.neuro-ophtalmologie-club.org/mon-compte/" >
Mon compte
</a>
</li>
<li>
<a href="'. wp_logout_url('/Votre-redirection-d-url'). '" >
Déconnexion
</a>
</li>
</ul>
</li>
';
}Changer le menu si l'utilisateur est déconnecté
Pour faire cela, nous allons prendre la variable qui tiens le contenu du menu et ajouter nos éléments. dans la condition si l’utilisateur n’est pas connecté.
Ligne 3
Ajoutons le nouveau contenu au menu existant.
J’ai rajouté:
Un ‘ dropdown’ ‘ Se connecter ‘ : ligne 5.
Un élément avec une url vers une formulaire de connexion : ligne 8.
elseif (!is_user_logged_in() && $args->theme_location == 'main-navigation') {
$items .= '
<li>
<a href="">Se connecter</a>
<ul>
<li>
<a href="https://www.neuro-ophtalmologie-club.org/connexion/">
Connexion
</a>
</li>
</ul>
</li>
';
}Et maintenant on assemble tout
add_filter( 'wp_nav_menu_items', 'ajouter_au_menu_nav_eloou', 10, 2 );
function ajouter_au_menu_nav_eloou( $items, $args ) {
$user = wp_get_current_user();
$word = $user->data->display_name;
if (is_user_logged_in() && $args->theme_location == 'main-navigation') {
$items .= '
<li>
<a href="/Url-de-votre-page-details-de-compte">'.'
<i class="fas fa-user"></i>'
. $word .'
</a>
<ul>
<li><a href="'. wp_logout_url('/Votre-redirection-d-url'). '" >Déconnexion</a></li>
<li><a href="https://www.neuro-ophtalmologie-club.org/mon-compte/" >Mon compte</a></li>
</ul>
</li>
';
}
elseif (!is_user_logged_in() && $args->theme_location == 'main-navigation') {
$items .= '
<li>
<a href="">Se connecter</a>
<ul>
<li><a href="https://www.neuro-ophtalmologie-club.org/connexion/">Connexion</a></li>
</ul>
</li>
';
}
return $items;
}