WordPress wordt geleverd met de mogelijkheid om gebruikers toe te voegen, hetzij handmatig of via registratie. Dit omvat de mogelijkheid om verschillende rollen en mogelijkheden toe te wijzen. Maar vaker wilt u niet dat gebruikers worden blootgesteld aan de WordPress-backend. In deze zelfstudie laat ik u zien hoe u een aangepast registratieformulier op de voorkant van uw site kunt maken, evenals een aangepast profielformulier. Gebruikers ontvangen ook aangepaste e-mails bij elke stap van het registratieproces. Let op, deze tutorial zal geen betrekking hebben op lidmaatschapsbetalingen.
We zullen het TwentyEleven-thema gebruiken waar we de. Zullen bewerken functions.php en de header.php. Sommige mensen geven er misschien de voorkeur aan om BuddyPress te gebruiken voor een taak als deze, en dat is cool, maar ik heb het gevoel dat ik al deze functies heb als je ze niet gaat gebruiken.
Dit is wat we gaan doen
Het is nogal een langdurig proces, dus pak een koffie of bier en knokkel.
Oké, dus eerst de eerste dingen, laten we de plug-ins krijgen die we nodig hebben. Ik zal ze toevoegen met behulp van de WordPress-interface, maar als je wilt, kun je de onderstaande links gebruiken om ze handmatig te downloaden en te installeren.
"Zorg ervoor dat u" Iedereen kan zich aanmelden "aangevinkt onder Algemene instellingen"
Tijd om onze plug-ins te configureren, maar zorg er eerst voor dat u dat wel hebt Iedereen kan registreren aangevinkt onder Instellingen -> Algemeen.
Oké, nu op de plug-in configuratie, laten we beginnen met:
Thema Mijn aanmelding maakt een "login / logout" -pagina eenmaal geïnstalleerd en voegt deze standaard toe aan uw pagelijst. Voor meer controle kunnen we het handmatig instellen:
*Weet je niet zeker hoe je het menu moet gebruiken? Lees hier
Oké, dus als u nu naar de voorkant van uw website springt, ziet u dat u een menu-item Aanmelden / Uitloggen heeft. Het zou "Uitloggen" moeten zeggen terwijl je bent ingelogd. Leuke!
Maar laten we zeggen dat je het niet in je menu wilt? Geen probleem, je kunt het uit je menu verwijderen en als een widget toevoegen. Gelukkig heeft Jeff Farthing (maker van de plug-in) een handige widget met veel opties toegevoegd. Ze zijn allemaal behoorlijk duidelijk, dus ik ga er niet doorheen. Ga gewoon naar Uiterlijk -> Widgets en sleep de My My Login-widget naar het gewenste widget-gebied. Ik geef er de voorkeur aan in mijn menu, maar je zou beide kunnen hebben.
Laten we nu een aantal modules instellen.
Spring terug naar Instellingen -> Thema Mijn aanmelding -> Modules en schakel het volgende in:
Super goed. Laten we nu die modules configureren die beginnen met E-mail. In principe moet u aangepaste e-mailinhoud maken voor elke fase van het lidmaatschapsproces (nieuwe gebruiker, wachtwoord ophalen, wachtwoord resetten, gebruikersactivatie, gebruikersgoedkeuring, weigering van de gebruiker). Uiteraard is dit aan jou wat je schrijft, maar zorg ervoor dat:
Het is een goed idee om gebruik te maken van de e-mailvariabelen - %gebruiker login%
, % User_email%
, %gebruikerspas%
- maar maak je niet al te veel zorgen om het nu perfect in elkaar te zetten. We sturen een paar tests, zodat u deze later kunt oppoetsen.
Oké, klaar voor sommigen Redirection magie? Als beheerder moet u toch naar de backend / dashboard worden geleid wanneer u zich aanmeldt, zodat u de rol Administrator zoals deze wilt laten (sluit uzelf niet af). Ik wil dat mijn gebruikers naar hun profiel worden geleid wanneer ze inloggen, dus ik ga alle andere rollen wijzigen. Dus voor "Inloggen":
en voor "Uitloggen":
Voor Veiligheid Ik ga gewoon weg zoals het is, maar het is de moeite waard om te kijken of die instellingen bij je passen. Tenslotte Met mate. Omdat we een site waarvan u gratis lid bent, gebruiken, kiest u E-mail bevestiging voor Gebruikers moderatie.
Laten we wat profielgoedheid toepassen.
We hebben een pagina nodig om ons gebruikersprofiel in te plaatsen, dus ga hierheen Pagina's -> Nieuw toevoegen. Geef je pagina een titel, zoiets als "Profiel", en plak deze shortcode [theme-my-profile] in de inhoud (zorg ervoor dat je in de HTML-bewerkingsmodus bent). Noteer het pagina-ID en publiceer.
Ga naar Instellingen -> Thema Mijn profiel. Pas deze instellingen toe, maar let op dat u uzelf niet afsluit van de backend:
Sla de wijzigingen op.
In principe gebruiken we twee menu's: één voor ingelogde gebruikers en één voor uitgeschreven gebruikers of niet-leden. Open dus uw FTP-programma en download het header.php van je thema. We willen een if-statement toevoegen aan de code die het menu instelt. Het is regel 118 als u TwentyEleven gebruikt.
Vervang dit:
'primair')); ?>
Hiermee:
'user-menu', 'items_wrap' => '
Als je wilt, kun je meer lezen over wp_nav_menu in de WordPress Codex.
Oké, pak nu de functions.php bestand en verander regel 101 in de header.php om de updates te weerspiegelen.
Vervang dit:
register_nav_menu ('primary', __ ('Primair Menu', 'twentyeleven'));
Hiermee:
register_nav_menus (array ('hoofdmenu' => __ ('Hoofdmenu'), 'gebruikersmenu' => __ ('Gebruikersmenu'),));
Upload deze bestanden nu naar uw themamap en spring naar de WordPress-backend. Laten we de menu's instellen, ga naar Uiterlijk -> menu's. U zou nu twee menu's tot uw beschikking moeten hebben: "hoofdmenu" en "gebruikersmenu", beide activeren.
Sla de wijzigingen op en laten we een aantal aangepaste e-mailsjablonen bekijken.
Al tijd genoeg om aangepaste e-mails te ontvangen, dus ga naar Instellingen -> Betere e-mails van WP. Gebruik voor de ingangen "Naam" en "E-mailadres" zoiets als Blognaam en [email protected]. Oké goed, scroll nu naar beneden en verzend jezelf een voorbeeld. Spring naar uw e-mailclient en u zou een mooie e-mail moeten hebben die op u wacht. Niet slecht, maar laten we het een beetje aanpassen. Spring terug naar WordPress en kopieer al die HTML en plak deze in je favoriete teksteditor. Het is echt aan jou hoeveel je dit wilt bewerken. Laten we het simpel houden en alleen het logo wijzigen. Creëer dus een afbeelding 500px breed bij 100px hoog. Upload het naar uw server en kopieer het pad.
Op regel 22 in de HTML wordt de % BLOG_NAME% met je afbeelding, zoiets als dit:
Stuur nu jezelf een nieuwe test en je zou zoiets als dit moeten hebben:
De dingen krijgen vorm, maar u hebt de registratielink onder het inlogformulier om u te registreren. Jammer. Ik wil dat het "register" deel uitmaakt van mijn menu. Ga dus naar Uiterlijk -> menu's en voeg een nieuw menu-item toe aan het "hoofdmenu" via het paneel "Aangepaste koppelingen". Ik heb de mijne 'Aanmelden' genoemd en de URL is http://yourdomain.com/login?action=register (aangenomen dat uw permalinks zijn ingesteld op% Categorie% /% postname%).
Geweldig dus nu hebben we een tabblad 'Aanmelden' waarmee mensen naar de registratiepagina worden geleid. Mooi toch? Maar laten we zeggen dat u enkele aangepaste velden wilt opnemen? Zoals voornaam, website en postcode.
Thema Mijn aanmelding wordt verzonden met enkele sjabloonformulieren. U kunt dus de formulieren downloaden wp-inhoud -> plug-ins -> thema-mijn-login -> sjablonen en bewerk ze en upload ze naar je themamap. Maar laten we het doen met behulp van onze functions.php. Dus download je functions.php en plak dit na alle bestaande code.
/ * ------------------------------------------------ ----------------------------------- * / / * Toevoegen van verplichte velden aan de registratiepagina / * - -------------------------------------------------- ------------------------------- * / add_action ('register_form', 'show_this'); add_action (register_post ',' check_fields, 10,3); add_action ('user_register', 'register_extra_fields'); functie show_this () ?>
add ('empty_realname', "FOUT: Voer alstublieft de naam van uw voornaam in "); else $ website = $ _POST ['first_name']; global $ website; if ($ _POST ['website'] ==") $ errors-> add ('empty_realname', "FOUT: Voer de naam van uw website in "); else $ website = $ _POST ['website']; global $ postcode; if ($ _POST ['postcode'] ==") $ errors-> add ( 'empty_realname', "FOUT: Vul alstublieft uw postcode in "); else $ postcode = $ _POST ['postcode']; functie register_extra_fields ($ user_id, $ password =" ", $ meta = array ()) update_user_meta ($ user_id, ' first_name ', $ _POST [' first_name ']); update_user_meta ($ user_id,' website ', $ _POST [' website ']); update_user_meta ($ user_id,' postcode ', $ _POST [' postcode ']);
Oké dus misschien wil je dat aanpassen om bij je passen. Hier is een basisanalyse:
laat dit zien
) zegt, voeg de volgende velden in het formulier incheck_fields
) controleert of de velden zijn ingevuld en spuwt indien nodig fouten weg (basisvalidatie)register_extra_fields
) werkt de gegevens van de gebruiker bij - evenals het profiel van de gebruikerEn voor een bonus laten we het woord "register" veranderen in "join":
/ * ------------------------------------------------ ----------------------------------- * / / * Verander 'register' naar 'join' / * - -------------------------------------------------- -------------------------------- * / functie tml_title_filter ($ title, $ action) if ($ action == 'registreer') return __ ('join'); return $ title; add_filter ('tml_title', 'tml_title_filter', 10, 2);
Zoals de meeste mensen verbijstert het me waarom WordPress dingen als AIM en Jabber in de profielvelden heeft ... dus laten we ze verwijderen! Plak de volgende code onder je huidige functions.php code.
/ * ------------------------------------------------ ----------------------------------- * / / * Fragmenten uit profiel opnieuw aanvullen / * ----- -------------------------------------------------- ---------------------------- * / function extra_contact_info ($ contactmethods) unset ($ contactmethods ['aim']); unset ($ contactmethods [ 'YIM']); unset ($ contactmethods [ 'jabber']); $ contactmethods ['postcode'] = 'Postcode (verplicht)'; retourneer $ contactmethoden; add_filter ('user_contactmethods', 'extra_contact_info');
Oké, goed dan! (Kevin Hart-stijl) Laten we dit testen! Log uit van WordPress en spring naar de voorkant van uw site. Klik op "aanmelden" en doorloop het proces.
Houd rekening met alle wijzigingen die u moet aanbrengen, bijvoorbeeld e-mailsjabloonberichten, enz. Pas ze vervolgens toe en test ze opnieuw totdat u tevreden bent.
Nu wil je het misschien een beetje stylen, en gelukkig is het gemakkelijk om een aantal stijlen stylesheets te gebruiken die zijn geüpload naar je themamap. U kunt deze downloaden om aan de slag te gaan met behulp van de koppeling "Bronbestanden downloaden" bovenaan deze zelfstudie.
Als u deze stijlbladen gebruikt, zorgt u ervoor dat uw CSS niet wordt overschreven wanneer uw thema wordt bijgewerkt.
Nog één ding, de beheerdersbalk, laten we het voorgoed verbannen. Voeg de onderstaande code toe aan uw functions.php.
/ * ------------------------------------------------ ----------------------------------- * / / * Beheerbalk uitschakelen voor alle / * ---- -------------------------------------------------- ----------------------------- * / show_admin_bar (false);
U ziet dus dat het vrij eenvoudig is om het lidmaatschapsproces naar de voorkant van uw website te trekken. Deze methode is uiterst flexibel, de plug-inconfiguratie die in deze zelfstudie wordt gebruikt, kan verschillen naargelang uw behoeften. Het is ook vrij eenvoudig om lidspecifieke inhoud te hebben (probeer wp-leden te gebruiken). Ik heb succes gehad door dit te gebruiken in commerciële projecten.
Laat eventuele feedback, of als je suggesties hebt, ik zou ze graag willen horen, in de comments hieronder.