Tips & tricks : personnaliser la page de connexion WordPress

Personnaliser la page de connexion WordPress

Votre site WordPress est visité par de nombreux utilisateurs qui se connectent à l’interface d’administration ? Vous souhaitez personnaliser cette page de connexion sans ajouter une extension spéciale ? La solution c’est un peu de code dans votre thème…

Modifier la page de connexion WordPressLe snippet ci-dessous vient du GitHup Gist WP et la contribution de RenegaDesk qui touche essentiellement le fond de page, l’aspect de la boîte du formulaire, le logo, et quelques aspects dans l’interaction (survol bouton).

En voici la version de base :

// change login image
add_action("login_head", "my_login_head");
function my_login_head() {
	echo "
	<style>
	body.login #login h1 a {
		background: url('".get_bloginfo('template_url')."/assets/img/VOTRELOGO.png') no-repeat scroll center top transparent;
		height: 59px;
	}
	</style>
	";
}

// Change title for login screen
add_filter('login_headertitle', create_function(false,"return 'URL Title';"));

// change url for login screen
add_filter('login_headerurl', create_function(false,"return home_url();"));

Ce code permet de modifier l’image du logo, le texte au survol du logo et l’URL du lien sur le logo (en général le site en frontend).

Le fichier functions.php

Ce code tel quel est utilisable dans le fichier functions.php de votre thème actif. Le souci des modifications de ce genre sur un thème c’est que lors de la mise à jour du thème vous perdez la modification par écrasement du fichier par sa nouvelle version.

Je travaille toujours avec un thème enfant sur WordPress, ici c’est un avantage car le fichier fonctions.php de mon thème enfant ne sera pas touché par la mise à jour de son thème parent. Pour pointer correctement sur mes fichiers placés dans mon thème enfant j’utilise l’URL relative indiquée par le fichier style utilisé par le thème (ici enfant) en remplaçant ‘template_url’ par ‘stylesheet_directory’.

J’ai complété les modifications de la page de connexion en ajoutant des règles CSS pour :

  • La couleur du bouton de connexion (et son survol)
  • La couleur des textes dans le formulaire
  • La couleur des liens sous le formulaire (et leur survol)
  • Le positionnement des textes dans et hors du formulaire (centrage)
  • Ajout ou non d’un fond transparent sous les liens externe au formulaire (selon le contexte de fond)

Vous pouvez compléter ou supprimer ces CSS, voici les CSS utilisés pour une page de connexion WP (à mettre à la place des précédents dans le code au dessus) :

<style>
body.login {
background: url('".get_bloginfo('stylesheet_directory')."/images/VOTREFICHIERDEFOND.jpg') no-repeat scroll center center / cover transparent;
}
body.login #login h1 a {
background: url('".get_bloginfo('stylesheet_directory')."/images/VOTREFICHIERLOGO.png') no-repeat scroll center top transparent;
width: 281px; /*largeur du logo*/
height: 83px; /*hauteur du logo*/
position:relative;
}
.login form {
border-radius: 250px;
background-color:rgba(235,232,234,0.7);
box-shadow: 0px 0px 35px 0px #fff;
border:solid 5px #1C9BC1;
padding:50px;
margin-top: -20px !important;
}
.wp-core-ui .button-primary {
background: #1C9BC1 none repeat scroll 0 0;
border-color: #1C9BC1;
box-shadow: none;
color: #ffffff;
text-decoration: none;
text-shadow: none;
}
.wp-core-ui .button-primary:hover {
background: #666 none repeat scroll 0 0 !important;
border-color: #666 !important;
box-shadow: none;
color: #ffffff;
text-decoration: none;
text-shadow: none;
}
.login #backtoblog a, .login #nav a, .login h1 a, .login label {
color: #000;
}
.login #backtoblog a, .login #nav a {
background-color:rgba(255,255,255,0.8);
padding: 3px 8px;
border-radius:5px;
}
.login #nav, .login #backtoblog {
text-align: center;
}
.login .button-primary {
display: block;
float: none;
margin: 0 auto;
}
.login form .forgetmenot {
float: none;
margin: -6px 0 8px !important;
}
#loginform label {
display: block;
text-align: center;
}
.login #login_error, .login .message {
background-color: rgba(255, 255, 255, 0.8);
position: relative;
z-index: 100;
}
</style>

Ces CSS sont à compléter avec les bons noms d’images qui sont placées dans le dossier « images » du thème enfant. Un aperçu ci-dessous des changements radicaux de la page de connexion avec ces styles :

Sources : GitHub Gist WP, WebSEO.fr, WPexplorer.com, Codex WordPress

Vous aimerez aussi

3 Responses

  1. Salut !
    Effectivement, c’est un super code que tu proposes. Peux-tu aller plus loin et nous dire comment enlever le « aller sur » et enlever le choix du langage stp ?

    1. Salut, je vais poster un article sur d’autres Tips & Tricks notamment un snippet PHP pour enlever le choix de langue.
      Je viens de poster l’article.

Laisser un commentaire

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

Autres catégories du Blog

Partager cette publication