Voici une petite astuce pour personnaliser manuellement l’affichage de votre page de connexion WordPress. Plusieurs plugins le font, mais un travail manuelle est toujours plus propre et mieux organisé. Avant de commencer, la personnalisation de cette page est juste en apparence, le code ne modifie en rien le fichier « wp-login.php ». Si vous souhaitez modifier/supprimer des liens et éléments de cette page, nous ne seront pas tenus responsable des problèmes liés à une mauvaise manipulation.
Pour un maximum de personnalisation, il vous faut : une image de fond, un logo de votre blog et de la créativité. Nous allons en fait créer un fichier css contenant les principales données pour modifier l’apparence de cette page et nous allons éditer le fameux fichier « functions.php » de votre thème en ajoutant un code pour insérer le fichier css voulut. Cela permet de ne pas modifier le fichier « wp-login.php ».
Le fichier CSS !
Tout d’abord, il faut créer un fichier « login.css » dans le dossier de votre thème. J’ai commenté le code css pour mieux vous repérer. Les couleurs, les liens des images, les dimensions de votre logo et son positionnement sont à modifier.
[php]
/* Personnsalisation du fond, du logo (H1) et de la barre horizontal du haut */
html { background:#bccad3 url( lien de l’image ) repeat-x; }
h1 a { background:url( lien de l’image ) 14px 17px no-repeat; width:280px; height:70px; }
body.login { border-top-color:#bccad3; }
/* Barre du haut – Lien */
.login p#backtoblog a:link,.login p#backtoblog a:visited { color:#6c7880; }
/* Barre du haut – Effet de survol*/
.login p#backtoblog a:hover,.login p#backtoblog a:active { color:#6c7880; text-decoration:underline; }
/* Modification de la taille du bloc « Connexion » */
#login { width:400px; margin:7em auto; }
/* Modification de bouton « Se connecter » et des autres liens*/
#login form .submit input { border-color:#bccad3!important; font-weight:bold; color:#FFF!important; background:#bfcdd4; }
#login form .submit input:hover { border-color:#808c95!important; color:#FFFFFF!important; }
.login #nav a { color:#7c8991!important; }
.login #nav a:hover { color:#6f7a81!important; }
[/php]
Joindre le fichier CSS avec la page de connexion !
Il vous suffit maintenant d’éditer votre fichier « functions.php » qui se trouve dans le dossier de votre thème. Il faut ajouter le code ci-dessous.
[php]
function logingk() {
echo ‘‘;
}
add_action(‘login_head’, ‘logingk’);
[/php]
