Comment développer un site d'adhésion avec WordPress Partie 1

WordPress est déjà livré avec beaucoup de choses utiles pour créer un site d'adhésion. Malheureusement, la majeure partie du processus est gérée par l'arrière du site et nous souhaitons idéalement éloigner les utilisateurs de la zone d'administration. Ainsi, au cours de cette série en trois parties, nous allons placer ce processus au début du site, en apportant une personnalisation et en le stylant en cours de route..

À la fin de la série, vous devriez avoir un site où les gens peuvent s'inscrire, se connecter et éditer leurs propres détails de compte. Comme ce sujet est si vaste, nous ne pourrons pas tout couvrir, mais je ferai de mon mieux pour vous donner une base solide pour un site d'adhésion..

En bref, voici à quoi s'attendre sur la série:

• Partie un: Formulaires d'inscription et de connexion
• Deuxième partie: Ajout de champs personnalisés au formulaire d'inscription
• Partie trois: Développer une section "profil utilisateur"

Avant de commencer, il existe un bon argument pour que ce code soit créé sous forme de plugin. Après tout, il est très fonctionnel. Mais à cause de la quantité de "thématisation"Nous ferons, il est tout à fait raisonnable que le code soit logé dans notre thème.  

Creusons dedans

En tant que développeur WordPress, j'utilise Sage comme thème de démarrage. Je vais donc développer en utilisant cela. Si vous n'avez jamais utilisé Sage (auparavant connu sous le nom de Roots), il faut apprendre un peu en utilisant Bower et Gulp. Vous devez donc avoir une certaine expérience de ces techniques. Cela dit, vous pouvez facilement appliquer les principes ici à n’importe quel thème. Il y a beaucoup plus à dire sur les thèmes de départ, mais gardons cela pour une autre fois.

Alors, sans plus attendre, passons à la section inscription de votre site. Il y a fondamentalement deux approches, et j'ai essayé les deux. La première consiste à développer un formulaire personnalisé et à traiter vous-même l'enregistrement, et la seconde consiste à étendre les formulaires d'inscription et de connexion en natif. Je préfère ce dernier, et voici pourquoi: le natif est toujours meilleur, il est plus facile à entretenir et il y a beaucoup moins de pièces en mouvement.

Un inconvénient de l'utilisation des formulaires natifs pour la connexion et l'enregistrement est que vous obtenez les URL natives: http://AnExampleDomain.com/wp-admin et http://AnExampleDomain.com/login/?register.

Ne vous inquiétez pas, car il existe des moyens de les réécrire, il ne sera donc pas évident que ce soit un site WordPress.

Mettre notre maison en ordre  

J'aime garder une maison blanche, alors dans mon functions.php, je vais inclure un fichier appelé admin.php qui contiendra toutes nos fonctions liées à l'administration. Le code ci-dessous (ligne 12) indique comment inclure le fichier si vous utilisez le thème Sage WP Starter..  

Si vous n'utilisez pas Sage, vous pouvez simplement utiliser quelque chose comme: 
require_once Locate_template ('/lib/admin.php');
Note de côté: Ce n'est pas lié à ce sujet, mais je vous conseillerais d'avoir plusieurs inclus dans votre functions.php, puis de coder dans les fichiers respectifs. Il garde les fichiers plus propres et lisibles. 
Nous conserverons nos ressources administratives (CSS et images) dans un répertoire séparé. admin annuaire. Ceci est facultatif, mais pensez à changer votre chemin lorsque vous référencez ces fichiers si vous utilisez une structure différente..  
Commençons par le CSS
Nous voulons remplacer les styles que WordPress a appliqués aux pages de connexion et d’enregistrement..
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
Pour ce faire, nous devons inclure une feuille de style dans notre thème. Pour cela, WordPress utilise la fonction wp_enqueue_style..
Il est donc prévu de charger une feuille de style différente pour chaque formulaire. Pour ce faire, nous allons vérifier le paramètre GET passé et charger le style respectif. Si vous pensez "Qu'est-ce que c'est qu'un paramètre GET?", Alors ne vous inquiétez pas. C'est fondamentalement l'URL. C’est tout ce que vous devez vraiment savoir pour savoir ce que nous faisons.. 
La logique est donc la suivante: si l'URL est x, chargez la feuille de style x, et si l'URL est y, chargez la feuille de style y. Donc, créez un fichier admin.php et copiez-y ce code, puis enregistrez-le dans le lib dossier.  
Nous utilisons l'action login_head ici pour charger nos styles sur la page de connexion. Cette action est particulièrement conçue à cet effet. Si vous n'êtes pas familier avec les actions et les filtres dans WordPress, je vous conseillerais de passer un peu de temps à les apprendre. Ils sont des piliers du développement WordPress.  
Maintenant pour le CSS lui-même. Afin de rester dans le cadre de ce tutoriel, nous allons juste écrire du CSS à la vanille. Pas de moins ou Sass. Le DOM ne nous donne pas vraiment beaucoup à nous attarder sur ces pages, nous devons donc être un peu rusé. 
Pour ajouter des styles de type en-tête et pied de page, utilisons les pseudo-éléments avant et après. J'ai récupéré une image sur http://unsplash.com pour l'arrière-plan de notre page de connexion. C'est une excellente ressource mais manque de capacité de recherche. Heureusement, Arthur Weill a créé un outil pour rechercher les images..
Vous pouvez récupérer ou afficher les fichiers CSS ci-dessous:
 
 Formulaire de connexion CSS
 
 
 Formulaire d'inscription CSS
 
 
Ce CSS sert uniquement de guide. Les points principaux sont:
 
Pour obtenir un en-tête / pied de page, utilisez avant et après pseudo-éléments.
 
Utilisez les requêtes des médias pour vous assurer que les formulaires peuvent être réduits facilement. Vous voudrez peut-être qu'ils soient utilisés dans une iframe / modal ou qu'ils se connectent à partir d'une tablette ou d'un téléphone.
 
Quelques finitions
Le logo sur nos pages renvoie à http://wordpress.org, ce qui n’est pas idéal. Heureusement, WordPress a un filtre pratique que nous pouvons utiliser pour changer cela, login_headerurl. Nous allons donc inclure cet extrait dans notre admin.php.
Une autre chose est que sur notre page d'inscription, il y a un peu de texte d'introduction. Ce n'est pas très informatif: "S'inscrire sur ce site". Modifions cela aussi. Là encore, il existe une action (login_message) à connecter et à modifier. Ce n'est pas aussi simple que le filtre précédent, mais en utilisant la fonction PHP strpos, nous pouvons vérifier certaines copies ("Registre") puis renvoyer notre copie modifiée à la place. 
'. $ register_intro. '
';  else return $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
Enfin, changeons ces URL. Il y a beaucoup de façons de le faire. Vous pouvez utiliser .htaccess, mais j'aime bien utiliser iThemes Security Plugin. Dans les paramètres, vous pouvez modifier les URL de votre zone d'administration. J'ai changé le mien en /s'identifier. Il y a beaucoup d'autres choses formidables que vous pouvez faire avec le plugin, je vous conseille donc de le vérifier.
Et après?
Nous sommes bien partis pour notre site d'adhésion. Dans la deuxième partie, nous verrons comment ajouter des méta-champs personnalisés à notre formulaire d’inscription et commenter très brièvement comment personnaliser les courriels envoyés depuis notre site. J'espère que ce tutoriel était facile à suivre. Tous les commentaires, questions et commentaires sont les bienvenus.
Choses à noter
Remarque: si vous téléchargez le code à partir du référentiel GitHub, il inclut tous les fichiers pour que votre thème soit opérationnel. L'idée est que vous pouvez récupérer le dépôt et exécuter les commandes Gulp et Bower nécessaires et vous serez absent! Si vous souhaitez uniquement les fichiers contenant du code spécifique à cette série, les fichiers sont répertoriés ci-dessous.. 
 
Tous les fichiers du répertoire admin  
 
lib / admin.php 
 
lib / membership.php 
 
template-user-profile.php
 
templates / header.php 
 



		
			
	   
	




Code