Personnaliser la page de login de wordpress sans plugin

Il peut vous arriver d’avoir besoin de modifier la page de login parceque vous faites un thème pour un client ou pour le fun !
Il est possible d’utiliser un plugin mais cela risque de ne pas être en harmonie avec votre design.
Mais les développeurs de wordpress ont pensé à tout : en modifiant le fichier functions.php et en ajoutant un css spécifique le tour sera joué.

Mise à jour de notre fichier functions.php

Tout d’abord nous allons modifier les comportements de base des liens de la page de login. Pour cela nous allons utiliser différents hook de filtre.

Les codes qui suivent devront être dans le fichier functions.php (à la racine de votre dossier de template).

NB : A noter que si vous souhaitez organiser un peu votre fichier functions.php, il vous est possible de créer un dossier functions et d’y créer un fichier nommé tweaks.php par exemple. Ensuite dans votre fichier functions.php appellez ce fichier de cette manière :

require_once('functions/tweaks.php');

Faites de même pour vos autres fonctions, par exemple en ce qui me concerne,une partie de mon fichier functions.php ressemblerait à ca :

require_once('functions/mon_site_setup.php'); // editor-style.css  :: post format ::thumbnails :: wp_nav_menu :: custom background 
require_once('functions/tweaks.php'); // mes modifications
require_once('functions/custom-type.php'); // mes customes post type  + taxonomy
require_once('functions/metabox.php'); // mes metaboxes

Bon, je digresse, revenons à nos moutons…

Modification du lien (l’attribut href) du logo

Dans notre fichier functions.php ajouter ce filtre qui permet de changer l’url du logo en le faisant pointer vers la page d’accueil du site

function custom_url_login_ns() {
return get_bloginfo('url'); 
}
add_filter( 'login_headerurl' , 'custom_url_login_ns' );

codex

Modification de l’attribut title du logo

Si vous laissez votre souris sur le logo, par défaut vous aurez le message « Propulsé par WordPress », ce qui ne nous convient pas. Grâce au filtre login_headertitle, vous pourrez afficher maintenant le message que vous souhaitez. Dans notre cas, nous allons afficher la description du site.

function custom_title_login_ns($message) {
return get_bloginfo('description'); 
}
add_filter('login_headertitle', 'custom_title_login_ns');

codex

Ajout de contenu

Voici 2 manières d’ajouter du contenu avec les 2 types de hooks : actions et filtres.

avec le filtre login_message, nous afficherons un message au dessus du formulaire de login. Ce filtre peut retourner du html.

function the_login_message_ns( $message ) {
    if ( empty($message) ){
        return ''; 
} else { return $message; } } add_filter( 'login_message', 'the_login_message_ns' );

Bienvenue sur le site. Veuillez vous connecter pour continuer.

codex

ou avec l’action login_footer, nous afficherons un message en dessous du formulaire de login (dans le footer de la page de login en fait). Cet action hook peut retourner du html.

function add_footer_login_ns() {
echo ''; } add_action('login_footer','add_footer_login_ns');

En cas de problème de connexion, veuillez nous contacter

codex

Modification du design

Nous avons pu modifier les informations affichées. Maintenant nous allons « customisé » tout cela.

ajoutons notre fichier css

Si vous essayez de modifier le style de la page de login via le fichier styles.css, vous remarquerez que cela ne fonctionne pas. C’est normal, wordpress ne charge pas le css du thème pour la page de login.
La solution : surcharger les fichiers css de l’admin (wp-admin.min.css, buttons.min.css etc…) grâce au notre :
Créez un dossier css, dans votre dossier de template et créez y un fichier login-styles.css.

Puis toujours dans notre fichier functions.php

function custom_login_css_ns() {
echo ' 	';
}
add_action('login_head', 'custom_login_css_ns');

Modification du fichier css

Maintenant que le fichier est chargé , il ne nous reste plus qu’à le « remplir ».
Les images que nous ajouterons devront être mis dans un dossier image de notre template. Notre dossier ici s’appele img.

/*
 ajout du background, on va le faire couvrir tout le fond de page 
 cela ne fonctionne que sur les navigateurs récents 
*/
 
body.login {
margin:0;
padding:0;
background: #333 url('../img/monimage.jpg') no-repeat fixed center;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}
 
/*
 modification du logo wordpress par le notre 
*/
 
.login #login h1 a {
background-image: url('../img/login-logo.png');
background-size: 300px 150px;
width: 300px;
height: 150px;
}
 
/*
 on remonte le tout 
*/
#login {
padding: 30px 0 0;
}
 
/*
 on modifie le formulaire 
*/
 
.login form {
margin: 10px auto;
padding: 30px;
border: 1px solid rgba(0,0,0,.5);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding; /* le background rempli la boite à l'intérieur de la bordure*/
-webkit-background-clip: padding-box; /* le background rempli la boite à l'intérieur de la bordure*/
background-clip: padding-box; /* le background rempli la boite à l'intérieur de la bordure*/
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
 
/*
 on modifie les inputs du formulaire 
*/
 
.login form input {
width: 240px;
height: 48px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
}
 
/*
 on modifie les inputs du formulaire au hover et focus
*/
 
.login form input:focus,.login form textarea:focus {
background-color: rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
 
/*
 on affiche les labels en blanc pour qu'ils soient plus lisibles
*/
.login label {
color: #fff;
line-height: 26px;
}
 
/*
 on modifie la couleur des inputs et la partie se souvenir de moi
*/
 
.login form .input, .login input[type="text"] { color: #8c8a8a; }
input#rememberme {
height: 18px;
width: 18px;
display: inline;
vertical-align: middle;
margin: 10px 0;
}
 
/*
 on modifie le bouton de validation
*/
 
input#wp-submit {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #2a5380;
background: #4487d1;
background: -webkit-gradient(linear, left top, left bottom, from(#509df2), to(#4487d1));
background: -webkit-linear-gradient(top, #509df2, #4487d1);
background: -moz-linear-gradient(top, #509df2, #4487d1);
background: -ms-linear-gradient(top, #509df2, #4487d1);
background: -o-linear-gradient(top, #509df2, #4487d1);
background-image: -ms-linear-gradient(top, #509df2 0%, #4487d1 100%);
color: #e1e1e1;
}
 
input#wp-submit:hover {
border: 1px solid #2a5380;
text-shadow: #333333 0 1px 0;
background: #2a5380;
background: -webkit-gradient(linear, left top, left bottom, from(#2a5380), to(#153559));
background: -webkit-linear-gradient(top, #2a5380, #153559);
background: -moz-linear-gradient(top, #2a5380, #153559);
background: -ms-linear-gradient(top, #2a5380, #153559);
background: -o-linear-gradient(top, #2a5380, #153559);
background-image: -ms-linear-gradient(top, #2a5380 0%, #153559 100%);
color: #fff;
}
 
input#wp-submit:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #2a5380;
background: #509df2;
background: -webkit-gradient(linear, left top, left bottom, from(#4487d1), to(#4487d1));
background: -webkit-linear-gradient(top, #4487d1, #609391);
background: -moz-linear-gradient(top, #4487d1, #509df2);
background: -ms-linear-gradient(top, #4487d1, #509df2);
background: -o-linear-gradient(top, #4487d1, #509df2);
background-image: -ms-linear-gradient(top, #4487d1 0%, #509df2 100%);
color: #fff;
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}
 
/*
 et enfin on crée les styles des deux classes créé dans notre fichier functions.php
*/
 
 
.contactLogin, .welcomemessageLogin{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #2a5380;
background: #4487d1;
background: -webkit-gradient(linear, left top, left bottom, from(#509df2), to(#4487d1));
background: -webkit-linear-gradient(top, #509df2, #4487d1);
background: -moz-linear-gradient(top, #509df2, #4487d1);
background: -ms-linear-gradient(top, #509df2, #4487d1);
background: -o-linear-gradient(top, #509df2, #4487d1);
background-image: -ms-linear-gradient(top, #509df2 0%, #4487d1 100%);
font-size: 16px;
background-color: #333;
color: #FFF;
width: 280px;
margin: 10px auto;
padding: 10px;
}

Et voila, après tout cela notre page de login est maintenant différentes de la page de login de base.

+++

Laisser un commentaire

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