Personnaliser manuellement la page login de WordPress !

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]

Allez plus loins

11 réponses

  1. Je suis allé voir la tienne, elle très sympa ;)

    Par contre, je ne recommande pas trop de le faire, c’est mieux d’installer un plugin. Tout ça à cause des mises à jours fréquentes de WordPress, où il faut faire attention à ne pas écraser la page de login par la nouvelle. Et puis c’est toujours plus prudent de la refaire à chaque fois si jamais WordPress fait des modifications dessus :)

  2. Mais non, puisqu’on appelle la feuille de style depuis functions.php qui se trouve dans le thème !
    Du coup il y a de fortes cahnces pour que ce soit plus propre et rapide qu’un plugin.

  3. @Jean-Baptiste : En fait, non. Vu que c’est un fichier css et un simple code ajoutant le fichier dans la page souhaité. Certes, si les développeurs ont modifié les attributs CSS, il faudra alors trouver et modifier les attributs de notre fichier « login.css ». Justement, un plugin est plus risqué !

    @Mael : Voilà, c’est exactement ça !

  4. Merci pour cette astuce comme d’autres qui m’ont bien aidé.

    Voici mon exemple:

    Ce que je peux rajouter comme information, la largeur de l’image et la taille du pavé de connexion sont liées donc si vous avez une plus grande image vous pouvez adapter le pavé:
    h1 a { background:url(image-entete.jpg) 14px 17px no-repeat; width:600px; height:243px; }
    et #login { width:600px; margin:7em auto; }
    Mettre la même valeur de WIDTH
    Et en plus si vous voulez que l’image vous renvoie vers votre site et non wordpress après avoir vu le site de Calitel, et bien dans la page wp-login.php, modifier la ligne:
    <a href=" » title= » »>

    en modifiant MONSITE_URL et TEXTELORSDUPASSAGESOURISSURIMAGE par vos propres infos. Par contre si wordpress est mis à jour automatiquement, faudrait le refaire…

    Encore merci à Geekeries

  5. Bonjour et félicitations pour ce fabuleux site riche d’ enseignement pour un newbie comme moi.

    J’ aurai une question, enfin deux:

    1-est-ce que ce script peut se mette directement en page d’ accueil fixe ? plus simplement puis je brider l’ accès TOTAL à mon site (blog/forum)aux non logables ?

    2-les mots de passe peuvent-ils être choisis par mes soins et plaçés dans un fichier, si oui lequel et comment ?

    J’ ai conscience d’ être nul et de vous embêter mais ce site et ses administrateurs me semblent être à même de répondre à tout, trop forts !

    Bien cordialement
    Alex

  6. Ping : lbsquat » Blog Archive » Nouvelle déco pour le blog
  7. Oi ;)

    J’ai suivi ton tuto et je pense avoir fait tout correctement.. maintenant, même en ayant supprimé les fichiers crées, j’ai ceci dans mon administration wordpress avec le thème modifié; Darkgloss :(

    Warning: Cannot modify header information – headers already sent by (output started at /homepages/30/d328462679/htdocs/lesavoir/wp-content/themes/darkgloss/functions.php:1054) in /homepages/30/d328462679/htdocs/lesavoir/wp-includes/functions.php on line 830

    S

    Si tu sais..merci d’avance pour ton aide ;)

    Warning: Cannot modify header information – headers already sent by (output started at /homepages/30/d328462679/htdocs/lesavoir/wp-content/themes/darkgloss/functions.php:1054) in /homepages/30/d328462679/htdocs/lesavoir/wp-includes/functions.php on line 831

  8. Bonjour,

    Super méthode pour personnaliser le login !
    J’ai suivi cette méthode, ça fonctionne… plus ou moins.
    Je peux modifier les couleurs, la taille du bloc connexion etc…
    Mais j’ai toujours un grand bandeau blanc derrière l’image qui fait toute la largeurs de la page !
    Je n’arrive pas à le modifier.
    Est-ce que quelqu’un a eu à faire à ce problème ?
    D’avance merci de vos retours.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *