Comment créer une page de connexion WordPress sur mesure

Ah, oui, la page de connexion WordPress - l'une des pages les plus reconnaissables de WordPress - n'est-ce pas ?

Mais en même temps, avoir cette page sur votre site WordPress dans sa forme par défaut n'est pas toujours la meilleure des idées.

Pourquoi? - tu demandes.

Voici la réponse :

Pourquoi auriez-vous besoin d'une page de connexion WordPress sur mesure ?

L'enjeu est triple :

1. Trafic . Plus vous obtenez de trafic, plus vous obtenez de «mauvais» trafic en conséquence directe. Par mauvais trafic, j'entends les scripts malveillants et les bots, les spammeurs et toutes sortes d'utilisateurs venant sur votre site avec de mauvaises intentions. La personnalisation de votre page de connexion WordPress peut rendre votre site plus sécurisé.
2. Site multi-utilisateurs . Si votre site est géré par plusieurs personnes - qu'il s'agisse d'administrateurs ou d'auteurs/blogueurs - plusieurs occurrences de connexion auront lieu. Fournir un formulaire de connexion personnalisé rendra le processus plus agréable dans l'ensemble.
3. Image de marque . La page de connexion par défaut est bonne, mais il y a le gros logo WordPress en plein milieu. Changer cela et faire en sorte que la page de connexion ressemble davantage à la vôtre peut être une belle touche de marque. Ceci est particulièrement valable si vous construisez un site Web pour un client. Offrir à votre client une expérience cohérente est certainement quelque chose qu'il appréciera.

Si l'un des éléments ci-dessus vous semble convaincant, vous devriez envisager de changer votre page de connexion en une page personnalisée. Voici comment:

Comment créer une page de connexion WordPress sur mesure

Vous pouvez procéder de deux manières principales :

• la méthode manuelle ,
• la manière plugin .

Les deux façons ont leurs avantages et leurs inconvénients. La méthode manuelle vous donne plus de contrôle sur l'apparence de la page finale. La méthode du plugin est plus facile à suivre, surtout si vous n'avez aucune compétence en codage, mais vous devez vous contenter de ce que le plugin vous permet de faire.

Couvrons les deux.

Création manuelle d'une page de connexion personnalisée

Bien que cela vous oblige à modifier certains des fichiers source de votre thème, ce n'est pas si difficile. Je vais utiliser Twenty Fifteen comme exemple ici.

Le plaisir commence par la création d'une copie du fichier page.php et du fichier content-page.php .

Renommez ces nouvelles copies respectivement en page-login.php et content-login.php .

Ouvrez page-login.php et modifiez une seule ligne. A partir de ceci :

 get_template_part( 'content', 'page' );

Pour ça:

 get_template_part( 'content', 'login' );

Maintenant, éditons content-login.php et ajoutons une ligne juste en dessous de <?php the_content(); ?> <?php the_content(); ?> . Ainsi:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Noter. À ce stade, vous pouvez effectuer une gamme d'autres personnalisations si vous le souhaitez (comme ajuster la conception/la mise en page, supprimer la barre latérale), mais tout est facultatif. Changer uniquement ces deux lignes fera l'affaire si vous optez pour une approche extrêmement minimale avec votre nouvelle page de connexion WordPress.

Maintenant, créons une nouvelle page dans wp-admin et appelons-la simplement "login". Assurez-vous que le permalien est également "login":

Cela garantira que WordPress utilise automatiquement votre fichier de modèle page-login.php .

Si vous visitez votre nouvelle page en ce moment, elle devrait ressembler un peu à ceci :

À ce stade, il ne reste plus qu'à définir des redirections pour éliminer à terme la page de connexion par défaut de WordPress. Faites-le en plaçant ces lignes à la fin de votre fichier functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Extraits de code construits sur la base de : [1][2].)

À l'heure actuelle, la seule page de connexion accessible est la nouvelle que vous avez créée. La grande chose ici est que vous pouvez le modifier librement via l'éditeur de page par défaut de WordPress (comme vous le feriez pour n'importe quelle autre page).

Créer une page de connexion WordPress personnalisée avec un plugin

Cette méthode fonctionne un peu différemment car au lieu de créer une toute nouvelle page de connexion, nous modifions en fait celle par défaut.

Tout d'abord, le plugin que nous allons utiliser est : Custom Login Page Customizer.

Après l'avoir installé et activé, accédez simplement à Apparence > Personnalisateur de connexion , où vous pouvez lancer le panneau de personnalisation.

Les options de ce plugin sont assez sympas, et elles vous permettent d'ajuster des choses comme :

• Définissez un logo pour qu'il apparaisse à la place du logo WordPress par défaut.
• Définissez un arrière-plan pour toute la page de connexion.
• Définissez un arrière-plan pour le formulaire lui-même.
• Ajustez le style du formulaire et chaque petit détail le concernant (polices, tailles, couleurs, champs).
• Installez un module complémentaire de sécurité pour obtenir un champ captcha supplémentaire dans le formulaire (idéal pour empêcher les spams de connexion/bots).

Par exemple, juste quelques minutes de travail avec le plugin et j'ai obtenu ce résultat :

Une autre option de plugin

Un autre plugin de page de connexion personnalisée qui mérite d'être examiné est : Login Designer. Ce plugin vise à rendre la personnalisation de la page de connexion WordPress super facile tout en vous offrant une flexibilité dans la conception.

L'une des manières d'atteindre la facilité d'utilisation consiste à rendre le processus de personnalisation familier. Toutes les options et tous les outils sont intégrés directement dans WordPress Customizer. Donc, si vous avez l'habitude d'utiliser le Customizer pour modifier les options de thème, vous vous sentirez comme chez vous.

Regardez cette vidéo pour un aperçu du fonctionnement du plugin.

Manuel ou via un plugin ?

Quelle est votre méthode de choix? Préférez-vous coder les choses manuellement ou tout faire gérer par un plugin ? N'hésitez pas à partager.