//Wordpress Hacks»Personnaliser la page wp-login en utilisant les hooks
Personnaliser la page de login de l’administration de wordpress peut être un atout intéressant pour votre thème wordpress. En utilisant un peu de css et quelques fonctions PHP simple, nous allons voir comment relooké completement la page d’administration sans toucher au code meme de wordpress…
Pour bien comprendre ce que nous allons faire, je vous encourage dans un premier temps à ouvrir le fichier wp-login.php situé à la racine de votre blog wordpress.
Ne touchez absolument à rien dans ce fichier sans savoir très clairement ce que vous faites.
Dans ce fichier, vous trouverez autour de la ligne 46 :
1 2 3 | //some code before... add_action( 'login_head', 'noindex' ); //some code after... |
login_head correspond à un hook wordpress. Pour faire simple, un hook est une sorte de marque page dans wordpress, permettant entre autre d’inserer des bouts de code (plus connu sous le nom de fonction) à l’endroit où il se trouve.
Et c’est precisement ce que nous allons faire…
Dans votre thème wordpress, ouvrez le fichier functions.php, ou creez le si il n’existe pas.
Creez également un fichier my-custom-login.css. C’est dans ce fichier que vous pourrez à loisir modifier le css de la page wp-login.
Dans votre fichier functions.php, ajoutez le snipplet suivant :
1 2 3 4 5 6 7 | function custom_login_css() { $my_login_css = get_bloginfo('template_url')."/my-custom-login.css"; echo "<link rel='stylesheet' href='".$my_login_css."' type='text/css' media='all' />"; } add_action('login_head','custom_login_css'); |
Dans un premier temps, on creer une fonction custom_login_css() qui appelle notre css situé dans le dossier de notre thème, et, grâce au hook login_head, on attache cette fonction dans l’entete du fichier wp-login.php de wordpress.
Editez à présent le fichier my-custom-login.css pour appliquer votre feuille de style. Tout est possible dans la limite du code déjà présent sur la page, à savoir:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | /*style du corps de page sur toutes les pages(login, register et lost password)*/ body { } /*style du formulaire sur toutes les pages*/ form { } /*style de la checkbox "Se Souvenir de moi"*/ form .forgetmenot { } /*style du bouton submit sur la page de login*/ #login form .submit input { } /* style général des paragraphes du formulaire sur la page de login*/ #login form p { } /* style général des labels sur toutes les pages(login, register et lost password)*/ label { } /* style du label "se souvenir de moi" */ form .forgetmenot label { } /* style du bouton submit sur toutes les pages(login, register et lost password) */ form .submit { } /* style des paragraphes de formulaires sur toutes les pages(login, register et lost password) */ form p { } /*entete du login :: c'est l'endroit ou vous pouvez changer l'image d'entete*/ h1 a { background: url(../images/logo-login.gif) no-repeat top center; } /*les liens en pied de formulaire ( lost your password ? et register ?)*/ #nav {} /*le lien retour vers le blog*/ #backtoblog a { } /*le formulaire de login de maniere générale*/ #login { } /*les messages d'erreurs sur toutes les pages(login, register et lost password)*/ #login_error, .message { } /*les champs input text sur toutes les pages(login, register et lost password)*/ #user_pass, #user_login, #user_email { } |
Pour compléter notre personnalisation, il faut compter avec deux paramètres supplémentaires.
En effet, le lien situé dans l’entete de notre formulaire ( celui ou apparait le logo), pointe vers le site de wordpress (http://www.wordpress.org/) et au survol, une infobulle indique “propulsé par wordpress”… Ennuyeux ! Quelques lignes supplémentaires dans notre fichier functions.php devraient résoudre ce soucis :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //change le lien vers lequel pointe le logo function the_site_url($url) { return get_bloginfo('siteurl'); } //change l'intitulé de l'infobulle function the_site_name($name) { return get_bloginfo('name'); } //...et on ajoute les deux fonctions à nos hooks add_filter('login_headerurl','the_site_url'); add_filter('login_headertitle','the_site_name'); |
login_headerurl et login_headertitle (ligne 74 du fichier wp-config.php ) sont deux hooks présents sur le lien du logo, l’un pour le href du lien, l’autre pour le title.
Il existe de nombreux hooks auxquels rattachés des fonctions php et la liste est loin d’être exhaustive. Pour plus d’informations sur les hooks et ceux qu’ils permettent de faire, rendez vous sur le codex wordpress : http://codex.wordpress.org/Plugin_API/Action_Reference. Avec une peu de pratique, vous devriez etre à même de développer vos propres fonctions pour wordpress.
N’hesitez pas a me laisser vos créations dans les commentaires :) .
@ très bientôt pour un nouveau hack wordpress !
