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
// à 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.
*/
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.
