Tout savoir sur WordPress
Tutoriel WordPress

Ajouter un lien de connexion au menu personnalisé

Cette astuce permet d’ajouter un lien de connexion au menu de navigation personnalisé de votre site WordPress.

Depuis la version 3.0, WordPress a considérablement simplifié l’ajout d’un menu grâce à une interface d’administration intuitive. On peut ajouter des pages, des catégories et des liens personnalisés.

Cependant, comment doit-on faire pour insérer un lien permettant de se connecter ou se déconnecter ?

Souvenez-vous de la fonction wp_logout() : elle permet d’afficher un lien de connexion ou de déconnexion lorsque l’utilisateur est connecté. C’est grâce à cette fonction et au filtre wp_nav_menu_items que nous allons pouvoir greffer notre lien de connexion ou de déconnexion.

Copiez le code ci-dessous dans le fichier functions.php présent à la racine de votre thème :

add_filter('wp_nav_menu_items', 'gkp_add_login_logout_link', 10, 2);
function gkp_add_login_logout_link($items, $args) {

    ob_start();
    wp_loginout('index.php');
    $loginout = ob_get_contents();
    ob_end_clean();
    $items .= '<li>'. $loginout .'</li>';
    return $items;
}

Cet article a été mis à jour il y a 2298 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

19 Commentaires

  1. Il y a une erreur dans le formatage de cet article qui divise le code en 2 parties : à réparer :smile:

    À part ça, merci pour le tuyau, c’est très intéressant.
    Je cherche pour ma part à permettre à mes utilisateurs de se connecter avec leur mail plutôt qu’avec leur identifiant.
    Toute suggestion est bienvenue.
    Bonne journée !

  2. Bonjour, je voudrais savoir comment mettre la barre de recherche avec écrit se connecter, inscription, que vous avez sur votre site.
    Merci

  3. Bonjour,
    J’aurais voulu savoir si il était possible de modifier le texte du lien de connexion.
    En gros, je voudrais que à la place de « Connexion » il soit écrit « Espace membre » et une fois connecter laisser le texte « Déconnexion ».
    Merci

  4. Re-bonjour,
    Excusez moi du double poste.
    Mais j’aurais aimer savoir si il était possible de rajouter ce lien de connexion/déconnexion dans l’administration des menus personnalisés.
    Ainsi, on pourrait mettre ce lien seulement dans les menus personnalisés que l’on souhaite.
    Car ici en suivant votre tutoriel, il se rajoute à la fin de tous les menus personnalisés.
    Merci :)

  5. @Loic : Désolé pour le temps de réponse, mais j’étais entrain de programmer notre nouveau module: Questions/Réponses.

    Je vous laisse poser vos questions à cette endroit afin que cela puisse aider les autres visiteurs :)

  6. Héhé pas de souci, je ne suis pas pressé ;-)
    Je vais donc me rediriger sur votre nouveau module et bravo pour la qualité de vos services :)

  7. Je vous donne ce plugin qui permet d’ajouter des liens « Log in » « Logout » dans vos menus, où bon vous semble, avec même une page de redirection possible.
    http://baw.li/llm

  8. Bonjour,
    Merci pour ce tuto,
    Est il possible de le modifier, lorsqu’on click sur déconnection, ce n’est pas connection qui s’affiche, mais bien une autre page d’authentification qu’on a créé
    Merci par avance

  9. Bonjour,

    je souhaiterais faire cette manip mais pour ajouter des icônes avec liens vers réseaux sociaux dans la barre top menu.Est-ce possible?si oui quel bout de code dois-je ajouter et dans quel fichier ?
    Pourriez-vous m’aider ? merci par avance.

    cordialement
    Sandrine

  10. @Sandrine : On peut ajouter ce que l’on veut. Par contre, je ne peux pas vous aider comme cela car c’est un développement spécifique dont vous êtes la seule personne à connaître les contraintes (placement des éléments, etc…).

  11. Merci ça marche parfaitement mais malheureusement le bouton connexion/deconnexion s’intègre sur mes deux menus (menu du haut et menu primaire) comment puis je faire pour le faire apparaitre que sur le menu du haut?

    merci

  12. @Sylvie : Il faut modifier le hook wp_nav_menu_items par wp_nav_menu_{$menu->slug}_items{$menu->slug} est égal au slug de votre menu.

  13. j’ai un grave problème j’ai mit se script sur mon site et je ne peut plus y accéder j’ai un écran blanc même si je fais lacuisinedeval.fr/wp-login.php plus rien écran blanc je suis perdu aider moi svp

  14. Bonjour, j’ai inséré ce code et depuis mon site ne marche plus du tout, je n’ai meme plus accés a l’interface wordpress
    Ce message horrible s’affiche:

    « La page du site .. ne fonctionne pas »
    impossible de traiter votre demande à l’heure actuelle
    ERROR 500

    Je suis dégouté que dois je faire?? Je suis hébergé chez OVH (si ça peut servir)

    • Retire le PHP que tu as ajouté. Il doit y avoir une erreur. Comme tu es en ligne, les erreurs PHP ne s’affichent pas et envoient une erreur 500 à la place. En restaurant ton code à la version précédente ça remarchera.

      Essaye d’abord en local, afin de voir l’erreur et la corriger

    • aaaaaaah ça y est j’ai résolu le problème ouf!
      J’etais venu pour répondre à « olive » puis je vois que vous m’avez répondu merci de la rapidité! ))

      En fait j’ai été dans le ftp fillezilla puis j’ai supprimer le code tout simplement ouf ça soulage!!
      quelle angoisse de ne plus avoir accès à son tableau de bord surtout que je n’y connais absolument rien!
      Sinon le site est top, juste un petit problème avec ce code, ça arrive!
      Bonne continuation!

f4de9a3ee2114cfac11c36ded1e849dfhhhhhhhh