So erstellen Sie eine benutzerdefinierte Anmeldeseite in WordPress

Möchten Sie eine individuelle Anmeldeseite für Ihre WordPress-Website erstellen? Ich habe bereits für mehrere WordPress-Websites individuelle Anmeldeseiten eingerichtet, und es ist eine dieser Änderungen, die zwar klein erscheint, aber einen großen Unterschied macht. Der Standard-Anmeldebildschirm von WordPress ist langweilig, generisch und leitet Besucher sogar von Ihrer Website weg.

Die gute Nachricht? Du kannst sie mit nur einem Plugin durch eine vollständig an deine Marke angepasste, stilvoll gestaltete Anmeldeseite ersetzen. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du mit WPForms eine benutzerdefinierte Anmeldeseite erstellst. Dazu gehören die Erstellung des Formulars, die Anpassung des Designs, die Veröffentlichung der Seite und die Umleitung der Standard-Anmelde-URL.

Erstelle jetzt deine eigene Anmeldeseite! 🙂

Warum eine eigene Login-Seite in WordPress erstellen?

Jede WordPress-Website verfügt standardmäßig über denselben Anmeldebildschirm. Er zeigt das WordPress-Logo, einen schlichten weißen Hintergrund und nichts, was den Besuchern verrät, auf welcher Website sie sich gerade anmelden. Hier sind die Gründe, warum es sich lohnt, dies zu ändern:

• Branding. Eine individuell gestaltete Anmeldeseite rückt Ihr Logo, Ihre Farben und Ihre Botschaften in den Mittelpunkt. Bei WPForms nutzen wir unsere individuell gestaltete Anmeldeseite, um unseren Nutzern neue Funktionen und Updates vorzustellen.
• Sicherheit. Wenn Sie eine benutzerdefinierte Anmeldeseite erstellen, können Sie die Standardseite umleiten wp-login.php URL. Dies verringert Brute-Force-Angriffe und Login-Spam, da Bots Ihr echtes Anmeldeformular nicht finden können. Kombinieren Sie dies mit einem starken WordPress-Sicherheits-Plugins für noch besseren Schutz.
• Professionelles Erscheinungsbild. Wenn Ihre Website Mitgliederregistrierungen, Kundenanmeldungen oder Schülerkonten ermöglicht, schafft eine mit Ihrem Branding versehene Anmeldeseite Vertrauen. Besucher wissen sofort, dass sie an der richtigen Stelle sind, sobald sie Ihr Logo sehen.

Und das Beste daran: Sie brauchen kein separates Plugin zur Anpassung des Anmeldeformulars, keinen Page Builder UND kein Formular-Plugin, um das zu bewerkstelligen. WPForms übernimmt das Anmeldeformular, die visuelle Gestaltung und die Seitenerstellung – alles in einem Tool.

So erstellen Sie eine benutzerdefinierte Anmeldeseite in WordPress

Ich zeige Ihnen, wie Sie mit WPForms und dem Add-on „User Registration“ eine vollständig individuelle Anmeldeseite erstellen. Dabei wird alles behandelt: das Erstellen des Formulars, das Einfügen Ihres Brandings, die Gestaltung des Erscheinungsbilds, das Veröffentlichen der Seite und das Umleiten der Standard-Anmelde-URL von WordPress, damit Bots sie nicht finden können.

Schritt 1: Installieren Sie WPForms und richten Sie das Add-on für die Benutzerregistrierung ein

Zunächst musst du WPForms Pro auf deiner Website installieren. Das Add-on „User Registration“ bietet dir Formularvorlagen für die Anmeldung, Registrierung und das Zurücksetzen von Passwörtern und ist ab der Pro-Version verfügbar.

Falls Sie WPForms noch nicht haben, laden Sie es von der Preisseite herunter und installieren Sie es auf Ihrer WordPress-Website. Gehen Sie anschließend in Ihrem Dashboard zu „WPForms“ » „Addons “.

Suchen Sie das Add-on „User Registration“ und klicken Sie auf die Schaltfläche, um es zu installieren. Damit ist die Einrichtung abgeschlossen. Mit einem Plugin und einem Add-on verfügen Sie nun über alles, was Sie benötigen, um eine benutzerdefinierte Anmeldeseite, ein Registrierungsformular und ein Formular zum Zurücksetzen des Passworts zu erstellen.

Holen Sie sich jetzt WPForms Pro 🙂

Schritt 2: Erstellen Sie ein benutzerdefiniertes Anmeldeformular

Klicken Sie einfach auf „WPForms“ » „Neu hinzufügen“, um Ihr Anmeldeformular zu erstellen.

Geben Sie Ihrem Formular einen Namen (z. B. „Benutzerdefiniertes Anmeldeformular“) und wählen Sie dann die Vorlage „Benutzeranmeldeformular“ aus. Diese Vorlage wurde speziell für die Anmeldefunktion entwickelt und wird nur angezeigt, wenn das Add-on „Benutzerregistrierung“ aktiviert ist.

Die Vorlage wird mit drei bereits vorhandenen Feldern geladen: Benutzername, Passwort und „Angemeldet bleiben“.

Mit dem Kontrollkästchen „Angemeldet bleiben“ können Besucher zwischen ihren Besuchen angemeldet bleiben. Das ist zwar nur eine kleine Annehmlichkeit, erspart wiederkehrenden Nutzern jedoch, ihre Anmeldedaten jedes Mal neu eingeben zu müssen. Weitere technische Details findest du in der Dokumentation zum Anmeldeformular.

Sie können diese Vorlage unverändert verwenden oder weiter anpassen. Ich würde empfehlen, zumindest Ihr Branding hinzuzufügen – genau das werden wir als Nächstes tun.

Schritt 3: Branding hinzufügen und das Design anpassen

Sie können Ihr Logo hinzufügen, Farben ändern, Schriftarten anpassen und Schaltflächen gestalten, ohne ein separates Plugin zur Anpassung der Anmeldeseite installieren zu müssen. Alles erfolgt direkt in WPForms und im WordPress-Block-Editor.

Fügen Sie Ihr Logo oder Ihr Markenbild hinzu

Zieh zunächst das Feld „Inhalt“ an den oberen Rand deines Formulars, direkt unter den Titel.

Klicken Sie auf das Feld „Inhalt“, um links das Fenster „Feldoptionen“ zu öffnen.

Es erscheint ein Texteditor, in den Sie beliebige Inhalte eingeben können. Um Ihr Logo einzufügen, klicken Sie auf die Schaltfläche „Medien hinzufügen“ und laden Sie Ihr Markenbild hoch.

Laden Sie Ihr Logo über die WordPress-Medienbibliothek hoch, genau wie jedes andere Bild auf Ihrer Website.

Sobald Ihr Branding Ihren Vorstellungen entspricht, klicken Sie auf „Speichern“. Brauchen Sie weitere Design-Inspiration? Schauen Sie sich diese Beispiele für Anmeldeseiten an, um Ideen zu sammeln.

Gestalte dein Anmeldeformular im Block-Editor

Hier ist etwas, was in den meisten anderen Anleitungen zu Anmeldeseiten nicht erwähnt wird: Sie benötigen kein spezielles Plugin für die Gestaltung Ihres Anmeldeformulars. WPForms verfügt über integrierte Formulargestaltungsfunktionen direkt im WordPress-Block-Editor.

Wenn Sie Ihr Formular in eine Seite einbetten (das machen wir in Schritt 5), werden in der Seitenleiste des WPForms-Blocks Gestaltungsoptionen angezeigt. Dort können Sie Folgendes anpassen:

• Feldstile wie Hintergrundfarben, Rahmenfarben und Rahmenradius
• Etikettenformate, einschließlich Schriftarten, Schriftgrößen und Farben
• Stiloptionen für Schaltflächen wie Hintergrundfarbe, Textfarbe, Eckenradius und Breite
• Allgemeine Formatierung für Abstände, Ausrichtung und Container-Hintergründe

Das spart enorm viel Zeit. Anstatt zwischen einem Plugin zur Anpassung der Anmeldeseite für die Farben und einem Formular-Plugin für die eigentliche Anmeldefunktion hin- und herzuwechseln, erledigst du alles in WPForms.

Eine vollständige Anleitung zu allen Gestaltungsoptionen findest du im Leitfaden zur Gestaltung deiner Formulare im Block-Editor. Wenn du schon dabei bist, passen wir auch gleich den Text der Absenden-Schaltfläche an.

Gehen Sie im Formular-Generator zu „Einstellungen“ » „Allgemein“ und ändern Sie den Text der Absenden-Schaltfläche in etwa „Anmelden“.

Schritt 4: Konfigurieren Sie Ihre Anmeldeeinstellungen

Klicken Sie im Formular-Generator im linken Bereich auf „Einstellungen “. Klicken Sie nun auf „Bestätigungen“, um festzulegen, was nach einer erfolgreichen Anmeldung geschehen soll.

Bei den meisten Websites möchten Sie die Nutzer nach der Anmeldung auf eine bestimmte Seite weiterleiten. Sie können sie auf Ihre Startseite, ihr Konto-Dashboard oder eine beliebige andere Seite weiterleiten. Stellen Sie den Bestätigungstyp auf „Zur URL wechseln (Weiterleitung)“ ein und geben Sie Ihre Ziel-URL ein.

Es gibt noch eine weitere Einstellung, die Sie sich ansehen sollten. Scrollen Sie nach unten und klicken Sie auf „Benutzerregistrierung“, um die entsprechenden Optionen anzuzeigen.

Aktivieren Sie die Option, um das Formular für angemeldete Benutzer auszublenden. Auf diese Weise wird das Anmeldeformular für bereits angemeldete Benutzer nicht angezeigt. Sie können die Meldung, die stattdessen angezeigt wird, individuell anpassen.

Klicken Sie auf „Speichern“, wenn Sie mit den Einstellungen fertig sind.

Schritt 5: Veröffentlichen Sie Ihre benutzerdefinierte Anmeldeseite

Ihr Anmeldeformular ist erstellt, mit Ihrem Branding versehen und konfiguriert. Nun fügen wir es auf einer Seite ein. Klicken Sie oben im Formular-Generator auf die Schaltfläche „Einbetten “.

Es erscheint ein Popup-Fenster, in dem Sie gefragt werden, wo Sie das Formular einbetten möchten. Klicken Sie auf „Neue Seite erstellen“.

Geben Sie Ihrer Seite einen Namen (zum Beispiel „Anmeldung“) und klicken Sie auf „Los geht’s“.

WordPress öffnet den Block-Editor, wobei Ihr Anmeldeformular bereits eingebettet ist. Hier sehen Sie auch die Optionen zur Blockgestaltung aus Schritt 3, sodass Sie Farben und Schriftarten direkt hier vor der Veröffentlichung anpassen können.

Wenn alles so aussieht, wie du es dir vorstellst, klicke auf „Veröffentlichen“. Deine individuelle Anmeldeseite ist in wenigen Minuten online und bereit, registrierte Nutzer zu empfangen!

Schritt 6: Fügen Sie die Anmeldeseite zu Ihrem Navigationsmenü hinzu

Ihre Anmeldeseite ist vorhanden, aber Besucher müssen sie erst einmal finden können. Der naheliegendste Ort dafür ist das Navigationsmenü Ihrer Website. Gehen Sie in Ihrem WordPress-Dashboard zu „Darstellung“ » „Menüs “.

Wenn Sie bereits ein Menü eingerichtet haben, suchen Sie Ihre Anmeldeseite im Seiten bereich auf der linken Seite und klicken Sie auf „Zum Menü hinzufügen“.

Zieh die Anmeldeseite an die gewünschte Stelle in der Menüreihenfolge. Die meisten Websites platzieren sie ganz rechts in der Navigationsleiste. Wähle die Anzeigeposition deines Menüs aus (in der Regel „Primäres Menü“ für die Kopfzeile) und klicke auf „Menü speichern“.

Falls Ihre Website noch kein Menü hat, müssen Sie zunächst eines erstellen. Geben Sie im Abschnitt „Menüstruktur“ einen Namen für Ihr Menü ein.

Klicken Sie auf „Menü erstellen“, um es einzurichten. Fügen Sie dann Ihre Anmeldeseite mit denselben Schritten hinzu, die ich gerade beschrieben habe. Rufen Sie nach dem Speichern Ihre Startseite auf, um sicherzustellen, dass der Anmeldelink an der gewünschten Stelle angezeigt wird.

Schritt 7: Die Standard-Anmelde-URL von WordPress umleiten

Dieser Schritt ist optional, aber ich empfehle ihn dringend. Standardmäßig kann weiterhin jeder die Seite aufrufen yoursite.com/wp-login.php und den standardmäßigen WordPress-Anmeldebildschirm sehen.

Wenn Sie diese URL auf Ihre benutzerdefinierte Anmeldeseite umleiten, bleibt das Nutzererlebnis einheitlich und Ihre Website wird für Bots schwieriger anzugreifen.

Dafür verwenden wir WPCode. Das ist ein kostenloses Plugin, mit dem man Code-Schnipsel in WordPress einfügen kann, ohne die Theme-Dateien bearbeiten zu müssen.

Installieren und aktivieren Sie WPCode, gehen Sie dann zu „Code-Schnipsel“ » „+ Schnipsel hinzufügen“. Wählen Sie „Eigenen Code hinzufügen (Neues Schnipsel)“.

Geben Sie Ihrem Snippet einen Namen wie „Weiterleitung zur Anmeldeseite“ und fügen Sie den Weiterleitungscode ein. Achten Sie darauf, die URL im Code so anzupassen, dass sie mit der URL Ihrer benutzerdefinierten Anmeldeseite übereinstimmt. Klicken Sie auf „Snippet speichern“.

Sobald die Daten erfolgreich gespeichert wurden, erscheint eine Bestätigungsmeldung.

Schalten Sie abschließend oben auf der Seite das Snippet auf „Aktiv“ um.

Wer nun versucht, die Seite aufzurufen wp-login.php wird stattdessen automatisch auf Ihre individuelle, mit Ihrem Branding versehene Anmeldeseite weitergeleitet.

Bonus: Erstellen Sie ein benutzerdefiniertes Formular zum Zurücksetzen des Passworts

Wenn Ihre Website Benutzerregistrierungen zulässt, benötigen Sie auch ein individuelles Formular zum Zurücksetzen des Passworts. Ohne ein solches Formular werden Benutzer, die ihr Passwort vergessen haben, auf den Standard-WordPress-Bildschirm zum Zurücksetzen weitergeleitet, was das von Ihnen gerade erst geschaffene Markenerlebnis zunichte macht.

Das Add-on „Benutzerregistrierung“ enthält eine Vorlage für ein Formular zum Zurücksetzen des Benutzerpassworts. Gehen Sie zu „WPForms“ » „Neu hinzufügen“ und wählen Sie diese aus.

Sie können dieses Formular genauso anpassen wie das Anmeldeformular: Fügen Sie Ihr Branding über das Feld „Inhalt“ hinzu, gestalten Sie es im Block-Editor und veröffentlichen Sie es auf einer eigenen Seite. Eine detaillierte Anleitung finden Sie in unserem Leitfaden zur Anpassung des Formulars zum Zurücksetzen des Passworts in WordPress.

Häufig gestellte Fragen zu benutzerdefinierten WordPress-Anmeldeseiten

Wenn Sie eine benutzerdefinierte Anmeldeseite für WordPress erstellen, den vorhandenen WordPress-Anmeldebildschirm anpassen oder ein Anmeldeformular auf einer beliebigen Seite Ihrer Website einfügen möchten, finden Sie hier Antworten auf die häufigsten Fragen.

Kann ich die WordPress-Anmeldeseite ohne Programmierkenntnisse anpassen?

Ja. Mit WPForms können Sie ein individuelles Anmeldeformular vollständig über den Drag-and-Drop-Builder und den WordPress-Block-Editor erstellen und gestalten. Sie können Farben, Schriftarten und Schaltflächenstile ändern sowie Ihr eigenes Branding hinzufügen, ohne auch nur eine einzige Zeile CSS oder PHP schreiben zu müssen.

Welches ist das beste Plugin für eine benutzerdefinierte WordPress-Anmeldeseite?

Ich würde WPForms Pro mit dem Add-on „User Registration“ empfehlen. Während in einigen Anleitungen empfohlen wird, separate Plugins für das Formular, das Styling und das Seitenlayout zu verwenden, deckt WPForms alle drei Bereiche ab.

In einem einzigen Paket erhalten Sie Anmeldeformulare, Registrierungsformulare, Formulare zum Zurücksetzen des Passworts sowie Tools zur visuellen Gestaltung. Einen umfassenden Überblick über die verfügbaren Optionen finden Sie in unserer Zusammenstellung der besten WordPress-Plugins für Anmeldeseiten.

Wie füge ich ein Anmeldeformular auf einer beliebigen Seite in WordPress ein?

Mit WPForms ist das ganz einfach. Du kannst dein Anmeldeformular über den WPForms-Block im Block-Editor, einen Shortcode oder ein Widget einbinden.

Das bedeutet, dass Sie ein Anmeldeformular auf jeder beliebigen Seite, in Ihrer Seitenleiste oder in Ihrer Fußzeile platzieren können. Eine vollständige Anleitung finden Sie in unserem Leitfaden zur Anzeige von Anmelde- und Registrierungsformularen auf jeder beliebigen Seite.

Ist es sicher, die Standard-Anmelde-URL von WordPress umzuleiten?

Ja, und das ist tatsächlich eine sinnvolle Sicherheitsmaßnahme. Die Umleitung wp-login.php Wenn Sie Ihre eigene Anmeldeseite verwenden, erreichen Bots und automatisierte Skripte, die auf die Standard-URL abzielen, Ihr eigentliches Anmeldeformular nicht.

Achte einfach darauf, dass der Weiterleitungscode nur für GET-Anfragen gilt, damit die POST-Übermittlung des Anmeldeformulars weiterhin korrekt funktioniert.

Als Nächstes: Erstellen Sie ein umfassendes Registrierungserlebnis

Sie verfügen nun über eine vollständig an Ihre Marke angepasste Anmeldeseite für Ihre WordPress-Website. In Kombination mit einem Formular zum Zurücksetzen des Passworts erhalten Ihre Nutzer von Anfang bis Ende ein professionelles, ansprechendes Erlebnis.

Um das Ganze abzurunden, schau dir an, wie du mit WPForms ein Formular zur Benutzerregistrierung erstellst. Und wenn Sicherheit für dich oberste Priorität hat, erfährst du hier, wie du unbefugte Passwort-Zurücksetzungen in WordPress verhindern kannst, um die Sicherheit noch weiter zu erhöhen.

Erstellen Sie jetzt Ihre individuelle Anmeldeseite

Sind Sie bereit, Ihr Formular zu erstellen? Starten Sie noch heute mit dem einfachsten WordPress-Formularerstellungs-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn dieser Artikel Ihnen geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und -Anleitungen.