Comment changer le logo de connexion WordPress : méthodes par plugin, code et CSS

La page de connexion WordPress affiche par défaut le logo WordPress — un élément de marque générique qui n’a pas sa place sur un site professionnel ou orienté client. Le remplacer par votre propre logo prend moins de cinq minutes et ne nécessite aucune connaissance technique approfondie, mais l’impact sur la cohérence de la marque est immédiat. Ce guide couvre trois méthodes prêtes pour la production : une approche par plugin via interface graphique, l’injection directe de code functions.php, et un plugin CSS personnalisé autonome — chacune avec le code exact, les chemins de fichiers et les cas particuliers dont vous avez besoin pour l’implémenter correctement dès la première fois.

Pourquoi le logo de connexion par défaut est plus important que vous ne le pensez

Chaque fois qu’un membre de l’équipe, un client ou un administrateur accède à /wp-login.php, il voit un logo WordPress. Sur un site d’agence en marque blanche, une plateforme SaaS ou une installation WordPress multi-locataires, cette marque par défaut nuit activement à l’image professionnelle que vous avez construite partout ailleurs sur le site.

Au-delà de l’esthétique, un logo de connexion personnalisé remplit une fonction de sécurité subtile mais réelle : il signale à vos utilisateurs qu’ils se trouvent dans un environnement légitime et contrôlé — et non sur un clone de phishing de l’écran de connexion WordPress standard. Lorsque vous hébergez WordPress sur un environnement Hébergement VPS avec accès root, vous avez un contrôle total sur chaque couche de cette personnalisation, des permissions de fichiers au déploiement de thèmes, sans les restrictions imposées par les environnements mutualisés.

Comparaison des trois méthodes de personnalisation

La distinction architecturale clé : les méthodes qui reposent sur le fichier functions.php d’un thème parent seront écrasées à chaque mise à jour du thème. Utilisez toujours un thème enfant pour toute modification directe de fichier.

Méthode 1 : Utiliser un plugin

C’est la voie la plus sûre pour les non-développeurs et la plus rapide pour quiconque a besoin d’un résultat fonctionnel en moins de trois minutes.

Étape 1 : Installer et activer LoginPress

1. Connectez-vous à votre tableau de bord WordPress.
2. Accédez à Extensions > Ajouter.
3. Recherchez LoginPress ou Custom Login Page Customizer.
4. Cliquez sur Installer maintenant, puis sur Activer.

Les deux plugins sont activement maintenus, disposent d’une large base d’installations et exposent leurs paramètres via le Personnalisateur WordPress natif — ce qui signifie qu’il n’y a pas d’interface inconnue à apprendre.

Étape 2 : Téléverser et configurer votre logo

1. Accédez à LoginPress > Personnalisateur (ou Apparence > Personnalisateur de connexion selon le plugin).
2. Localisez la section Logo dans le panneau de gauche.
3. Cliquez sur Sélectionner une image et téléversez votre logo depuis la Médiathèque ou votre machine locale.
4. Ajustez la largeur, la hauteur et le rembourrage à l’aide des contrôles d’aperçu en direct du plugin.
5. Cliquez sur Publier.

Cas particulier : Si votre logo apparaît flou sur les écrans haute densité (Retina), téléversez une image exactement 2x plus grande que votre taille d’affichage souhaitée et contraignez-la via la propriété CSS width plutôt que de vous fier aux dimensions en pixels du plugin. Par exemple, si vous souhaitez un logo de 250px de large, téléversez un PNG de 500px de large et définissez la largeur d’affichage à 250px.

Méthode 2 : Code manuel dans functions.php (Avancé)

Cette méthode vous donne un contrôle précis sur chaque propriété CSS — positionnement, comportement des liens, états au survol — sans installer de plugin supplémentaire. C’est l’approche privilégiée pour les développeurs qui créent des thèmes personnalisés ou maintiennent une empreinte de plugins légère.

Étape 1 : Créer ou accéder à un thème enfant

Ne modifiez jamais directement le fichier functions.php d’un thème parent. Si vous n’avez pas encore créé de thème enfant, faites-le avant de continuer. Sur un VPS avec cPanel ou tout serveur avec accès SSH, vous pouvez créer le répertoire du thème enfant et les fichiers requis manuellement.

Depuis votre tableau de bord WordPress, accédez à Apparence > Éditeur de fichiers du thème et sélectionnez le fichier functions.php de votre thème enfant.

Étape 2 : Ajouter le hook du logo de connexion

Ajoutez le bloc de code suivant au fichier functions.php de votre thème enfant :

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Détail critique : Le code source original dans de nombreux tutoriels cible uniquement #login h1 a. Depuis WordPress 5.x, l’enveloppe de la page de connexion porte également la classe .login, donc cibler les deux sélecteurs garantit la compatibilité avec toutes les versions de WordPress et tout futur changement structurel.

Étape 3 : Téléverser votre fichier logo

À l’aide d’un client FTP, du gestionnaire de fichiers de votre hébergement ou de SSH, téléversez votre logo dans le répertoire images/ du thème enfant :

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

Le chemin de fichier dans la fonction PHP utilise get_stylesheet_directory_uri(), qui résout toujours vers l’URI racine du thème actif — confirmant pourquoi le thème enfant est obligatoire ici. Si vous utilisez par erreur la fonction de répertoire du thème parent get_template_directory_uri(), le chemin sera rompu chaque fois que vous changerez ou mettrez à jour le thème parent.

Étape 4 : Personnaliser le lien et l’infobulle du logo

Par défaut, le logo de connexion renvoie vers wordpress.org. Vous souhaitez presque certainement qu’il pointe vers votre propre page d’accueil. Ajoutez ces deux hooks supplémentaires dans le même fichier functions.php :

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

C’est un détail que la majorité des tutoriels omettent entièrement. Si votre client clique sur le logo de la page de connexion et atterrit sur wordpress.org, c’est un manquement professionnel. Ces deux filtres comblent cette lacune.

Étape 5 : Enregistrer et vérifier

Cliquez sur Mettre à jour le fichier dans l’Éditeur de fichiers du thème, ou enregistrez via votre éditeur de texte si vous travaillez via SSH/SFTP. Accédez à yourdomain.com/wp-login.php dans une fenêtre de navigation privée pour vérifier le résultat sans interférence des ressources en cache.

Méthode 3 : Plugin CSS personnalisé (sans functions.php)

Si vous travaillez sur un site client où la modification des fichiers de thème est risquée, ou si vous utilisez un thème tiers que vous ne pouvez pas étendre en toute sécurité avec un thème enfant, un plugin CSS dédié est la solution la plus propre.

Étape 1 : Installer Simple Custom CSS and JS

1. Accédez à Extensions > Ajouter.
2. Recherchez Simple Custom CSS and JS (ou le plus léger Simple Custom CSS).
3. Installez et activez.

Étape 2 : Ajouter le CSS de la page de connexion

Accédez à Custom CSS and JS > Ajouter un CSS personnalisé et insérez ce qui suit :

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

Remplacez l’URL par le chemin direct vers votre logo téléversé. La source la plus fiable est la Médiathèque : ouvrez votre logo dans la Médiathèque, copiez l’URL du fichier depuis le panneau de détails de la pièce jointe, et collez-la directement dans la règle CSS.

Écueil à éviter : N’utilisez pas d’URL relative ici (par exemple, /wp-content/uploads/logo.png). Si WordPress est installé dans un sous-répertoire, les chemins relatifs échoueront silencieusement. Utilisez toujours l’URL absolue de la Médiathèque.

Définissez l’option Où sur Frontend ou Page de connexion si le plugin prend en charge le ciblage par page spécifique, afin d’éviter de charger du CSS inutile sur chaque page publique.

Spécifications et bonnes pratiques pour l’image du logo

Format de fichier : Utilisez PNG avec un arrière-plan transparent. Les artefacts de compression JPEG sont visibles sur l’arrière-plan gris clair de la page de connexion. SVG est pris en charge par les navigateurs modernes mais nécessite du CSS supplémentaire (background-size: auto se comporte différemment pour les SVG) et peut causer des incohérences de rendu sur les configurations plus anciennes.

Dimensions : Le conteneur du formulaire de connexion WordPress fait 320px de large. Un logo de 250 x 80px s’intègre parfaitement dans cette contrainte. Pour les écrans Retina/HiDPI, exportez à 500 x 160px et contraignez la taille d’affichage via la propriété CSS width: 250px; height: 80px.

Taille du fichier : Gardez le logo en dessous de 50KB. La page de connexion est un point d’accès à haute fréquence — chaque administrateur, éditeur et contributeur la charge. Un fichier image volumineux ajoute une latence inutile, en particulier sur les serveurs avec une bande passante I/O limitée.

Contraste des couleurs : L’arrière-plan par défaut de la page de connexion est #f0f0f1. Testez votre logo sur cette valeur hexadécimale exacte avant de déployer. Un logo blanc sur fond blanc est invisible — une erreur embarrassamment courante lors de déploiements précipités.

Comportement responsive : Ajoutez max-width: 100% à l’ancre du logo pour éviter le débordement sur les écrans mobiles plus étroits que 320px. La page de connexion WordPress n’est pas entièrement responsive par défaut, mais cette seule règle empêche le défilement horizontal sur les petits écrans.

Considérations relatives à l’environnement d’hébergement

La méthode que vous choisissez est en partie déterminée par votre environnement d’hébergement. Sur un Serveur Dédié, vous disposez d’un accès SSH sans restriction et pouvez déployer des thèmes enfants, gérer les permissions de fichiers et automatiser les mises à jour de logo via des scripts de déploiement. Sur un Hébergement Web Mutualisé, vous êtes généralement limité au gestionnaire de fichiers et au tableau de bord WordPress — faisant du plugin ou du plugin CSS personnalisé les seules options pratiques.

Pour les équipes gérant plusieurs installations WordPress, envisagez d’utiliser WP-CLI pour automatiser les mises à jour de logo sur tous les sites :

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

Si votre site WordPress gère des inscriptions d’utilisateurs, des portails clients ou des connexions e-commerce, associer une page de connexion personnalisée à un Certificat SSL valide est indispensable. La page de connexion transmet des identifiants — HTTPS est la base, pas une amélioration optionnelle.

Matrice de décision : quelle méthode utiliser

Utilisez cette liste de contrôle pour sélectionner la bonne approche selon votre situation spécifique :

• Vous êtes un non-développeur ou vous construisez pour un client non technique — utilisez la Méthode 1 (plugin LoginPress). Elle est réversible, ne nécessite aucun code, et le plugin gère automatiquement le comportement responsive.
• Vous êtes un développeur maintenant un thème enfant personnalisé — utilisez la Méthode 2 (functions.php). Elle n’ajoute aucune surcharge de plugin et vous donne un contrôle CSS complet, y compris la correction de l’URL du lien du logo.
• Vous devez personnaliser un thème tiers sans thème enfant — utilisez la Méthode 3 (plugin CSS personnalisé). Elle est isolée des mises à jour du thème et facile à supprimer.
• Vous gérez plusieurs sites — combinez la Méthode 2 avec un thème enfant spécifique par client, déployé via Git ou WP-CLI pour la cohérence.
• Votre logo apparaît flou sur les écrans Retina — quelle que soit la méthode, téléversez une image en résolution 2x et contraignez sa taille d’affichage via les propriétés CSS width et height.
• Le lien du logo pointe toujours vers wordpress.org après la personnalisation — ajoutez les filtres login_headerurl et login_headertext de la Méthode 2, même si vous avez utilisé un plugin pour l’image elle-même.

FAQ

Le changement du logo de connexion affecte-t-il la sécurité de WordPress ?

Non, remplacer l’image du logo n’a aucun impact sur la sécurité de l’authentification. Cependant, un logo de connexion personnalisé peut réduire l’efficacité visuelle des pages de phishing WordPress génériques ciblant vos utilisateurs, car les attaquants clonent généralement l’apparence de connexion WordPress par défaut. Pour un véritable renforcement de la sécurité, combinez cela avec l’authentification à deux facteurs, la limitation des tentatives de connexion et l’application du HTTPS.

Le logo de connexion personnalisé sera-t-il supprimé après une mise à jour du cœur de WordPress ?

Les mises à jour du cœur ne touchent pas les fichiers de thème ni les données des plugins. Si vous avez utilisé la Méthode 2 avec un thème enfant, vos modifications sont entièrement protégées des mises à jour du cœur et du thème parent. Si vous avez modifié directement le fichier functions.php d’un thème parent, une mise à jour du thème écrasera votre code — c’est pourquoi l’exigence du thème enfant est non négociable.

Quel est le hook correct pour injecter du CSS sur la page de connexion WordPress ?

Utilisez login_enqueue_scripts. Cette action se déclenche spécifiquement sur la page de connexion avant le rendu des styles, ce qui en fait le hook correct et officiellement documenté à cet effet. L’utilisation de wp_enqueue_scripts ne fonctionnera pas sur la page de connexion — il ne se déclenche que sur le frontend.

Puis-je utiliser un fichier SVG comme logo de connexion ?

Oui, mais avec des mises en garde. WordPress bloque les téléversements SVG par défaut pour des raisons de sécurité (les SVG peuvent contenir du JavaScript exécutable). Vous devez soit utiliser un plugin comme Safe SVG pour activer les téléversements SVG, soit référencer le SVG via une URL absolue codée en dur dans votre CSS. De plus, définissez background-size: auto ou des dimensions en pixels explicites, car le comportement de mise à l’échelle SVG diffère des images matricielles.

Mon logo n’apparaît pas après avoir suivi ces étapes — que dois-je vérifier ?

Premièrement, rechargez complètement la page de connexion avec Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (Mac) pour contourner le cache du navigateur. Deuxièmement, vérifiez que l’URL de l’image est accessible publiquement en la collant directement dans un onglet du navigateur. Troisièmement, ouvrez les DevTools du navigateur sur la page de connexion, inspectez l’élément #login h1 a et vérifiez si votre règle CSS est appliquée ou remplacée par une autre feuille de style. Quatrièmement, confirmez que le fichier a été téléversé dans le bon répertoire et que le nom de fichier dans votre code correspond exactement au nom du fichier téléversé, y compris la sensibilité à la casse — les serveurs Linux traitent Logo.png et logo.png comme des fichiers différents.