La page de connexion à l’administration WordPress est accessible à l’adresse nom-du-site/wp-login.php et contient un formulaire pour se connecter, le logo de WordPress et un lien permettant de retourner sur l’index du site Internet.
Pour de multiples raisons, vous avez certainement envie de personnaliser cette page à votre image ou à celle de votre client.
Par chance (ou plutôt que les développeurs de WordPress pensent à tout), il existe quelques hooks et filtres à connaître pour personnaliser la page de connexion à votre image.
Ci-dessous, un aperçu de la page proposée par défaut :
Lors de la personnalisation de la page, nous allons pouvoir modifier 4 paramètres :
- le css
- le lien sur le logo
- l’attribut “title” du logo
- ajouter du contenu
Attention : Toutes les modifications et ajouts de code doivent se faire dans votre fichier “functions.php” présent à la racine de votre thème.
Modifier le CSS
Pour modifier le css de cette page, nous allons surcharger les id et class présents par défaut et insérer notre fichier css à l’intérieur de la balise
.Créez un dossier « design » à la racine de votre thème et créez ensuite un fichier « style-login.css ». C’est cette feuille de style qui contiendra notre CSS qui surchargera celui d’origine. Pour stocker votre logo et vos images supplémentaires, créez un dossier « images » dans « design ».
Le code ci-dessous permet d’insérer l’appel du fichier CSS dans la balise <head> de la page de connexion.
// Fonction qui insere le lien vers le css qui surchargera celui d'origine
function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/design/style-login.css" />';
}
add_action('login_head', 'custom_login_css');
Vous trouverez ci-dessous un exemple de fichier CSS qui surcharge quelques unes des class et id :
body {
background-image: url(images/body.jpg) !important;
}
h1 a{
background: url(images/logo.png) no-repeat !important;
width: 325px !important;
height: 93px !important;
}
#backtoblog {
background-color: #666;
box-shadow: 0 1px 3px #666;
left: 0;
margin: 0 !important;
padding: 10px !important;
position: fixed;
text-align: left;
text-shadow: 0 0 0 !important;
top: 0;
width: 100%;
}
.login #backtoblog a {
color: #FFFFFF !important;
}
Modification de l’attribut href du logo
Par défaut, si vous cliquez sur le logo WordPress, celui-ci vous renvoie à l’adresse wordpress.org. Ce détail peut être fâcheux si le site est destiné à l’un de vos clients.
Il est possible de modifier la destination du lien en modifiant le contenu du filtre login_headerurl.
// 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');
Modification de l’attribut title du logo
Un autre détail est assez gênant, il s’agit de l’attribut “title” de ce lien qui est par défaut “Propulsé par WordPress”. Cet attribut est visible lorsque vous laissez un petit instant votre souris sur l’image concernée.
Là aussi, un filtre va nous permettre de modifier le contenu de cet attribut.
// 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');
Ajouter du contenu
Pour ajouter du contenu après le formulaire de connexion, le hook login_footer va nous permettre d’injecter notre code juste en dessous de la balise fermante
Voici un exemple de code :
// Fonction qui permet d'ajouter du contenu juste au dessus de la balise
function add_footer_login() {
echo '<p id="contact">En cas de problème de connexion, veuillez contacter le webmaster au numéro suivant : 00.00.00.00.00 ou par adresse mail : contact@geekpress.fr</p>';
}
add_action('login_footer','add_footer_login');
Ci-dessous, un aperçu du résultat final de notre personnalisation :
2 plugins indispensables pour personnaliser votre page de connexion
Pour les personnes qui n’ont pas ou très peu de connaissances en PHP ou qui ont peur d’aller faire un tour dans le code, j’ai recueilli 2 plugins qui permettent de réaliser les astuces que nous venons d’apprendre.
Uber Login Logo
Uber Login Logo est THE plugin si vous souhaitez modifier le logo de votre page de connexion sans vous prendre la tête avec d’autres options inutiles. Il est tellement facile à utiliser qu’il possède uniquement un bouton pour télécharger votre logo.
Le plugin utilise le gestionnaire de média de WordPress et une fois que vous avez cliquer sur « Insérer dans l’article », on vous propose de voir un aperçu du logo. Le résultat sur la page de connexion est instantané !
Uber Login Logo est le plugin pour installer son logo sur la page de connexion en 10 secondes top chrono !
Aperçu de l'administration d'Uber Login Logo
Custom Login Screen
Custom Login Screen est THE plugin à avoir si on souhaite personnaliser sa page de connexion de WordPress à partir de l’interface d’administration. Ce plugin permet tout simplement de modifier l’intégralité des éléments qui compose la page de connexion. C’est-à-dire que vous avez la possibilité de modifier le fond, le lien de retour, le logo, le formulaire, les messages d’informations et d’erreurs. Que ce soir le fond ou encore le lien de retour vers votre site, vous allez pouvoir personnaliser votre page avec une facilité déconcertante.
Custom Login Screen est divisé en plusieurs onglets. Chacun d’entre eux est réservé à un élément précis de la page et vous disposez d’une multitude d’options pour par exemple le positionner ou colorer comme bon vous semble.
Aperçu de l'administration de Custom Login Screen
Salut,
tuto sympa et accessible. Tout a fonctionné sauf le changement de logo, je ne parviens pas à remplacer le logo wordpress par le mien. J’ai pourtant enregistré le fichier sous le nom « logo.png » dans mon dossier image, ça ne change rien. Un peu d’aide ? Merci !
@ Micky : Où ce trouve votre fichier css ? Vérifiez bien le chemin de votre logo.
Il est dans le dossier « design » que j’ai créé à la racine de mon thème.
Avez-vous bien insérer ce code dans le fichier functions.php ?
function custom_login_css() { echo ' <link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/design/style-login.css">'; } add_action('login_head', 'custom_login_css');Ok ! ça marche ! le code était incomplet. Je ne comprenais pas pourquoi je n’avais pas de chemin d ‘accès vers le fichier css. Petite précision autour de laquelle j’ai tourné un bon moment. Il faut créer un dossier « images »dans le dossier « design » dans lequel on met le nouveau logo. N’est-ce pas ? Encore merci pour ce tuto !
@ Micky : mettre les images dans un dossier « images » qui se trouve lui même dans un dossier « design » n’est pas obligatoire. C’est uniquement dans un but de séparer les images et les fichiers de code.
Par contre, je me rend compte de vote confusion pour que je n’ai pas mentionné la création du dossier « images ». Je me modifie l’article en conséquence !
Super, c’est clair, c’est sympa… Merci…
Au fait, je voudrais rajouter un bouton radio avec trois choix possibles d’accès au site à l’inscription ?
J’ai trois types d’abonnés et chacun doit voir les espaces qui lui sont réservés… Amicalement, Vincent
Je découvre le blog Geekpress et je dois dire que c’est le coup coeur !
La présentation est claire et attrayante, c’est tout ce que j’aime. Bon courage pour la suite !
Bonjour, bravo et merci pour cet article très clair. Savez comment il est possible que lorsqu’un membre se connecte il soit redirigé, non pas vers l’interface d’administration (le back office) du site mais directement vers la home, le front office ?
@Lardeau : Je vous laisse consulté notre astuce à ce sujet : Rediriger vos membres vers la page d’accueil après connexion.
merci
Salut et merci pour ttes ces infos.
Cependant je me demande pourquoi sortir du modèle WP anglophone, si c’est au prix de manip complexes (les balises, etc…)
Je n’ai pas trop envie d’investir au delà de ce qui est nécessaire pour publier mon blog.Pouvez vous me conforter.
Amicalement.
@Blin : Je n’ai pas compris votre demande :/
Bonsoir,
Ce tutoriel est vraiment bien fait. Avant j’utilisai un plugin pour faire cela. Je l’ai finalement abandonné au profit de la page standard de l’installation.
@BLIN : Si c’est pour ton site personnel et que tu es l’unique admin, peu importe je te rejoins sur ce point. Mais s’il s’agit du site d’un client, celui-ci souhaitera surement avoir chacune des pages de son site dans la charte de sa société. C’est là que la personnalisation prend tout son intérêt.
Tuto très clair et très pratique, c’est pile poil ce que je cherchais, merci
Je précise que le code d’appel de la page CSS ne fonctionne pas dans le cas de l’utilisation d’un thème enfant.
Merci,
parfait pour moi j’ai fait un mix de plusieurs code.
Merci
Merci pour ce Tuto,
Je souhaite néanmoins aller plus loin et configurer l’interface d’admin en fonction du type d’utilisateur qui ce connecte. Par exemple laisser un accès uniquement à un plug-in ? Auriez-vous une piste pour moi ? Merci
Super ces bouts de codes.
Merci!
Un grand merci pour toutes ces infos bien utile.
Sympa ce petit « Trick » ! .. et très simple et si rapide à mettre en oeuvre
il y à effectivement une petite mise à jour à effectuer dans le code et le mettre à jour par celui du commentaire ci-dessus.
@Simpliweb : Vous parlez de quelle mise à jour ?
Super tutorial, pour moi ça a fonctionné sans soucis en adaptant. Après avoir modifié cette page d’admin et la page 404 par défaut ça donne un ensemble entièrement cohérent avec l’allure des thèmes sur mes différents WordPress. Merci pour l’astuce !