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 d’insérer un formulaire de connexion dans une page dédiée, par exemple « Connexion » ou « Espace membre ». Trois méthodes s’offrent à vous :

1. le bloc Connexion / déconnexion, sans code, avec n’importe quel thème ;
2. un modèle de page avec la fonction wp_login_form(), pour un contrôle total avec un thème classique ;
3. un formulaire HTML, à personnaliser librement.

Méthode n°1 : le bloc Connexion / déconnexion

1. Créez une page (Pages > Ajouter une page), par exemple « Connexion ».
2. Insérez le bloc Connexion / déconnexion.
3. Dans les réglages du bloc, activez Afficher la connexion sous forme d’un formulaire.
4. Laissez Rediriger vers l’URL actuelle activé pour que le lien de déconnexion ramène sur cette page, ou désactivez-le. Le formulaire, lui, renvoie toujours le visiteur sur la page une fois connecté.
5. Publiez la page.

Le formulaire utilise la fonction native de WordPress : il gère l’identifiant ou l’adresse e-mail, le mot de passe et la case « Se souvenir de moi ». Une fois le visiteur connecté, le bloc affiche un lien Déconnexion. Avec un thème basé sur les blocs, le bouton reprend automatiquement le style des boutons de votre thème.

Méthode n°2 : un modèle de page avec wp_login_form()

Cette méthode concerne les thèmes classiques, qui contiennent un fichier page.php. Travaillez de préférence dans un thème enfant.

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 affiche le contenu saisi dans l’éditeur de la page.

Cas n°1 – Utilisation d’une commande PHP

Juste au-dessus ou en dessous, à votre convenance, placez le code suivant. Il affiche le formulaire aux visiteurs, un lien de déconnexion aux utilisateurs déjà connectés, ainsi qu’un lien vers la récupération du mot de passe et, si les inscriptions sont ouvertes, un lien de création de compte :

<?php
if ( is_user_logged_in() ) {
	printf(
		'<p>%1$s <a href="%2$s">%3$s</a></p>',
		esc_html__( 'You are logged in.', 'wpchannel' ),
		esc_url( wp_logout_url( home_url( '/' ) ) ),
		esc_html__( 'Log out', 'wpchannel' )
	);
} else {
	wp_login_form(
		array(
			'redirect'          => home_url( '/' ), // Page displayed after logging in.
			'required_username' => true,             // WordPress 6.6 or later.
			'required_password' => true,
		)
	);

	printf(
		'<p><a href="%1$s">%2$s</a></p>',
		esc_url( wp_lostpassword_url() ),
		esc_html__( 'Lost your password?', 'wpchannel' )
	);

	if ( get_option( 'users_can_register' ) ) {
		printf(
			'<p><a href="%1$s">%2$s</a></p>',
			esc_url( wp_registration_url() ),
			esc_html__( 'Create an account', 'wpchannel' )
		);
	}
}
?>

Les textes affichés passent par les fonctions de traduction de WordPress : remplacez le domaine wpchannel par celui de votre thème, ou traduisez directement les chaînes.

Enregistrez le fichier sur votre serveur, puis connectez-vous à l’administration de WordPress. Dans Pages > Ajouter une page, créez votre page. Dans le panneau Page, cliquez sur la ligne Modèle et choisissez Zone de connexion.

N’oubliez pas de cliquer sur Publier, puis visualisez le résultat.

La fonction wp_login_form() accepte de nombreux paramètres (libellés, identifiants des champs, case « Se souvenir de moi », redirection…), détaillés dans la documentation officielle de wp_login_form().

Cas n°2 – Utilisation d’un formulaire HTML

Cette méthode a le gros avantage de ne contenir aucune ligne de PHP. Vous pouvez donc l’insérer directement dans une page ou un article, avec le bloc HTML personnalisé. Seuls les comptes autorisés à publier du HTML non filtré (administrateurs et éditeurs d’un site simple) peuvent l’enregistrer : pour les autres rôles, WordPress retire les balises <form> et <input>.

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="https://example.com/wp-login.php" id="loginform" name="loginform">
	<p>
		<label for="user_login">Identifiant ou adresse e-mail</label>
		<input type="text" name="log" id="user_login" autocomplete="username" required>
	</p>
	<p>
		<label for="user_pass">Mot de passe</label>
		<input type="password" name="pwd" id="user_pass" autocomplete="current-password" required>
	</p>
	<p>
		<label>
			<input type="checkbox" name="rememberme" id="rememberme" value="forever">
			Se souvenir de moi
		</label>
	</p>
	<p>
		<input type="submit" name="wp-submit" id="wp-submit" value="Se connecter">
		<input type="hidden" name="redirect_to" value="https://example.com/">
	</p>
	<p><a href="https://example.com/wp-login.php?action=lostpassword">Mot de passe oublié ?</a></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.

Si vous avez modifié l’adresse de wp-login.php (avec une extension comme WPS Hide Login), remplacez-la aussi dans l’attribut action et dans le lien « Mot de passe oublié ? ». Les méthodes n°1 et n°2 s’adaptent automatiquement.

Bravo ! Vous disposez à présent d’une zone de connexion personnalisée, facile à repositionner sur votre site. Les plus aventureux l’afficheront dans une fenêtre en surimpression ; les autres pourront passer par une extension dédiée comme Login With Ajax.

Questions fréquentes

Comment rediriger l’utilisateur vers une page précise après la connexion ?

Avec wp_login_form(), renseignez le paramètre redirect (voir le code ci-dessus). Le bloc Connexion / déconnexion, lui, ramène toujours le visiteur sur la page du formulaire.

Comment permettre aux visiteurs de créer un compte ?

Cochez Tout le monde peut s’inscrire dans Réglages > Général, à la ligne Inscription, et choisissez le rôle attribué par défaut. Le lien d’inscription s’obtient ensuite avec wp_registration_url().

Mon formulaire ne fonctionne plus après avoir changé l’URL de connexion : pourquoi ?

Un formulaire HTML envoie les données vers wp-login.php, que certaines extensions de sécurité bloquent (voir comment modifier l’URL de connexion à l’administration WordPress). Utilisez le bloc ou wp_login_form(), qui reprennent automatiquement la nouvelle adresse, ou modifiez l’attribut action de votre formulaire.

Ce formulaire est la première brique pour créer un espace réservé aux membres.