Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

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 WordPress Le 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

Cet article a 1 commentaire

  1. C’est super ton code… essayé et adopté direct. Merci !!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu