Sélectionner une page

personnaliser la page de login de wp sans plugin 2018

7 Fév 18 | code, Wordpress

Dans cet exemple de personnalisation de la page wp-login on change d’abord le lien du logo. On insère dans le login_head un nouveau fichier CSS nommé login_admin.css qui viendra écraser les styles du fichier d’origine et une favicon.

Insérez ce code dans le fichier function de votre thème si vous voulez modifiez votre thème veillez à plutôt créer un thème « enfant » ou child theme (voir le CODEX – article en fr) :

/**
 * Personnalisation de la page wp-login
 */

/* Fonction pour changer le lien du logo */
function wpc_url_login(){
return "https://glink.fr/"; // votre URL ici
}
add_filter('login_headerurl', 'wpc_url_login');
 
/* Ajout du fichier css personnalise et d'une favicon pour la page login */
function custom_login_head(){
echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/admin.css" type="text/css" media="all">';
}
function new_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/images/favicon.ico';
  echo '<link rel="shortcut icon" href="' . $favicon_url . '">';
}
  
# maintenant on ajoute les fonctions sur la page de login 
add_action('login_head', 'new_favicon');
add_action( 'login_head', 'custom_login_head' );

Voilà le fichier admin.css supplémentaire à créer dans le dossier de votre thème enfant :

/**
 * admin.css a creer dans le dossier de votre theme 
 * qui remplacera les styles du fichier originale
 */

/* Personnalisation du background de la page on y ajoute une image de fond en cover donc responsive */

body.login{
background:url(images/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
position:fixed; 
top:0; 
left:0; 
z-index:10; 
overflow: hidden; 
width: 100%; 
height:100%;
} 

/* on modifie la position du formulaire pour l afficher au centre de la page */
body.login div#login {
z-index:9999; position:relative;
top: 50%; /* poussé de la moitié de hauteur du référent */
transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
padding: 20px;
background-color: rgba(0, 0, 0, 0.3); /* on rend le formulaire de connexion transparent */
border-radius: 15px !important; /* les bords arrondis c est joli */
}

/* on change le logo de la page de login par un logo personnalise a mettre dans votre dossier image */
.login h1 a { height: 78px !important; width: 300px !important; background:url(images/custom-login-logo.png) no-repeat center top !important; }

/* Personnalisation du formulaire */

.login form { box-shadow: 0px 0px 0px 0px !important; border-radius: 15px !important;   }

/* on change le bouton d action */
input.button-primary, button.button-primary, a.button-primary{
border-radius: 3px !important;                         
background-color: #ff5400 !important;
border:none !important;
font-weight:normal !important;
text-shadow:none !important;
box-shadow: none !important;
}
.button:active, .submit input:active, .button-secondary:active {
background:#ffa904 !important;
text-shadow: none !important;
}

/* personnalisation du message d erreur */
.login #login_error, .login .message {
  -webkit-box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px 0;
  background-color:#FFFFFF;
  border-left-color:#ff5400 !important;
  border-left-style:solid;
  border-left-width:4px;
  box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px 0;
  margin-left:0;
  padding:12px;
}

/* on modifie la couleur de contour des champs login et password quand ils sont sélectionnés  */
body.login div#login form#loginform input#user_login:focus, body.login div#login form#loginform input#user_pass:focus{
  border:1px solid #ff5400 !important;
  box-shadow: none !important;
  background-color: #fff !important;
}
/* personnalisation des liens de retour sur le blog et mot de passe oublié */
.login #nav a, .login #backtoblog a {
color:#fff !important;
text-shadow: none !important;
}
.login #nav a:hover, .login #backtoblog a:hover{
color:#96C800 !important;
text-shadow: none !important;
}
.login #nav, .login #backtoblog{
text-shadow: none !important;
}

Ne reste plus qu’à ajouter vos images custom-login-logo.png et background.jpg dans le répertoire images de votre thème enfant.

A titre indicatif voici les classes CSS de la page de login que vous pouvez éditer :

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login #login_error {}
body.login div#login .message {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Voici une idée du résultat :

Plus d’infos sur le site du codex de WordPress (anglais) : CODEX

Vous avez des questions à propos de cet article ? Besoin d'aide sur un autre sujet ? Contactez-moi, je pratique des prix vraiment compétitifs et je réponds généralement rapidement