So fügen Sie eine Anmeldeseite und Widgets im Frontend in WordPress hinzu

Die Standard-WordPress-Anmeldeseite bietet nicht die beste Benutzererfahrung und kann Ihre Benutzer sogar verwirren. Deshalb empfehlen wir, eine Anmeldeseite im Frontend hinzuzufügen, damit sich Benutzer direkt vom Hauptteil Ihrer Website aus anmelden können.

Dies verbessert die Zugänglichkeit und die allgemeine Benutzerzufriedenheit. Außerdem ist es praktisch, da Benutzer von verschiedenen Stellen Ihrer Website, wie z. B. Seitenleisten oder Fußzeilen, auf Anmeldeformulare zugreifen können.

Wir haben mehrere Online-Shops und Websites erstellt, auf denen wir diese Funktionalität für eine bessere Benutzerfreundlichkeit anbieten. Dies hat uns gelehrt, was für Front-End-Login-Seiten funktioniert und was nicht.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Front-End-Anmeldeseite und Widgets in WordPress hinzufügen können.

Warum und wann benötigen Sie ein Front-End-Login in WordPress?

Standardmäßig zeigt die WordPress-Anmeldeseite das WordPress-Branding an und passt normalerweise nicht zum Design Ihrer aktuellen WordPress-Website.

Dies funktioniert für kleinere WordPress-Blogs und Websites.

Wenn Sie jedoch eine Mitgliederseite, einen Online-Shop oder eine andere Website haben, auf der sich Benutzer registrieren und anmelden können, dann bietet das Hinzufügen einer Anmeldeseite und eines Widgets im Frontend eine bessere Benutzererfahrung.

Sie können diese Seite sogar mit Ihrem Branding anpassen oder ein einfaches Anmeldeformular zu Ihrer WordPress-Seitenleiste hinzufügen.

Lassen Sie uns nun sehen, wie Sie ganz einfach eine Front-End-Anmeldeseite und ein Anmelde-Widget in WordPress hinzufügen können. In diesem Tutorial zeigen wir Ihnen die 3 einfachsten Methoden, und Sie können die Links unten verwenden, um zur Methode Ihrer Wahl zu springen:

• Methode 1: Hinzufügen einer Frontend-Anmeldeseite und Widgets in WordPress mit WPForms
• Methode 2: Anmeldeseite im Frontend in WordPress mit SeedProd hinzufügen
• Methode 3: Eine Front-End-Anmeldeseite und Widgets in WordPress mit Theme My Login hinzufügen
• Expertentipp: Einen Anmeldebutton in Ihr WordPress-Website-Menü einfügen
• Bonus: CAPTCHA im WordPress-Anmeldeformular hinzufügen
• Video-Tutorial
• Häufig gestellte Fragen (FAQs)

Methode 1: Hinzufügen einer Frontend-Anmeldeseite und Widgets in WordPress mit WPForms

WPForms ist das beste WordPress-Kontaktformular-Plugin auf dem Markt und wird von über 6 Millionen Websites genutzt. Es ermöglicht Ihnen, einfach eine benutzerdefinierte Frontend-Anmeldeseite und ein Anmelde-Widget auf Ihrer Website zu erstellen.

Bei WPBeginner haben wir es zur Erstellung von Kontaktformularen und Jahresumfragen verwendet und hatten eine ausgezeichnete Erfahrung. Weitere Informationen finden Sie in unserem detaillierten WPForms-Testbericht.

Zuerst müssen Sie das WPForms Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Anfängerleitfaden, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung besuchen Sie die Seite WPForms » Einstellungen in der WordPress-Admin-Seitenleiste, um Ihren Lizenzschlüssel einzugeben.

Sie können diesen Schlüssel in Ihrem Konto auf der WPForms-Website erhalten.

Sobald Sie dies getan haben, gehen Sie im WordPress-Dashboard zur Seite WPForms » Addons, um das User Registration Addon zu finden.

Klicken Sie anschließend auf die Schaltfläche „Addon installieren“, um es auf Ihrer Website herunterzuladen und zu aktivieren.

Nach der Aktivierung des User Registration Addons gehen Sie im Admin-Menü zu WPForms » Neu erstellen, um den Formular-Builder zu starten.

Beginnen Sie hier, indem Sie einen Namen für das Formular eingeben, das Sie erstellen möchten. Wählen Sie anschließend einfach die Vorlage 'Benutzer-Login-Formular', um mit der Erstellung Ihres Benutzer-Login-Formulars zu beginnen.

Dies öffnet die Vorlage im Formular-Builder, wo Sie eine Formularvorschau auf der rechten Seite und eine Spalte mit verfügbaren Feldern auf der linken Seite sehen.

Die Vorlage enthält bereits die benötigten Felder für Benutzername und Passwort. Wenn Sie das Formular jedoch anpassen möchten, können Sie zusätzliche Felder aus der Seitenleiste per Drag & Drop ziehen.

Weitere Details finden Sie in unserer Anleitung zum Erstellen einer benutzerdefinierten WordPress-Anmeldeseite.

Sobald Sie mit Ihren Einstellungen zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Anmeldeformular zu einer Seite/einem Beitrag hinzufügen

Um Ihr Anmeldeformular zu einer Seite oder einem Beitrag hinzuzufügen, öffnen Sie die Seite/den Beitrag Ihrer Wahl im WordPress-Blockeditor im Admin-Bereich.

Sobald Sie dort sind, klicken Sie auf die Schaltfläche „+“, um das Blockmenü zu öffnen, und fügen Sie den WPForms-Block hinzu.

Wählen Sie danach das von Ihnen erstellte Anmeldeformular aus dem Dropdown-Menü im Block selbst aus.

Klicken Sie abschließend auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Einstellungen zu speichern.

Login-Formular zur Website-Seitenleiste hinzufügen

Wenn Sie das Anmeldeformular zur Seitenleiste Ihrer Website hinzufügen möchten, besuchen Sie im WordPress-Dashboard die Seite Design » Widgets.

Klicken Sie hier auf die Schaltfläche „+“ in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen.

Von hier aus müssen Sie den WPForms-Block finden und zur Seitenleiste hinzufügen.

Sobald Sie dies getan haben, wählen Sie das Anmeldeformular aus dem Dropdown-Menü im Block selbst aus.

Klicken Sie abschließend auf die Schaltfläche 'Aktualisieren', um Ihre Einstellungen zu speichern. Weitere Details finden Sie in unserem Leitfaden zum Hinzufügen eines Anmeldeformulars in Ihrer WordPress-Seitenleiste.

Jetzt können Sie Ihre WordPress-Site besuchen, um das Anmeldeformular in der Seitenleiste anzuzeigen.

Anmeldeformular im Full Site Editor hinzufügen

Wenn Sie ein blockbasiertes Theme verwenden, können Sie Ihr Login nicht mit der obigen Methode zur Seitenleiste der Website hinzufügen.

Um ein Anmeldeformular in FSE hinzuzufügen, besuchen Sie die Seite Darstellung » Editor im WordPress-Dashboard.

Dies öffnet das FSE, wo Sie auf die Schaltfläche „+“ klicken müssen, um das Blockmenü zu öffnen.

Suchen Sie von hier aus den WPForms-Block und fügen Sie ihn an einer beliebigen Stelle auf Ihrer Website hinzu.

Wählen Sie danach das von Ihnen erstellte Anmeldeformular aus dem Dropdown-Menü im Block selbst aus.

Klicken Sie abschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Bonus-Tipp: Um Ihr Anmeldeformular weiter anzupassen, sehen Sie sich unser Tutorial an, wie Sie Ihre WordPress-Formulare gestalten.

Methode 2: Anmeldeseite im Frontend in WordPress mit SeedProd hinzufügen

SeedProd ist der beste Drag-and-Drop-Seitenersteller für WordPress auf dem Markt und wird von über 1 Million Websites genutzt.

Es ermöglicht Ihnen, eine vollständig benutzerdefinierte Anmeldeseite zu erstellen, die zum Design Ihrer aktuellen Website passen kann oder etwas Einzigartiges ist.

Es ist sehr anfängerfreundlich und verfügt über eine Fülle von professionell gestalteten Anmeldeseiten-Vorlagen, die Sie zum Erstellen Ihrer Anmeldeseite verwenden können.

Mehrere unserer Partner-Marken haben ihre gesamten Websites, einschließlich Anmeldeseiten, mit diesem Tool entworfen. Weitere Details finden Sie in unserem vollständigen SeedProd-Testbericht.

Zuerst müssen Sie das SeedProd Plugin installieren und aktivieren. Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung den Bildschirm SeedProd » Landing Pages in der WordPress-Admin-Seitenleiste und wählen Sie die Option „Login-Seite“, indem Sie auf die Schaltfläche „Login-Seite einrichten“ klicken.

Dies führt Sie zur Ansicht 'Vorlagen', wo Sie eine Vorlage auswählen und den Drag-and-Drop-Builder verwenden können, um die Seite anzupassen.

Mit einer leeren Vorlage können Sie sogar eine benutzerdefinierte Front-End-Anmeldeseite von Grund auf neu gestalten.

Nach der Auswahl einer Vorlage Ihrer Wahl werden Sie aufgefordert, einen Seitennamen einzugeben. SeedProd verwendet dann den Seitennamen als URL für die Landingpage Ihres Anmeldeformulars.

Sobald Sie dies getan haben, klicken Sie auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“, um fortzufahren.

Dies startet den Drag-and-Drop-Builder von SeedProd, wo Sie eine Vorschau der Anmeldeseite rechts und die verfügbaren Felder links sehen.

Von hier aus können Sie jeden Block zur Seite hinzufügen, indem Sie ihn einfach aus dem linken Menü ziehen und überall platzieren, wo Sie möchten.

Weitere Details finden Sie in unserem Leitfaden unter Erstellen einer benutzerdefinierten WordPress-Anmeldeseite.

Sobald Sie mit der Gestaltung Ihrer Seite fertig sind, vergessen Sie nicht, oben im Dropdown-Menü auf die Schaltfläche 'Veröffentlichen' zu klicken, um Ihre Einstellungen zu speichern.

Gehen Sie danach zurück zu Ihrem WordPress-Dashboard und navigieren Sie zu SeedProd » Landing Pages.

Von hier aus finden Sie den Abschnitt „Login-Seite“ und klicken Sie auf den Schalter, um ihn von „Inaktiv“ auf „Aktiv“ umzuschalten. Ihre Login-Seite wird nun auf Ihrer Website live geschaltet.

Methode 3: Eine Front-End-Anmeldeseite und Widgets in WordPress mit Theme My Login hinzufügen

Wenn Sie eine sehr einfache Front-End-Login-Seite zu Ihrer Website hinzufügen möchten, können Sie das kostenlose Plugin Theme My Login verwenden.

Zuerst müssen Sie das Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung erstellt das Plugin automatisch Seiten für die Anmeldung, Abmeldung, Passwort vergessen und Registrierung.

Sie können zur Seite Theme My Login » Allgemein im Admin-Menü navigieren und die Plugin-Einstellungen anzeigen.

Zuerst können Sie den Anmeldetyp festlegen. Die Einstellung 'Standard' ist die sicherste, da sie zur Anmeldung eine E-Mail-Adresse und ein Passwort verlangt.

Als Nächstes können Sie Ihre Registrierungseinstellungen auswählen. Wir haben hier die Standardeinstellungen beibehalten, da sie sowohl E-Mail als auch Passwort für die Anmeldung erfordern.

Sie können auch das Feld „Passwörter“ aktivieren, damit Benutzer ihre eigenen Passwörter erstellen können, und das Feld „Automatisches Anmelden“, das Benutzer nach der Registrierung automatisch anmeldet.

Danach können Sie Ihre Login- und Registrierungs-URLs in den Einstellungen „Slugs“ ändern.

Diese erstellen automatisch Weiterleitungen. Die Standard-Login-URL „IhreWebsite.com/wp-admin“ leitet also zu „IhreWebsite.com/login“ weiter.

Sie können diese URLs gleich lassen oder ändern.

Wenn Sie mit den Änderungen fertig sind, klicken Sie auf die Schaltfläche „Änderungen speichern“.

Sie können keine viel fortgeschrittenere Funktionalität hinzufügen, es sei denn, Sie rüsten auf deren Premium-Erweiterungen auf.

Dennoch ist es eine gute Lösung für preisbewusste Benutzer, die eine einfache Front-End-Anmeldeseite erstellen möchten.

Das Anmeldeformular zu einer Seite/einem Beitrag hinzufügen

Um das von Theme My Login erstellte Anmeldeformular hinzuzufügen, öffnen Sie nun eine Seite/einen Beitrag im WordPress-Blockeditor.

Klicken Sie von hier aus auf die Schaltfläche „+“, um das Blockmenü zu öffnen und den Shortcode-Block zur Seite hinzuzufügen.

Fügen Sie danach den folgenden Shortcode in den Block ein:

[theme-my-login]

Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Einstellungen zu speichern.

Besuchen Sie nun Ihre Website, um das Anmeldeformular anzuzeigen.

Anmeldeformular zu einem Widget-Bereich hinzufügen

Sie können auch mit dem Theme My Login-Block ein Anmeldeformular zu Ihren WordPress-Widget-Bereichen hinzufügen.

Navigieren Sie einfach zur Seite Darstellung » Widgets und öffnen Sie das Blockmenü, indem Sie auf die Schaltfläche '+' klicken.

Von hier aus müssen Sie den Theme My Login-Block finden und zum Widget-Bereich Ihrer Wahl hinzufügen.

Wählen Sie danach das Formular aus, das Sie hinzufügen möchten, aus dem Dropdown-Menü im Block selbst.

Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“, um Ihre Einstellungen zu speichern. Besuchen Sie nun Ihre WordPress-Website, um das Anmeldeformular im Widget-Bereich anzuzeigen.

Expertentipp: Einen Anmeldebutton in Ihr WordPress-Website-Menü einfügen

Nachdem Sie nun eine Front-End-Login-Seite erstellt haben, empfehlen wir, diese leicht zugänglich zu machen, indem Sie einen Login-Button zu Ihrem Navigationsmenü hinzufügen.

Dies stellt sicher, dass Benutzer ihre Konten finden und darauf zugreifen können, ohne nach der Anmeldeseite suchen zu müssen.

Um Ihrer Website ein Login-Button-Menü hinzuzufügen, besuchen Sie einfach die Seite Darstellung » Menüs im WordPress-Dashboard.

Erweitern Sie hier den Reiter 'Benutzerdefinierte Links' in der linken Spalte und fügen Sie die URL Ihrer Front-End-Login-Seite hinzu. Sie können auch den Linktext für den Login-Button eingeben.

Klicken Sie auf die Schaltfläche „Zum Menü hinzufügen“.

Klicken Sie danach auf die Schaltfläche 'Menü speichern'.

Besuchen Sie nun Ihre WordPress-Website, um den Login-Button in Aktion zu sehen. Wenn Benutzer darauf klicken, werden sie automatisch zu Ihrer Frontend-Login-Formularseite weitergeleitet.

Die obige Methode funktioniert jedoch nicht, wenn Sie ein Block-Theme verwenden.

In diesem Fall gehen Sie zur Seite Darstellung » Editor in der WordPress-Admin-Seitenleiste.

Dies öffnet den Full Site Editor. Wählen Sie im Hauptdesignbereich auf der linken Seite 'Navigation', um mit der Bearbeitung des Hauptmenüs Ihrer Website zu beginnen.

Dadurch wird Ihr Navigationsmenü im vollständigen Website-Editor geöffnet. Klicken Sie hier auf die Schaltfläche '+' daneben. Dies öffnet eine Eingabeaufforderung, in die Sie den Namen Ihrer Frontend-Anmeldeseite eingeben müssen.

Sobald es in den Ergebnissen angezeigt wird, klicken Sie darauf, um den Link zum Navigationsmenü hinzuzufügen.

Wechseln Sie anschließend im Bereich auf der linken Seite zur Registerkarte 'Block'.

Sie können jetzt den Ankertext für die Anmeldeschaltfläche nach Belieben ändern.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Besuchen Sie nun Ihre Website, um den Login-Button in Aktion zu sehen.

Bonus: CAPTCHA im WordPress-Anmeldeformular hinzufügen

Sobald Sie ein benutzerdefiniertes Anmeldeformular hinzugefügt haben, ist es eine gute Idee, ein CAPTCHA hinzuzufügen, da diese Seite oft ein Ziel für Hacker und Spammer ist.

Das Hinzufügen von CAPTCHA kann Spambots blockieren und Ihre Website sichern. Dies können Sie ganz einfach mit WPForms tun.

Besuchen Sie nach der Aktivierung des Plugins einfach die Seite WPForms » Einstellungen im WordPress-Dashboard und wechseln Sie zum Tab 'CAPTCHA'.

Wählen Sie danach die Option „reCAPTCHA“ als Ihren CAPTCHA-Typ.

Sobald Sie das getan haben, müssen Sie die Google reCAPTCHA Website besuchen, um einen Site-Schlüssel und einen geheimen Schlüssel zu erstellen. Diese Schlüssel helfen bei der Integration von reCAPTCHA auf Ihrer WordPress-Site.

Nach dem Hinzufügen dieser Schlüssel bearbeiten Sie einfach das WordPress-Formular, das Sie zuvor erstellt haben, und wechseln Sie zur Registerkarte 'Einstellungen'.

Wählen Sie dann die Option „Spam-Schutz und Sicherheit“ und aktivieren Sie den Schalter „Google v3 reCAPTCHA aktivieren“. Klicken Sie anschließend auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

Sie haben nun erfolgreich CAPTCHA zu Ihrem WordPress-Anmeldeformular hinzugefügt, wodurch es wesentlich sicherer gegen Spam-Bots und automatisierte Angriffe ist.

Detailliertere Anweisungen finden Sie in unserem Tutorial unter wie man CAPTCHA zu WordPress-Anmelde- und Registrierungsformularen hinzufügt.

Video-Tutorial

Wenn Sie schriftliche Anweisungen nicht bevorzugen, sehen Sie sich einfach unser Video-Tutorial an:

WPBeginner abonnieren

Häufig gestellte Fragen (FAQs)

Hier sind einige Fragen, die unsere Leser häufig zum Hinzufügen von Front-End-Anmeldeseiten und Widgets in WordPress stellen:

Ist eine Frontend-Anmeldeseite für jede WordPress-Website notwendig?

Nein, überhaupt nicht. Ein einfacher Blog oder eine Unternehmenswebsite, bei der sich nur der Administrator oder die Redakteure anmelden, kann die Standard-WordPress-Anmeldeseite problemlos verwenden.

Frontend-Anmeldeseiten sind am wertvollsten für Websites, auf denen sich Benutzer regelmäßig anmelden, wie z. B. Mitgliederseiten, Online-Shops oder Foren.

Wie kann ich Benutzer nach der Anmeldung auf eine bestimmte Seite weiterleiten?

Die meisten Anmeldeseiten-Plugins, einschließlich WPForms und SeedProd, verfügen über integrierte Einstellungen für die Weiterleitung nach der Anmeldung.

Normalerweise finden Sie in den Formular- oder Seiteneinstellungen eine Option, um die spezifische URL einzugeben, zu der Sie Benutzer weiterleiten möchten, z. B. ihr Kontodashboard oder eine Seite nur für Mitglieder.

Um loszulegen, können Sie sich unser Tutorial ansehen, wie Sie Benutzer nach erfolgreicher Anmeldung in WordPress weiterleiten.

Kann ich Social-Media-Anmeldebuttons zu meinem Frontend-Formular hinzufügen?

Ja, das können Sie. Viele Plugins für Benutzerregistrierung und -anmeldung bieten Erweiterungen oder Integrationen für soziale Logins an.

Zum Beispiel integriert sich WPForms mit Diensten, die es Ihnen ermöglichen, Schaltflächen wie 'Mit Google anmelden' oder 'Mit Facebook anmelden' hinzuzufügen, was den Prozess für Ihre Benutzer noch einfacher macht.

Wenn Sie interessiert sind, haben wir ein Tutorial unter So fügen Sie die soziale Anmeldung zu WordPress hinzu, das Ihnen helfen kann.

Beeinflusst eine benutzerdefinierte Anmeldeseite die Geschwindigkeit meiner Website?

Wenn eine benutzerdefinierte Anmeldeseite mit einem hochwertigen Plugin wie SeedProd oder WPForms erstellt wird, sollte sie nur geringe Auswirkungen auf die Geschwindigkeit Ihrer Website haben.

Diese Tools sind für die Leistung optimiert. Der Schlüssel liegt darin, ein gut codiertes Plugin zu verwenden und zu vermeiden, übermäßig große Bilder oder schwere Skripte in das Design Ihrer Anmeldeseite einzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, eine Front-End-Login-Seite und Widgets in WordPress hinzuzufügen. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten WordPress-Login-Seiten-Plugins und unseren Leitfaden zum Hinzufügen einer benutzerdefinierten Login-URL in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.