Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

So entwickeln Sie eine Mitgliedschafts-Site mit WordPress: Teil 3

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called How to Develop a Membership Site with WordPress.
How to Develop a Membership Site With WordPress: Part 2

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Final product image
What You'll Be Creating

Zu Beginn der Serie haben wir uns mit der Anpassung der WordPress-Anmelde- und Registrierungsformulare befasst. Anschließend haben wir unserem Registrierungsformular einige benutzerdefinierte Felder hinzugefügt. Heute, im dritten und letzten Teil dieser Serie, wird erläutert, wie Sie einen "Mein Konto" -Abschnitt für die Benutzer Ihrer Website erstellen, in dem die Benutzer ihre Profilinformationen bearbeiten können.

Seiteneinrichtung

Als Erstes möchten wir eine Seitenvorlage erstellen, in der unsere Inhalte untergebracht werden. Ich möchte meinen Seitenvorlagen gerne das Wort "Vorlage" voranstellen. Meine Datei heißt also template-user-profile.php und das öffnende PHP sieht folgendermaßen aus:

Ich habe dies im Stammverzeichnis meines Designverzeichnisses gespeichert Wenn Sie mit WordPress-Seitenvorlagen nicht vertraut sind, schlage ich vor, dass Sie den Link oben lesen. Sie sind sehr praktisch.

Lassen Sie uns nun zum WordPress-Backend gehen und eine Seite mit dem Namen „Profil“ erstellen. Im Meta-Feld Seitenattribute weisen Sie ihr unsere neu erstellte Seitenvorlage zu. Nachdem Sie diese Seite veröffentlicht haben, sollten Sie am Frontend eine leere Seite haben:   http://yourdomain/profile.

User Profile

Nun, um etwas Inhalt in unsere Seite einzufügen. Wir möchten, dass die Struktur Seiteninhalt ist (d. H. Was auch immer in WordPress WYSIWYG geschrieben wird) und dann unser Profilformular folgt.

Es ist oft hilfreich, den Code aus page.php abzurufen und diesen als Ausgangspunkt für Ihre Seitenvorlagen zu verwenden. Dieser Code unterscheidet sich je nach Design ein wenig, enthält jedoch höchstwahrscheinlich eine Schleife, die Seiteninhalt ausspuckt. Der Inhaltsteil wird normalerweise mit der WordPress-Funktion get_template_part() abgerufen. Direkt unterhalb der Stelle, an der der Inhalt abgerufen wurde, fügen Sie unser Formular-HTML ein. Um es kurz zu fassen:

  1. Kopieren Sie den Code aus page.php und fügen Sie ihn in unsere Seitenvorlage ein.
  2. Finden Sie heraus, wo der Inhalt ausgegeben wird.
  3. Fügen Sie direkt darunter den folgenden Code ein und wir gehen ihn durch:

Hier gibt es nichts Verrücktes: Das Formular verwendet Bootstrap-Markup, da unser Thema auf Bootstrap basiert. Zu beachten ist auch, dass das Formular mit der POST-Methode gesendet wird und wir ein wp_nonce_field-Feld hinzugefügt haben. Hierbei handelt es sich um eine Art Sicherheits-Token, mit dem bösartige Angriffe verhindert werden. Wenn Sie mit WordPress Nonces nicht vertraut sind, schlage ich vor, diesen Artikel zu lesen.

Daten abrufen

Wenn dies der Fall ist, sollten Sie ein Formular auf der Vorderseite der Website haben, aber es tut nicht viel. Wir möchten, dass die Daten angezeigt werden, die wir für den angemeldeten Benutzer haben. Möglicherweise haben Sie festgestellt, dass die Wertattribute in unserem Formular einige PHP-Effekte enthalten.

value=" echo $user_info->first_name; ?>"

Momentan existiert das $user_info-Objekt nicht, da wir den Code noch nicht geschrieben haben, also beginnen wir dort. Fügen Sie den folgenden Code vor unserem Formular in template-user-profile.php ein.

Mit einigen nativen WordPress-Funktionen erhält es die aktuelle Benutzer-ID. Dadurch können wir die Benutzerdaten abrufen. Dies wird in einem Objekt namens $user_info gespeichert. Wie oben gezeigt, können wir Benutzerdaten ganz einfach abrufen. Um alle in diesem Objekt gespeicherten Daten anzuzeigen, können Sie einen var_dump wie folgt ausführen: <?php var_dump($user_info);?>. Dies kann zum Debuggen nützlich sein oder nur um zu sehen, auf was Sie zugreifen können.

Verarbeitung der Daten

Es gibt ein letztes Teil des Puzzles, und zwar das Verarbeiten der Daten, sodass Benutzer ihre Profile bearbeiten können. Um die Dinge in Ordnung zu halten, habe ich den Mitgliedscode in eine Datei mit der Bezeichnung "erschaft.php "eingefügt. Dieses befindet sich im Verzeichnis lib und wurde in unsere Datei "functions.php" aufgenommen. Wenn Sie dies getan haben, öffnen Sie die neu erstellte Membership.php-Datei in einem Code-Editor. Lassen Sie uns die Funktion erstellen, die die Benutzerdaten verarbeitet.

Lassen Sie uns zunächst die Logik durchgehen. Wenn Sie auf die Schaltfläche zum Senden klicken, möchten wir prüfen, ob unser Nonce-Feld gesendet wurde. Dadurch wird geprüft, ob die Daten von der richtigen Stelle kommen.

Wenn diese Bedingung erfüllt ist, möchten wir die ID des aktuellen Benutzers abrufen, da diese zum Speichern der Daten benötigt wird. Dann möchten wir unsere Daten in einer WordPress-ähnlichen Struktur anordnen - in diesem Fall handelt es sich um ein Array mit bestimmten Schlüsseln. Vor dem Speichern der Daten möchten wir sie auch validieren und desinfizieren. Und zum Schluss möchten wir unseren Benutzern Meldungen über Erfolg oder Fehler anzeigen.

Und der Code für all das sieht ungefähr so aus:

Nun stellen Sie möglicherweise fest, dass die Daten mit drei verschiedenen WordPress-Funktionen gespeichert werden:

  • update_user_meta()für den Twitter-Namen
  • wp_set_password() für das Passwort
  • wp_update_user() für die restlichen Daten

Und Sie haben Recht, dies zu hinterfragen. Grundsätzlich müssen die benutzerdefinierten Metadaten (der Twitter-Name) mit der relativen Funktion und nicht mit der allgemeinen Update-Benutzerfunktion verarbeitet werden. Das Passwort ist zwar mit wp_update_user() kompatibel, ich hatte jedoch Probleme damit und bevorzuge diese Methode. Denken Sie daran, dass dies nur ein Leitfaden ist, und häufig soll der Code verschiedene Methoden demonstrieren, um Ihre Anforderungen zu erreichen.

Okay, jetzt haben wir unsere Funktion, um die Daten zu verarbeiten, aber sie werden nirgendwo aufgerufen. Am Ende unserer Funktion können Sie sehen, dass damit eine Aktion verbunden ist. Um diese Funktion aufzurufen, müssen Sie nur das bereitgestellte WordPress verwenden: do_action() ;. Fügen Sie diese Zeile oberhalb Ihres Formulars in die zuvor erstellte Seitenvorlage "Benutzerprofil" ein:

<?php do_action('tutsplus_process_user_profile');? >

Wenn wir das Formular absenden, sollte es unsere Funktion durchlaufen und die Daten verarbeiten.

Fehler- und Erfolgsmeldungen

Error and Success Messages

Unser Profilformular sollte die Daten jetzt speichern oder ablehnen. Vielleicht waren die beiden Passwörter nicht gleich und retten nicht. Es gibt keine Meldungen, die dem Benutzer Rückmeldungen liefern. Lassen Sie uns unsere Benutzer etwas Trauer ersparen und ihnen einige Nachrichten geben.

In unserer Funktion tutsplus_process_user_profile() haben Sie möglicherweise bemerkt, dass je nach Ergebnis der Verarbeitung unterschiedliche Abfragezeichenfolgen an die URL angehängt werden. Wenn also alles gespeichert und erfolgreich ist, wird unsere URL mit ?Profile-updated=true angehängt, und diese hängen von den Ergebnissen ab. Wir müssen eine Nachricht auslösen, die auf diesen Antworten basiert.

Im Folgenden habe ich einen Filter verwendet, um auf den Inhalt zuzugreifen, und durch die Magie von $_GET können wir die Parameter überprüfen und herausfiltern, was wir brauchen.

Okay, nicht ganz dort - wir verwenden eine Funktion namens tutsplus_get_message_markup(), haben sie aber noch nicht definiert. Es braucht zwei Parameter:

  • eine Zeichenfolge: Die anzuzeigende Nachricht
  • eine Zeichenfolge: Der Schweregrad der anzuzeigenden Warnung basierend auf Bootstrap

Definieren wir also unsere Funktion tutsplus_get_message_markup():

Großartig. Jetzt können unsere Mitglieder sehen, ob ihre Daten gespeichert werden oder nicht.

Extra Gutschrift

Jetzt haben wir einen funktionierenden Prototyp für eine Mitgliederwebsite. Viele dieser Funktionen sind im Lieferumfang von WordPress enthalten, wir haben sie jedoch so gestaltet und optimiert, dass sie für unsere Benutzer ein besseres Erlebnis ist. Also lasst uns jetzt unsere 'Ich's' und 'T's' kreuzen, um das Erlebnis ein bisschen mehr zu verbessern.

Erstens möchten wir verhindern, dass nicht angemeldete Benutzer auf die Profilseite zugreifen können. Eine einfache Weiterleitung auf die Startseite reicht aus. Ich habe eine Funktion erstellt, die genau das tut, und ich nenne sie auf Seiten, auf die ich ausschließlich von angemeldeten Benutzern zugreifen möchte.

Hier ist die Funktion, die in der Mitgliedschaft.php abgelegt wird:

Jetzt können wir die Funktion ganz oben in unserer Seitenvorlage "Benutzerprofil" aufrufen.

Als nächstes wollen wir Benutzer - gut Abonnenten - aus dem Adminbereich heraushalten. Außerdem entfernen wir die Admin-Leiste für angemeldete Benutzer. Lassen Sie uns dies erneut in unsere Membership.php aufnehmen.

Und schließlich ist das Navigieren in den Login/Logout-Bildschirmen nicht sehr einfach. Lassen Sie uns einige benutzerspezifische Navigation hinzufügen. Was ich getan habe, ist die Erstellung einer Funktion, die den entsprechenden Code ausgibt. Dieser wird dann in unserer templates / header.php aufgerufen, wo die Hauptnavigation dargestellt wird.

Zusammenfassung

WordPress ist eine erstaunliche Grundlage für eine Mitgliedschaftsbewerbung. Es verfügt bereits über so viele Funktionen, die mit dieser Art von Anwendung verbunden sind. Darüber hinaus haben die Leute bei WordPress es ziemlich einfach gemacht, sich an Ereignisse zu binden und Inhalte zu filtern, sodass wir erweitern können, was bereits vorhanden ist.

Ich hoffe, dass Ihnen dies die Methoden, Ideen und das Wissen vermittelt hat, um Ihre eigenen Mitgliederseiten zu entwickeln. Dies ist keinesfalls ein vollständiger Leitfaden zu diesem Thema, sondern dient als Grundlage.

Jedes Feedback ist willkommen, und ich werde mein Bestes tun, um Fragen in den Kommentaren zu beantworten.

Dinge zu beachten

Bitte beachten Sie: Wenn Sie den Code aus dem GitHub-Repository herunterladen, enthält er alle Dateien, um Ihr Design 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 die Dateien wünschen, die Code enthalten, der für diese Serie spezifisch ist, sind die Dateien unten aufgeführt:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.