La personnalisation de la page login de WordPress sera apprécier par vos clients et créera une véritable identité à votre site WordPress. Afin de personnaliser la page de connexion, on vous propose aujourd’hui un petit tutoriel simple et efficace.
1ère étape:
Ajouter les fonctions suivantes au fichier functions.php de votre thème:
function login_stylesheet() {
wp_enqueue_style( ‘custom-login’, get_stylesheet_directory_uri() . ‘/login.css’ );
}
add_action( ‘login_enqueue_scripts’, ‘login_stylesheet’ );
function logoLogin_url() {
return get_bloginfo( ‘url’ );
}
add_filter( ‘login_headerurl’, ‘logoLogin_url’ );
function logoTitle_url() {
return ‘Kleeker’;
}
add_filter( ‘login_headertitle’, ‘logoTitle_url’ );
La première fonction va appeler une nouvelle page css pour la personnalisation de la page.
Les autres fonctions vont permettre de remplacer le lien par celui de la page d’accueil de votre site WordPress.
2ème étape:
Créer une nouvelle page de style que vous nommerez « login.css » et ajouter là sur votre serveur à la racine de votre thème. Puis, collez y les lignes suivantes: (ceci est un exemple basique, vous pouvez apporter toutes les modifications que vous souhaitez afin d’adapter la page de connexion au design du site en question)
/* image de fond de la page login WordPress */
body.login {
background-color: #D93D33;
color: #fff;
font-family: « Raleway », sans-serif;
font-size: 14px;
font-weight: 300;}
#login {
background-color:rgb(0, 0, 0, 0.5);
padding: 20px;}
.login #backtoblog a, .login #nav a {
text-decoration: none;
color: #fff;}
.login label {
color: #fff;
font-size: 18px;
font-weight: 300;}
#loginform {
background: transparent;
box-shadow: none;}
/* logo personnalisé de la page login WordPress */
.login h1 a {
background-image: url(‘remplacercetexteparlurldulogo’);
width: 280px;
height: 202px;
background-size: 280px;}
/* bouton personnalisé de la page login WordPress */
.wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary {
display: flow;
text-decoration: none;
font-family: « Raleway », sans-serif;
line-height: 26px;
height: 28px;
margin: 0;
padding: 0 10px 2px;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
border-radius: 99px;
white-space: nowrap;
box-sizing: border-box;
text-transform: uppercase;
font-size: .97em;
letter-spacing: .03em;
cursor: pointer;
text-align: center;
transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;}
.wp-core-ui .button-primary {
background: transparent;
border-color: #D93D33;
box-shadow: none;
color: #D93D33;
text-decoration: none;
text-shadow: none;}
.wp-core-ui .button-primary:hover {
background: #ebebeb;
border-color: #7f7f7f;
box-shadow: none;
color: #7f7f7f;
text-decoration: none;
text-shadow: none;}
/* mentions légales de la page login WordPress */
.login .privacy-policy-page-link {
display: none;}
.login #login_error, .login .message, .login .success {
border-left: 0px solid #00a0d2;
padding: 12px;
margin-left: 0;
margin-bottom: 20px;
background-color: transparent;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);}