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.

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

• https://example.com/wp-admin/
• https://example.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://example.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://example.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://example.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.