Vous avez sans doute choisis un magnifique thème pour votre site wordpress, toutes les pages ont donc une unité graphique (couleurs, fond, etc), toutes ?? Non ! Une page résiste encore et toujours à l’envahisseur et affiche fièrement les couleurs blanches et bleues de wordpress. Vous l’aurez peut être compris, je vais vous parler de la page de connexion de wordpress aussi nommée d’après son nom de fichier wp-login.php.
Comment personnaliser cette page ?
La page de connexion est une page du coeur de wordpress, elle n’est pas gérée par le thème directement. La méthode pour la personnaliser sera donc légèrement différente de ce que vous avez l’habitude de faire pour personnaliser une page classique de votre site.
Avant de commencer, assurez-vous d’avoir un éditeur de code (notepad++, brackets, sublimetext,etc) et d’avoir un logiciel ftp (filezilla,cuteftp, etc) avec les identifiants du serveur de votre site car nous devrons envoyer des fichiers. Sachez aussi que cette modification se fait normalement sur un thème enfant pour éviter que les modifications soient perdues à chaque mise à jour du thème.
Préparatifs pour la personnalisation
Créer un dossier que vous nommerez login sur votre ordinateur, créez toujours avec votre éditeur de code un fichier que vous nommerez login-styles.css que vous mettrez dans le dossier login et envoyer le tout dans le dossier de votre thème sur le serveur ( le dossier se trouve dans le répertoire wp-content=>thèmes=> le thème que vous utilisez). Connectez-vous à l’administration de votre site wordpress, cliquez sur le menu apparence puis sur éditeur de thème pour constater que le dossier login apparait bien dans la colonne de droit.
Puisque nous sommes dans l’éditeur de thème, nous allons en profiter pour indiquer à wordpress qu’il doit en prendre le fichier login-style.css pour afficher la page de connexion en créant une fonction toute simple. Cliquez sur le fichier functions.php pour l’ouvrir et collez ces lignes à la fin du code existant.
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/login-style.css" />'; }
add_action('login_head', 'my_custom_login');
Enregistrez la modification en cliquant sur mettre à jour le fichier
La préparation est fini, place à la personnalisation
Cliquez maintenant sur la petite flèche à coté du dossier login et ouvrez le fichier login-style.css car à partir de maintenant, ce sera le seul fichier que vous utiliserez.
Ajouter un fond de page
Copiez ce code dans le fichier login-style.css en mettant évidemment l’url de votre image à la ligne background-image. Dans cette exemple l’image fond.jpg se trouve dans le dossier login mais vous pouvez utiliser n’importe quelle image
body.login {
background-image: url('fond.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size:cover;
}
Remplacer le logo wordpress par celui de votre site
De la même façon que pour le fond de page, insérez ce code et remplacez l’url du logo si il n’est pas dans le dossier login
.login h1 a {
background-image: url('logo.png');
background-size: 120px;
height: 120px;
width: 120px;
}
Personnaliser la couleur du formulaire
Comme nous avons mis une belle image en fond, il serait dommage de la gâcher en collant un bloc de couleur en plein milieu, donc nous allons juste mettre un fond blanc avec un peu de transparence
#login form {
background-color: rgba(255, 255, 255, 0.5);
}
Modifier la couleur de fond du label
Pour ceux qui veulent aller plus loin en customisant le fond des cases identifiant (type text) et mot de passe (type password)
.login input[type="text"]{
background-color: #ff0000;
border-color:#dddddd;
-webkit-border-radius: 4px;
}
.login input[type="password"]{
background-color: #e7e7e7;
border-color:#dddddd;
-webkit-border-radius: 4px;
}
Modifier le bouton de connexion
Ce code est un peu plus long, le premier indique les css pour le bouton normal, le second pour le bouton
.login .button-primary {
width: 309px;
float:right;
background-color:#42cd0a !important;
color: #ffffff;
font-weight:bold;
-webkit-border-radius: 4px;
border: 1px solid #fb33ef;
box-shadow: none;
text-shadow: none;
}
.login .button-primary:hover {
background-color:#95f170 !important;
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #fb33ef;
}
.login .button-primary:active {
background-color:#42cd0a !important;
color: #fff;
-webkit-border-radius: 4px;
border: 1px solid #fb33ef;
}
Modifier le lien du logo
Par défaut, le lien du logo pointe vers le site de la version française de wordpress, vous pouvez le changer en retournant sur le fichier functions.php et en collant ce code à la suite
add_action('login_head', 'my_custom_login');
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return 'Nom de mon site Internet';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Conclusion
Il existe bien d’autres moyens de personnaliser sa page puisqu’il existe en tout une petite vingtaine de sélecteurs css sans parler des functions utilisées sur la page.
