Key Takeaways

• WordPress -Standard -Anmelde- und Registrierungsseiten k?nnen mit Plugins wie ProfilePress angepasst werden, um besser in das gesamte Website -Design zu integrieren.
• Mit ProfilePress k?nnen Seiten-, Registrierungs- und Kennwortreset -Seiten benutzerdefinierte WordPress -Seiten erstellt werden, ohne dass ein PHP -Code verwendet wird.
Nach dem Erstellen der benutzerdefinierten Seiten k?nnen die Standardseiten der WordPress -Anmeldung, Registrierung und Kennwortreset in diese benutzerdefinierten Alternativen umgeleitet werden.
Das ProfilePress -Plugin erm?glicht auch die Erstellung von Widgets für diese benutzerdefinierten Formulare, die einfach zu jedem widgetisierten Bereich oder einer Seitenleiste auf der Website hinzugefügt werden k?nnen.

WordPress begann das Leben als Blog -Engine, Websoftware zum Erstellen von Blogs. Im Laufe der Jahre hat es sich zu einem Content -Management -System (CMS) entwickelt, obwohl einige Entwickler m?glicherweise nicht zustimmen, wenn es als CMS angesehen wird.

Es gibt eine gesunde Respektlosigkeit für die WordPress -Standard -Anmelde- und Registrierungsseiten, da sie au?erhalb der Website leben, ohne sich dem Site -Design zu entsprechen.

Wenn es darum geht, eine Website für Kunden zu erstellen, m?chten Sie m?glicherweise eine individuellere Anmeldeseite, damit sie sich gut in das gesamte Website -Design integriert. Es gibt auch zahlreiche Plugins, die WordPress erweitern, bei denen die Registrierung und die Anmeldeseiten von Endbenutzern verwendet werden, nicht nur von Site -Administratoren.

Einige Entwickler haben verschiedene Arten von Plugins zum Anpassen der Standard -Anmeldungs- und Registrierungsformulare in WordPress ver?ffentlicht, z.

Der Begriff über die Standard -Kontoseite ist nicht in erster Linie darauf zurückzuführen

Eine schnelle Google -Suche zum Erstellen benutzerdefinierter Registrierung und Anmeldeseiten für WordPress zeigt Tutorials, die auf erweiterte PHP/WordPress -Entwickler ausgerichtet sind. Dies ist in Ordnung, wenn Sie erfahren sind, aber als jemand, der viele Entwickler -Tutorials geschrieben hat, wei? ich, dass es auch ein Publikum gibt, das etwas Einfacheres ben?tigt.

In diesem Tutorial lernen wir, wie Sie Seiten für benutzerdefinierte WordPress -Anmeldung, Registrierung und Kennwortreset mit einem Plugin erstellen, das ich als ProfilePress entwickelt habe, ohne eine einzelne Zeile von PHP -Code zu schreiben. Wenn Sie ein Entwickler sind, k?nnen Sie sich natürlich auch den Code ansehen.

Das folgende Formular wird in diesem Tutorial verwendet.

Siehe die Login für WordPress von Agbonghama Collins (@collizo4sky) auf CodePen.

Siehe die Registrierung von Pen SP ProfilePress für WordPress von Agbonghama Collins (@collizo4sky) auf CodePen.

Siehe das Pen -SP -Passwort von Agbonghama Collins (@Collizo4sky) auf CodePen.

Wenn Sie vor dem Tutorial springen m?chten, k?nnen Sie eine Demo der Seiten der Anmeldung, Registrierung und Passwort zurücksetzen.

Einführung von ProfilePress

ProfilePress ist ein WordPress-Plugin, mit dem das Erstellen von Formularen für Benutzerkonto (Login, Registrierung, Kennwort zurücksetzen und bearbeiten) und das Front-End-Profil dumm einfach einfach ist . Es ist etwas, das ich gesehen habe, also habe ich es geschaffen. Es war ein interessantes Projekt, an dem ich in zukünftigen Artikeln mehr mitteilen kann.

Für ein typisches Beispiel kann es eine einfache HTML -Anmeldeform in eine funktionale WordPress -Anmeldung verwandeln, ohne einen Php zu schreiben.

ProfilePress ist kein Drag-and-Drop-Plugin, sondern verwendet Shortcodes als Vorlagensystem für das Erstellen von Kontoformularen und Front-End-Profilen.

Shortcodes sollen profilieren, welche Lenker und der Zweig für JavaScript bzw. PHP sind. M?glicherweise sind Sie bereits mit Shortcodes vertraut, wenn Sie Plugins wie Schwerkraftformulare, Kontaktformular 7 oder NextGen -Galerie verwendet haben. Sie sind sehr einfach zu bedienen.

ohne weiteres, beginnen wir mit dem Erstellen der Anmelde-, Registrierungs- und Kennwort -WordPress -Formulare.

benutzerdefinierte Anmeldeseite

Die Lite -Version des ProfilePress -Plugins, das kostenlos im WordPress -Plugin -Verzeichnis verfügbar ist, installieren und aktivieren.

Klicken Sie auf das Menü Anmeldeformular wie im Bild unten und dann die Schaltfl?che Neu hinzuzufügen, um den Vorgang zu starten.

Ein Formular wird Ihnen pr?sentiert. Füllen Sie die Felder wie folgt.

Geben Sie einen Namen für das Anmeldeformular im Feld Vorlagenname ein.

Kopieren Sie den CODEPEN -Anmeldeformularcode oben in den Login -Design Tinymce -Editor und ersetzen Sie dann den Text und das Kennwort und senden Sie die Eingabefelder durch die jeweiligen Shortcode -?quivalente.

Hier ist der endgültige HTML -Code für das Anmeldeformular.

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Sign In<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [login-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [login-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>       [login-submit  value="Log In"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Hinweis: Kein Formular Tag ist zul?ssig. Sie werden vom Plugin automatisch hinzugefügt, wenn sie die Formulare rendern.

Fügen Sie das Login -CSS in den CSS -Stylesheet -Textbereich ein.

HINWEIS: Fehler, die von ProfilePress-Anmeldeformularen erzeugt wurden

Klicken Sie auf die Schaltfl?che "Vorschau -Design".

Drücken Sie schlie?lich die Schaltfl?che "Speichern", um das Anmeldeformular zu erstellen.

Um das Anmeldeformular als WordPress -Widget verfügbar zu machen, das gezogen und in einen widgetisierten Bereich / eine Seitenleiste fallen gelassen werden kann; überprüfen Sie das Kontrollk?stchen dieses Widget -Kontrollk?stchen. Gehen Sie nach dem Speichern der ?nderungen zum WordPress -Widget -Administrator -Seite, ziehen Sie das ProfilePress -Login -Widget an einen gewünschten Speicherort und w?hlen Sie das Anmeldeformular und speichern Sie.

Navigieren Sie zurück zum Login -Katalog, kopieren Sie den generierten Anmeldekandidaten und fügen Sie ihn auf die Seite ein, die Sie für Ihre benutzerdefinierte Anmeldeseite erstellen m?chten.

Benutzerdefinierte Registrierungsseite

Erstellen eines benutzerdefinierten Registrierungsformulars mit ProfilePress folgt so gut wie die Schritte als Anmeldeformular für die Formulardesign- und Erfolgsnachricht (Text auf erfolgreiche Registrierung angezeigt).

Klicken Sie auf das Menü "Registrierungsformular" gefolgt von der Schaltfl?che Neue Neue.

Kopieren Sie den CODEPEN -Registrierungsformularcode oben in Registrierungsdesign Tinymce Editor.

Ersetzen Sie die Formularkomponenten (Benutzername, Passwort, E -Mail, Vorname, Nachnamenfelder und Sendentaste) durch die jeweiligen ProfilePress -Shortcode -?quivalente.

Der Code für das Registrierungsformular sieht endlich so aus:

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Sign In<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [login-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [login-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>       [login-submit  value="Log In"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Fügen Sie das Registrierungs -CSS in den CSS -Stylesheet -Textbereich ein.

HINWEIS: Fehler, die von ProfilePress-Registrierungsformularen erzeugt wurden

Geben Sie den Code ein, um eine angepasste Nachricht zur erfolgreichen Benutzerregistrierung anzuzeigen.

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Create a new account<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [reg-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [reg-email ]
      <span><span><span><label</span> for<span>="email"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="E-mail Address"</span>></span>E-mail Address<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __third"</span>></span>
</span>      [reg-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __fourth"</span>></span>
</span>      [reg-first-name ]
      <span><span><span><label</span> for<span>="first-name"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="First Name"</span>></span>First Name<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __fourth"</span>></span>
</span>      [reg-last-name ]
      <span><span><span><label</span> for<span>="last-name"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Last Name"</span>></span>Last Name<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>      [reg-submit  value="Create Account"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Es besteht auch die M?glichkeit, ein Registrierungsformular als Widget verfügbar zu machen. Ich habe festgestellt, dass dies sehr nützlich sein kann.

Navigieren Sie zurück zum Registrierungskatalog, kopieren Sie den generierten Shortcode und fügen Sie ihn auf die Seite ein, die Sie für Ihre benutzerdefinierte Registrierungsseite erstellen m?chten.

Seite für benutzerdefinierte Kennwortreset Seite

Gehen Sie zum Kennwort -Reset -Einstellungsseite, indem Sie auf das Menü Kennwort Reset klicken.

Klicken Sie oben auf der Seite auf die Schaltfl?che Neue Schaltfl?che Neu hinzuzufügen, um mit dem Formular für das Formular zu beginnen.

Kopieren Sie den CODEPEN -Kennwort -Reset -Formularcode oben in das Kennwort Reset Design Tinymce Editor.

Ersetzen Sie das Feld Benutzername/E -Mail und die Schaltfl?che Senden durch ihre Shortcode -?quivalente.

Der endgültige Code für das Formular für das Kennwortreset sieht folgt aus:

<span><span><span><div</span> class<span>="profilepress-reg-status"</span>></span>Registration Successful.<span><span></div</span>></span></span>

Geben Sie den folgenden Code in die Nachricht im erfolgreichen Textbereich RESET -Bereich ein, um eine angepasste Nachricht anzuzeigen, nachdem die Benutzer das Formular erfolgreich verwendet haben, um ihr Passwort zurückzusetzen.

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Reset Password<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [user-login ]
      <span><span><span><label</span> for<span>="userlogin"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username / Email"</span>></span>Username / Email<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>      [reset-submit  value="Reset"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Speichern Sie die ?nderungen und kehren Sie zum Katalog zurück.

Kopieren Sie den generierten Shortcode und fügen Sie ihn in die Seite ein, die Sie für Ihre benutzerdefinierte Passwortseite erstellen m?chten.

Umleiten Sie die Standard -WordPress -Kontoseiten in die benutzerdefinierten Alternativen

um

Schlie?lich müssen wir nur noch die Standard -WordPress -Anmelde-, Registrierungs- und Kennwortreset -Seiten in ihre benutzerdefinierten Alternativen umleiten, die mit ProfilePress erstellt wurden. Wenn Benutzer also die folgenden Standard -URLs besuchen, werden sie auf die benutzerdefinierten Seiten weitergeleitet.

http://example.com/wp-login.php
http://example.com/wp-login.php?action=register
http://example.com/wp-login.php?action=lostpassword

, um dies zu erreichen, klicken Sie auf das Plugin -Menü Einstellungen.

W?hlen Sie im Abschnitt Global Einstellungen die Seiten für benutzerdefinierte Anmeldung, Registrierung und Kennwort zurückgesetzt.

Zusammenfassung

In diesem Tutorial haben wir gelernt, wie man einfach eine benutzerdefinierte Anmelde-, Registrierungs- und Kennwortreset -Seite in WordPress erstellt, indem ich ein Plugin mit dem Namen ProfilePress im WordPress -Plugin -Verzeichnis erh?ltlich ist. Wir haben auch gelernt, wie man die Standard -WordPress -Kontoseiten auf die benutzerdefinierten Kontoseiten umleitet.

Wenn Sie Fragen, Vorschl?ge oder Beitr?ge haben, lassen Sie es mich in den Kommentaren wissen.

h?ufig gestellte Fragen zum Erstellen von benutzerdefinierten Anmeldungs- und Registrierungsseiten in WordPress

Wie kann ich das Aussehen meiner WordPress -Anmeldeseite anpassen? Plugins wie Theme My Login, benutzerdefinierte Anmeldeseiten-Customizer und LoginPress bieten einfach zu bedienende Schnittstellen für die Anpassung. Wenn Sie die Codierung bevorzugen, k?nnen Sie eine benutzerdefinierte Anmeldeseite erstellen, indem Sie eine neue PHP -Datei in Ihrem Themenverzeichnis erstellen und die Funktion wp_login_form verwenden, um das Anmeldeformular anzuzeigen. Sie k?nnen dann das Formular mit CSS stylen.

Kann ich meinem benutzerdefinierten Registrierungsformular zus?tzliche Felder hinzufügen? Dies kann durch die Verwendung des Aktionshakens "Register_form" in WordPress erfolgen. Sie k?nnen Ihrer functions.php -Datei eine Funktion hinzufügen, in der die zus?tzlichen Felder hinzugefügt werden, und dann die Hooks "Registrierung_errors" und "user_register" verwenden, um die Felddaten zu validieren und zu speichern. Registrierung? Mit diesem Haken k?nnen Sie eine URL angeben, um sie umzuleiten. Sie k?nnen Ihrer functions.php -Datei eine Funktion hinzufügen, in der die URL, auf die Sie umleiten m?chten M?glicherweise erstellen Sie eine benutzerdefinierte Anmeldeseite ohne Plugin. Dies kann durch das Erstellen einer neuen PHP -Datei in Ihrem Themenverzeichnis und die Verwendung der Funktion WP_login_Form erfolgen, um das Anmeldeformular anzuzeigen. Sie k?nnen dann das Formular mit CSS stylen.

Wie kann ich meinem benutzerdefinierten Anmeldeformular ein Kontrollk?stchen für mich erinnern? Wenn Sie ein Plugin verwenden, überprüfen Sie die Plugin -Einstellungen, um festzustellen, ob es eine Option zum Hinzufügen eines Remember Me -Kontrollk?stchens gibt. Sie k?nnen einen Shortcode verwenden, um Ihr benutzerdefiniertes Anmeldeformular anzuzeigen. Die Funktion wp_login_form gibt eine Zeichenfolge zurück, die das Formular HTML enth?lt, das Sie in einer Shortcode -Funktion verwenden k?nnen. Sie k?nnen dann den Shortcode in Ihren Beitr?gen oder Seiten verwenden, um das Formular anzuzeigen.

Wie kann ich die Fehlermeldungen in meinem benutzerdefinierten Anmeldeformular ?ndern? Anmeldenformular mit dem Filterhaken 'login_errors'. Mit diesem Haken k?nnen Sie die Fehlermeldungen ?ndern, bevor sie angezeigt werden. . Es stehen mehrere Plugins zur Verfügung, die soziale Anmeldungsfunktionen bieten, wie zum Beispiel Social Login und WP Social Login. Wenn Sie die Codierung bevorzugen, k?nnen Sie die HybridAuth -Bibliothek verwenden, um ein soziales Login hinzuzufügen. Erzwingen Sie Angriffe, indem Sie ein Plugin -?hnliches Limit -Anmeldeversuche oder eine Login -Sperre verwenden. Diese Plugins beschr?nken die Anzahl der Anmeldesversuche aus einer einzelnen IP -Adresse.

Kann ich meinem benutzerdefinierten Anmeldeformular eine Captcha hinzufügen? Es stehen mehrere Plugins zur Verfügung, die CAPTCHA -Funktionen bieten, wie beispielsweise Captcha und Google Captcha (Recaptcha). Wenn Sie die Codierung bevorzugen, k?nnen Sie die Google Recaptcha -API verwenden, um eine Captcha hinzuzufügen.

Das obige ist der detaillierte Inhalt vonErstellen von benutzerdefinierten Anmeldungs- und Registrierungsseiten in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!