Dans cette petite vidéo, on va regarder 4 façons de personnaliser votre page de connexion. Si c’est pour vous, ce sera juste pour vous faire plaisir, mais si c’est pour vos clients, ça permettra d’apporter la petite touche bien professionnelle, celle qui fait la différence avec les autres agences ou freelance !
Utiliser un plugin pour customiser son écran de connexion
La solution la plus simple, ça restera bien entendu d’utiliser un module. Ici, on vous en présente trois, qui feront le job, mais certains seront payants. On peut aussi ajouter qu’installer un module pour un truc aussi anodin, c’est dommage, mais bon…
SeedProd
SeedProd, vous le connaissez certainement pour son très bon plugin “Coming soon page”. L’entreprise propose également un builder de page (assez cher), qui permet entre autre de personnaliser…tout ! Perso, je ne l’ai jamais testé (et honnêtement, je ne le testerai certainement jamais), mais si c’est votre truc, vous pouvez voir ce que ça donne…
Theme my login
Un autre plugin, que vous trouverez dans le repo de WP cette fois, et qui propose pas mal de choses, en plus de la personnalisation de l’interface de connexion :
- création de compte depuis le front
- connexion depuis le front
- déport de l’adresse de connexion
- obligation d’utiliser un mail comme identifiant primaire
- etc
Il est gratuit, mais il semblerait que certains utilisateurs aient eu des problèmes de sécurité (entre autre)… Euh… Vous êtes sur que vous voulez le tester ?
Custom login page Customizer
Celui-là aussi est gratuit, et il est très, très bien noté ! Tout se fait depuis le customizer de votre thème, et si le module offre moins de fonctionnalités que les autres, il a le mérite de très bien faire ce qu’il promet : personnaliser rapidement et facilement votre écran de login.
Utiliser une fonction pour personnaliser son écran de login sur WordPress
La fonction suivante est à coller dans le fichier functions.php de votre thème enfant (dites-moi que vous avez bien un thème enfant…).
J’ai supprimé la plupart des éléments de personnalisation que j’utilise : vous avez juste à modifier votre couleur de background (background-color:#12345678) et votre image de votre (votre-logo.jpg). Après, si vous connaissez un peu CSS, faites-vous plaisir !
//ON PERSONNALISE L ECRAN DE CONNEXION
function dc_login_custom() { ?>
<style type="text/css">
.login-action-login {background-color:#123456;}
#login h1 a, .login h1 a {background-image: url("https://votre-domaine.fr/wp-content/uploads/votre-logo.jpg");
height:98px;
width:223px;
background-size: 223px 98px;
background-repeat: no-repeat;
padding-bottom: 10px;}
#loginform {padding: 26px 24px;
background: #243154;
color: white;
border-radius: 10px;
border: none;}
.login #backtoblog a, .login #nav a {text-decoration: none !important;
color: white !important;}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'dc_login_custom' );
Voilà, avec tout ça, vous allez pouvoir livrer des sites pros de chez pros, y a plus qu’à passer quelques minutes à gérer un design qui claque, et c’est parti !
