Comment personnaliser la page d'inscription Wordpress!

Transcription

1 Comment personnaliser la page d'inscription Wordpress! Author : soufiane Bonjour, Voulez-vous améliorer la page d inscription de votre site Wordpress et la rendre plus adaptée au thème par défaut de votre site? Ce tutoriel est fait pour vous alors! Vous allez découvrir dans ce tutoriel comment rendre la page d'inscription et connexion de votre site Wordpress plus attractive pour vos nouveaux membres, et comment intégrer le formulaire d'inscription dans le thème de votre site au lieu d'utiliser le style classique de Wordpress! En utilisant uniquement deux extensions, vous allez pouvoir appliquer le thème par défaut de votre site à la page d'inscription / connexion, ajouter le choix du mot de passe et ajouter une question pour combattre le SPAM... Allons-y! Comment rendre la page d'inscription/connexion Wordpress, plus attractive! 1 / 14

2 Comme vous le savez, Wordpress garde depuis son apparition le thème par défaut pour la page d'inscription et de connexion... Et il est un peu moche de garder tel style pour votre site, surtout si votre site a un bon nombre de visiteurs... Rappel : Après l'application de ce tutoriel, vous aurez au total 5 champs au lieu de deux. Comme je vous l'ai dit, dans ce tutoriel vous allez découvrir comment intégrer le thème de votre site Wordpress pour rendre la page d'inscription comme une page inclue dans le site, et ajouter quelques champs comme : choisir un mot de passe, question de vérification, etc. On commence par l'installation des extensions :) Etape 1 : Installation des extensions Connectez-vous au tableau de bord (votresite.com/wp-admin), ouvrez la page des extensions puis cliquez sur le bouton "Ajouter" en haut. Theme My Login : Permet de modifier le thème de la page d'inscription... Mettez dans la case de recherche "Theme My Login" puis tapez la touche Entrée. Cliquez ensuite sur "Installer maintenant" et validez dans la nouvelle fenêtre en cliquant sur le bouton "OK". 2 / 14

3 Une fois l'extensions installée, activez-là en cliquant sur "Activer l'extension"... WangGuard : Pour ajouter une question pour combattre le SPAM Même chose pour l'extension WangGuard, recherchez puis installez et validez! 3 / 14

4 Activez, et c'est fini! Etape 2 : Configuration Changer le thème (automatique) et activer le choix du mot de passe avec Theme My Login : Dans le menu "Réglages", cliquez sur "Theme My Login", puis dans la nouvelle page, choisissez l'onglet "Modules". Cochez "Activer Custom Passwords" et cliquez sur le bouton "Enregistrer les changements". Remarque : Il existe d'autres options comment la sécurité qui permet de bloquer un visiteur après plusieurs tentatives (robot) d'inscription... 4 / 14

5 Après cela, rendez-vous sur votre client FTP (Filezilla) et modifiez le fichier "theme-my-login.css" qui se trouve dans le dossier de l'extension Theme My Login. 5 / 14

6 Mettez ce code CSS à la place de celui qui est proposé, et modifiez les couleurs et autres apparences si vous voulez... [css].login { padding: 5px; font-size:18px; color:grey;text-align:left!important;.login p.error { padding: 5px; border: 1px solid #c00; background-color: #ffebe8; color: #333;.login p.message { padding: 5px; 6 / 14

7 border: 1px solid #e6db55; background-color: #ffffe0; color: #333;.login form label { display: block;.login form p.forgetmenot label { display: inline; #wp-submit {width: 220px;font-size: 20px;color: white;background: #C00000;border: solid 1px #8D0000;-webkit-border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;borderradius: 3px;margin: 1px;padding: 4px;.login input { background: #FBFBFB none repeat scroll 0 0;border: 1px solid #E5E5E5;font-size: 24px;marginbottom: 16px;margin-right: 6px;margin-top: 2px;padding: 3px;width: 97%;border-image: initial;.mu_register.hint { font-size: 12px; margin-bottom: 10px; display: block;.mu_register label.checkbox { display: inline; #pass-strength-result { border-style: solid; border-width: 1px; margin: 12px 5px 5px 1px; padding: 3px 5px; text-align: center; width: 200px; #pass-strength-result.strong, #pass-strength-result.short { font-weight: bold; #pass-strength-result { background-color: #eee; 7 / 14

8 border-color: #ddd!important; #pass-strength-result.bad { background-color: #ffb78c; border-color: #ff853c!important; #pass-strength-result.good { background-color: #ffec8b; border-color: #fc0!important; #pass-strength-result.short { background-color: #ffa0a0; border-color: #f04040!important; #pass-strength-result.strong { background-color: #c3ff88; border-color: #8dff1c!important; [/css] Voici un aperçu : 8 / 14

9 Voyons maintenant comment ajouter la question de vérification... Activer les questions de vérification avec WangGuard : Avant d'ouvrir le tableau de bord, inscrivez-vous sur cette page : Remplissez le formulaire comme il le faut, cliquez sur le bouton "Send". 9 / 14

10 Après fin d'inscription, vous allez recevoir un mail sur votre boîte, cliquez sur le lien d'activation. Dans la même page, connectez-vous à votre compte en utilisant les même coordonnées dans l' . 10 / 14

11 Recopiez le code API. Ouvrez le tableau de bord de votre site, puis cliquez sur "WangGuard" dans le menu à gauche. Collez le code API et cliquez sur le bouton "Update options". Puis dans l'onglet "Security questions", ajoutez les questions et leur réponses. Cliquez sur "Create question" une fois mis les informations de la question. Remarque : Si vous mettez plusieurs questions, ces dernières vont se changer automatiquement à chaque chargement de page d'inscription. Donc ne mettez surtout pas une seule question, car cela facilitera l'accès aux Robots. 11 / 14

12 Voyons les résultats :) 12 / 14

13 Résultats : Voici un aperçu pour la page d'inscription, avant d'appliquer le style CSS : Et voici la page actuelle (easytutoriel.com/login/?action=register), évidemment avec le style CSS : 13 / 14

14 Powered by TCPDF ( Easytutoriel.com Et voilà! Si vous avez eu des problèmes dans une étape, n'hésitez pas à me demander de l'aide :) Et si vous connaissez d'autres méthodes ou astuces pour rendre la page d'inscription plus attractive, je serai reconnaissant! Soufiane - Easytutoriel.com 14 / 14