Hoe een lidmaatschapssite met WordPress te ontwikkelen deel 1

WordPress wordt al geleverd met heel veel goede dingen om een ​​lidmaatschapssite te maken. Helaas wordt het grootste deel van het proces afgehandeld via de achterkant van de site en idealiter willen we gebruikers weghouden van het admingebied. Dus over deze driedelige serie zullen we dit proces naar de voorkant van de site verplaatsen, een beetje maatwerk toevoegen en het onderweg opmaken.

Aan het einde van de serie zou je een site moeten hebben waar mensen zich kunnen aanmelden, inloggen en hun eigen accountgegevens kunnen bewerken. Omdat het zo'n breed onderwerp is, kunnen we niet alles behandelen, maar ik zal mijn best doen om u een solide basis te geven voor een lidmaatschapssite.

In een notendop, dit is wat je kunt verwachten van de serie:

• Deel een: Registratie- en aanmeldingsformulieren
• Deel twee: Aangepaste velden toevoegen aan het registratieformulier
• Deel drie: Een "gebruikersprofiel" -sectie ontwikkelen

Voordat we beginnen, is er een goed argument voor het maken van deze code als plug-in - het is tenslotte vrij functioneel. Maar vanwege de hoeveelheid "thematisering"We zullen het doen, het is volkomen redelijk dat de code in ons thema wordt gehuisvest.  

Laten we graven

Als WordPress-ontwikkelaar gebruik ik Sage als mijn startthema, dus ik zal het daarmee ontwikkelen. Als je Sage (eerder bekend als Roots) nog niet eerder hebt gebruikt, is er een lichte leercurve omdat het gebruik maakt van Bower en Gulp, dus je moet wat ervaring hebben om deze te gebruiken. Dat gezegd hebbende, zou je de principes hier eenvoudig kunnen toepassen op elk thema. Over startersthema's valt nog veel meer te zeggen, maar laten we dat voor een andere keer bewaren.

Dus zonder verdere vertraging gaan we naar het registratiegedeelte van uw site. Er zijn in principe twee benaderingen en ik heb het allebei geprobeerd. De eerste is om een ​​aangepast formulier te ontwikkelen en de registratie zelf te verwerken, en de tweede omvat het uitbreiden van de standaardaanmeldings- en aanmeldingsformulieren. Ik geef de voorkeur aan het laatste en daarom: native is altijd beter, het is gemakkelijker te onderhouden en er zijn veel minder bewegende delen.

Een nadeel van het gebruik van de oorspronkelijke formulieren voor aanmelding en registratie is dat u de native URL's krijgt: http://AnExampleDomain.com/wp-admin en http://AnExampleDomain.com/login/?register.

Geen zorgen, want er zijn manieren om die te herschrijven, dus het zal niet voor de hand liggen dat het een WordPress-site is.

Ons huis in orde brengen  

Ik hou ervan om een ​​schoon huis te houden, dus in mijn functions.php ga ik een bestand opnemen met de naam admin.php dat al onze admin-gerelateerde functies zal bevatten. De onderstaande code (regel 12) is de manier waarop u het bestand zou opnemen als u het Sage WP Starter-thema gebruikt.  

Als u Sage niet gebruikt, kunt u zoiets als gebruiken: 
require_once locate_template ('/lib/admin.php');
Kanttekening: Dit is niet gerelateerd aan dit onderwerp, maar ik raad aan om meerdere functies in uw functions.php op te nemen en vervolgens in de respectieve bestanden te coderen. Het houdt de bestanden schoner en leesbaar. 
We houden onze admin-items (CSS en afbeeldingen) gescheiden beheerder directory. Dit is optioneel, maar vergeet niet om uw pad te wijzigen wanneer u naar deze bestanden verwijst als u een andere structuur gebruikt.  
Laten we beginnen met de CSS
We willen de stijlen overschrijven die WordPress heeft toegepast op de login- en registerpagina's.
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
Dus om dit te doen, moeten we een stylesheet opnemen in ons thema. De manier om dit in WordPress te doen is om de functie wp_enqueue_style te gebruiken.
Het is dus de bedoeling om voor elk formulier een ander stylesheet te laden. Hiertoe controleren we de GET-parameter die is doorgegeven en laadt u de respectieve stijl. Als je denkt: "Wat is in godsnaam een ​​GET-parameter?", Maak je dan geen zorgen. Het is eigenlijk de URL. Dat is alles wat u echt moet weten omwille van wat we doen. 
Dus de logica is: als de URL x is, laadt u x-stijlpagina en als de URL y is, laadt u y-stijlpagina. Dus maak een admin.php bestand en kopieer deze code erin, en sla het op in de lib map.  
We gebruiken de login_head-actie hier om onze stijlen op de inlogpagina te laden. Deze actie is speciaal voor dit doel ontworpen. Als u niet bekend bent met acties en filters in WordPress, raad ik u aan wat tijd te besteden aan het leren ervan. Het zijn pijlers van de ontwikkeling van WordPress.  
Nu voor de CSS zelf. In het kader van deze tutorial zullen we alleen vanille CSS schrijven. Niet MINDER of Sass. De DOM geeft ons op deze pagina's niet echt veel ophef, dus moeten we een beetje sluw zijn. 
Om kop- en voetteksttypen toe te voegen, gebruiken we de pseudo-elementen voor en na. Ik heb een afbeelding van http://unsplash.com gepakt voor de achtergrond van onze inlogpagina. Het is een geweldige bron maar mist zoekmogelijkheden. Gelukkig heeft Arthur Weill een tool gemaakt om de afbeeldingen te doorzoeken.
U kunt onderstaande CSS-bestanden bekijken of bekijken:
 
 Login formulier CSS
 
 
 Registreer formulier CSS
 
 
Deze CSS dient slechts als leidraad. De belangrijkste punten zijn:
 
Gebruik om een ​​koptekst / voettekst te maken voor en na pseudo elementen.
 
Gebruik mediaquery's om ervoor te zorgen dat de formulieren goed kunnen worden verkleind. U wilt misschien dat ze worden gebruikt in een modaal / iframe of om in te loggen vanaf een tablet of telefoon.
 
Sommige afwerkingen
Het logo op onze pagina's linkt naar http://wordpress.org, wat niet ideaal is. Gelukkig heeft WordPress een handig filter dat we kunnen gebruiken om dat te veranderen, login_headerurl. Laten we dit fragment opnemen in onze admin.php.
Een ander ding is dat er op onze registratiepagina een beetje introductietekst is. Het is niet erg informatief: "Registreer voor deze website". Laten we dat ook aanpassen. Ook hier is er een actie (login_message) om in te haken en te wijzigen. Het is niet zo eenvoudig als het vorige filter, maar met behulp van de PHP-functiestrpi kunnen we controleren op bepaalde exemplaren ("Registreren") en retourneer vervolgens ons aangepaste exemplaar. 
'. $ register_intro. '
';  else return $ -bericht;  add_action ('login_message', 'tutsplus_register_intro_edit');
En last but not least, laten we die URL's wijzigen. Er zijn een aantal manieren om dit te doen. Je zou .htaccess kunnen gebruiken, maar ik gebruik graag iThemes Security Plugin. Binnen de instellingen kunt u de URL's wijzigen in uw admin-gebied. Ik heb de mijne veranderd naar /Log in. Er zijn nog veel meer geweldige dingen die je kunt doen met de plug-in, dus ik raad aan het uit te zoeken.
Wat is het volgende?
We beginnen aan een goede start voor onze lidmaatschapssite. In deel twee bespreken we hoe aangepaste metavelden aan ons registratieformulier kunnen worden toegevoegd en kunnen we heel kort ingaan op het aanpassen van de e-mails die van onze site worden verzonden. Ik hoop dat deze tutorial gemakkelijk te volgen was. Alle feedback, vragen en opmerkingen zijn welkom.
Dingen om op te letten
Let op: als u de code downloadt uit de GitHub-repository die het bevat alle bestanden om je thema in de lucht te krijgen. Het idee is dat je de repo kunt pakken en gewoon de nodige Gulp en Bower-opdrachten kunt uitvoeren en dat je weg bent! Als u alleen de bestanden wilt die code bevatten die specifiek zijn voor deze serie, worden de bestanden hieronder vermeld. 
 
Alle bestanden in de beheerdersdirectory  
 
lib / admin.php 
 
lib / membership.php 
 
template-user-profile.php
 
templates / header.php 
 



		
			
	   
	




Code