Guides WordPress

Personnaliser la page de connexion de WordPress

Ce guide permet de connaître tous les trucs et astuces à savoir au sujet de la personnalisation de la page de connexion sur WordPress.

S'inscrire à la newsletter

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 :

Page de connexion WordPress

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 :

Personnaliser la page connexion de WordPress

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

Aperçu de l'administration d'Uber Login Logo

Télécharger 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.

Administration de Custom Login Screen

Aperçu de l'administration de Custom Login Screen

Télécharger Custom Login Screen

53 commentaires
  1. Micky le

    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 ! ;-)

  2. Micky le

    Il est dans le dossier « design » que j’ai créé à la racine de mon thème.

  3. Micky le

    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 !

  4. bertomeu le

    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

  5. Passion auto le

    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 !

  6. Lardeau le

    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 ?

  7. Lardeau le

    merci :)

  8. blin le

    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.

  9. Eloka le

    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.

  10. Michel le

    Tuto très clair et très pratique, c’est pile poil ce que je cherchais, merci :-)

  11. Baldy le

    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.

  12. Comp_Alim le

    Merci,
    parfait pour moi j’ai fait un mix de plusieurs code.

    Merci

  13. dempire le

    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

  14. Gwen le

    Super ces bouts de codes.
    Merci!

  15. Petit le

    Un grand merci pour toutes ces infos bien utile.

  16. Simpliweb le

    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.

  17. vtcreative le

    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 !

  18. Lordguad le

    Tip top, tout ce que je cherchais.

    Un point cependant, j’aurai besoin de placer un logotype assez gros, plus gros que celui dédié à l’espace du logo wordpress…

    Le soucis, il s’aligne sur le bord gauche du formulaire, comment puis-je forcer à centrer mon logo par rapport à la largeur de la page ?

    Merci !

  19. Anna le

    hello,
    c’est exactement ce que je cherchais, mais par contre est-ce que ces modification affectent que la page login?
    Par exemple, quand l’user est envoyé sur le password forgot(suite au mail) Est-ce qu’il y a les mêmes changements?
    Enfin, je vais aller tester tous cela. :D
    Thx
    anna

  20. Cédric le

    Merci pour ce super tuto !

    Pour un noob comme moi, je mentionnerai pour chaque fonction qu’il faut l’insérer dans le fichier function.php. Aussi, il n’est pas stipulé si nous devons les mettre à la fin ou au début du fichier (de préférence) et surtout entre des balises ou non, saut de ligne ou non.

    J’ai une petite question : que dois-je rajouter pour obtenir le logo et le texte « en cas de problème … » centrés svp ? Car pour le moment, rien n’est centré malheureusement.

    Merci beaucoup,

    Cédric

  21. persea le

    Merci,

    Bien utile pour personnaliser la page de log.

    Benji

  22. Bernard le

    Bonjour,
    Comment utiliser votre astuce avec un thème enfant ?
    Le dossier « design » doit-il être placé dans le thème parent ?

  23. Deamon le

    Bonjour,

    Quelqu’un peut me dire ou et comment modifier la page d’identification pour les membres? Comme dans l’image de l’exemple ci-dessus j’ai visuellement:

    Identifiant:
    « ici la cellule »
    Mot de passe:
    « ici la cellule »
    Se souvenir de moi [x] – Valider

    Et je recherche simplement à mettre tout sur la même ligne,
    exemple:

    Identifiant: « cellule » Mot de passe: « cellule » Se souvenir.. [x] Valider

    j’ai tester quelques modifications sans succès sur wp_login..
    j’ai la dernière version de WordPress et aucun plugin..

    Merci d’avance :)

  24. soulfree le

    bonjour,
    il y a aussi le plugin A5 Custom Login Page.
    tiens une question bête et si on n’aimes pas avoir les champs les une en dessous des autres, on peut les aligner ?
    merci

  25. Yves le

    Merci pour le code d’ajout de contenu, ca marche nickel !

  26. ElPix le

    Nickel, ca marche parfaitement.
    C’est vraiment une astuce indispensable pour un site pro je pense.

  27. mafmaf le

    Bonjour et merci pour toutes ces propositions et astuces.
    Je cherche à personnaliser ma page de connexion mais l’anglais n’est pas ma tasse de thé !! Est-ce que « Custom Login Screen » est en français. Est-il compatible avec la dernière version de wordpress : 3.6.1
    Merci

  28. mafmaf le

    Merci Jonathan,
    C’est justement cette capture d’écran avec du français qui m’avait interressée mais je me demandais s’il n’y avait que cette partie en français ?
    J’ai essayé Custom Login et là c’est anglais pur donc trop compliqué !!!
    Je vais tenter celui-là !

  29. mafmaf le

    Jonathan, est-ce que si je n’arrive pas au bout de mes modifs je peux faire marche arrière et revenir à l’écran de base facilement ?
    Merci

  30. Marie le

    Merci pour ce tuto

    Comment faire pour faire apparaitre une zone d’inscription (avec validation de l’admin) sur cette page de connexion ?

  31. Marie le

    Merci, j’ai réussi à faire ce que je voulais : avoir un site privê, avec possibilité de s’inscrire et validation des inscriptions. 2 plugins :private only et pie register
    Iln’y a plus qu’à customizer la page d’inscription

  32. Jean Michel le

    Bonjour,

    pour que ça fonctionne avec un thème enfant, il suffit de modifier le chemin vers votre css, dans la fonction comme ceci : wp_enqueue_style( 'login_css', get_stylesheet_directory_uri() . '/css/login.css' );

    En revanche, je n’arrive pas à modifier le background du body de la page de connection (WP 3.8)

    A+

  33. Cyril le

    Bonjour,

    Je suis ravi d’être tombé sur ce sujet qui répond à un de mes besoins.

    Cependant, je rencontre un souci pour le mettre en place. J’aimerais savoir si cette astuce fonctionne avec un thème enfant ?

    Et si oui, y’a-t-il quelque chose de précis à faire de différent ?
    J’ai remarqué que le fichier functions.php de mon thème enfant fonctionne bien mais c’est le chargement de la feuille .css qui ne s’effectue pas.

    Du coup, pas de logo et pas possible de modifier couleur, taille etc du texte en footer.

    Avez-vous une information pour rendre fonctionnelle cette astuce avec un thème enfant ?

    En vous remerciant d’avance, je vous souhaite une bonne année 2014 !

    Cordialement,

    Cyril

  34. Jean Michel le

    @Cyril, avez-vous utilisé la syntaxe en commentaire au dessus du vôtre ?

  35. Cyril le

    Bonjour Jonathan et Jean-Michel,

    Merci d’avoir pris le temps de répondre déjà :) !

    —————–

    @Johnatan : Il me semble que oui. Voici le début du code php avec le chemin vers la feuille css :

    <?php // Fonction qui insere le lien vers le css qui surchargera celui d'origine
    function custom_login_css() {
    echo '’;
    }

    —————–

    @Jean-Michel : J’avais bien vu cette syntaxe mais je ne l’ai pas tenté car je ne sais tout simplement pas où la placer dans le code php !

    Si vous pouvez me l’indiquer, c’est génial :) !

    —————–

    Merci à tout les deux en tous cas.
    Bonne journée !

  36. Cyril le

    Bonjour Jonathan,

    Désolé pour le retour tardif.

    Voici mon post précédent avec le code PasteBin (mais je ne suis pas sûr de savoir l’utiliser car le rendu de mon code est identique).

    —————————————————
    Bonjour Jonathan et Jean-Michel,

    Merci d’avoir pris le temps de répondre déjà :) !

    —————–

    @Johnatan : Il me semble que oui. Voici le début du code php avec le chemin vers la feuille css. Et la feuille css se trouve bien au chemon indiqué :

    <?php // Fonction qui insere le lien vers le css qui surchargera celui d'origine
    function custom_login_css() {
    echo '’;
    }
    add_action(‘login_head’, ‘custom_login_css’);

    —————–

    @Jean-Michel : J’avais bien vu cette syntaxe mais je ne l’ai pas tenté car je ne sais tout simplement pas où la placer dans le code php !

    Si vous pouvez me l’indiquer, c’est génial :) !

    —————–

    Merci à tout les deux en tous cas.
    Bonne journée !

    ———-

  37. Cédric - Bécane web Lyon le

    Bonjour Jonathan,

    Merci pour ces tutos.

    J’ai mis un lien vers tout ceci sur mon site et une mise à jour de la méthode pour changer le logo de la page de connexion à l’espace administrateur pour la version 3.9.+ de WordPress.

    //////////

    http://www.becaneweb.net/personnaliser-page-connexion-wordpress/

    //////////

    Il suffit maintenant d’intervenir sur le fichier /wp-admin/css/login.min.css
    Si tu as des critiques sur cette méthode, je suis preneur.

    Cédric

  38. Pyraah le

    Merci pour tes tutos, je suis en train de me faire un blog aux petits oignons.

    N’ayant pour le moment aucun logo, j’aurais aimé remplacer celui de wp-login par du texte. As-tu un morceau de code sous la main ?

    Une fois encore, merci :-) .

Poster un commentaire

Les champs obligatoires sont indiqués avec *

Prévenez moi de tous les nouveaux commentaires par email.

Ne plus afficher|Fermer
Suivez-nous sur Facebook !