
Tous les sites WordPress sont livrés avec la même page de connexion : le logo WordPress, un fond gris et un bouton bleu qui n'a rien à voir avec votre marque. Vous n'avez pas besoin d'un plugin pour modifier tout cela, car quelques petits extraits de code suffisent pour remplacer le logo, redessiner le formulaire et épurer les détails que la plupart des gens ne modifient jamais.
Je vais vous expliquer étape par étape le code exact que j'utilise pour personnaliser manuellement la page de connexion de WordPress. Vous saurez ainsi à quoi sert chaque ligne, au lieu de coller un bloc de code mystérieux en croisant les doigts.
Principaux enseignements
- Presque tout est accroché à un seul crochet,
login_enqueue_scripts, qui affiche votre code CSS uniquement sur la page wp-login.php et nulle part ailleurs. - Votre logo remplace celui de WordPress grâce à un petit bloc CSS et à deux filtres (
login_headerurletlogin_headertext) redirigez le lien du logo vers votre site plutôt que vers wordpress.org. - Placez ces extraits de code dans le fichier functions.php d'un thème enfant ou dans un plugin dédié aux extraits de code, puis testez-les depuis un autre navigateur afin d'éviter qu'une faute de frappe ne vous empêche d'y accéder.
- Par défaut, l'onglet du navigateur affiche “ WordPress ” ; le
login_titleLe filtre permet de l'éliminer, ce qui constitue la touche finale que la plupart des tutoriels omettent. - Des plugins comme LoginPress remplissent la même fonction depuis un panneau d'administration ; la solution par le code vous permet simplement d'obtenir le même résultat sans avoir à mettre à jour quoi que ce soit.
Pourquoi personnaliser la page de connexion WordPress ?
Sur un blog personnel où vous êtes la seule personne à vous connecter, la page par défaut est tout à fait acceptable, et je ne passerais pas un après-midi à la modifier. Mais dès que d’autres personnes voient cet écran, celui-ci commence à jouer un rôle pour l’image de marque : les tableaux de bord clients, les sites d’adhésion, les boutiques WooCommerce avec des comptes clients et les blogs à plusieurs auteurs présentent tous la page de connexion à des utilisateurs autres que vous.
Une page de connexion arborant votre logo et vos couleurs donne l'impression d'un produit abouti, tandis que la page par défaut donne l'impression d'un modèle que personne n'a jamais pris le temps de personnaliser. C'est un petit signe de confiance, mais pile de signaux de confiance, et celui-ci vous prendra environ quinze minutes.
Où placer le code de la page de connexion (et où ne pas le placer)
Chaque extrait de code ci-dessous doit être inséré dans le fichier functions.php, ou dans un plugin de fragments de code si vous souhaitez disposer d'un filet de sécurité qui désactive un fragment défectueux plutôt que de faire apparaître un écran blanc sur le site. C'est le même emplacement que j'utilise pour d'autres petits ajustements, comme Ajouter un lien vers un article en double sans plugin. Ne les placez jamais dans le thème parent, car la prochaine mise à jour du thème effacera votre travail sans vous en avertir.
Une mise en garde tirée de l'expérience : Faites le test en restant connecté depuis un deuxième navigateur ou dans une fenêtre privée. La page de connexion est le seul endroit où une simple erreur de syntaxe peut réellement vous empêcher d'accéder à votre compte, et si cela devait arriver, vous pouvez toujours réinitialisez votre mot de passe depuis le gestionnaire de fichiers.
Remplacez le logo WordPress par le vôtre
Le logo n'est qu'une image d'arrière-plan CSS sur la #login h1 a élément ; son remplacement nécessite donc un seul bloc de style. WordPress nous fournit le login_enqueue_scripts un hook qui affiche tout ce que vous y ajoutez uniquement dans l'en-tête de la page de connexion ; ainsi, aucun de ces styles CSS ne sera chargé ailleurs sur votre site.
function wpc_login_logo() { ?>
<style>
#login h1 a {
background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/login-logo.png');
background-size: contain;
background-position: center;
width: 240px;
height: 84px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpc_login_logo' );Téléchargez votre logo sur un images dossier situé dans votre thème enfant, ou collez plutôt l'URL complète de la médiathèque, puis définissez la largeur et la hauteur de manière à ce qu'elles correspondent approximativement à ses proportions. background-size : contain permet de conserver la netteté du logo, quelle que soit la taille de l'encadré que vous choisissez, ce qui vous évite d'avoir à vous soucier du recadrage.
Redirigez le logo de connexion vers votre site, et non vers WordPress.org
Par défaut, le logo renvoie vers wordpress.org et le texte d'aide-mémoire qui s'affiche au survol indique “ Propulsé par WordPress ”, ce qui donne un aspect étrange sur une page de connexion personnalisée aux couleurs du client. Deux petits filtres permettent de résoudre ces deux problèmes :
add_filter( 'login_headerurl', function () {
return home_url();
} );
add_filter( 'login_headertext', function () {
return get_bloginfo( 'name' );
} );Le premier filtre, login_headerurl, remplace la destination du lien par votre propre page d'accueil, tandis que la seconde remplace le texte par le nom de votre site. Ce ne sont que des lignes de code, mais elles font toute la différence entre une page en marque blanche et une page qui redirige toujours les visiteurs vers le site web de quelqu'un d'autre.
Personnalisez l'arrière-plan, le formulaire et le bouton de connexion
Une fois le logo mis en place, le reste n'est que du CSS simple à coller dans le même bloc de style que celui du premier extrait de code. Ces sélecteurs concernent les éléments que les utilisateurs souhaitent réellement modifier : l'arrière-plan de la page, la fiche du formulaire, le bouton et les liens situés sous le formulaire.
body.login {
background-color: #f6f5ff;
}
.login form {
border-radius: 10px;
border: 1px solid #e4e0f5;
box-shadow : 0 8px 24px rgba(103, 61, 229, 0.08) ;
}
.wp-core-ui .button-primary {
background : #673de5 ;
border-color: #673de5;
}
.login #backtoblog a,
.login #nav a {
color: #4c4670;
}Adaptez les couleurs à votre propre palette et le tour est joué. .wp-core-ui .button-primary Il s'agit du bouton de connexion lui-même, et le dernier bloc définit la mise en forme des liens “ Mot de passe oublié ? ” et “ Retour au site ” ; veillez à ce que le contraste du bouton soit bien marqué, car c'est un formulaire que les utilisateurs remplissent à 7 heures du matin, encore à moitié endormis.
Bonus : supprimer “ WordPress ” du titre de l'onglet de connexion
Ouvrez votre page de connexion et regardez l'onglet du navigateur : dans une installation par défaut, le titre se termine par “ WordPress ”. Le login_title Le filtre gère l'intégralité de cette chaîne ; vous pouvez donc la modifier pour y insérer le nom de votre propre site :
add_filter( 'login_title', function ( $login_title, $title ) {
return $title . ' | ' . get_bloginfo( 'name' );
}, 10, 2 );
Le filtre reçoit le titre complet ainsi que la partie spécifique à la page ($titre, généralement “ Se connecter ”), de sorte que lorsque vous saisissez votre propre combinaison, le mot “ WordPress ” à la fin disparaît proprement. C’est une modification qui ne prend que deux minutes, et c’est exactement le genre de détail qu’un client remarque sans pouvoir expliquer pourquoi la page donne soudain l’impression d’être aboutie.
| Ce que vous modifiez | Crochet ou filtre | Comment ça marche ? |
|---|---|---|
| Image du logo | login_enqueue_scripts | Image d'arrière-plan CSS sur l'élément `h1 a` de la page #login |
| Lien vers le logo et texte d'infobulle | login_headerurl, login_headertext | Deux filtres PHP d'une ligne |
| Style de l'arrière-plan, du formulaire et des boutons | login_enqueue_scripts | CSS simple dans le même bloc de style |
| Titre de l'onglet du navigateur | login_title | Filtre PHP reconstruisant la chaîne de caractères du titre |
Ce que ce style ne fait pas, en revanche, c’est renforcer la sécurité de la page de connexion ; l’URL reste wp-login.php et les robots la trouvent toujours chaque jour. Si c’est votre prochain défi, je présente deux approches sécurisées dans Modifier l'URL de wp-admin sans plugin.
Alors, vaut-il mieux personnaliser la page de connexion manuellement ou à l'aide d'un plugin ?
Pour ma part, je préfère le codage manuel, et ce n’est pas parce que les plugins comme LoginPress ne sont pas efficaces ; ils sont vraiment pratiques, avec des aperçus en temps réel et des modèles prêts à l’emploi. La page de connexion n’est qu’un modification « à configurer une fois pour toutes », et gérer un plugin complet, avec ses mises à jour et ses écrans de vente incitative, juste pour héberger quatre petits extraits de code, représente un effort de maintenance disproportionné par rapport à ce que la tâche mérite.
Si vous n'êtes pas à l'aise avec le fichier functions.php, n'hésitez pas à utiliser le plugin sans aucun complexe, car une page de connexion personnalisée vaut toujours mieux que la page par défaut. Mais si vous savez copier-coller du code, la méthode manuelle vous permettra d'obtenir le même résultat sans avoir à mettre à jour quoi que ce soit, et vous en comprendrez désormais chaque ligne.
Vous ne parvenez pas à personnaliser votre page de connexion ?
Si un extrait de code ne fonctionne pas comme prévu ou si vous souhaitez que la page de connexion soit parfaitement adaptée à votre image de marque, n'hésitez pas à nous contacter ou m'envoyer un courriel et je vous mettrai sur la bonne voie.
Journal des mises à jour
2 juillet 2026
- J'ai réécrit le guide en proposant des extraits de code plus clairs, accompagnés d'explications simples sur chaque hook et chaque filtre ; j'ai ajouté la correction concernant le lien vers le logo et le nettoyage des onglets du navigateur, et j'ai mis à jour les exemples de mise en page.
Vous souhaitez que nos publications apparaissent plus souvent sur Google ?
En un clic, Google affichera ce site dans votre rubrique « À la une ».
