Comment personnaliser totalement la page de login de WordPress

Partagez si vous aimez ->

Nombreux sont les webmasters qui souhaitent personnaliser la page de connexion de WordPress. C’est particulièrement utile quand on possède un espace membre afin de rendre l’espace encore plus attractif, moins froid.

Mais c’est vrai aussi quand on utilise WordPress pour son propre usage. On se sent mieux quand on est chez soi.

Personnaliser son site, c’est aussi égayer son environnement, affirmer sa marque et prendre possession des lieux.

Plusieurs éléments sont à notre disposition:

  • Le logo
  • Le lien quand on clique sur le logo
  • Le fond blanc de la page

Je n’aime pas faire plusieurs fois la même chose. Les modifications que je vous présente ici seront donc pérennes : elles ne seront pas écrasées lors de la prochaine mise à jour de WordPress.

Pour cela, nous utiliserons le système des HOOK.

Si vous ne savez pas ce que c’est, pas de souci, vous pouvez quand même copier-coller le code au bon endroit (sans comprendre) et ça marchera aussi.

Personnaliser le logo

Pour changer le logo, nous allons intervenir sur le CSS. Et oui, certaines images se gèrent en CSS.

Et pour faire tout ça proprement, sans risque de voir notre logo apparaître au beau milieu d’un article, nous allons ajouter une nouvelle feuille de style.

Ajout d’une nouvelle feuille de style

Attention: Le code PHP doit toujours être copié entre les balises « <?php » et « ?> ».
// à Placer dans functions.php de votre thème

function custom_connection_css()
{
echo ''';
}
add_action('login_head', 'custom_connection_css');

Ensuite créer un dossier « css » dans votre thème (ou thème-enfant si vous en utilisez un) et placez-y un fichier nommé « connection-wp.css ».

Ajout du logo

Dans le fichier css, écrivez le code suivant (c’est celui-là qui changera le logo)

body.login #login h1 a {
background: url("../images/votre-logo.png") no-repeat top center;
width: 553px; /* largeur de votre logo */
height: 83px; /* hauteur de votre logo */
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}

Si votre logo n’est pas centré, rajoutez cette ligne sous « display:block; » :

margin-left: -100px; /* Jouez avec la valeur "-100" pour centrer le logo */

Et pour finir, créez un dossier « images » dans votre thème (ou thème-enfant) et placez-y votre logo.

Personnaliser le Lien

Il reste à changer le lien pour que celui qui clique sur le logo ne soit pas emmené vers WordPress.org.

// A placer dans functions.php

// Filtre qui permet de changer le lien sous le logo
function custom_connection_logo_link()
{
return get_bloginfo( 'siteurl' );
}
add_filter('login_headerurl', 'custom_connection_logo_link');

Mettre une image de fond

Pour décorer le fond blanc de la page, ajoutez ce code dans le fichier css:

body.login{
background: #f8f9eb url("../images/votre-image-de-fond.jpg") left top no-repeat ;
}

/* Explication:
#f8f9eb : couleur de la page
"../images/votre-image-de-fond.jpg" : lien vers l'imade de fond
left top : position de l'image. Vous pouvez utiliser des pixels (x et y) pour être encore plus précis.
*/
N’oubliez pas de mettre votre image de fond dans le dossier « images » !

Alternatives

Cet article m’a été inspiré par la procédure vidéo de Cédric de Autour du Tuto. Il présente une façon de faire très différente de la mienne, moins rigoureuse (il faut la refaire à chaque mise à jour) mais qui répondra aux attentes des « allergiques au code ».

Enfin dernière solution, il existe aussi des plugins… 😉 un juste compromis entre facilité et rigueur.

A vous de jouer à présent !

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons