Bring medlemskapsprosessen til forsiden av nettstedet ditt

WordPress leveres med muligheten til å legge til brukere, enten manuelt eller via registrering. Dette inkluderer evnen til å tildele ulike roller og evner. Men oftere enn ikke vil du ikke at brukerne skal bli utsatt for WordPress-backend. I denne veiledningen viser jeg deg hvordan du oppretter et egendefinert registreringsskjema på forsiden av nettstedet ditt, samt et tilpasset profilskjema. Brukere vil også motta egendefinerte e-poster med hvert trinn i registreringsprosessen. Vær oppmerksom på at denne opplæringen ikke vil dekke medlemsbetalinger.


Noen bakgrunn og hva vi skal dekke

Vi bruker TwentyEleven-temaet der vi skal redigere functions.php og header.php. Noen mennesker foretrekker kanskje å bruke BuddyPress til en oppgave som dette, og det er kult, men jeg føler meg som om hvorfor har alle disse funksjonene hvis du ikke skal bruke dem.

Dette er hva vi skal gjøre

  • Installere nødvendige plugins
  • Konfigurere plugins
  • Tilpasse våre menyer
  • Opprette en tilpasset profilside
  • Opprette en egendefinert registreringsside
  • Opprette egendefinerte e-poster for hvert trinn i registreringsprosessen

Det er litt av en lang prosess, så ta en kaffe eller øl og knekke ned.


Trinn 1 Få pluginene

Ok, så første ting først, la oss få pluginene vi trenger. Jeg legger til dem ved hjelp av WordPress-grensesnittet, men hvis du foretrekker det, kan du bruke linkene under for å laste ned og installere dem manuelt.

  • Tema Min pålogging
  • Tema Min Profil
  • WP Better Emails


Trinn 2 Konfigurer

"Kontroller at du har" Alle som kan registrere seg "merket under Generelle innstillinger"

Tid til å konfigurere våre plugins, men før det skjønner at du har Alle kan registrere seg krysset under Innstillinger -> Generelt.

Ok, nå på plugin-konfigurasjonen, kan vi begynne med:

Tema Min pålogging - Grunnleggende oppsett

Tema Min pålogging lager en "login / logout" -side en gang installert, og som standard legger den til pagelisten din. For mer kontroll, la oss sette det opp manuelt:

  1. Gå til Innstillinger -> Tema Min pålogging og fjern avmerkingen "Show in Pagelist"
  2. Klikk på "Lagre endringer"
  3. Navigere til Utseende -> Menyer og legg det til i menyen din (hvis temaet ditt støtter mer enn en meny, kan du sette det hvor som helst) *

*Ikke sikker på hvordan du bruker menyen? Les her

OK, så nå, hvis du hopper til forsiden av nettstedet ditt, vil du legge merke til at du har et innloggings- / utloggingsmeny. Det burde si "Logout" som du er logget inn. Hyggelig en!

Men la oss si at du ikke vil ha det i menyen din? Ikke noe problem, du kan fjerne den fra menyen din og legge den til som en widget. Heldigvis har Jeff Farthing (skaperen av plugin) inkludert en grei widget med mange alternativer. De er alle ganske selvforklarende, så jeg vil ikke gå gjennom den. Bare hodet til Utseende -> Widgets og dra Theme My Login-widgeten til ønsket widget-område. Jeg foretrekker det i menyen min, men du kan ha begge.

Nå kan vi sette opp noen av modulene.

Tema Min pålogging - Moduloppsett

Gå tilbake til Innstillinger -> Tema Min Logg inn -> Moduler og aktiver følgende:

  • Aktiver egendefinert e-post
  • Aktiver tilpasset omadressering
  • Aktiver sikkerhet
  • Aktiver temaprofiler
  • Aktiver brukermodering

Flott. La oss nå konfigurere de modulene som starter med E-post. I utgangspunktet må du opprette egendefinert e-postinnhold for hver fase av medlemskapsprosessen (Ny bruker, Hent passord, Tilbakestill passord, Brukeraktivering, Brukergodkjenning, Brukeravvisning). Tydeligvis er dette opp til deg hva du skriver, men sørg for:

  • For "Fra E-post", bruk noe som [email protected]
  • Du vil at "E-postformat" skal være Vanlig tekst.

Det er en god ide å benytte seg av e-postvariablene - %Brukerinnlogging%, % User_email%, % User_pass% - men ikke bekymre deg for mye om nutting det ut akkurat nå. Vi sender noen tester, slik at du kan polere det senere.

Ok, klar for noen omdirigering magi? Som administrator vil du fremdeles bli tatt til backend / dashbordet når du logger inn, så du vil forlate administratorrollen som den er (Ikke lås deg ut). Jeg vil at brukerne mine skal bli tatt til profilen deres når de logger på, så jeg skal endre alle de andre rollene. Så for "Logg inn":

  • Bruk alternativet "egendefinert plassering" og skriv inn noe som http: // dittdomene / profile
    (forutsatt at din permalinkstruktur er /% Kategori% /% postname% /)

og for "Logg ut":

  • Jeg setter "Referer". På den måten når brukerne logger ut, blir de på siden de var på.

Til Sikkerhet Jeg skal bare forlate som det er, men det er verdt å se om disse innstillingene passer deg. Endelig moderasjon. Når vi kjører et nettsted som er gratis å bli med, velger du E-postbekreftelse til Bruker moderasjon.

Ok, la oss bruke noen profil godhet.

Tema Min Profil

Vi skal ha en side for å huse vår brukerprofil i så hodet til Sider -> Legg til nytt. Gi siden din en tittel, noe som "Profil", og lim inn denne shortcode [tema-min profil] i innholdet (sørg for at du er i HTML redigeringsmodus). Legg merke til sidens ID og publiser.

Gå til Innstillinger -> Tema Min profil. Bruk disse innstillingene, men vær forsiktig så du ikke låser deg ut av baksiden:

  1. Skriv inn siden-IDen til den nyopprettede profilen "Profil"
  2. Forsikre Vis i pagelisten "Aldri" er valgt (vi bruker WP 3-menyer)
  3. Bruk tema-min-profil.css er krysset.
  4. For malinnstillingene, se bildet nedenfor:

Lagre endringene.


Trinn 3 Sette opp menyene

I utgangspunktet bruker vi to menyer: en for påloggede brukere, og en for utmeldte brukere eller ikke-medlemmer. Så åpne FTP-programmet og last ned header.php fra temaet ditt. Vi vil legge til en if-setning til koden som setter opp menyen. Det er linje 118 hvis du bruker TwentyEleven.

Erstatt dette:

  'primær')); ?>

Med dette:

   'brukermeny', 'items_wrap' => '
    % 3 $ s
',' container_class '=>' meny-meny-container '));?> 'hovedmeny', 'items_wrap' => '
    % 3 $ s
',' container_class '=>' meny-meny-container '));?>

Hvis du vil, kan du lese mer om wp_nav_menu i WordPress Codex.

Ok, nå får du functions.php fil og endre linje 101 i header.php for å gjenspeile oppdateringene.

Erstatt dette:

 register_nav_menu ('primær', __ ('Primærmeny', 'tjuefems'));

Med dette:

 register_nav_menus (array ('hovedmeny' => __ ('hovedmeny'), 'brukermeny' => __ ('brukermeny')));

Last opp disse filene til temakatalogen din og hopp til WordPress-backend. La oss sette opp menyene, gå til Utseende -> Menyer. Du bør nå ha to menyer tilgjengelig for deg: "hovedmeny" og "brukermeny", aktiver begge.

  • Under hovedmenyen har du "Login" -siden
  • Under brukermenyen har "Innloggings" og "Profil" -sider

Lagre endringene og la oss komme inn i noen egendefinerte e-postmaler.


Trinn 4 WP Bedre e-post - Oppsett

Alrighty tid for å få noen e-postadresser som skjer, så hopp til Innstillinger -> WP Better Emails. For "Navn" og "E-postadresse" -inngangene bruker du noe som Bloggnavn og [email protected]. Ok, nå, rull ned og send deg en forhåndsvisning. Hopp over til e-postklienten din, og du bør ha en fin fin e-post som venter på deg. Ikke dårlig, men lar oss tilpasse det litt. Gå tilbake til WordPress og kopier all den HTML og lim den inn i din favoritt tekstredigerer. Det er virkelig opp til deg hvor mye du vil redigere dette. La oss holde det enkelt og bare endre logoen. Så opprett et bilde 500px bredt ved 100px høye. Last opp det til serveren din og kopier banen.

På linje 22 i HTML erstatter % BLOG_NAME% med bildet ditt, noe som dette:

 

Send nå en annen test, og du burde ha noe slikt:


Trinn 5 Egendefinert Registreringsside

Tingene går i form, men du bruker registerlinken under påloggingsskjemaet for å registrere deg. Nedtur. Jeg vil at "register" skal være en del av menyen min. Så gå over til Utseende -> Menyer og legg til et nytt menyelement i "hovedmenyen" ved hjelp av panelet "Tilpassede koblinger". Jeg har kalt min "Registrer deg" og nettadressen er http://yourdomain.com/login?action=register (forutsatt at dine permalinks er satt til% Kategori% /% postname%).

Flott så nå har vi en "påmelding" -fanen som tar folk til registreringssiden. Fint riktig? Men la oss si at du vil inkludere noen egendefinerte felt? Som fornavn, nettside og postnummer.

Tema Min pålogging sendes med noen malformularer. Så du kan laste ned skjemaene wp-innhold -> plugins -> tema-my-login -> maler og rediger dem og last opp til temakatalogen din. Men la oss gjøre det med vår functions.php. Så last ned din functions.php og lim inn dette etter all eksisterende kode.

 / * ------------------------------------------------ ----------------------------------- * / / * Legge til obligatoriske felt på registreringssiden / * - -------------------------------------------------- ------------------------------- * / add_action ('register_form', 'show_this'); ADD_ACTION ( 'register_post', '' check_fields, 10,3); add_action ('user_register', 'register_extra_fields'); funksjon show_this () ?> 

legg til ('empty_realname', "FEIL: Vennligst skriv inn fornavnet ditt "); else $ website = $ _POST ['first_name']; global $ nettside; hvis ($ _POST ['website'] ==") $ errors-> legg til ('empty_realname', "FEIL: Vennligst skriv inn navnet på nettstedet ditt "); else $ website = $ _POST ['website']; global $ postnummer; hvis ($ _POST ['postnummer'] ==") $ errors-> add 'empty_realname', 'FEIL: Vennligst skriv inn postnummeret ditt "); ellers $ postnummer = $ _POST ['postnummer']; funksjonsregister_extra_fields ($ user_id, $ password =" ", $ meta = array ()) update_user_meta ($ user_id, ' first_name ', $ _POST [' first_name ']); update_user_meta ($ user_id,' website ', $ _POST [' nettsted ']); update_user_meta ($ user_id,' postnummer ', $ _POST [' postnummer '])

Ok, så du vil kanskje redigere det som passer deg. Her er en grunnleggende sammenbrudd:

  • Den første funksjonen ( show_this ) sier sette inn følgende felt i skjemaet
  • Den andre funksjonen ( check_fields ) sjekker om feltene er fylt ut og spytter ut feil om nødvendig (grunnleggende validering)
  • Den tredje funksjonen ( register_extra_fields ) oppdaterer brukerens data - samt brukerens profil

Og for en bonus la oss endre ordet "registrere" til "bli med":

 / * ------------------------------------------------ ----------------------------------- * / / * Endre 'register' til 'bli med' / * - -------------------------------------------------- -------------------------------- * / funksjon tml_title_filter ($ title, $ action) if ($ action == 'register') returnere __ ('join'); returner $ title;  add_filter ('tml_title', 'tml_title_filter', 10, 2);

Trinn 6 Tilpasset profilside

Som de fleste mennesker baffles det meg hvorfor WordPress har ting som AIM og Jabber i profilfeltene ... så kan vi bli kvitt dem! Lim inn følgende kode under din nåværende functions.php kode.

 / * ------------------------------------------------ ----------------------------------- * / / * Reomve feilds fra profil / * ----- -------------------------------------------------- ---------------------------- * / funksjon extra_contact_info ($ contactmethods) unset ($ contactmethods ['aim']); ikke-fikserte ($ contactmethods [ 'yim']); ikke-fikserte ($ contactmethods [ 'Jabber-']); $ contactmethods ['postcode'] = 'Postkode (påkrevd)'; returnere $ contactmethods;  add_filter ('user_contactmethods', 'extra_contact_info');

Trinn 7 Test og stil

Okay, okay bra! (Kevin Hart stil) La oss teste dette! Logg ut av WordPress og hopp til forsiden av nettstedet ditt. Klikk på "Registrer" og gå gjennom prosessen.

Vær oppmerksom på eventuelle endringer du må gjøre, for eksempel e-postmeldinger, etc., bruk deretter dem og test om til du er glad.

Nå kan du kanskje stile det litt, og heldigvis er det enkelt å bruke noen passende navngitte stilark som er lastet opp til temakatalogen. Du kan laste ned disse for å komme i gang med koblingen "Download Source Files" øverst i denne opplæringen.

Ved å bruke disse stilarkene, sørger du for at CSS ikke overskrives når temaet oppdateres.


Trinn 8 En mer ting

En siste ting, admin baren, la oss forvise det for godt. Legg til koden nedenfor til din functions.php.

 / * ------------------------------------------------ ----------------------------------- * / / * Deaktiver administrasjonslinjen for alle / * ---- -------------------------------------------------- ----------------------------- * / show_admin_bar (false);

Konklusjon

Så du kan se det er ganske enkelt å trekke medlemskapsprosessen til forsiden av nettstedet ditt. Denne metoden er ekstremt fleksibel, og plugin-konfigurasjonen som brukes i denne opplæringen kan variere for å dekke dine behov. Det er også ganske enkelt å ha medlemsspesifikt innhold (prøv å bruke wp-medlemmer). Jeg har hatt suksess ved å bruke dette i kommersielle prosjekter.

Vennligst gi tilbakemelding, eller hvis du har forslag, vil jeg gjerne høre dem, i kommentarene nedenfor.