La page de connexion de WordPress: Comment la customiser?

La page de connexion WordPress est une page par laquelle il vous est possible de vous connecter au back-office de votre site web, c’est à dire à la partie administration.

Une fois connecté, vous pouvez accéder votre tableau de bord, créer de nouveaux articles, de nouvelles pages, mettre à jour vos thèmes, ajouter de nouveaux plugins et bien plus encore ! Dans cet article, nous allons voir en détail ce qu’il est possible de faire…

 

1/ Comment trouver votre URL de connexion WordPress

Si vous êtes nouveau sur WordPress et que vous ne savez pas du tout comment accéder à la partie administrateur de votre site ou si vos clients oublient toujours leur URL de connexion, voici une petite explication…

• Cas n°1 => connexion à un site WordPress classique :
  Sur un site WordPress typique, tout ce que vous avez à faire est d’ajouter /login/ ou /admin/ à la fin de l’URL de votre site dans la barre de recherche de votre navigateur préféré. Par exemple: https://monsite.com/login/ ou https://monsite.com/admin/
  Ces deux URL vous mèneront à votre page de connexion où vous pourrez entrer votre nom d’utilisateur et votre mot de passe. Une fois connecté, vous serez redirigé directement vers la zone d’administration de votre site.
• Cas n°2 => connexion à un site WordPress installé dans un sous-répertoire :
  Si votre site est installé dans un sous-dossier ou un sous-répertoire, vous devez ajouter /login/ ou /wp-login.php à la fin de l’URL de votre site. Par exemple : https://monsite.com/mon-repertoire/login/ ou https://monsite.com/mon-repertoire/wp-login.php
• Cas n°3 => connexion à un site WordPress installé sur un sous-domaine :
  Si votre WordPress a été installé sur un sous-domaine, votre URL de connexion devrait ressembler à cela : mon-sous-domaine.monsite.com/login/ ou mon-sous-domaine.monsite.com/wp-login.php

Petite astuce :
Si vous ou votre client n’arrivez pas à mémoriser l’URL de connexion, je vous conseille de créer un onglet favori depuis les options de votre navigateur (signet ou barre des favoris). Ainsi, vous pourrez accéder à la page de connexion WordPress en un seul clic.

 

2/ Page de connexion WordPress & Sécurité

Maintenant que vous savez vous connecter à votre site WordPress, vous devez savoir une chose : des milliers de pirates informatiques et de programmes malveillants le savent également ! Pas besoin d’avoir un Bac+12 pour comprendre que tous les sites WordPress ont la même terminaison d’URL pour se connecter au Back-Office…

Vous n’avez qu’à essayer pour voir : prenez l’URL du blog de votre collègue et ajoutez-y /wp-admin/ à la fin. Que se passe-t-il ? Vous tombez certainement sur la page de connexion…

Imaginez alors si son identifiant de connexion est “ADMIN”, il ne restera plus qu’à trouver le mot de passe. Vous voyez où je veux en venir ?

Certains programmes malveillants ont été conçus pour essayer de se connecter à votre site en utilisant les pratiques habituelles que l’on vient de voir. Ces programmes vont alors essayer tout un tas de combinaisons de mots de passe en un temps record, jusqu’à parvenir à une connexion valide, c’est ce qu’on appelle les attaques par Force Brute.

Quelques bonnes pratiques sont alors à mettre en place dès l’installation de votre site :

• ne pas utiliser ADMIN comme ID de connexion : veillez également à changer votre pseudo depuis l’onglet UTILISATEURS afin que le nom de l’auteur d’un article ne soit pas le même que celui de l’identifiant de connexion.
  

  L’identifiant de connexion doit être différent du pseudo utilisateur/auteur à afficher

• ne pas utiliser un mot de passe trop facile : 4gH?y13lMm2Kp!Qdt98 devrait faire l’affaire ;-)
• modifier l’URL de la page de connexion : afin que personne ne puisse accéder à votre page de connexion à l’adresse https://monsite.com/wp-admin/ il va falloir tout simplement modifier cette URL. Par exemple l’URL https://monsite.com/coucou-c-moi/ serait moins commune… Certains plugins de sécurité proposent cela dans leurs options, si ce n’est pas le cas, le plugin WPS Hide Login est parfait et très rapide à configurer.

 

3/ Comment personnaliser la page de connexion WordPress de manière manuelle ?

Si vous êtes développeur, vous savez déjà qu’il est possible d’effectuer de nombreuses personnalisations sur la page de connexion WordPress, mais si vous débutez, voici quelques customisations faciles à faire :

3.1/ Comment ajouter un arrière-plan personnalisé ?

Pour mon exemple, j’ai apposé une photo de sable en “background” de ma page de connexion.

Pour cela, j’ai eu besoin d’un thème enfant dans lequel j’ai créé un dossier nommé “login”. J’y ai placé une image (dans mon exemple c’est plage.jpg) et un fichier login-style.css dans lequel j’ai saisi :

/* changement de l'image de fond de ma page de connexion WordPres */
body.login { 
 background-image: url('plage.jpg'); 
 background-repeat: no-repeat; 
 background-attachment: fixed; 
 background-position: center; 
}

Ensuite, dans le fichier functions.php de mon thème enfant, j’ai ajouté ces quelques lignes qui ont permis à mon thème enfant de prendre en compte ma nouvelle feuille de style (la feuille de style du thème enfant n’étant pas prise en compte) :

//prise en compte de ma nouvelle feuille de style par mon thème enfant
function my_login_stylesheet() {
 wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-style.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Si vous utilisez ces codes, veillez à modifier les paramètres qui vous sont propres (en rouge).

3.2/ Comment remplacer le logo WordPress avec un logo personnalisé ?

Ici, vous aurez deux solutions. Si vous avez changé l’image de fond de votre page de login, alors vous n’aurez qu’à ajouter le fichier de votre logo dans le dossier nommé “login” (logo.png par exemple) ainsi que le code suivant à placer dans le fichier nommé login-style.css créé un peu plus tôt :

.login h1 a { 
 background-image: url('logo.png'); 
}

Si vous n’avez pas besoin de changer l’image de fond de votre page de login et que vous souhaitez simplement changer votre logo, alors vous pourrez éliminer l’étape 1 de ce tutoriel et suivre les recommandations du Codex de WordPress concernant le changement de logo, en ajoutant simplement les lignes suivantes dans le fichier functions.php de votre thème enfant. Cela vous évite donc de créer un dossier nommé “login” ainsi qu’une feuille de style nommée login-style.css (tout en veillant à placer votre fichier logo.png à la racine de votre thème enfant).

// modification du logo sur la page de connexion de WordPress
function my_login_logo() { ?>
 <style type="text/css">
 #login h1 a, .login h1 a {
 background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/logo.png);
 height:65px;
 width:320px;
 background-size: 120px 120px;
 background-repeat: no-repeat;
 padding-bottom: 60px;
 }
 </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Veillez à changer les élément notés en rouge afin que cela concorde avec vos besoins et votre configuration.

3.3/ Personnaliser l’apparence du formulaire de connexion et les autres éléments

De la même manière, vous allez pouvoir customiser tous les éléments présent sur la page de connexion de votre site WordPress. Pour vous aider, voici les classes CSS qui pourront vous être utiles:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

3.4/ Changer l’URL du logo de connexion

Par défaut, le logo renvoie à WPFR mais vous pouvez le modifier afin que le logo pointe vers votre propre site. Pour cela, ajoutez le code suivant au fichier functions.php de votre thème enfant :

// changer l'URL du logo de la page de connexion afin qu'elle pointe vers votre site
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

 

4/ Des plugins pour customiser la page de connexion

Bon, c’est vrai, la méthode manuelle, c’est bien… mais il existe des plugins qui offrent des fonctionnalités bien plus avancées sans avoir à mettre les mains dans le code… J’ai fait une petite sélection pour vous :

• My Thème Login : 100000+ installations / 4,5 étoiles sur 5
• Custom Login Page Customizer : 80000+ installations / 4,5 étoiles sur 5
• Custom Login : 20000+ installations / 5 étoiles sur 5
• Customize WordPress Login Page : 50000+ installations / 5 étoiles sur 5
• WP Custom Admin Login Page Logo : 10000+ installations / 4,5 étoiles sur 5
• et plus encore ici…

 

En conclusion…

Je suppose qu’à présent, la page de connexion WordPress n’a presque plus de secrets pour vous ^^

Que vous soyez débutant ou confirmé, vous aurez certainement besoin de customiser cette page un jour ou l’autre ! De plus, si votre site est destiné à accueillir des utilisateurs qui se connectent régulièrement, la personnalisation de votre page de connexion en vaut la peine : elle vous permettra de vous démarquer de vos concurrents.

Attention, dès lors que vous modifiez du code dans WordPress, même s’il s’agit d’un thème enfant, il est préférable de faire des essais sur une version locale de votre site…