Hinzufügen von Front-End-Anmeldeseiten und Widgets in WordPress

Möchten Sie eine Frontend-Anmeldeseite und Widgets in WordPress hinzufügen?

Die standardmäßige WordPress-Anmeldeseite bietet nicht die beste Benutzererfahrung und kann Ihre Benutzer verwirren. Durch das Hinzufügen einer Frontend-Anmeldeseite können sich Ihre Nutzer direkt über das Frontend Ihrer Website anmelden.

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

Warum und wann brauchen Sie ein Front-End Login in WordPress?

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

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

Wenn Sie jedoch eine Mitgliederseite, einen Online-Shop oder eine andere Seite haben, auf der sich Benutzer registrieren und anmelden können, dann bietet das Hinzufügen einer Front-End-Anmeldeseite und eines Widgets eine bessere Erfahrung für Ihre Benutzer.

Sie können diese Seite sogar mit Ihrem Branding versehen oder ein einfaches Anmeldeformular in Ihre WordPress-Seitenleiste einfügen.

Sehen wir uns also an, wie man ganz einfach eine Frontend-Anmeldeseite und ein Login-Widget in WordPress einrichten kann. In diesem Tutorial zeigen wir Ihnen die 3 einfachsten Möglichkeiten, um dies zu tun, und Sie können die Links unten, um die Methode Ihrer Wahl zu springen:

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie einfach weiter.

Methode 1: Hinzufügen einer Front-End-Login-Seite und Widgets in WordPress mit WPForms

WPForms ist das beste WordPress-Kontaktformular-Plugin auf dem Markt, das von über 6 Millionen Websites verwendet wird. Es ermöglicht Ihnen die einfache Erstellung einer benutzerdefinierten Frontend-Anmeldeseite und eines Anmelde-Widgets auf Ihrer Website.

Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

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 über Ihr Konto auf der WPForms-Website erhalten.

Sobald Sie das getan haben, gehen Sie auf die Seite WPForms “ Addons im WordPress-Dashboard, um das User Registration Addon zu finden.

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

Nach der Aktivierung der Benutzerregistrierung Addon, Kopf über die WPForms “ Add New Bildschirm aus der Admin-Sidebar, um das Formular Builder starten.

Geben Sie hier zunächst einen Namen für das Formular ein, das Sie erstellen möchten. Danach wählen Sie einfach die Vorlage „Benutzeranmeldeformular“, um mit der Erstellung Ihres Benutzeranmeldeformulars zu beginnen.

Dadurch wird die Vorlage im Formularersteller gestartet, wo Sie auf der rechten Seite eine Formularvorschau und auf der linken Seite eine Spalte mit den verfügbaren Feldern sehen.

Ziehen Sie nun einfach die Felder aus der linken Spalte und legen Sie sie ab, um Ihr Anmeldeformular zu erstellen. Weitere Details finden Sie in unserer Anleitung zum Erstellen einer benutzerdefinierten Anmeldeseite für WordPress.

Wenn 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-Block-Editor im Admin-Bereich.

Klicken Sie dort auf die Schaltfläche „+“, um das Blockmenü zu öffnen und den WPForms-Block hinzuzufügen.

Wählen Sie dann das Anmeldeformular, das Sie erstellt haben, 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.

Anmeldeformular zur Seitenleiste der Website hinzufügen

Wenn Sie das Anmeldeformular in die Seitenleiste Ihrer Website einfügen möchten, besuchen Sie die Seite Erscheinungsbild “ Widgets im WordPress-Dashboard.

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.

Wählen Sie dann 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 unserer Anleitung zum Hinzufügen eines Anmeldeformulars in Ihrer WordPress-Seitenleiste.

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

Anmeldeformular im Full Site Editor hinzufügen

Wenn Sie ein blockbasiertes Thema verwenden, können Sie Ihr Login nicht mit der oben beschriebenen Methode in die Seitenleiste der Website einfügen.

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

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

Von hier aus suchen Sie den WPForms-Block und fügen ihn an einer beliebigen Stelle Ihrer Website ein.

Wählen Sie dann das Anmeldeformular, das Sie erstellt haben, aus dem Dropdown-Menü im Block selbst aus.

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

Bonus-Tipp: Wenn Sie Ihr Anmeldeformular weiter anpassen möchten, können Sie sich unser Tutorial über die Gestaltung von WordPress-Formularen ansehen.

Methode 2: Hinzufügen einer Front-End Login-Seite in WordPress mit SeedProd

SeedProd ist der beste WordPress Drag-and-Drop Page Builder auf dem Markt, der von über 1 Million Websites genutzt wird.

Damit können Sie eine vollständig benutzerdefinierte Anmeldeseite erstellen, die dem Design Ihrer aktuellen Website entsprechen oder etwas Einzigartiges sein kann.

Es ist sehr einsteigerfreundlich und wird mit einer Vielzahl professionell gestalteter Anmeldeseitenvorlagen geliefert, die Sie zur Erstellung Ihrer Anmeldeseite verwenden können.

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Rufen Sie nach der Aktivierung den Bildschirm SeedProd “ Landing Pages in der WordPress-Admin-Seitenleiste auf und wählen Sie die Option „Login Page“, indem Sie auf die Schaltfläche „Set up a Login Page“ klicken.

Dies führt Sie zum Bildschirm „Vorlagen“, wo Sie eine Vorlage auswählen und die Seite per Drag-and-Drop anpassen können.

Sie können sogar eine komplett benutzerdefinierte Frontend-Anmeldeseite von Grund auf mit einer leeren Vorlage entwerfen.

Nachdem Sie eine Vorlage Ihrer Wahl ausgewählt haben, werden Sie aufgefordert, einen Seitennamen einzugeben. SeedProd wird dann den Seitennamen als URL für die Landing Page Ihres Anmeldeformulars verwenden.

Klicken Sie anschließend auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“, um fortzufahren.

Daraufhin wird der Drag-and-Drop-Builder von SeedProd gestartet. Auf der rechten Seite sehen Sie eine Vorschau der Anmeldeseite und auf der linken Seite die verfügbaren Felder.

Von hier aus können Sie der Seite jeden beliebigen Block hinzufügen, indem Sie ihn einfach aus dem linken Menü an eine beliebige Stelle ziehen.

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

Wenn Sie Ihre Seite fertig gestaltet haben, vergessen Sie nicht, auf die Schaltfläche „Veröffentlichen“ im Dropdown-Menü oben zu klicken, um Ihre Einstellungen zu speichern.

Methode 3: Hinzufügen einer Front-End-Login-Seite und von Widgets in WordPress mit Theme My Login

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

Zunächst müssen Sie das Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Nach der Aktivierung erstellt das Plugin automatisch Seiten für Login, Logout, Passwort vergessen und Registrierung.

Sie können die Seite Theme My Login “ General im Admin-Menü aufrufen und die Plugin-Einstellungen einsehen.

Zunächst können Sie die Art der Anmeldung festlegen. Die Einstellung „Standard“ ist die sicherste, da sie zur Anmeldung eine E-Mail und ein Passwort verlangt.

Als Nächstes können Sie Ihre Registrierungseinstellungen wählen. Wir haben hier die Standardeinstellungen beibehalten, da für die Anmeldung sowohl eine E-Mail als auch ein Passwort erforderlich sind.

Sie können auch das Kästchen „Passwörter“ ankreuzen, damit die Benutzer ihre eigenen Passwörter erstellen können, sowie das Kästchen „Auto-Login“, mit dem die Benutzer nach der Registrierung automatisch angemeldet werden.

Danach können Sie Ihre Anmelde- und Registrierungs-URLs in den ‚Slugs‘-Einstellungen ändern.

Diese erstellen automatisch Weiterleitungen. So wird die Standard-URL für die Anmeldung „yoursite.com/wp-admin“ auf „yoursite.com/login“ umgeleitet.

Sie können diese URLs beibehalten oder sie ändern.

Wenn Sie alle Änderungen vorgenommen haben, klicken Sie bitte auf die Schaltfläche „Änderungen speichern“.

Sie können keine erweiterten Funktionen hinzufügen, es sei denn, Sie verwenden die Premium-Erweiterungen.

Dennoch ist es eine gute Lösung für Benutzer mit geringem Budget, die eine einfache Frontend-Anmeldeseite erstellen möchten.

Hinzufügen des Anmeldeformulars zu einer Seite/einem Beitrag

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

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

Danach fügen Sie 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.

Login-Formular zu einem Widget-Bereich hinzufügen

Sie können auch ein Anmeldeformular zu Ihren WordPress-Widget-Bereichen hinzufügen, indem Sie den Block Theme My Login verwenden.

Navigieren Sie einfach zur Seite Erscheinungsbild “ 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 in den Widget-Bereich Ihrer Wahl einfügen.

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

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.

Bonus: CAPTCHA in das WordPress-Anmeldeformular einfügen

Wenn Sie ein benutzerdefiniertes Anmeldeformular hinzugefügt haben, ist es eine gute Idee, dieses mit CAPTCHA zu versehen, da diese Seite oft ein Ziel für Hacker und Spammer ist.

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

Nach der Aktivierung des Plugins besuchen Sie einfach die Seite WPForms “ Einstellungen im WordPress-Dashboard und wechseln Sie zur Registerkarte „CAPTCHA“.

Wählen Sie anschließend die Option „reCAPTCHA“ als CAPTCHA-Typ.

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

Nachdem Sie diese Schlüssel hinzugefügt haben, bearbeiten Sie einfach das WordPress-Formular, das Sie zuvor erstellt haben, und wechseln Sie auf die Registerkarte „Einstellungen“.

Wählen Sie dann die Option „Spamschutz und Sicherheit“ und schalten Sie den Schalter „Google v3 reCAPTCHA aktivieren“ ein. 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 und es damit absolut sicher gemacht. Detailliertere Anweisungen finden Sie in unserem Tutorial über das Hinzufügen von CAPTCHA zu WordPress-Anmelde- und Registrierungsformularen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, eine Frontend-Anmeldeseite und Widgets in WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für unsere Expertenauswahl der besten Mitgliedschafts-Plugins für WordPress und unsere ultimative Anleitung zur Verbesserung der Geschwindigkeit und Leistung Ihrer Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.