Hur man utvecklar en medlemsplats med WordPress Del 1

WordPress skickar redan med massor av bra grejer för att skapa en medlemskapswebbplats. Tyvärr hanteras huvuddelen av processen genom baksidan av webbplatsen, och helst vill vi hålla användarna borta från adminområdet. Så över den här tredelade serien kommer vi att flytta den här processen till framsidan av webbplatsen, kasta in någon anpassning och ställa upp den längs vägen.

I slutet av serien borde du ha en webbplats där folk kan registrera sig, logga in och redigera sina egna kontouppgifter. Eftersom det är så stort ämne kommer vi inte att kunna täcka allt, men jag gör mitt bästa för att ge dig en solid grund för ett medlemskapswebbplats.

I ett nötskal, det här är vad man kan förvänta sig över serien:

• Del ett: Registrerings- och inloggningsformulär
• Del två: Lägga till anpassade fält till registreringsformuläret
• Del tre: Utveckla en "användarprofil" sektion

Nu, innan vi börjar, finns det ett bra argument för att den här koden görs som ett plugin, trots allt är det ganska funktionellt. Men på grund av mängden "teman"Vi kommer att göra det, det är helt rimligt att koden är inrymd i vårt tema.  

Låt oss gräva in

Som en WordPress-utvecklare använder jag Sage som mitt starttema, så jag utvecklar med det. Om du inte har använt Sage (tidigare känd som Roots) tidigare, finns det en liten inlärningskurva eftersom den använder Bower and Gulp, så du måste ha lite erfarenhet av att använda dem. Med allt detta kan du enkelt tillämpa principerna här på något tema. Det finns mycket mer att säga om startteman, men låt oss spara det för en annan gång.

Så utan vidare fördröjning, låt oss komma in i registreringsdelen av din webbplats. Det finns i princip två tillvägagångssätt, och jag har provat båda. Det första är att utveckla en anpassad blankett och bearbeta registreringen själv, och den andra innebär att de inbyggda registrerings- och inloggningsformulären utökas. Jag föredrar den senare, och här är varför: Inhemsk är alltid bättre, det är lättare att underhålla, och det finns många mindre rörliga delar.

En nackdel om hur du använder de inbyggda formulären för inloggning och registrering är att du får de ursprungliga webbadresserna: http://AnExampleDomain.com/wp-admin och http://AnExampleDomain.com/login/?register.

Oroa dig inte, för det finns sätt att skriva om dem, så det kommer inte att vara uppenbart det är en WordPress-webbplats.

Få vårt hus i ordning  

Jag gillar att hålla ett rent hus, så i mina funktioner.php kommer jag att inkludera en fil som heter admin.php som innehåller alla våra adminrelaterade funktioner. Koden nedan (rad 12) är hur du skulle inkludera filen om du använder Sage WP Starter Theme.  

Om du inte använder Sage kan du bara använda något som: 
require_once locate_template ('/lib/admin.php');
Sidnot: Det här är inte relaterat till det här ämnet, men jag rekommenderar att du har flera innehåller i dina funktioner.php och sedan kodning i respektive filer. Det håller filerna renare och läsbar. 
Vi kommer att hålla våra administrativa tillgångar (CSS och bilder) i en separat administration katalogen. Detta är valfritt, men kom ihåg att ändra din väg när du hänvisar till dessa filer om du använder en annan struktur.  
Låt oss börja med CSS
Vi vill åsidosätta de stilar som WordPress har tillämpat på inloggningen och registrera sidor.
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
För att göra detta måste vi inkludera ett stilark i vårt tema. Sättet att göra detta i WordPress är att använda funktionen wp_enqueue_style.
Så planen är att ladda ett annat stilark för varje formulär. För att göra detta ska vi kontrollera GET-parametern som passerat och ladda respektive stil. Om du tänker, "Vad i helvete är en GET-parameter?", Oroa dig inte. Det är i princip webbadressen. Det är allt du verkligen behöver veta för det som vi gör. 
Så logiken är: om webbadressen är x, ladda x stilark och om webbadressen är y, fyll y stilark. Så skapa en admin.php-fil och kopiera den här koden till den och spara sedan den i lib mapp.  
Vi använder login_head-åtgärden här för att ladda våra stilar på inloggningssidan. Denna åtgärd är särskilt utformad för detta ändamål. Om du inte känner till handlingar och filter i WordPress rekommenderar jag att du spenderar lite tid på att lära dig om dem. De är pelare av WordPress-utveckling.  
Nu för CSS själv. För att hålla inom ramen för denna handledning, skriver vi bara vanilj CSS. Nej LESS eller Sass. DOM ger oss inte mycket till att gänga på dessa sidor, så vi måste vara lite slagna. 
Om du vill lägga till format för sidhuvud och sidfot, låt oss använda pseudoelementen innan och efter. Jag har tagit en bild från http://unsplash.com för bakgrunden till vår inloggningssida. Det är en stor resurs men saknar sökfunktion. Lyckligtvis har Arthur Weill gjort ett verktyg för att söka efter bilderna.
Du kan ta tag i eller visa CSS-filerna nedan:
 
 Inloggningsformulär CSS
 
 
 Registrera formulär CSS
 
 
Denna CSS fungerar endast som en guide. Huvudpunkterna är:
 
För att uppnå en rubrik / sidfot, använd innan och efter pseudoelement.
 
Använd mediafrågor för att se till att blanketterna kan skala ner snyggt. Du kanske vill att dom ska användas i en modal / iframe eller logga in från en tablett eller telefon.
 
Några avslutande touches
Logotypen på våra sidor länkar till http://wordpress.org, vilket inte är idealiskt. Lyckligtvis har WordPress ett användbart filter som vi kan använda för att ändra det, login_headerurl. Så låt oss inkludera det här snippet i vår admin.php.
En annan sak är att på vår registreringssida finns lite introduktionstext. Det är inte särskilt informativt: "Registrera dig för den här webbplatsen". Låt oss tweak det också. Återigen finns en åtgärd (login_message) för att koppla in och ändra den. Det är inte så enkelt som föregående filter, men med PHP-funktionen strpos kan vi kontrollera efter viss kopia ("Registrera") och returnera sedan vår ändrade kopia istället. 
'. $ register_intro. '
';  annars returnera $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
Och sist men inte minst, låt oss ändra de webbadresser. Det finns en massa sätt att göra detta. Du kan använda .htaccess, men jag gillar att använda iThemes Security Plugin. Inom inställningarna kan du ändra webbadresserna till ditt administratörsområde. Jag har ändrat min till /logga in. Det finns många andra bra saker du kan göra med plugin, så jag rekommenderar att du checkar ut det.
Vad kommer härnäst?
Vi har en bra start för vår medlemsplats. I del två kommer vi att täcka hur man lägger till anpassade meta-fält i vår registreringsblankett och mycket kort närmare hur man anpassar de e-postmeddelanden som skickas från vår webbplats. Jag hoppas att denna handledning var lätt att följa. Någon feedback, frågor och kommentarer är välkomna.
Saker att notera
Observera: om du hämtar koden från GitHub-arkivet ingår den alla filer för att få ditt tema igång. Tanken är att du kan ta tag i repo och bara köra de nödvändiga Gulp and Bower-kommandon och du kommer vara borta! Om du bara vill ha de filer som innehåller kod som är specifika för denna serie listas filerna nedan. 
 
Alla filer i admin-katalogen  
 
lib / admin.php 
 
lib / membership.php 
 
mall-user-profile.php
 
templates / header.php 
 



		
			
	   
	




Koda