Slik utvikler du et medlemssted med WordPress Del 1

WordPress sendes allerede med masse gode ting for å lage et medlemskapsside. Dessverre håndteres det meste av prosessen gjennom baksiden av nettstedet, og ideelt sett ønsker vi å holde brukere vekk fra administrasjonsområdet. Så over denne tredelte serien vil vi flytte denne prosessen til forsiden av nettstedet, kaste inn noen tilpasninger og stylere den opp underveis.

På slutten av serien bør du ha et nettsted der folk kan registrere seg, logge inn og redigere sin egen kontoinformasjon. Siden det er så stort tema, vil vi ikke kunne dekke alt, men jeg vil gjøre mitt beste for å gi deg et solid grunnlag for et medlemskaps nettsted.

I et nøtteskall er dette hva man kan forvente over serien:

• Del en: Registrering og innlogging skjemaer
• Del to: Legge til egendefinerte felt i registreringsskjemaet
• Del tre: Utvikling av en "brukerprofil" -seksjon

Nå, før vi starter, er det et godt argument for at denne koden blir laget som et plugin - det er jo ganske funksjonelt. Men på grunn av mengden av "theming"Vi skal gjøre, det er helt fornuftig at koden skal bli plassert i vårt tema.  

La oss grave inn

Som en WordPress-utvikler bruker jeg Sage som startetema, så jeg skal utvikle med det. Hvis du ikke har brukt Sage (tidligere kjent som Roots) før, er det en liten læringskurve som den bruker Bower and Gulp, så du må ha litt erfaring med å bruke dem. Etter å ha sagt alt det, kan du enkelt bruke prinsippene her til noe tema. Det er mye mer å si om starterstemaer, men la oss lagre det for en annen gang.

Så uten ytterligere forsinkelser, la oss komme inn på registreringsdelen av nettstedet ditt. Det er i utgangspunktet to tilnærminger, og jeg har prøvd begge. Den første er å utvikle en egendefinert skjema og behandle registreringen selv, og den andre innebærer å utvide de opprinnelige registrerings- og påmeldingsskjemaene. Jeg foretrekker sistnevnte, og her er hvorfor: Innfødte er alltid bedre, det er lettere å vedlikeholde, og det er mange mindre bevegelige deler.

En ulempe ved bruk av de innfødte skjemaene for pålogging og registrering er at du får de opprinnelige nettadressene: http://AnExampleDomain.com/wp-admin og http://AnExampleDomain.com/login/?register.

Ikke bekymre deg, fordi det er måter å omskrive dem, så det kommer ikke til å være åpenbart det er et WordPress-nettsted.

Å få huset vårt i orden  

Jeg liker å holde et rent hus, så i mine funksjoner.php skal jeg inkludere en fil som heter admin.php som inneholder alle våre adminrelaterte funksjoner. Koden under (linje 12) er hvordan du vil inkludere filen hvis du bruker Sage WP Starter Theme.  

Hvis du ikke bruker Sage, kan du bare bruke noe som: 
require_once locate_template ('/lib/admin.php');
Side notat: Dette er ikke relatert til dette emnet, men jeg anbefaler at du har flere inkludert i dine funksjoner.php og deretter koding i de respektive filene. Det holder filene renere og lesbare. 
Vi vil holde våre admin-eiendeler (CSS og bilder) i en egen admin katalogen. Dette er valgfritt, men husk å endre banen når du refererer til disse filene hvis du bruker en annen struktur.  
La oss starte med CSS
Vi ønsker å tilsidesette stilene som WordPress har brukt på innloggingen og registrer sider.
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
For å gjøre dette må vi inkludere et stilark i vårt tema. Måten å gjøre dette på i WordPress, er å bruke funksjonen wp_enqueue_style.
Så planen er å laste inn et annet stilark for hver form. For å gjøre dette vil vi sjekke GET-parameteren som er gått og laste den respektive stilen. Hvis du tenker, "Hva i helvete er en GET-parameter?", Så ikke bekymre deg. Det er egentlig nettadressen. Det er alt du virkelig trenger å vite for hva vi gjør. 
Så logikken er: hvis nettadressen er x, last inn x stilark, og hvis nettadressen er y, legg inn y stilark. Så opprett en admin.php-fil og kopier denne koden til den, og lagre den deretter i lib mappe.  
Vi bruker login_head-handlingen her for å laste inn våre stiler på påloggingssiden. Denne handlingen er spesielt designet for dette formålet. Hvis du ikke er kjent med handlinger og filtre i WordPress, anbefaler jeg at du spenderer litt tid på å lære om dem. De er stolper av WordPress-utvikling.  
Nå for CSS selv. For å holde innenfor omfanget av denne opplæringen, vil vi bare skrive vanilje CSS. Nei MINDRE eller SASS. DOM gir oss ikke mye til å gjenkjenne på disse sidene, så vi må være litt slitne. 
For å legge til stiler for topptekst og bunntekst, la oss bruke pseudoelementene før og etter. Jeg har tatt et bilde fra http://unsplash.com for bakgrunnen til vår påloggingsside. Det er en stor ressurs, men mangler søkemulighet. Heldigvis har Arthur Weill laget et verktøy for å søke i bildene.
Du kan få tak i eller se CSS-filene nedenfor:
 
 Logg inn skjema CSS
 
 
 Registrer skjema CSS
 
 
Dette CSS fungerer bare som en veiledning. Hovedpoengene er:
 
For å oppnå en header / bunntekst, bruk før og etter pseudo elementer.
 
Bruk medieforespørsler for å sikre at skjemaene kan skaleres pent. Du vil kanskje at de skal brukes i en modal / iframe eller logge inn fra en nettbrett eller telefon.
 
Noen etterbehandlingskrav
Logoen på våre sider lenker til http://wordpress.org, som ikke er ideell. Heldigvis har WordPress et praktisk filter vi kan bruke til å endre det, login_headerurl. Så la oss inkludere denne koden i admin.php.
En annen ting er at på vår registreringsside er det litt introduksjonstekst. Det er ikke veldig informativt: "Registrer deg for dette nettstedet". La oss tweak det også. Igjen er det en handling (login_message) for å koble inn og endre den. Det er ikke så greit som det forrige filteret, men ved hjelp av PHP-funksjonen strpos kan vi sjekke for bestemt kopi ("Registrere") og returner deretter vår endrede kopi i stedet. 
'. $ register_intro. '
';  annet return $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
Og sist men ikke minst, la oss endre disse nettadressene. Det er en rekke måter å gjøre dette på. Du kan bruke .htaccess, men jeg liker å bruke iThemes Security Plugin. Innenfor innstillingene kan du endre nettadressene til administrasjonsområdet ditt. Jeg har forandret meg til /Logg Inn. Det er mange andre flotte ting du kan gjøre med plugin, så jeg anbefaler å sjekke det ut.
Hva blir det neste?
Vi har en god start på vårt medlemssted. I del to vil vi dekke hvordan du legger til tilpassede metafelt i vårt registreringsskjema, og du kan veldig kort ta kontakt om hvordan du tilpasser e-postene som sendes fra nettstedet vårt. Jeg håper denne opplæringen var lett å følge. Eventuelle tilbakemeldinger, spørsmål og kommentarer er velkomne.
Ting å merke seg
Merk: Hvis du laster ned koden fra GitHub-depotet, inneholder den alle filene for å få temaet ditt i gang. Tanken er at du kan ta tak i repo og bare kjøre de nødvendige Gulp and Bower-kommandoene, og du vil være borte! Hvis du bare vil ha filene som inneholder kode som er spesifikk for denne serien, er filene oppført nedenfor. 
 
Alle filene i administrasjonsmappen  
 
lib / admin.php 
 
lib / membership.php 
 
mal-user-profile.php
 
templates / header.php 
 



		
			
	   
	




Kode