Vous cherchez à personnaliser la page de connexion à votre site ? Dans ce tutoriel, nous allons voir comment remplacer l’image et le lien du logo WordPress sur wp-login.php. Pour cela, il existe deux solutions : soit installer un plugin (payant ou gratuit), soit utiliser des code snippets (ou extraits de code).

Les extensions évitent de mettre les mains dans le cambouis, mais elles ont l’inconvénient d’alourdir le fonctionnement de votre site… Pour que tous les débutants comme les webmasters plus expérimentés s’y retrouvent, nous allons d’abord présenter les plugins avant de voir les snippets et la méthode exacte pour les implémenter sur votre site.

Personnaliser la page de connexion de WordPress avec un plugin

Certains plugins vous permettent de remplacer l’image et le lien sur le logo de WordPress qui s’affichent sur wp-login.php). Je pense par exemple à Avada, excellent thème Premium, qui inclut l’extension Avada Branding. Ce dernier vous permet non seulement de personnaliser votre page de connexion, mais également de définir plusieurs options de "marque blanche" : remplacer ou masquer le logo de WordPress dans la barre d’admin, masquer certains onglets pour les utilisateurs connectés, etc.

Pour avoir un aperçu de ce que permet de faire Avada Branding, voici la page de connexion de Formation WordPress :

Page de connexion à WordPress personnalisée avec le plugin Avada Branding

Vous pouvez également trouver des extensions gratuites pour changer le logo de WordPress et l’URL vers laquelle il renvoie. Je n’en ai pas testé moi-même, mais quelques recherches m’ont orienté vers Custom Login Page Personnalizer.

Dans tous les cas, si ces extensions vous simplifient la tâche, elles alourdissent la charge de code avec laquelle fonctionne votre site. La meilleure solution, c’est donc d’implémenter quelques lignes de code. Voyons tout de suite comment faire !

Remplacer l’image et le lien du logo WordPress sur votre page de connexion

Pour cela, nous allons utiliser des extraits de code, que vous pourrez soit intégrer directement dans votre fichier functions.php, soit l’implémenter avec l’excellent plugin Code Snippets. Voyons d’abord comment modifier l’URL du lien, avant de modifier l’image elle-même. À noter qu’en faisant quelques recherches, je suis tombé sur cette page du Codex de WordPress qui traite en détail de toutes ces questions.

Comment changer le lien du logo sur wp-login.php ?

Pour changer le lien du logo présent sur votre page de connexion, il vous suffit d’implémenter l’extrait de code suivant :

Copier le code

Ce code va remplacer le lien qui est fait vers https://fr.wordpress.org vers la page d’accueil de votre site (qui est passé avec le paramètre home_url). Vous pouvez d’ores et déjà rafraichir votre page de connexion : le logo de WordPress renvoie désormais vers votre site à vous.

Modifier le titre du lien sur le logo

Deuxième étape, pour faire les choses correctement : nous allons remplacer le titre du lien (autrement dit, la balise title). Si vous inspectez le code, vous verrez que pour l’heure elle indique toujours "Propulsé par WordPress". Au lieu de cela, nous allons indiquer le titre de votre site, avec ce snippet :

Copier le code

Ici, il vous suffit de remplacer "Votre Super Site" par le titre de votre site.

Changer l’image du logo de votre page de connexion

Maintenant, nous allons remplacer le logo, pour afficher celui de votre site. C’est une partie un petit peu plus complexe, car elle implique potentiellement de jouer avec les CSS. Avant de voir quelles parties exactement, voici l’extrait de code de base :

Copier le code

La première chose à modifier dans cet extrait de code, c’est l’emplacement relatif de l’image. Pour le trouver, vous pouvez simplement téléverser votre logo via la section Médias de l’admin de WordPress, puis copier l’URL de l’image. Ensuite, collez cette dernière dans le code et enlever la partie avec votre nom de domaine.

La deuxième chose qui devra potentiellement être modifiée, ce sont les valeurs des CSS background-size et height. Ces dernières dépendent de la taille de votre logo. Avec l’inspecteur de code de votre navigateur, vous pouvez essayer de les augmenter ou de les diminuer en fonction de vos besoins.

Conclusion

Utiliser les extraits de code peut effrayer les débutants, mais cela constitue la meilleure solution pour modifier le logo de la page de connexion de votre site. J’espère que cet article vous y aidera et qu’il vous sera donc utile. Si vous avez des questions, n’hésitez pas à les poser en commentaires !