Personnaliser manuellement la page de connexion WordPress (sans plugin)

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.

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 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.

---

Partager Copier le lien Copier au format Markdown

Vous souhaitez que nos publications apparaissent plus souvent sur Google ?

En un clic, Google affichera ce site dans votre rubrique « À la une ».

Ajoutez-nous comme source privilégiée sur Google

Abdullah Nouman Spécialiste du référencement naturel (SEO) pour le commerce électronique et du marketing de recherche basé sur l'IA

Abdullah Nouman est un spécialiste du référencement e-commerce et du marketing de recherche basé sur l'IA, ainsi que le fondateur de WpConsults. Il a débuté en tant que développeur web en 2017 avant de se tourner vers le marketing de recherche ; il ne se contente donc pas de conseiller, il met également en œuvre ses recommandations. Il aide les boutiques Shopify et WooCommerce à se positionner sur Google et à être référencées par ChatGPT, en mettant l'accent sur la transition vers le shopping assisté par IA.

Travaille avec lui

Lectures complémentaires

Retour à tous les articles →

Comment améliorer l'INP sur WordPress (Interaction to Next Paint) Comment migrer un site WordPress sans altérer les images, les liens ou le référencement naturel Réparer les emails manquants de WooCommerce et les renouvellements retardés : Mettre en place un vrai job Cron