Lorsqu’un site internet prend de l’envergure il devient de plus en plus fréquent que les gens s’inscrivent dessus, surtout pour les blogs communautaires. Ci-dessous je vais vous fournir un petit tutoriel qui vous permettra de personnaliser votre logo sur la page de connexion de votre site WordPress. Ainsi vous n’aurez plus ce bon vieux logo WordPress et vous passerez pour un pro auprès de vos utilisateurs !

Modifier l’image du logo de la page login

Création d’un logo pour WordPress

Dans un premier temps nous allons devoir créer notre logo. Pour cela il vous faudra utiliser un logiciel de traitement d’image tel que Photoshop ou encore Gimp. Créez un nouveau document « site-login-logo » avec fond transparent. Le dimensions de base du logo WordPress sont de 64×64 pixels, mais vous pouvez personnaliser vos dimensions en augmentant la largeur de l’image si vous le souhaitez.

Une fois votre document créé, vous allez pouvoir y importer votre logo puis le titre de votre blog. Après, chacun fait comme il le souhaite, faites libre cours à votre imagination ! Lorsque vous êtes satisfait du rendu final, enregistrez le fichier en format .png pour un meilleur rendu.

creation-logo-login

Importation du logo

Maintenant que votre logo est créé, nous allons l’importer sur votre site internet. Pour cela ouvrez votre solution FTP, pour ma part j’utilise FileZilla, et importez votre logo dans wp-content/themes/votre_theme/images. Si ce dossier n’existe pas, créez-le.

Création d’un nouveau style CSS

Par défaut, WordPress utilise le CSS pour afficher une image d’arrière plan (le logo WordPress) au lien se trouvant à l’intérieur de l’en-tête de votre formulaire de connexion. Pour remplacer cette image, nous allons utiliser la fonction login_enqueue_scripts pour insérer un nouveau CSS dans notre page login.

Avant de commencer cette étape, je vous conseille de réaliser une sauvegarde de votre site internet au cas où la manipulation se passe mal et que vous vous retrouviez avec une page blanche. Pour cela je vous invite à utiliser le plugin UpdraftPlus.
  1. Ouvrez le fichier functions.php de votre thème (/wp-content/themes/votre_theme/functions.php)
  2. À la fin de votre fichier, insérer la fonction suivante (faites attentions à ce qu’elle soit bien insérée entre les balises php <?php … ?> )
    function my_login_logo() { ?>
    <style type= »text/css »>
    .login h1 a {
    background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
    padding-bottom: 30px;
    }
    </style>
    <?php }
    add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );
  3. Remplacer site-login-logo.png par le nom que vous avez donné à votre logo.

Modifier le lien et le title du logo

Par défaut, le logo renverra sur la page d’accueil de WordPress, ce qui ne s’avère pas très utile pour vous.. Nous allons donc personnaliser ce lien pour qu’un clic renvoie sur votre page d’accueil. Nous allons pour cela retourner sur le fichier functions.php. En dessous de la précédente fonction « add_action », nous allons insérer le code suivant :

function my_login_logo_url() {
return home_url();
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );

function my_login_logo_url_title() {
return ‘Votre Slogan Ici’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );

Grâce à cette fonction, un clic sur le logo renverra directement sur la page d’accueil de votre site internet. Pensez à remplacer la phrase Votre Slogan Ici par le titre ou slogan de votre site internet.

Ça sera tout pour aujourd’hui, j’espère que ces petites astuces vous auront été utiles ! Pour voir le résultat vous pouvez vous rendre sur ma page de connexion.