Comment fait-on ?

Vous avez peut-être cherché, mais la page de connexion WordPress n'a pas de fichier php dédié. Et si vous essayez de modifier la page de connexion depuis la feuille de style du thème, WordPress refuse de charger ces corrections. Mais tout ça n'est pas un problème parce qu'on peut créer la notre.

Méthode

  • Dans le dossier de notre thème enfant, nous allons créer un fichier login_admin.css

  • Maintenant, il faut demander à WordPress de charger ce fichier CSS.

Ouvrez le fichier functions.php et ajoutez le code suivant :

1
/* Ajout du fichier css personnalisé */
2
function custom_login(){
3
    echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/login_admin.css" type="text/css" media="all" />';
4
}
5
add_action( 'login_head', 'custom_login' );

Afficher un fond de page perso

Rien de plus simple, commencez par déposer votre image dans le dossier /images.

Il vous suffit ensuite d'ajouter les lignes suivantes dans votre fichier login_admin.css :

1
/* Personnalisation du background de la page on y ajoute une image de fond en cover donc responsive */
2
body.login{
3
	background:url('images/background.jpg') no-repeat center center fixed;
4
	-webkit-background-size: cover;
5
	-moz-background-size: cover;
6
	-o-background-size: cover;
7
	background-size: cover;
8
	position:fixed;
9
	top:0;
10
	left:0;
11
	z-index:10;
12
	overflow: hidden;
13
	width: 100%;
14
	height:100%;
15
}

Remplacer le logo WordPress par le vôtre

Commencez par ajouter l'image de votre logo dans le dossier /images.

Ensuite ajoutez les lignes suivantes dans le fichier login_admin.css :

1
/* on change le logo de la page de login par un logo personnalise a mettre dans votre dossier image */
2
body.login div#login h1 a {
3
    background-image: url('images/logo_afpar.png');
4
	background-size: 120px;
5
	height: 120px;
6
	width: 120px;
7
}

Customiser l'apparence du formulaire de connexion

Maintenant nous allons jouer avec le rendu du formulaire pour qu'il soit un peu plus moderne et arrondis.

Vous êtes complètement libres de changer le code CSS suivant selon vos goûts.

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

Personnalisation du bouton d'action

1
/* on change le bouton d action */
2
input.button-primary, button.button-primary, a.button-primary{
3
	border-radius: 3px !important;
4
	background-color: #ff5400 !important;
5
	border:none !important;
6
	font-weight:normal !important;
7
	text-shadow:none !important;
8
	box-shadow: none !important;
9
}
10
.button:active, .submit input:active, .button-secondary:active {
11
	background:#ffa904 !important;
12
	text-shadow: none !important;
13
}

Modifier l'URL du logo

Par défaut le logo renvoi vers https://wpfr.net/.

Vous pouvez faire pointer le lien vers l'adresse de votre site à la place en ajoutant ce code au fichier functions.php :

1
/* Personnalisation du lien de la page de connexion */
2
function my_login_logo_url() {
3
	return get_bloginfo( 'url' );
4
}
5
add_filter( 'login_headerurl', 'my_login_logo_url' );
6
function my_login_logo_url_title() {
7
	return 'Ti Web Compétences';
8
}
9
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Pré-cocher « Se souvenir de moi »

La case « Se souvenir de moi » est décochée par défaut.

J'aime cocher cette case quand je me connecte mais parfois j'oublie et réalise plus tard que c'est trop tard !

Pour laisser cette case toujours cochée, ajoutez le code suivant au fichier functions.php :

1
/* Pré-cocher la case "Se souvenir de moi" */
2
function login_checked_remember_me() {
3
	add_filter( 'login_footer', 'rememberme_checked' );
4
}
5
add_action( 'init', 'login_checked_remember_me' );
6
7
function rememberme_checked() {
8
	echo "<script>document.getElementById('rememberme').checked = true;</script>";
9
}
Résultat
Voilà le tout, un peu de CSS, du PHP et le tour est joué :