Amener le processus d'adhésion au premier plan de votre site

WordPress est livré avec la possibilité d'ajouter des utilisateurs, manuellement ou via une inscription. Cela inclut la possibilité d’attribuer divers rôles et capacités. Mais le plus souvent, vous ne voulez pas que les utilisateurs soient exposés au backend de WordPress. Dans ce tutoriel, je vais vous montrer comment créer un formulaire d'inscription personnalisé sur le devant de votre site ainsi qu'un formulaire de profil personnalisé. Les utilisateurs recevront également des courriels personnalisés à chaque étape du processus d'inscription. Veuillez noter que ce tutoriel ne couvrira pas les paiements d'adhésion.

Un peu de contexte et ce que nous allons couvrir

Nous utiliserons le thème TwentyEleven où nous éditerons le functions.php et le header.php. Certaines personnes préfèreraient peut-être utiliser BuddyPress pour une tâche comme celle-ci, ce qui est cool, mais je me demande bien pourquoi toutes ces fonctionnalités sont proposées si vous n'allez pas les utiliser..

C'est ce que nous allons faire

Installer les plugins nécessaires
Configuration des plugins
Adapter nos menus
Création d'une page de profil personnalisée
Création d'une page d'inscription personnalisée
Création d'e-mails personnalisés pour chaque étape du processus d'inscription

C'est un peu long, alors prenez un café ou une bière et attachez-vous.

Étape 1 Obtenir les plugins

D'accord, commençons par le début, obtenons les plugins dont nous avons besoin. Je les ajouterai en utilisant l'interface WordPress, mais si vous préférez, vous pouvez utiliser les liens ci-dessous pour les télécharger et les installer manuellement..

Thème My Login
Thème Mon profil
WP Meilleurs Emails

Étape 2 Configurez

"Assurez-vous que" Tout le monde peut s'inscrire "est coché sous Paramètres généraux"

Il est temps de configurer nos plugins, mais avant cela, assurez-vous d’avoir tout le monde peut s'inscrire coché sous Paramètres -> Général.

Ok, maintenant sur la configuration du plugin, commençons par:

Thème My Login - Configuration de base

Thème My Login crée une page "connexion / déconnexion" une fois installée et l'ajoute par défaut à votre liste de pages. Pour plus de contrôle, configurons-le manuellement:

Aller à Paramètres -> Thème My Login et décochez l'option "Show in Pagelist"
Cliquez sur "Enregistrer les modifications"
Aller vers Apparence -> Menus et l'ajouter à votre menu (si votre thème prend en charge plusieurs menus, vous pouvez le mettre n'importe où) *

*Vous ne savez pas comment utiliser le menu? Lire ici

Bon, maintenant, si vous passez à l'avant de votre site Web, vous remarquerez que vous avez un élément de menu de connexion / déconnexion. Il devrait dire "Log Out" lorsque vous êtes connecté. Nice one!

Mais disons que vous n'en voulez pas dans votre menu? Aucun problème, vous pouvez le supprimer de votre menu et l'ajouter en tant que widget. Heureusement, Jeff Farthing (créateur du plugin) a inclus un widget astucieux avec de nombreuses options. Ils sont tous assez explicites, donc je ne vais pas passer à travers. Il suffit d'aller à Apparence -> Widgets et faites glisser le widget Thème My Login vers la zone de widget souhaitée. Je le préfère dans mon menu, mais vous pourriez avoir les deux.

Maintenant, mettons en place certains des modules.

Thème My Login - Configuration des modules

Revenir à Paramètres -> Thème My Login -> Modules et activer les éléments suivants:

Activer le courrier électronique personnalisé
Activer la redirection personnalisée
Activer la sécurité
Activer les profils thématiques
Activer la modération utilisateur

Génial. Maintenant, configurons ces modules à partir de Email. Fondamentalement, vous devez créer un contenu de courrier électronique personnalisé pour chaque phase du processus d'adhésion (nouvel utilisateur, récupération du mot de passe, réinitialisation du mot de passe, activation de l'utilisateur, approbation de l'utilisateur, refus de l'utilisateur). Évidemment, c’est à vous de décider ce que vous écrivez, mais assurez-vous:

Pour le "De courrier électronique", utilisez quelque chose comme [email protected]
Vous voudrez que le "Format E-mail" soit Texte brut.

C'est une bonne idée d'utiliser les variables email - %Utilisateur en ligne%, % user_email%, %passe d'utilisateur% - mais ne vous inquiétez pas trop si vous le maîtrisez parfaitement pour le moment. Nous vous enverrons quelques tests pour que vous puissiez les peaufiner plus tard.

Ok prêt pour certains La redirection la magie? En tant qu'administrateur, vous souhaiterez toujours accéder au backend / tableau de bord lorsque vous vous connecterez afin de laisser le rôle d'administrateur tel quel (ne pas verrouiller votre ordinateur). Je souhaite que mes utilisateurs soient redirigés vers leur profil lors de leur connexion. Je vais donc modifier tous les autres rôles. Donc pour "Log in":

Utilisez l'option "emplacement personnalisé" et entrez quelque chose comme http: // votredomaine / profil
(en supposant que votre structure de permalien est /% catégorie% /% postname% /)

et pour "Déconnexion":

Je mets "Referer". Ainsi, lorsque les utilisateurs se déconnectent, ils restent sur la page où ils se trouvaient..

Pour Sécurité Je vais simplement laisser les choses en l'état, mais cela vaut la peine de jeter un coup d'œil pour voir si ces paramètres vous conviennent. finalement Modération. Comme nous avons un site gratuit à rejoindre, choisissez Confirmation de l'émail pour Modération de l'utilisateur.

D'accord appliquons un peu la qualité du profil.

Thème Mon profil

Nous allons avoir besoin d’une page pour héberger notre profil d’utilisateur, alors dirigez-vous vers Pages -> Ajouter un nouveau. Donnez à votre page un titre, quelque chose comme "Profil", et collez ce shortcode [theme-my-profile] dans le contenu (assurez-vous que vous êtes en mode d'édition HTML). Prenez note de l'ID de la page et publiez.

Aller à Paramètres -> Thème Mon profil. Appliquez ces paramètres, mais veillez à ne pas vous isoler du serveur:

Entrez l'ID de la page "Profil" nouvellement créée.
Assure-toi Afficher dans la liste "Jamais" est sélectionné (nous utilisons les menus WP 3)
Utilisez theme-my-profile.css est coché.
Pour les paramètres du modèle, consultez l'image ci-dessous:

Enregistrer les modifications.

Étape 3 Configuration des menus

Fondamentalement, nous utiliserons deux menus: un pour les utilisateurs connectés et un pour les utilisateurs connectés ou non membres. Alors ouvrez votre programme FTP et téléchargez header.php à partir de votre thème. Nous voulons ajouter une instruction if au code qui configure le menu. C'est la ligne 118 si vous utilisez TwentyEleven.

Remplacez ceci:

  «primaire»)); ?>

Avec ça:

   'user-menu', 'items_wrap' => '% 3 $ s
',' conteneur_class '=>' menu-menu-conteneur '));?>    'menu principal', 'items_wrap' => '% 3 $ s
',' conteneur_class '=>' menu-menu-conteneur '));?>

Si vous le souhaitez, vous pouvez en savoir plus sur wp_nav_menu dans le Codex WordPress.

Ok maintenant obtenir le functions.php déposer et modifier la ligne 101 dans le header.php pour refléter les mises à jour.

Remplacez ceci:

 register_nav_menu ('primaire', __ ('Menu principal', 'vingtième') ';

Avec ça:

 register_nav_menus (array ('menu principal' => __ ('Menu principal'), 'menu utilisateur' => __ ('Menu utilisateur'),));

Maintenant, téléchargez ces fichiers dans votre répertoire de thèmes et passez au backend de WordPress. Réglons les menus, allez à Apparence -> Menus. Vous devriez maintenant avoir deux menus à votre disposition: "menu principal" et "menu utilisateur", activez les deux.

Sous le menu principal ont "Login" page
Sous le menu de l'utilisateur ont les pages "Connexion" et "Profil"

Enregistrez les modifications et introduisons des modèles de courrier électronique personnalisés.

Étape 4 WP Better Emails - Configuration

Très bien le temps de recevoir des courriels personnalisés, passez donc à Paramètres -> WP Better Emails. Pour les entrées "Nom" et "Adresse électronique", utilisez quelque chose comme: Nom du blog et [email protected]. Très bien, maintenant, faites défiler vers le bas et envoyez-vous un aperçu. Sautez vers votre client de messagerie et vous devriez avoir un joli email qui vous attend. Pas mal mais permet de le personnaliser un peu. Revenez à WordPress et copiez tout ce HTML et collez-le dans votre éditeur de texte préféré. C'est vraiment à vous de décider combien vous souhaitez modifier cela. Restons simples et changeons simplement le logo. Créez donc une image de 500 pixels de large par 100 pixels de haut. Téléchargez-le sur votre serveur et copiez le chemin.

À la ligne 22 du code HTML, remplacez le % blog_name% avec votre image, quelque chose comme ça:

Maintenant envoyez-vous un autre test et vous devriez avoir quelque chose comme ça:

Étape 5 Page d'inscription personnalisée

Les choses prennent forme, mais vous devez utiliser le lien d'inscription dans le formulaire de connexion pour vous inscrire. Bummer. Je veux que le "registre" fasse partie de mon menu. Alors dirigez-vous vers Apparence -> Menus et ajoutez un nouvel élément de menu au "menu principal" à l'aide du panneau "Liens personnalisés". J'ai appelé le mien "S'inscrire" et l'URL est http://votredomaine.com/login?action=register (en supposant que vos permaliens sont définis sur% catégorie% /% postname%).

Génial, nous avons maintenant un onglet "inscription" qui amène les gens à la page d'inscription. Bonne droite? Mais disons que vous voulez inclure des champs personnalisés? Comme prénom, site web et code postal.

Thème My Login est livré avec des modèles de formulaires. Vous pouvez donc télécharger les formulaires wp-content -> plugins -> theme-my-login -> modèles et les éditer et les télécharger dans votre répertoire de thèmes. Mais faisons-le en utilisant notre functions.php. Alors téléchargez votre functions.php et coller ceci après tout le code existant.

 / * ---------------------------------------------------- ----------------------------------- * / / * Ajout des champs obligatoires à la page d'inscription / * - -------------------------------------------------- ------------------------------- * / add_action ('register_form', 'show_this'); add_action ('register_post', 'check_fields', 10,3); add_action ('user_register', 'register_extra_fields'); fonction show_this () ?>  Prénom  
  Site Internet  
  Code postal  
 add ('empty_realname', "ERREUR: Veuillez entrer le nom de votre prénom "); else $ website = $ _POST ['prenom']; $ global website; if ($ _POST ['website'] ==") $ errors-> add ('empty_realname', "ERREUR: Veuillez entrer le nom de votre site Web "); autre $ site Web = $ _POST ['site Web']; code postal global $; si ($ _POST ['code postal'] ==") $ erreurs-> ajouter ( 'empty_realname', "ERREUR: Veuillez entrer votre code postal "); code postal = $ _POST ['code postal']; fonction register_extra_fields ($ user_id, $ password =" ", $ meta = array ()) update_user_meta ($ user_id, ' first_name ', $ _POST [' first_name ']); update_user_meta ($ user_id,' website ', $ _POST [' website ']); update_user_meta ($ user_id,' code postal ', $ _POST [' code postal ']);

Bon, vous voudrez peut-être modifier cela à votre guise. Voici une ventilation de base:

La première fonction ( Montre ceci ) dit insérer les champs suivants dans le formulaire
La deuxième fonction ( check_fields ) vérifie si les champs sont remplis et génère des erreurs si nécessaire (validation de base)
La troisième fonction ( register_extra_fields ) met à jour les données de l'utilisateur - ainsi que son profil

Et pour un prime changeons le mot "enregistrer" pour "rejoindre":

 / * ---------------------------------------------------- ----------------------------------- * / / * Changer 'enregistrer' pour 'rejoindre' / * - -------------------------------------------------- -------------------------------- * / function tml_title_filter ($ title, $ action) if ($ action == 'register') return __ ('join'); return $ title;  add_filter ('tml_title', 'tml_title_filter', 10, 2);

Étape 6 Page de profil personnalisé

Comme la plupart des gens, cela me laisse perplexe de savoir pourquoi WordPress contient des éléments tels que AIM et Jabber dans les champs de profil… alors supprimons-les! Collez le code suivant sous votre courant functions.php code.

 / * ---------------------------------------------------- ----------------------------------- * / / * Reomve feilds de profile / * ----- -------------------------------------------------- ---------------------------- * / function extra_contact_info ($ contactmethods) unset ($ contactmethods ['objectif']); unset ($ contactmethods ['yim']); unset ($ contactmethods ['jabber']); $ contactmethods ['postcode'] = 'Code postal (obligatoire)'; return $ méthodesde contact;  add_filter ('user_contactmethods', 'extra_contact_info');

Étape 7 Test et style

D'accord, d'accord d'accord! (Style Kevin Hart) Essayons ça! Déconnectez-vous de WordPress et sautez sur le devant de votre site. Cliquez sur "Inscrivez-vous" et suivez le processus.

Prenez note des modifications que vous devez apporter, par exemple, des modèles de courrier électronique, etc., puis appliquez-les et testez à nouveau jusqu'à ce que vous soyez satisfait..

Maintenant, vous voudrez peut-être donner un peu de style, et heureusement, il est facile d’utiliser des feuilles de style nommées en conséquence et téléchargées dans votre répertoire de thèmes. Vous pouvez les télécharger pour vous familiariser avec le lien "Télécharger les fichiers source" situé en haut de ce didacticiel..

En utilisant ces feuilles de style, votre CSS ne sera pas écrasé lors de la mise à jour de votre thème..

Étape 8 Encore une chose

Une dernière chose, la barre d’administration, bannissons-le pour de bon. Ajoutez le code ci-dessous à votre functions.php.

 / * ---------------------------------------------------- ----------------------------------- * / / * Désactiver la barre d'administration pour tous / * ---- -------------------------------------------------- ----------------------------- * / show_admin_bar (false);

Conclusion

Vous voyez donc qu'il est assez facile de faire passer le processus d'adhésion au premier plan de votre site Web. Cette méthode est extrêmement flexible, la configuration du plugin utilisée dans ce tutoriel peut varier en fonction de vos besoins. Il est également assez facile d’avoir un contenu spécifique à un membre (essayez d’utiliser wp-members). J'ai eu du succès en utilisant cela dans des projets commerciaux.

S'il vous plaît laissez vos commentaires, ou si vous avez des suggestions que j'aimerais entendre, dans les commentaires ci-dessous.

Code