So erstellen Sie eine benutzerdefinierte Anmeldeseite in WordPress

Möchten Sie eine benutzerdefinierte Anmeldeseite für Ihre WordPress-Site erstellen? Ich habe benutzerdefinierte Anmeldeseiten für mehrere WordPress-Sites eingerichtet, und es ist eine dieser Änderungen, die klein aussieht, aber einen echten Unterschied macht. Der Standard-WordPress-Anmeldebildschirm ist langweilig, generisch und verlinkt sogar von Ihrer Website weg.

Die gute Nachricht? Sie können ihn mit nur einem Plugin durch eine vollständig gebrandete, gestylte Anmeldeseite ersetzen. In dieser Anleitung führe ich Sie durch die Erstellung einer benutzerdefinierten Anmeldeseite mit WPForms. Dazu gehören das Erstellen des Formulars, das Anpassen des Designs, das Veröffentlichen der Seite und das Umleiten der Standard-Anmelde-URL.

Erstellen Sie jetzt Ihre benutzerdefinierte Anmeldeseite! 🙂

Warum eine benutzerdefinierte Anmeldeseite in WordPress erstellen?

Jede WordPress-Site wird mit dem gleichen Standard-Anmeldebildschirm geliefert. Er hat das WordPress-Logo, einen schlichten weißen Hintergrund und nichts, was den Besuchern mitteilt, bei welcher Website sie sich tatsächlich anmelden. Hier ist, warum sich das zu ändern lohnt:

• Branding. Eine benutzerdefinierte Anmeldeseite stellt Ihr Logo, Ihre Farben und Ihre Botschaften in den Vordergrund. Bei WPForms verwenden wir unsere benutzerdefinierte Anmeldeseite, um neue Funktionen und Updates für unsere Benutzer hervorzuheben.
• Sicherheit. Wenn Sie eine benutzerdefinierte Anmeldeseite erstellen, können Sie die Standard-URL wp-login.php umleiten. Dies reduziert Brute-Force-Angriffe und Anmelde-Spam, da Bots Ihr echtes Anmeldeformular nicht finden können. Kombinieren Sie dies mit starken WordPress-Sicherheits-Plugins für noch besseren Schutz.
• Professionelles Erscheinungsbild. Wenn Ihre Website Mitgliederregistrierungen, Kundenanmeldungen oder Studenten-Konten akzeptiert, schafft eine gebrandete Anmeldeseite Vertrauen. Besucher wissen sofort, dass sie am richtigen Ort sind, wenn sie Ihr Logo sehen.

Und das Beste daran: Sie benötigen kein separates Plugin zum Anpassen der Anmeldung, keinen Seitenersteller UND kein Formular-Plugin, um dies zu erreichen. WPForms kümmert sich um das Anmeldeformular, das visuelle Styling und die Seitenerstellung – alles in einem Tool.

So erstellen Sie eine benutzerdefinierte Anmeldeseite in WordPress

Ich zeige Ihnen, wie Sie mit WPForms und seinem User Registration Addon eine vollständige benutzerdefinierte Anmeldeseite erstellen. Dies deckt alles ab: Erstellen des Formulars, Hinzufügen Ihres Brandings, Anpassen des Designs, Veröffentlichen der Seite und Umleiten der Standard-WordPress-Anmelde-URL, damit Bots sie nicht finden können.

Schritt 1: WPForms installieren und das User Registration Addon einrichten

Zuerst benötigen Sie WPForms Pro, das auf Ihrer Website installiert ist. Das User Registration Addon stellt Ihnen Vorlagen für Anmelde-, Registrierungs- und Passwort-Zurücksetzungsformulare zur Verfügung und ist ab der Pro-Version verfügbar.

Wenn Sie WPForms noch nicht haben, holen Sie es sich von der Preisseite und installieren Sie es auf Ihrer WordPress-Website. Gehen Sie dann in Ihrem Dashboard zu WPForms » Addons.

Finden Sie das User Registration Addon und klicken Sie auf die Schaltfläche, um es zu installieren. Das war's für die Einrichtung. Mit einem Plugin und einem Addon haben Sie jetzt alles, was Sie brauchen, um eine benutzerdefinierte Anmeldeseite, ein Registrierungsformular und ein Formular zum Zurücksetzen des Passworts zu erstellen.

Holen Sie sich jetzt WPForms Pro! :)

Schritt 2: Ein benutzerdefiniertes Anmeldeformular erstellen

Klicken Sie nun auf WPForms » Neu erstellen, um Ihr Anmeldeformular zu erstellen.

Geben Sie Ihrem Formular einen Namen (etwas wie „Benutzerdefiniertes Anmeldeformular“) und wählen Sie dann die Vorlage User Login Form. Diese Vorlage ist speziell für die Anmeldefunktionalität konzipiert und wird ohne das aktivierte User Registration Addon nicht angezeigt.

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

Die Checkbox „Angemeldet bleiben“ ermöglicht es Besuchern, zwischen den Besuchen eingeloggt zu bleiben. Es ist eine kleine Geste, aber sie erspart wiederkehrenden Benutzern, ihre Anmeldedaten jedes Mal neu einzugeben. Weitere technische Details finden Sie in der Dokumentation zum Anmeldeformular.

Sie können diese Vorlage genau so verwenden, wie sie ist, oder sie weiter anpassen. Ich empfehle mindestens, Ihr Branding hinzuzufügen, was wir als Nächstes tun werden.

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 von Anmeldeseiten zu installieren. Alles geschieht direkt in WPForms und dem WordPress Block-Editor.

Logo oder Branding-Bild hinzufügen

Beginnen Sie damit, das Feld Inhalt direkt unter dem Titel an den Anfang Ihres Formulars zu ziehen.

Klicken Sie auf das Inhaltsfeld, um dessen Feldoptionen-Panel auf der linken Seite zu öffnen.

Sie sehen einen Texteditor, in den Sie alles einfügen können, was Sie möchten. 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-Mediathek hoch, genau wie jedes andere Bild auf Ihrer Website.

Wenn Ihr Branding gut aussieht, klicken Sie auf Speichern. Benötigen Sie weitere Design-Inspiration? Sehen Sie sich diese Beispiele für Anmeldeseiten an, um Ideen zu erhalten.

Gestalten Sie Ihr Anmeldeformular im Block-Editor

Hier ist etwas, das die meisten anderen Anleitungen für Anmeldeseiten nicht erwähnen: Sie benötigen kein spezielles Styling-Plugin für Ihr Anmeldeformular. WPForms verfügt über integriertes Formular-Styling direkt im WordPress Block-Editor.

Wenn Sie Ihr Formular auf einer Seite einbetten (das machen wir in Schritt 5), sehen Sie Styling-Optionen in der WPForms-Block-Seitenleiste. Von dort aus können Sie anpassen:

• Feldstile wie Hintergrundfarben, Rahmenfarben und Radius
• Labelstile einschließlich Schriftarten, Größen und Farben
• Schaltflächenstile wie Hintergrundfarbe, Textfarbe, Radius und Breite
• Gesamtes Formular-Styling für Abstände, Ausrichtung und Container-Hintergründe

Dies ist eine enorme Zeitersparnis. Anstatt ein Plugin zur Anpassung der Anmeldung für die Farben und ein Formular-Plugin für die eigentliche Anmeldefunktionalität zu jonglieren, erledigen Sie alles in WPForms.

Eine vollständige Anleitung zu allen Styling-Optionen finden Sie im Leitfaden zum Styling Ihrer Formulare im Block-Editor. Während Sie dabei sind, passen wir auch den Text der Sende-Schaltfläche an.

Gehen Sie im Formular-Builder zu Einstellungen » Allgemein und ändern Sie den Text der Sende-Schaltfläche in etwas wie „Anmelden“.

Schritt 4: Ihre Anmeldeeinstellungen konfigurieren

Klicken Sie im Formular-Builder immer noch auf Einstellungen im linken Bedienfeld. Klicken Sie nun auf Bestätigungen, um zu entscheiden, was nach einer erfolgreichen Anmeldung geschieht.

Für die meisten Websites möchten Sie Benutzer nach der Anmeldung irgendwohin weiterleiten. Sie können sie zu Ihrer Homepage, ihrem Konto-Dashboard oder einer anderen Seite senden. Stellen Sie den Bestätigungstyp auf Zu URL gehen (Weiterleitung) und geben Sie Ihre Ziel-URL ein.

Es gibt noch eine weitere Einstellung, die es wert ist, überprüft zu werden. Scrollen Sie nach unten und klicken Sie auf Benutzerregistrierung, um diese Optionen zu erweitern.

Schalten Sie die Option ein, um das Formular für angemeldete Benutzer auszublenden. Auf diese Weise sehen Personen, die bereits angemeldet sind, das Anmeldeformular nicht. Sie können stattdessen die Nachricht anpassen, die sie sehen.

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

Schritt 5: Ihre benutzerdefinierte Anmeldeseite veröffentlichen

Ihr Anmeldeformular ist erstellt, gebrandet und konfiguriert. Nun platzieren wir es auf einer Seite. Klicken Sie im Formular-Builder oben auf die Schaltfläche Einbetten.

Ein Popup fragt Sie, wo Sie das Formular einbetten möchten. Klicken Sie auf Neue Seite erstellen.

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

WordPress öffnet den Block-Editor mit Ihrem bereits eingebetteten Anmeldeformular. Hier sehen Sie auch die Block-Stiloptionen aus Schritt 3, sodass Sie Farben und Schriftarten hier feinabstimmen können, bevor Sie veröffentlichen.

Wenn alles so aussieht, wie Sie es möchten, klicken Sie auf Veröffentlichen. Ihre benutzerdefinierte Anmeldeseite ist live und bereit, registrierte Benutzer in wenigen Minuten zu akzeptieren!

Schritt 6: Die Anmeldeseite zu Ihrem Navigationsmenü hinzufügen

Ihre Anmeldeseite existiert, aber Besucher brauchen einen Weg, sie zu finden. Der natürlichste Ort 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 Bereich Seiten auf der linken Seite und klicken Sie auf Zum Menü hinzufügen.

Ziehen Sie die Anmeldeseite per Drag & Drop dorthin, wo Sie sie in der Menüreihenfolge haben möchten. Die meisten Websites platzieren sie ganz rechts in der Navigationsleiste. Wählen Sie den Anzeigeort Ihres Menüs (normalerweise Primärmenü für die Kopfzeile) und klicken Sie auf Menü speichern.

Wenn Ihre Website noch kein Menü hat, müssen Sie zuerst eines erstellen. Geben Sie unter dem Abschnitt Menüstruktur einen Namen für Ihr Menü ein.

Klicken Sie auf Menü erstellen, um es einzurichten. Fügen Sie dann Ihre Anmeldeseite hinzu, indem Sie dieselben Schritte ausführen, die ich gerade beschrieben habe. Besuchen Sie Ihre Homepage nach dem Speichern, um sicherzustellen, dass der Anmeldelink dort angezeigt wird, wo Sie ihn erwarten.

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

Dieser Schritt ist optional, aber ich empfehle ihn dringend. Standardmäßig kann sich immer noch jeder unter ihreseite.com/wp-login.php anmelden und den generischen WordPress-Anmeldebildschirm sehen.

Die Weiterleitung dieser URL zu Ihrer benutzerdefinierten Anmeldeseite sorgt für ein konsistentes Erlebnis und erschwert es Bots, Ihre Website ins Visier zu nehmen.

Dafür verwenden wir WPCode. Es ist ein kostenloses Plugin, mit dem Sie Code-Snippets zu WordPress hinzufügen können, ohne Theme-Dateien bearbeiten zu müssen.

Installieren und aktivieren Sie WPCode und gehen Sie dann zu Code-Snippets » + Snippet hinzufügen. Wählen Sie Ihren benutzerdefinierten Code hinzufügen (Neues Snippet).

Benennen Sie Ihr Snippet beispielsweise „Anmeldeseiten-Weiterleitung“ und fügen Sie den Weiterleitungscode ein. Stellen Sie sicher, dass Sie die URL im Code aktualisieren, damit sie mit der URL Ihrer benutzerdefinierten Anmeldeseite übereinstimmt. Klicken Sie auf Snippet speichern.

Sie sehen eine Bestätigung, sobald es erfolgreich gespeichert wurde.

Schalten Sie schließlich das Snippet oben auf der Seite auf Aktiv.

Jetzt wird jeder, der versucht, wp-login.php aufzurufen, stattdessen automatisch zu Ihrer gebrandeten benutzerdefinierten Anmeldeseite weitergeleitet.

Bonus: Ein benutzerdefiniertes Formular zum Zurücksetzen des Passworts erstellen

Wenn Ihre Website Benutzerregistrierungen zulässt, benötigen Sie auch ein benutzerdefiniertes Formular zur Passwortzurücksetzung. Ohne ein solches Formular werden Benutzer, die ihr Passwort vergessen, auf den Standard-WordPress-Bildschirm zur Zurücksetzung weitergeleitet, was das von Ihnen erstellte gebrandete Erlebnis unterbricht.

Das User Registration Addon enthält eine Vorlage für das Formular zur Benutzerpasswortzurücksetzung. 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 mit dem Inhaltsfeld hinzu, gestalten Sie es im Block-Editor und veröffentlichen Sie es auf einer eigenen Seite. Eine detaillierte Anleitung finden Sie in unserem Leitfaden zum Anpassen des Formulars zur Passwortzurücksetzung in WordPress.

FAQs zu benutzerdefinierten WordPress-Anmeldeseiten

Wenn Sie eine benutzerdefinierte Anmeldeseite für WordPress erstellen, die vorhandene WordPress-Anmeldeseite anpassen oder ein Anmeldeformular zu einer beliebigen Seite Ihrer Website hinzufügen möchten, beantworten diese Antworten die häufigsten Fragen.

Kann ich die WordPress-Anmeldeseite ohne Programmierung anpassen?

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

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

Ich würde WPForms Pro mit dem User Registration Addon empfehlen. Während einige Anleitungen die Verwendung separater Plugins für das Formular, das Styling und das Seitenlayout vorschlagen, kümmert sich WPForms um alle drei.

Sie erhalten Anmeldeformulare, Registrierungsformulare, Formulare zur Passwortzurücksetzung und visuelle Styling-Tools in einem einzigen Paket. Eine umfassendere Übersicht über die verfügbaren Optionen finden Sie in unserer Zusammenfassung der besten WordPress-Anmeldeseiten-Plugins.

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

WPForms macht dies einfach. Sie können Ihr Anmeldeformular mit dem WPForms-Block im Block-Editor, einem Shortcode oder einem Widget einbetten.

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

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

Ja, und es ist tatsächlich eine sinnvolle Sicherheitsmaßnahme. Die Umleitung von wp-login.php zu Ihrer benutzerdefinierten Anmeldeseite bedeutet, dass Bots und automatisierte Skripte, die die Standard-URL anvisieren, Ihr tatsächliches Anmeldeformular nicht erreichen.

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

Erstellen Sie als Nächstes eine vollständige Registrierungserfahrung

Sie haben jetzt eine vollständig gebrandete benutzerdefinierte Anmeldeseite für Ihre WordPress-Website. Gepaart mit einem Formular zur Passwortzurücksetzung erhalten Ihre Benutzer von Anfang bis Ende ein professionelles, poliertes Erlebnis.

Um das Ganze abzurunden, erfahren Sie, wie Sie mit WPForms ein Benutzerregistrierungsformular erstellen. Und wenn Sicherheit Priorität hat, erfahren Sie, wie Sie unbefugte Passwortzurücksetzungen in WordPress verhindern, um die Sicherheit weiter zu erhöhen.

Erstellen Sie jetzt Ihre benutzerdefinierte Anmeldeseite

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

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