Dans la construction de son site web, on souhaite souvent personnaliser sa page de connexion WordPress afin d’avoir quelque chose d’unique, ces différentes manipulations vont vous permettre d’arriver à un résultat personnalisable.
Ajouts dans le fichier Functions.php
Pour apporter les modifications souhaités à sa page de connexion, il va falloir passer par un ajout dans le fichier functions.php qui se trouve à la racine votre thème ou mieux à la racine du thème enfant du thème choisi. Avec quelques petites modifications CSS supplémentaires, vous allez pouvoir disposez d’une interface plus professionnelle !
Ajouter un logo personnalisé
Par défaut, nous avons le logo de WordPress, remplaçons le par notre logo (qui sera stocké dans un dossier spécifiques, nous verrons le après).
[pastacode lang= »php » message= » » highlight= » » provider= »manual »]
// logo personnalise
function childtheme_custom_login() {
echo ' ';
}
add_action('login_head', 'childtheme_custom_login');
[/pastacode]
Ajout d’un contenu après le formulaire de connexion
Il peut-être intéressant d’ajouter un texte personnalisé sous le formulaire de connexion, chez CreaZo, nous avons choisi de rappeler les coordonnées du webmaster en cas de problème.
[pastacode lang= »php » message= » » highlight= » » provider= »manual »]
// Ajout d'un contenu après le formulaire de connexion
function add_footer_login() {
echo '
En cas de problème de connexion, veuillez contacter Jonathan ANDRE au numéro suivant : 06 38 42 69 01 ou encore par adresse mail : contact@creazo.fr
';
}
add_action('login_footer','add_footer_login');
[/pastacode]
Changement sur votre logo : lien et attribut
Par défaut, l’attribut du logo et le lien appliqué dessus renvoi vers WordPress, vous pouvez changer ceci via cette ajout :
[pastacode lang= »php » message= » » highlight= » » provider= »manual »]
// Filtre qui permet de changer l'attribut title du logo
function custom_title_login($message) {
return get_bloginfo('description'); // On retourne la description du site
}
add_filter('login_headertitle', 'custom_title_login');
// Filtre qui permet de changer l'url du logo
function custom_url_login() {
return get_bloginfo( 'siteurl' ); // On retourne l'index du site
}
add_filter('login_headerurl', 'custom_url_login');
[/pastacode]
Modification CSS et Logo
Nous allons maintenant modifier le visuel via un dossier qui contiendra le fichier CSS nommé style-login.css et notre logo dans un dossier nommé « images » afin que tout ceci fonctionne parfaitement :
[pastacode lang= »css » message= »style-login.css » highlight= » » provider= »manual »]
body {
background-image: url(images/body.png) !important;
background-position: center !important;
background-repeat: no-repeat;
}
h1 a{
background: url(images/logo.png) no-repeat !important;
width: 325px !important;
height: 93px !important;
background-position: center !important;
}
#backtoblog {
background-color: #666;
box-shadow: 0 1px 3px #666;
left: 0;
margin: 0px !important;
padding: 10px !important;
position: fixed;
text-align: center;
text-shadow: 0 0 0 !important;
top: 0;
width: 100%;
}
.login #backtoblog a {
color: #FFFFFF !important;
}
#contact {
background-color: #CCCCCC;
box-shadow: 0 1px 3px #666;
margin-top: 20px !important;
margin-left: 30%;
margin-right: 30%;
padding: 10px !important;
text-align: center;
text-shadow: 0 0 0 !important;
}
#nav {
background-color: #CCCCCC;
box-shadow: 0 1px 3px #666;
margin: 0 !important;
padding: 10px !important;
text-align: center;
text-shadow: 0 0 0 !important;
}
[/pastacode]
Et voila, grâce à l’ajout de ces codes vous passez de l’interface classique de connexion à cela :
Pour rappel l’interface n’apparaîtra que pour le thème choisi, si vous changer de thème, il faudra ré-appliquez vos modifications sur le nouveau thème.
Pour les plus pressés voici l’archive ZIP contenant le fichier functions.php, le dossier design avec l’intérieur de celui-ci le dossier « images » contenant notre logo et le fichier style-login.css.
