La page de connexion WordPress est une page par laquelle il vous est possible de vous connecter au back-office de votre site web, c’est à dire à la partie administration

Je vais aborder les deux petites possibilités rapides  pour changer l’apparence de la page de connexion :

 

 

• La customisation via l’ajout de petits bouts codes au fichier functions.php.

• La personnalisation de l’interface de connexion par l’ajout d’extentions.

Par défaut, la page pour s’identifier est assez minimaliste : un simple logo WordPress, un fond gris, un formulaire d’identification.

Personnaliser votre page d’identification en utilisant des snippets WordPress.

Les codes sont à copier/coller dans le fichier functions.php de votre thème WordPress.

Pour rappel, le fichier functions.php permet de redéfinir les fonctions de base de WordPress, de votre thème ou de vos plugins et ainsi obtenir précisément ce que vous souhaitez.

Utiliser une feuille de style CSS personnalisée pour l’administration

Mettre en place une nouvelle feuille de style pour la page de connexion qui permettra de changer l’apparence de cette page.

Instruction : créer une feuille de style CSS nommée login.css et la transférerer à la racine du dossier de votre thème puis copier/coller le code ci-dessous dans votre fichier functions.php.

/feuille de style personnalisée pour la page login WordPress
function login_stylesheet() {
	wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login.css' );
}
add_action( 'login_enqueue_scripts', 'login_stylesheet' );

Ce snippet indique à WordPress qu’il doit charger une feuille de style nommée login.css qui surchargera la feuille de style CSS de base et modifiera donc l’apparence basique de votre page de connexion.

Ajouter une image de fond personnalisée pour la page de connexion

Copier/Coller ce code dans votre feuille de style CSS login.css précédemment créée et copier votre image (ici fond.jpg)  à la racine de votre thème.

/* image de fond de la page login WordPress */
body.login { 
	background: url('fond.jpg')  no-repeat fixed center ; 
}

Vous n’êtes pas obligé d’appeler votre image fond.jpg . Il suffit de modifier le snippet ci-dessus par le nom de votre image (copiée à la racine de votre thème ou à un autre emplacement qu’il faudra spécifier dans le snippet).

Remplacer le logo WordPress

Copier/Coller ce code dans votre fichier login.css de votre thème :

/* logo personnalisé de la page login WordPress */
.login h1 a { 
	background-image: url('mon-logo.png'); 
}

Il vous faudra copier votre image (ici appelée mon-logo.png) pour changer le logo de la page d’identification.

Modifier l’URL du logo

Par défaut, le lien sur le logo WordPress mène au site de la communauté francophone responsable de la traduction de WordPress : https://wpfr.net/. Pour renvoyer vers la page d’accueil de votre site WordPress, voici le snippet à copier dans le fichier functions.php de votre thème :

/* URL du logo de la page login WordPress */
function logoLogin_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'logoLogin_url' );

Modifier  l’attribut title du logo

L’attribut title d’une image permet d’afficher une infobulle au survol de l’image. Celui par défaut sur le logo WordPress indique « Propulsé par WordPress« . Pour modifier le texte affiché, voici le snippet à copier/coller dans le fichier functions.php de votre thème :

/* attribut title du logo de la page login WordPress */
function logoTitle_url() {
	return 'Mon site';
}
add_filter( 'login_headertitle', 'logoTitle_url' );

Remplacer « Mon site » par ce que vous voulez afficher !

Précocher « Se souvenir de moi »

Pour cocher par défaut la case Se souvenir de moi du formulaire de connexion et pour rester connecté sans avoir à s’identifier à chaque fois, voici le code à copier/coller dans votre fichier functions.php.

/* Précocher la case Se souvenir de moi de la page login WordPress */
function seSouvenirDeMoi_coche() {
	echo "";
}
function seSouvenirDeMoi() {
	add_filter( 'login_footer', 'seSouvenirDeMoi_coche' );
}
add_action( 'init', 'seSouvenirDeMoi' );

Cacher les messages d’erreur en cas de mauvaise indentification

Si vous n’avez pas installé une extension de sécurité masquant les erreurs d’identification, il est possible de remplacer les différents messages d’erreur par un message indiquant une erreur, sans préciser l’origine de l’erreur (exemple: Vous n’ête pas autorisé à…). Cela compliquera la tâche des pirates.

Une fois de plus, ce snippet est à copier/coller dans votre fichier functions.php . Le message d’erreur est personnalisable !

/* Affichage d'un message d'erreur générique pour les erreurs d'identification de la page login WordPress */
function cacheErreurs_login()
{
return 'Informations de connexion incorrectes.';
}
add_filter('login_errors', 'cacheErreurs_login');

Plugins pour modifier la page de connexion de WordPress

Si vous n’avez pas envie de faire ces modifications et que vous souhaitez personnaliser votre page de connexion WordPress, il existe de nombreux plugins qui vous simplifieront le travail (soyez conscient que chaque plugin alourdit votre dossier):

• My Thème Login
• Custom Login Page Customizer
• Customize WordPress Login Page
• WP Custom Admin Login Page Logo

Ces plugins permettent de modifier l’apparence et le comportement de la page d’identification de WordPress sans avoir à modifier le code. Il suffit juste d’installer le plugin et de le paramétrer !