Personnaliser sa page de connexion WordPress

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.