So erstellen Sie eine benutzerdefinierte WordPress-Anmeldeseite (der EINFACHE Weg)

Veröffentlicht: 2020-12-11

Möchten Sie eine benutzerdefinierte Anmeldeseite für Ihre WordPress-Website erstellen? Eine benutzerdefinierte Anmeldeseite ist eine großartige Möglichkeit, das generische WordPress-Login zu ersetzen und Ihr eigenes Branding hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine vollständig benutzerdefinierte Anmeldeseite für Ihre Unternehmenswebsite erstellen.

Erstellen Sie jetzt Ihr benutzerdefiniertes Anmeldeformular

Warum eine benutzerdefinierte Anmeldeseite in WordPress erstellen?

Alle WordPress-Websites haben dieselbe Anmeldeseite. Es ist ein einfaches Anmeldeformular mit dem WordPress-Logo darüber.

WordPress-Standard-Anmeldeseite

Diese Seite ist allgemein gehalten, daher ist es schwierig zu erkennen, auf welcher Website Sie sich tatsächlich anmelden. Das WordPress-Logo verlinkt auch auf WordPress.org, was Benutzer von Ihrer Website wegführen könnte, wenn sie darauf klicken.

WPForms ist das beste WordPress Form Builder-Plugin. Erhalte es kostenlos!

Wenn Sie eine neue Anmeldeseite für Ihre Site erstellen, können Sie diese für Folgendes verwenden:

  • Werbeaktionen
  • Benachrichtigungen
  • Und mehr.

Bei WPForms nutzen wir den zusätzlichen Platz auf unserer benutzerdefinierten Anmeldeseite, um Benutzer über aufregende neue Funktionen zu informieren.

Benutzerdefinierte WPForms-Anmeldeseite

Es ist super einfach, eine benutzerdefinierte Anmeldeseite zu erstellen, und es kann auch bei der Sicherheit Ihrer Website helfen. Indem Sie eine benutzerdefinierte Anmeldeseite erstellen, können Sie die Standardseite ausblenden, um Anmelde-Spam zu reduzieren und Ihre WordPress-Site sicher zu halten.

Jetzt wissen wir, warum Sie eine benutzerdefinierte Anmeldeseite benötigen. Lassen Sie uns eine für Ihre Website erstellen.

So erstellen Sie eine benutzerdefinierte WordPress-Anmeldeseite

Wir werden WPForms verwenden, um ein vollständig benutzerdefiniertes Anmeldeformular für Ihre Site zu erstellen. Anschließend zeigen wir Ihnen, wie Sie Ihre benutzerdefinierte Anmeldeseite erstellen.

  1. Installieren Sie das WPForms-Plugin
  2. Erstellen Sie Ihr benutzerdefiniertes WordPress-Anmeldeformular
  3. Fügen Sie Ihrem benutzerdefinierten Anmeldeformular einen Link zum vergessenen Passwort hinzu
  4. Passen Sie Ihre benutzerdefinierten Anmeldeformulareinstellungen an
  5. Veröffentlichen Sie Ihre benutzerdefinierte Anmeldeseite

OK, beginnen wir mit der Installation des benutzerdefinierten Anmeldeseiten-Plugins.

Schritt 1: Installieren Sie das WPForms-Plugin

Als erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Informationen finden Sie in dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.

Um ein Anmeldeformular zu erstellen, benötigen Sie WPForms Pro oder höher.

Nachdem Sie WPForms installiert haben, gehen Sie zu WPForms » Addons .

WPForms-Addons-Menü

Scrollen Sie nach unten, bis Sie das Addon zur Benutzerregistrierung finden. Klicken Sie auf die Schaltfläche, um es zu installieren.

Benutzerregistrierungs-Add-On

Wenn Sie möchten, können Sie den Zugriff auf WordPress einschränken, während Sie Ihr neues Anmeldeformular erstellen. Um herauszufinden, wie das geht, lesen Sie unsere Anleitung zum Ausblenden Ihrer WordPress-Site, bis sie fertig ist.

Wir sind fertig! Lassen Sie uns unser neues benutzerdefiniertes Anmeldeformular erstellen.

Schritt 2: Erstellen Sie ein benutzerdefiniertes WordPress-Anmeldeformular

Jetzt haben wir WPForms installiert, lassen Sie uns ein brandneues Anmeldeformular für WordPress erstellen.

Klicken Sie auf WPForms » Neu hinzufügen , um zu beginnen.

Neues benutzerdefiniertes Anmeldeformular hinzufügen

Benennen Sie auf dem Setup-Bildschirm Ihr Formular oben.

Benennen Sie Ihr benutzerdefiniertes Anmeldeformular

Scrollen Sie nun nach unten und wählen Sie die Vorlage Benutzeranmeldungsformular aus .

Wählen Sie die benutzerdefinierte Anmeldeformularvorlage aus

Das Formular wird im Formulargenerator geöffnet. Das benutzerdefinierte Anmeldeformular ist bereits eingerichtet, sodass wir keine Felder hinzufügen müssen.

Benutzerdefinierte Anmeldeformularvorlage

Fügen wir nun einen Link hinzu, damit Benutzer ihr Passwort einfach wiederherstellen können.

Schritt 3: Fügen Sie Ihrem benutzerdefinierten Anmeldeformular einen Link zum vergessenen Passwort hinzu

Das Anmeldeformular sieht so wie es ist gut aus, aber wir müssen einen Link zum vergessenen Passwort hinzufügen. Andernfalls bleiben Besucher, die ihre Zugangsdaten vergessen, auf der Login-Seite hängen.

Dazu passen wir das Feld Passwort an .

Wir fügen hier einen Link in die Beschreibung ein, damit er direkt unter dem Feld angezeigt wird. Wir können das Smart-Tag {url_lost_password} für den Link verwenden.

Klicken Sie zum Starten auf das Passwortfeld. Fügen Sie dies in der Beschreibung ein:

Forgotten your password? <a href={url_lost_password} >Click here</a> to reset it.

Benutzerdefinierter Link zum vergessenen Passwort

Das ist es! Das Smart-Tag {url_lost_password} wird bei der Veröffentlichung des Formulars durch den Link zum vergessenen Passwort ersetzt.

WPForms kümmert sich um die Datenbankverbindung, sodass wir dafür kein separates Login-Plugin benötigen.

Fahren Sie fort und klicken Sie auf Speichern , um Ihr bisheriges Anmeldeformular zu speichern.

Schritt 4: Passen Sie Ihre benutzerdefinierten Anmeldeformulareinstellungen an

In diesem Schritt sehen wir uns die Einstellungen des Anmeldeformulars an. Dadurch können wir die Schaltfläche im Formular und die Seite steuern, zu der unsere Besucher weitergeleitet werden.

Klicken Sie zunächst auf der linken Seite des Formularerstellers auf Einstellungen .

Benutzerdefinierte Anmeldeformulareinstellungen

Die Einstellungen werden auf der Registerkarte Allgemein geöffnet.

Scrollen Sie nach unten zu Schaltflächentext senden und ändern Sie dies in Anmelden.

Passen Sie die Anmeldeschaltfläche an

Wir haben auch den Verarbeitungstext für die Senden-Schaltfläche geändert, damit der Benutzer sehen kann, dass die Anmeldung im Gange ist. Sie können hier etwas anderes eingeben, wenn Sie möchten.

Darunter werden Sie einige weitere Einstellungen bemerken. Sie sollten überprüfen, ob diese 3 Kontrollkästchen aktiviert sind:

  • Anti-Spam-Schutz aktivieren – Dies wird ein Smart-Form-Token verwenden, um Anmeldungen von Bots zu verhindern.
  • Deaktivieren Sie das Speichern von Eintragsinformationen in WordPress – Wir müssen diese Formularübermittlungen nicht in der WordPress-Datenbank speichern.
  • Formular ausblenden, wenn der Benutzer bereits angemeldet ist – Wenn ein Benutzer bereits angemeldet ist , wäre es verwirrend, das Anmeldeformular erneut anzuzeigen. Mit dieser Einstellung können wir es einfach ausblenden.

Sie können die anderen Einstellungen anpassen, wenn Sie möchten.

Passen Sie die Einstellungen für das Anmeldeformular an

Wenn Sie hier den alten Anti-Spam-Honeypot sehen, aktivieren Sie das neue Anti-Spam-Kontrollkästchen. Der Honeypot ist nun veraltet und das neue Anti-Spam-Token verbessert den Spam-Schutz Ihres Anmeldeformulars.

Abschließend klicken wir auf Bestätigungen .

Bestätigungseinstellungen für benutzerdefiniertes Anmeldeformular

Auf diesem Bildschirm können wir auswählen, was passiert, wenn das Anmeldeformular gesendet wird. Sie können Ihre Benutzer den WordPress-Admin öffnen lassen, wenn Sie möchten. Für die meisten Websites ist es sinnvoll, das Paket an das Frontend umzuleiten.

In diesem Beispiel leiten wir den Benutzer also auf die Startseite um.

Umleitung des benutzerdefinierten Anmeldeformulars

Groß! Nehmen Sie sich die Zeit, die anderen Einstellungen zu überprüfen und alle gewünschten Änderungen vorzunehmen. Klicken Sie dann oben im Formulargenerator auf Speichern .

Schritt 5: Erstellen Sie Ihre benutzerdefinierte Anmeldeseite

Jetzt können wir Ihr neues Anmeldeformular veröffentlichen.

Sie können Ihr benutzerdefiniertes Anmeldeformular überall auf Ihrer Website einbetten, einschließlich:

  • Seiten
  • Beiträge
  • In der Seitenleiste
  • In der Fußzeile

In diesem Beispiel erstellen wir eine benutzerdefinierte WordPress-Anmeldeseite. Wir werden nicht viele Anpassungen vornehmen, aber Sie können sich mehr Zeit nehmen, um Ihre Seite zu branden, bevor Sie live gehen, wenn Sie möchten.

Klicken Sie zum Starten auf die Schaltfläche Einbetten oben im Formular-Generator.

Betten Sie Ihr Anmeldeformular in eine benutzerdefinierte Anmeldeseite ein

Klicken Sie auf Neue Seite erstellen

Neue benutzerdefinierte Anmeldeseite erstellen

Und jetzt gib deiner Seite einen Namen. Klicken Sie anschließend auf Let's Go .

Erstellen Sie eine benutzerdefinierte Anmeldeseite

Ihr benutzerdefiniertes Anmeldeformular kann angepasst werden! Sie können Branding und Bilder hinzufügen und mit dem Layout herumspielen, bis es gut aussieht.

Dann klicken Sie einfach auf die Schaltfläche Veröffentlichen Sie Ihre benutzerdefinierte Login - Seite zu veröffentlichen.

Benutzerdefinierte WordPress-Anmeldeseite veröffentlichen

Das ist es! Ihre benutzerdefinierte WordPress-Anmeldeseite ist live und einsatzbereit.

Denken Sie daran: Sie müssen sich bei WordPress abmelden, um Ihr fertiges Formular zu sehen! Wenn Sie angemeldet sind, sehen Sie den Anmeldebildschirm nicht.

Wenn Sie möchten, können Sie ein Zielseiten-Plugin verwenden, um eine benutzerdefinierte Anmeldeseite zu erstellen und Ihr Anmeldeformular einzubetten. Auf diese Weise können Sie ganz einfach ein Hintergrundbild und benutzerdefinierte Farben einrichten.

Erstellen Sie jetzt Ihr benutzerdefiniertes Anmeldeformular

Nächster Schritt: Passen Sie Ihr Registrierungsformular an

Und da hast du es! Sie wissen jetzt, wie Sie ein benutzerdefiniertes Anmeldeformular in WordPress erstellen. Sie können dies als Ausgangspunkt verwenden, um das Branding auf Ihrer Login-Seite zu entwickeln.

Sehen Sie sich als Nächstes an, wie Sie ein Benutzerregistrierungsformular für Ihre Site erstellen. Das Erstellen eines benutzerdefinierten Registrierungsformulars ist eine großartige Möglichkeit, um Ihre Website professioneller aussehen zu lassen.

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält das Addon zur Benutzerregistrierung und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel weitergeholfen hat, folgen Sie uns bitte auf Facebook und Twitter, um weitere kostenlose WordPress-Tutorials und -Anleitungen zu erhalten.