inscription theme personnaliser

Comment personnaliser la page d'inscription WordPress !

Publié par | Catégories : Création de sites - Trucs et astuces

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 !

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

212Rappel : 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".

312

Une fois l'extensions installée, activez-là en cliquant sur "Activer l'extension"...

412

WangGuard : Pour ajouter une question pour combattre le SPAM

Même chose pour l'extension WangGuard, recherchez puis installez et validez !

88

Activez, et c'est fini !

96

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

511

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.

69

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;
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;border-radius: 3px;margin: 1px;padding: 4px;}
.login input {
background: #FBFBFB none repeat scroll 0 0;border: 1px solid #E5E5E5;font-size: 24px;margin-bottom: 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;
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 :

79

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 : http://wangguard.com/getapikey

Remplissez le formulaire comme il le faut, cliquez sur le bouton "Send".

1110

Après fin d'inscription, vous allez recevoir un mail sur votre boîte, cliquez sur le lien d'activation.

152

Dans la même page, connectez-vous à votre compte en utilisant les même coordonnées dans l'email.

161

Recopiez le code API.

171

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

127

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.

105

Voyons les résultats :)

Résultats :

Voici un aperçu pour la page d'inscription, avant d'appliquer le style CSS :

133

Et voici la page actuelle (easytutoriel.com/login/?action=register), évidemment avec le style CSS :

143

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


L'auteur :

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Déjà 15 commentaires ! { Ajouter le vôtre ? }

  • Tanger institut dit :

    Salut Sofiane,

    Vraiment merci pour ton travail et ton aide.

    J'ai fait exactement ce que tu as dit; cela a bien fonctionné, j'ai testé MAIS MAINTENANT lorsque que l'on veut s'inscrire j'ai le message suivant: "username caractere illégale"!!!

    Peux-tu m'aider?

    Cordialement.

  • olivier dit :

    Bonjour à tous,

    Super ce plugin mais j'ai un soucis je m'explique j'ai bien configuré et cela fonction à merveille quand je suis Mozilla Firefox. une fois que je suis sur Internet Explorer après la connexion il y a une désorganisation complet de mon site. Sur Google Chrome une fois connecté des plantages en permanence.
    J'ai besoin SVP de l'aide surtout que plugin répondait exactement a ce que je voulais.
    Cordialement,

  • lionel dit :

    Hello
    Super boulot exactement ce que je cherchais .. J'ai un petit probleme je me retrouve avec le module de connection de l'extension et en dessous le module classique . Ma question est donc comment supprimer le module classique. Merci de votre réponse

  • Franck dit :

    Bonjour, moi j'ai un espace aprés l'email et la case a coché et en plein milieu en dessus de "se souvenir de moi" une idée ?

  • eric dit :

    j'ai toujours Word press qui s'affiche et ce n'est pas intégré dans le design du site...
    Merci

  • razor2009 dit :

    salut déja merci pour le TUTO mais y a t'il un tuto pour trouvez ses identifiant FTP stp

  • Fabien dit :

    Bonjour,

    Très bon tutoriel.
    Peut-on ajouter la possibilité d'un bouton permettant de se connecter directement via son compte facebook ?
    Exemple sur cette page : http://www.kisskissbankbank.com/fr/login

    Merci par avance.

  • Anonyme dit :

    Problème résolue ça marche niquel !

  • Anonyme dit :

    Pourriez vous m'aidez sur un projet, je n'arrive pas à mettre la page d'inscription sur le design que je fais, contactez moi sur gmail.com si vous avez le temps ... Merci :-)

  • Rode dit :

    bonsoir je suis Rode j'aimerais créer un site pour une agence immobilière , je veux utiliser Dreamweaver mais après téléchargement il ne s'installe pas totalement. que fais-je?

  • britain dit :

    la page inscription et la page c'est la même ?
    on ne peut pas les différencier?

    • Soufiane Sabiri dit :

      Bonjour Britain,

      Je n'ai pas bien saisis votre question, merci de m'expliquer plus :)

      Bien amicalement,
      Soufiane

      • britain dit :

        désolé j'ai oublié un mot la page d'inscription et la page de connexion c'est la même ?
        on ne peut pas avoir la page d'inscription d'un style et la page de connexion d'un autre style ?

  • karim dit :

    Bonjour
    j'ai vraiment apprécié ton site et j'aimerais bien avoir de l'aide pour mon site . en fait je t'ai deja envoyer un message
    Voila le site http://alkitab.net76.net/

    Merci

  • Publier un commentaire :

    xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)