Personnaliser la page de connexion wordpress sans plugin

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.

c'est un peu plus joli que la page de connexion classique
Personnaliser la page de connexion de wordpress sans plugin

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.

Lire aussi :  Comment ajouter une pub adsense dans un article

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *