On ne va pas se mentir, malgré tous les efforts que fait WordPress sur ses mises à jour, le formulaire de connexion n’est pas franchement sexy. Le voici ci-dessous :
Nous allons donc voir comment personnaliser la page de connexion WordPress.
Pourquoi personnaliser la page de connexion WordPress
Personnaliser votre formulaire de connexion va améliorer votre image de marque. Vous pouvez vouloir, par exemple
- Changer le logo de WordPress et le remplacer par le vôtre
- Ajouter un fond d’écran
- Mettre à jour le lien du logo qui redirige actuellement vers le site officiel de WordPress
- Changer la couleur du bouton « Se connecter »
Certes, ce formulaire n’est normalement pas accessible à n’importe qui. Pour y accéder, vous devez aller sur monsite.fr/wp-admin, néanmoins, nous vous conseillons de changer cette adresse grâce à l’extension « WPS Hide Login ». On n’en parle dans notre article « Comment sécuriser sont site WordPress ».
Comment personnaliser mon formulaire de connexion WordPress
Tout d’abord, sachez que vous allez voir besoin d’un thème enfant. En effet, un thème enfant va vous permettre de créer de nombreuses fonctionnalités tout en continuant à bénéficier des mises à jour de votre thème principal. Si vous ne savez pas comment faire, veuillez lire notre article « Comment créer un thème enfant sur WordPress ? ».
À ce stade, vous devriez avoir 3 fichiers :
- functions.php
- style.css
- screenshot.png (l’image de couverture de votre thème enfant)
Nous vous invitons, dès maintenant, à ajouter votre logo dans le dossier de votre thème enfant (dans un format carré), de créer un dossier nommé « login » et d’y ajouter une feuille de style que l’on pourrait nommer « custom-login.css ».
Configurer le fichier functions.php pour prendre en compte la nouvelle feuille de style
Nous allons donc demander à notre fichier functions.php de prendre en compte les règles CSS que nous allons ajouter à notre nouvelle feuille de style. Pour cela, il faut lui rajouter les quelques lignes de code suivantes :
// Ajout de ma nouvelle feuille de style
function my_new_login_stylesheet() {
wp_enqueue_style(‘custom-login’, get_stylesheet_directory_uri() . ‘/login/custom-login.css’);
}
add_action(‘login_enqueue_scripts’, ‘my_new_login_stylesheet’);
Changer le logo par défaut pour mettre le logo de votre société
Première étape pour personnaliser la page de connexion WordPress, nous allons changer le logo que vous avez fraîchement mis dans le dossier de votre thème enfant. Pour ce faire, rendez-vous dans un premier temps dans votre fichier functions.php et ajoutez-y le code suivant :
// Mise à jour du logo sur la page de connexion
function my_login_logo() { ?>
<style type=‘text/css’>
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/logo.png);
height: 65px;
width: 320px;
background-size: 120px 120px;
background-repeat: no-repeat;
padding-bottom: 60px;
}
</style>
<?php
}
add_action(‘login_enqueue_scripts’, ‘my_login_logo’);
Désormais, voilà à quoi ressemble votre page avec votre logo :
Rediriger vers la page d’accueil de votre site au clic du nouveau logo
Prochaine étape pour personnaliser la page de connexion WordPress, changer le lien sur le logo. En effet, par défaut, le logo redirige vers la page https://fr.wordpress.org. Nous allons modifier notre fichier functions.php pour changer ce lien et le rediriger donc vers la page d’accueil de notre site.
// Mise à jour du lien du logo pour rediriger vers sa page d’accueil
function my_login_logo_url() {
return get_bloginfo(‘url’);
}
add_filter(‘login_headerurl’, ‘my_login_logo_url’);
Désormais, grâce à cette nouvelle fonctions, lorsque vous cliquez sur votre logo, vous serez redirigé vers la page d’accueil de votre site internet, et plus sur la page de WordPress.
Mettre à jour le fond d’écran
Si vous le souhaitez, vous pouvez également changer le fond d’écran de la page de connexion. Vous pouvez soi changer la couleur du fond d’écran, soi mettre une image. Dans les 2 cas, vous devrez intervenir cette fois dans notre feuille de style « custom-login.css ».
Pour changer la couleur du fond
Afin de changer la couleur du fond d’écran, renseignez dans votre feuille de style la règle CSS ci-après.
body.login {
background-color: #F2F2F2;
}
Changez le code hexadécimal par la couleur de votre choix. Vous pouvez générer le code via l’outil HTML Colors Codes. Nous vous conseillons néanmoins de choir une couleur clair, afin que le formulaire ressorte correctement et qu’il n’y ait pas un trop gros contraste.
Pour ajouter une image en fond d’écran
Si vous souhaitez aller plus loin pour personnaliser la page de connexion WordPress, changer l’image de fond d’écran est susceptible de vous plaire. Recherchez une image de fond d’écran qui vous plait. Si vous êtes en manque d’inspiration, vous pouvez utiliser des banques d’images comme Pixabay, Pexels ou encore Unsplash. Comme pour le changement de la couleur de fond, il va falloir se retrouver dans notre feuille de style « custom-login.css » et y ajouter les quelques lignes suivantes :
body.login {
background-image: url(#’bg.png’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Voilà à quoi votre formulaire pourrait ressembler :
Changer la couleur du bouton Se connecter
Dernière étape pour personnaliser la page de connexion WordPress : changer la couleur du bouton « Se connecter » afin de respecter votre charte graphique. Tout se passe encore dans votre feuille de style « custom-login.css ».
wp-core-ui .button-primary {
background: #313682;
border-color: #313682;
}
A l’inverse du fond d’écran, nous vous conseillons cette fois de choisir une couleur foncée pour bien faire ressortir votre bouton de connexion.
Utiliser une extension pour personnaliser la page de connexion WordPress
La communauté a crée plusieurs extensions pour vous permettre de personnaliser, un peu plus facilement, votre page formulaire de connexion. En voici une liste non exhaustive :
- Custom Login Page Customizer : Très bien notée sur le répertoire officiel des extensions, vous pourrez réaliser une grosse partie de ce qu’on a vu dans ce tutoriel
- Custom Login : Comme sa sœur juste au-dessus, extension avec une bonne note sur le répertoire, ils ont même un groupe flickr où les utilisateurs postent leur création !
- Admin Custom Login : Noté 4,5/5 sur le répertoire, cette extension fera également votre bonheur.
- Hero Login Styler – WP Login Screen Customizer : Extension présente cette fois sur CodeCanyon (donc payante), vous pourrez également personnaliser la page de connexion WordPress, mais rien de plus que ce que l’on vient de voir, nous ne recommandons donc pas.
Pensez à bien regarder la date de la dernière mise à jour, à l’heure où nous écrivons ces lignes, les mises à jour des extensions présentées datent de moins de 4 mois et fonctionne toutes sur la dernière version de WordPress en date (5.8.1.).
Personnaliser la page de connexion WordPress : Notre conclusion
En guise de conclusion, en mettant un peu la main dans le code, il est tout à fait possible de customiser une très jolie page de connexion pour votre site internet. Divilogy est une agence web spécialisée WordPress, faites appel à nos services pour le développement de votre site internet !
