Créer une zone de connexion (login) dans WordPress

Ce tutoriel vous apprendra comment mettre en place une zone de connexion dans une page WordPress vous permettant d’inciter vos visiteurs à s’inscrire sur votre site / blog. Aucune connaissance particulière requise.

Pour vous connecter à l’administration WordPress, il est commode de passer par l’une des 2 URLs suivantes :

  • https://wpchannel.com/wp-admin/
  • https://wpchannel.com/wp-login.php

Cette méthode de connexion n’est pourtant guère très pratique si vous autorisez l’enregistrement de nouveaux utilisateurs. En effet, à moins de connaître WordPress, il vous faudra indiquer l’URL correspondante à chacun des nouveaux inscrits.

Le plus simple reste donc de créer un formulaire de connexion puis de l’insérez dans un nouvelle page par exemple. Nous aurons donc une nouvelle fois recours aux modèles de pages de WordPress.

Création du modèle de page

A l’aide d’un client FTP, rendez-vous dans /wp-content/themes/NOM_DU_THEME/ puis dupliquez le fichier page.php.

Renommez la copie par un titre évocateur tel que template-login.php.

Ouvrez ce dernier puis référencez-le en tant que modèle de page en ajoutant les lignes de code suivante en début de fichier :

<?php
/*
Template Name: Zone de connexion
*/
?>

Insertion du formulaire de connexion

Localisez ensuite la ligne contenant :

<?php the_content(); ?>

Cette ligne affichera le contenu saisi dans l’éditeur TinyMCE depuis votre administration WordPress.

Cas n°1 – Utilisation d’une commande PHP

Juste au-dessus ou en-dessous – c’est à votre convenance, placez la commande PHP suivante :

<?php wp_login_form(); ?>

Sauvegardez le fichier sur votre serveur FTP puis connectez-vous sur votre administration WordPress. Dans le module Pages, cliquez sur l’item Ajouter.

Dans la boîte Attributs de la page, indiquez le modèle Zone de connexion.

N’oubliez pas de cliquer sur le bouton Publier puis de visualiser le résultat.

Cette commande dispose de nombreux paramètres que vous pouvez ajouter entre les parenthèses comme indiqué sur le code à la page Function Reference / wp_login_form.

Cas n°2 – Utilisation d’un formulaire HTML

Cette seconde méthode présente le gros avantage de ne pas contenir une seule ligne de code PHP. Vous pouvez donc l’insérez directement dans une page, un article ou même un widget de WordPress.

Le second avantage de coder en dur – au lieu de passer par des arguments à insérer dans la commande PHP (ce qui n’est pas évident quand on débute), celle-ci est nettement plus facile à personnaliser. Il s’agit ni plus ni moins que d’un formulaire on ne peut plus standard en HTML.

<form method="post" action="http://www.NOM_DU_SITE.com/wp-login.php" id="loginform" name="loginform">

 <p>

  <label for="user_login">Identifiant</label>

  <input type="text" tabindex="10" size="20" value="" id="user_login" name="log">

  </p>

  <p>

  <label for="user_pass">Mot de passe</label>

  <input type="password" tabindex="20" size="20" value="" id="user_pass" name="pwd">

  </p>

 <p><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme">

  Rester connecter</label>

  | <a href="http://www.NOM_DU_SITE.com/wp-login.php?action=lostpassword">Mot de passe oublié</a></p>

  <p>

  <input type="submit" tabindex="100" value="Se connecter" id="wp-submit" name="wp-submit">

  <input type="hidden" value="http://www.NOM_DU_SITE.com/" name="redirect_to">

  </p>

 </form>

Englober le tout d’une balise <div>, saupoudrez le tout de CSS et vous obtiendrez un résultat selon vos besoins. N’oubliez pas non plus de remplacer les URLs par le domaine de votre site.

Bravo ! Vous disposez à présent d’une zone de connexion (login) personnalisée et facilement repositionnable sur votre site. Les utilisateurs les plus aventureux l’afficheront en sur-impression sur la page, les autres pourront se contenter de passer par le plugin Ajax Login.

Crédits photo : _af_

72 commentaires

  1. Gaby

    Bonjour à vous !!!

    Merci pour ce tuto très intéressant !!

    j’ai juste une question. il est possible d’avoir un bouton « Register » pour donner la possibilité au utilisateur de se créer un compte ?

    comme le fait Ajax-login !

    Merci

  2. Juliendaffy01

    Bonjour,
    la question a déjà été posté plus haut mais, étant très novice en internet, je n’y suis pas arrivé. Je chercher à faire un redirection après Logout de mon site. La redirection en Login fonctionne très bien avec Ajax Login. Apparemment il faut insérer une ligne de code, mais ou la mettre? Quelles sont les manipulations?
    Je vous remercie d’avance.

    1. Aurélien Denis auteur de l’article

      Cette ligne de code doit être insérée là où le lien de redirection doit être affiché sur le site : header.php dans l’en-tête, footer.php dans le pied de page, etc. Effectivement, cette opération nécessite des connaissances de bases en HTML notamment.

  3. Lucien Dubois

    Bonjour,
    Je vais utiliser le plugin Members Only. J’aimerais donc personnaliser ma page de connexion. J’ai obtenu un résultat intéressant mais je ne sais pas comment remplacer le lien textuel « Inscription » par une image.
    Comment puis-je faire?

  4. Ozne

    Bonjour,

    Merci pour ce tuto, avez vous le code équivalent pour integrer le formulaire d’inscription directement dans la page?

    Je supose qu’il suffit de suivre le tuto mais de remplacer par le code correspondant?

    Merci

  5. JCK

    Bonjour et merci beaucoup pour ce tuto.
    J’ai créé mon formulaire avec la commande PHP (cas n°1).
    En cas de saisie erronée, l’utilisateur est redirigé sur la page de connexion standard WordPress.
    Comment rester sur mon formulaire.

  6. APFDR

    Bonjour et encore merci pour tout les tutorial Cependant j’ai un petit problème quand on n’est pas connecter ont tombe sur l’erreur 404 et c’est assez gênant, je voudrait savoir si je pouvait pas rediriger les non membre vers une page d’inscription ou pouvoir marquer un petit texte comme quoi il faut être enregistrer pour accéder à la page ?

    Merci d’avance !

    1. APFDR

      Même si moi et la logique sa fais 2 j’ai trouvé la solution il suffit de cocher la case « Effectuer une redirection pour les non-membres. » dans member access

  7. Shiraz

    Bonjour, tout d’abord merci et bravo sur ce site il m’est d’un très grand secours !
    j’ai installé member access et login with ajax, tout fonctionne super bien, mais j’essaye d’ajouter 2 champs (nom et tél) dans login with ajax pour les inscriptions, ils apparaissent dans le formulaire d’inscription mais pas quand je reçois le mail d’indication d’un nouvel abonné, je me doute que c du php, ce serait top si vous pouviez m’aider ! merci beaucoup et à bientôt.Shiraz

  8. Pierre

    Bonjour, je souhaite savoir si on peut accéder à un LDAP par le biai de cette zone de connexion?
    ps : le formulaire serait uniquement pour s’identifier et non pour s’enregistrer.

    Help me please.
    Merci d’avance

  9. Pierre

    merci bien pour ta réponse plus que rapide. Autre question, le site que je dois faire est réserve à certaines personne, il faudrait que je créé une page spécial login (ou il n’y a strictement rien d’autre sur la page que le log), comment puis-je faire?

  10. Aralar

    Magnifique suggestion. Très utile. Une question seulement. J’utilise la version « formulaire HTML » dans un widget (comme le dire en français ?) que l’affiche partout aux usagers non identifiés. Mais elle renvoie toujours l’usager que vient de s’identifier vers la page d’accueil. Est ce qu’il serait possible qu’après identification le visiteur reste dans la page de départ ?

    D’avance, merci beaucoup.

    1. Aralar

      Bonjour

      Rien ? Personne pour me faire une suggestion ?

      Pourtant, je crois que la question peut intéresser à pas mal d’utilisateurs de WordPress. Qu’est ce qu’il faut faire dans le formulaire HTML pour que le visiteur qui vient de se connecter reste sur la page ?

      Merci d’avance et longue vie à ce site magnifique où l’on peut toujours apprendre beaucoup de choses.

        1. Aralar

          Excellente sugestion. Je n’en connaissais pas cette extension, je vais la mettre à preuve. Merci de votre réponse.
          Je constate, une fois de plus, le sens de l’entraide des lecteurs-contributeurs de WordPress channel. C’est le site où il faut absolument être !!!

      1. Mikel Aralar

        La solution finalement est très simple, grâce à l’extension Sky Login Redirect, oeuvre d’un Français, il me semble. C’est simple. Les abonnés d’un site peuvent visiter une page, laquelle demande de se connecter au site. Après identification, ils ne sont pas redirigés vers la page d’accueil. Ils restent sur la page qui les intéressait, qui est déjà accessible.

        J’utilise la deuxième solution proposée par Aurélien, le formulaire, dans un widget. Pour que l’extension Sky Login Redirect fonctionne, il suffit de supprimer l’avant-dernière ligne du formulaire ( ).

        Et ça marche

  11. pacaussi

    Dans la version actuelle de Twenty_Ten, page.php utilise la fonction get_template_part qui appelle loop-page.php. En conséquence je pense que loop-page doit également être dupliqué pour y intégrer les modifications préconisées par ce tuto.
    Si c’est le cas, est-il possible de faire évoluer votre tutoriel qui est excellent.
    Merci

  12. lorembolo

    Merci pour cette super astuce !

    Question : avec cette technique, si on saisit mal son formulaire, ou s’il comporte une erreur, on est redirigé sur la page classique de login, comment faire pour rester toujours sur la page de départ .

    Même question pour l’enregistrement.

    Merci et bravo !

    1. Aurélien Denis auteur de l’article

      Il faudrait mettre en place des redirections ou essayer d’indiquer l’URL de la page abritant le formulaire de connexion dans le code du formulaire dans le action. Sinon, passez par un plugin comme Ajax Login.

  13. lisbeth442014

    Merci beaucoup pour ces explications qui m’ont permis de créer une page de connexion en toute simplicité (j’ai choisi l’option 2 en y ajoutant un code register). Votre site est vraiment une mine d’information ! Bravo.

  14. khaledtotti

    bonjour le code php de mon fichier page.php de ce théme n’est pas le meme il est beaucoup plus court
    et je ne trouve pas la commande
    donc si vous pouvez me donnez le code en entier et merci

  15. Khaled Ben Gharbia

    Bonjour j’ai essayé la premiere methode mais je trouve pas le code php comme dans le tuto il est plus court et je trouve pas la commande
    donc si vous pouvez me donnez tous le code et merci

  16. Khaled Ben Gharbia

    bonjour j’ai utilisé la 1 er methode avec code php et ca marche mais j’ai pas su comment ajouter un boutton d’inscription

  17. TheTheomi13

    Dans WordPress 3.9, Quand l’on rentre des informations correctes et que l’on clique sur « Se connecter », on est redirigé vers la page de connexion de WordPress…

    1. Aurélien Denis auteur de l’article

      Vous devez autoriser les inscriptions dans les réglages généraux de WordPress pour ouvrir les inscriptions. Ce tutoriel ne traite pas de la création d’un formulaire d’inscription sur mesure par contre.

  18. Xavière

    Bonjour,
    Peut-on avoir plusieurs login et mot de passe valides ?
    Comment règle -t’on les login et mot de passe autorisés à se connecter ?
    Merci

  19. Parisa

    Bonjour,
    ça marche très bien, par contre je galère un peu pour faire une page de connexion à un webservice dans lequel les memebres qui vont s’indentifier sur mon site sont stocké ! !
    Est-que vous avez une solution à mon problème?
    Merci d’avance,

  20. Malo Rembaud

    Bonjour,
    ce tutoriel est super mais il y a un petit problème…
    Si on saisit un mauvais identifiant ou mot de passe, on est redirigé vers la page de connexion wp-login et ça, c’est pas cool…
    Y a-t-il un moyen de changer la page de redirection en cas de mauvais login/mdp ?
    merci d’avance

  21. Stella

    Salut, voici mon fichier template-login.php, et je ne sais pas où mettre le

    <?php

    if (have_posts()) {
    /* Start the Loop */
    while (have_posts()) {
    the_post();
    get_template_part('content', 'page');
    /**/
    }
    } else {
    theme_404_content();
    }
    ?>

    Merciii

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX