La page de connexion WordPress est une page par laquelle il vous est possible de vous connecter au back-office de votre site web, c’est à dire à la partie administration

Une fois connecté, vous pouvez accéder votre back office, créer de nouveaux articles, de nouvelles pages, mettre à jour vos thèmes, ajouter de nouveaux plugins et bien plus encore. Dans cet article, nous allons modifier cette jolie page…

Que vous soyez débutant ou confirmé, vous aurez certainement besoin de customiser cette page un jour ou l’autre ! De plus, si votre site est destiné à accueillir des utilisateurs qui se connectent régulièrement, la personnalisation de votre page de connexion en vaut la peine : elle vous permettra de vous démarquer de vos concurrents.

Ajouter un arrière-plan personnalisé

Utilisez un thème enfant dans lequel il faut créé un dossier nommé “login”.
Placez une image (exemple.jpg) et un fichier login-style.css dans lequel on saisi :

/* changement de l'image de fond de ma page de connexion WordPres */
body.login { 
background-image: url('exemple.jpg'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
}

Dans le fichier functions.php du thème enfant, ajouter ces lignes qui permettent au thème enfant de prendre en compte la nouvelle feuille de style (la feuille de style du thème enfant n’étant pas prise en compte) :

//prise en compte de ma nouvelle feuille de style par mon thème enfant
function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-style.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Si vous utilisez ces codes, veillez à modifier les paramètres qui vous sont propres (en rouge).

Remplacer le logo WordPress avec un logo personnalisé

Deux solutions.
1 – Si vous avez changé l’image de fond de votre page de login, alors vous n’aurez qu’à ajouter le fichier de votre logo dans le dossier nommé “login” (logo.png par exemple) ainsi que le code suivant à placer dans le fichier nommé login-style.css créé un peu plus tôt :

.login h1 a { 
background-image: url('logo.png'); 
}

2 – Si vous n’avez pas besoin de changer l’image de fond de votre page de login et que vous souhaitez simplement changer votre logo, alors vous pourrez éliminer l’étape 1 de ce tutoriel et suivre les recommandations du Codex de WordPress concernant le changement de logo, en ajoutant simplement les lignes suivantes dans le fichier functions.php de votre thème enfant. Cela vous évite donc de créer un dossier nommé “login” ainsi qu’une feuille de style nommée login-style.css (tout en veillant à placer votre fichier logo.png à la racine de votre thème enfant).

// modification du logo sur la page de connexion de WordPress
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/logo.png);
height:65px;
width:320px;
background-size: 120px 120px;
background-repeat: no-repeat;
padding-bottom: 60px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Changer les élément notés en rouge afin que cela concorde avec votre configuration.

Modifier l’apparence du formulaire de la page de connexion WordPress

Egalement vous pouvez Customiser tous les éléments présent sur la page de connexion de votre site WordPress. Pour vous aider, voici les classes CSS qui pourront vous être utiles:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
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 {}

Changer l’URL du logo de connexion

Par défaut, le logo renvoie à WPFR mais vous pouvez le modifier afin que le logo pointe vers votre propre site. Pour cela, ajoutez le code suivant au fichier functions.php de votre thème enfant :

// changer l'URL du logo de la page de connexion afin qu'elle pointe vers votre site
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Des plugins automatiques pour customiser la page de connexion

My Thème Login
Custom Login Page Customizer
Custom Login
Customize WordPress Login Page
WP Custom Admin Login Page Logo
et plus encore sur la page des plugins de WordPress…