So entwickeln Sie eine Mitgliedersite mit WordPress Teil 1

WordPress enthält bereits eine Menge guter Dinge, um eine Mitgliederwebsite zu erstellen. Leider wird der Großteil des Prozesses über das hintere Ende der Website abgewickelt, und im Idealfall möchten wir Benutzer vom Admin-Bereich fernhalten. In dieser dreiteiligen Serie werden wir diesen Prozess an die Vorderseite der Website verschieben, einige Anpassungen vornehmen und entlang des Weges gestalten.

Am Ende der Serie sollten Sie eine Site haben, auf der sich Benutzer anmelden, anmelden und ihre eigenen Kontodaten bearbeiten können. Da es sich um ein so breites Thema handelt, können wir nicht alles abdecken, aber ich werde mein Bestes geben, um Ihnen eine solide Grundlage für eine Mitgliederseite zu geben.

Kurz gesagt, das ist, was Sie über die Serie erwarten können:

• Teil eins: Anmelde- und Anmeldeformulare
• Zweiter Teil: Hinzufügen benutzerdefinierter Felder zum Registrierungsformular
• Teil drei: Entwickeln eines Abschnitts "Benutzerprofil"

Nun, bevor wir anfangen, gibt es ein gutes Argument dafür, dass dieser Code als Plugin erstellt wird - schließlich ist er ziemlich funktional. Aber wegen der Menge von "Theming"Wir werden es tun, es ist absolut vernünftig, den Code in unserem Thema unterzubringen.  

Lass uns eintauchen

Als WordPress-Entwickler verwende ich Sage als Startermotiv, also werde ich damit arbeiten. Wenn Sie Sage (zuvor als Roots bezeichnet) noch nicht verwendet haben, gibt es eine leichte Lernkurve, da Bower und Gulp verwendet werden. Daher müssen Sie etwas Erfahrung mit diesen Methoden haben. Nachdem Sie all dies gesagt haben, können Sie die Prinzipien hier problemlos auf jedes Thema anwenden. Zu Einstiegsthemen gibt es noch viel mehr zu sagen, aber lassen Sie uns das für ein anderes Mal speichern.

Kommen wir also ohne weitere Verzögerung in den Registrierungsbereich Ihrer Website. Es gibt grundsätzlich zwei Ansätze, und ich habe beide probiert. Die erste besteht darin, ein benutzerdefiniertes Formular zu entwickeln und die Registrierung selbst zu bearbeiten, und die zweite umfasst die Erweiterung der systemeigenen Registrierungs- und Anmeldeformulare. Ich bevorzuge letzteres und hier ist der Grund: nativ ist immer besser, es ist einfacher zu warten und es gibt viel weniger bewegliche Teile.

Ein Nachteil bei der Verwendung der nativen Formulare für die Anmeldung und Registrierung besteht darin, dass Sie die nativen URLs erhalten: http://AnExampleDomain.com/wp-admin und http://AnExampleDomain.com/login/?register.

Keine Sorge, denn es gibt Möglichkeiten, diese neu zu schreiben, und es ist nicht offensichtlich, dass es sich um eine WordPress-Site handelt.

Unser Haus in Ordnung bringen  

Ich mag es, ein sauberes Haus zu behalten, also füge ich in meine functions.php eine Datei mit dem Namen admin.php ein, die alle unsere Admin-bezogenen Funktionen enthält. Der folgende Code (Zeile 12) gibt an, wie Sie die Datei einschließen, wenn Sie das Sage WP Starter Theme verwenden.  

Wenn Sie Sage nicht verwenden, können Sie einfach Folgendes verwenden: 
required_once locate_template ('/lib/admin.php');
Randnotiz: Das hat nichts mit diesem Thema zu tun, aber ich würde empfehlen, mehrere Includes in Ihrer functions.php zu haben und dann die entsprechenden Dateien zu codieren. Dadurch bleiben die Dateien sauberer und lesbarer. 
Wir werden unsere Verwaltungsressourcen (CSS und Bilder) separat aufbewahren Administrator Verzeichnis. Dies ist optional. Denken Sie jedoch daran, Ihren Pfad zu ändern, wenn Sie auf diese Dateien verweisen, wenn Sie eine andere Struktur verwenden.  
Beginnen wir mit dem CSS
Wir möchten die Stile überschreiben, die WordPress auf die Anmelde- und Registrierungsseiten angewendet hat.
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
Dazu müssen wir ein Stylesheet in unser Theme aufnehmen. In WordPress können Sie dazu die Funktion wp_enqueue_style verwenden.
Der Plan ist also, für jedes Formular ein anderes Stylesheet zu laden. Dazu prüfen wir den übergebenen GET-Parameter und laden den entsprechenden Style. Wenn Sie denken: "Was zur Hölle ist ein GET-Parameter?", Dann machen Sie sich keine Sorgen. Es ist im Grunde die URL. Das ist alles, was Sie wirklich wissen müssen, um zu tun, was wir tun. 
Die Logik lautet also: Wenn die URL x ist, laden Sie x Style-Sheet, und wenn die URL y ist, laden Sie y Style-Sheet. Erstellen Sie also eine admin.php-Datei, kopieren Sie diesen Code hinein und speichern Sie ihn in der Datei lib Mappe.  
Wir verwenden hier die Aktion login_head, um unsere Stile auf der Anmeldeseite zu laden. Diese Aktion ist speziell für diesen Zweck konzipiert. Wenn Sie mit den Aktionen und Filtern in WordPress nicht vertraut sind, empfehle ich Ihnen, etwas Zeit mit ihnen zu verbringen. Sie sind Säulen der WordPress-Entwicklung.  
Nun zum CSS selbst. Um im Rahmen dieses Tutorials zu bleiben, schreiben wir nur Vanille-CSS. Kein WENIGER oder Sass. Das DOM gibt uns nicht wirklich viel auf diesen Seiten, deshalb müssen wir ein bisschen schlau sein. 
Verwenden Sie zum Hinzufügen von Kopf- und Fußzeilentypen die Pseudoelemente Vor und nach dem. Ich habe ein Bild von http://unsplash.com für den Hintergrund unserer Anmeldeseite erworben. Es ist eine großartige Ressource, aber es fehlt an Suchmöglichkeiten. Zum Glück hat Arthur Weill ein Werkzeug zur Suche der Bilder entwickelt.
Sie können die CSS-Dateien unten finden oder anzeigen:
 
 Anmeldeformular CSS
 
 
 Registrieren Sie sich in CSS
 
 
Dieses CSS dient nur als Leitfaden. Die wichtigsten Punkte sind:
 
Um eine Kopf- / Fußzeile zu erhalten, verwenden Sie Vor und nach dem Pseudoelemente.
 
Verwenden Sie Medienabfragen, um sicherzustellen, dass die Formulare gut verkleinert werden können. Möglicherweise möchten Sie, dass sie in einem Modal / Iframe verwendet werden oder sich von einem Tablet oder Telefon aus anmelden.
 
Einige Feinheiten
Das Logo auf unseren Seiten ist mit http://wordpress.org verlinkt, was nicht ideal ist. Glücklicherweise hat WordPress einen praktischen Filter, mit dem wir das ändern können, login_headerurl. Fügen wir dieses Snippet in unsere admin.php ein.
Eine andere Sache ist, dass auf unserer Registrierungsseite etwas Einführungstext vorhanden ist. Es ist nicht sehr informativ: "Für diese Site registrieren". Lass uns das auch optimieren. Wieder gibt es eine Aktion (login_message) zum Einhängen und Ändern. Es ist nicht so einfach wie der vorherige Filter, aber mit der PHP-Funktion strpos können wir nach einer bestimmten Kopie suchen ("Registrieren") und senden Sie stattdessen unsere geänderte Kopie zurück. 
'. $ register_intro. '
';  else return $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
Und zu guter Letzt ändern wir diese URLs. Dafür gibt es mehrere Möglichkeiten. Sie könnten .htaccess verwenden, aber ich mag es, das iThemes Security Plugin zu verwenden. In den Einstellungen können Sie die URLs in Ihren Admin-Bereich ändern. Ich habe meine in geändert /Anmeldung. Es gibt viele andere großartige Dinge, die Sie mit dem Plugin machen können, daher empfehle ich es.
Was kommt als nächstes?
Wir haben einen guten Start für unsere Mitgliederseite. In Teil zwei werden wir beschreiben, wie Sie benutzerdefinierte Meta-Felder in unser Registrierungsformular einfügen und kurz darauf eingehen, wie Sie die E-Mails anpassen, die von unserer Website gesendet werden. Ich hoffe, dieses Tutorial war leicht zu folgen. Feedback, Fragen und Kommentare sind willkommen.
Dinge zu beachten
Bitte beachten Sie: wenn Sie den Code aus dem darin enthaltenen GitHub-Repository herunterladen alle Dateien um dein Thema zum Laufen zu bringen. Die Idee ist, dass Sie sich das Repo besorgen können und einfach die nötigen Gulp- und Bower-Befehle ausführen können. Wenn Sie nur Dateien wünschen, die Code enthalten, der für diese Serie spezifisch ist, werden die Dateien unten aufgeführt. 
 
Alle Dateien im Admin-Verzeichnis  
 
lib / admin.php 
 
lib / Mitgliedschaft.php 
 
template-user-profile.php
 
templates / header.php 
 



		
			
	   
	




Code