Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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

Dies verbessert die Zugänglichkeit und die allgemeine Zufriedenheit der Benutzer. Außerdem ist es bequem, da die Benutzer von verschiedenen Teilen Ihrer Website aus auf die Anmeldeformulare zugreifen können, beispielsweise von Seitenleisten oder Footern aus.

Im Laufe der Jahre haben wir mehrere Online-Shops und Websites erstellt, auf denen wir diese Funktionalität für eine bessere Benutzerfreundlichkeit anbieten. Dabei haben wir gelernt, was bei Frontend- Anmeldeseiten funktioniert und was nicht.

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

How to add a front-end login page and widgets in WordPress (3 ways)

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.

Default WordPress login page

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

Subscribe to WPBeginner

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.

Hinweis: WPForms hat auch eine kostenlose Version. Sie benötigen jedoch die Premium-Version des Plugins, um das Addon Benutzerregistrierung freizuschalten.

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.

Enter WPForms license key

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.

Install user registration and login forms addon

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.

Choose the user login form template

Dadurch wird das Template 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.

WPForms login form

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.

Add login form

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.

Add WPForms block to the sidebar

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.

WPForms login widget display

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.

Add the WPForms block in the FSE

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.

SeedProd login page example

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.

Set up login page

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

Mit einem leeren Template können Sie sogar eine individuelle Frontend- Anmeldeseite von Grund auf entwerfen.

SeedProd login page templates

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.

Enter login page details

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.

Login Page in SeedProd

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.

Theme My Login settings

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.

Theme My Login registration settings

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.

Theme My Login URL slug settings

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

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

Save Theme My Login settings

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]

Add theme my login shortcode

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 page preview

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.

Add Theme My Login block to the widget area

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.

Theme My Login block preview in the sidebar

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.

WPForms

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.

Select CAPTCHA type in WPForms

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.

Enable the reCAPTCHA in the form

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 Plugins für WordPress-Anmeldeseiten und unsere Anleitung, wie Sie eine individuelle Anmelde-URL in WordPress hinzufügen.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

40 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Guy

    This plugin is no longer free.
    It allows only the most basic functions now.
    All the other stuff if set as extensions

    • WPBeginner Support

      Thank you for letting us know, we’ll be sure to take a look at it and update our article when able.

      Admin

  3. Ethan

    Excellent video voice over perfect very professionnal THANK YOU! The only problem is the video is outdated. The plugin developer made is plugin from free to paid! So we have no access to what you explained :(

  4. Bobby

    Hi, I have a problem that I don’t have the pages. I add their ‚Actions‘ but it doesn’t shows anything in the Primary menu.
    I download & installed it.
    What should I do?

  5. Angela Baker

    This video is very well done. Thank you for explaining everything so well.

    I was using WP Default login for people to register for my site, but now that isn’t working for some reason. Will this plug in work instead? I don’t want to change any of my admin login, just need a way for the public to register.

  6. Arya

    Why recaptcha is not shown in login form?

  7. Navi Singh

    Hi dear,

    how to enable to any user for post directly there after a login there. if some suitable plugin is avaliable for user post please help me to do that.

    Thanks

  8. Chantal

    Hi. I have followed your instructions on my WP blog, and the front log in/registration page comes up. But when some one tried to register, it comes up with an error saying „User registration is currently not allowed.“
    I have it set up for new user approval.

    Can you please help me understand what I have done wrong and how I can get it working.
    thanks

    • Chantal

      I have resolved the issue, needed to tick anyone can register in general settings!

  9. Doug Poffinbarger

    That was very helpful and well done. Any idea how to add a login authentication in the middle of a post? Instead of downloading a freebie to capture email subscribers, I’d like to require subscription or login in order to „read more“ of a given post. This has been really hard to find via google searches. Ideally, it would be a tiny inline form or popup at the end of the truncated article and once they subscribed or logged in, they would automatically see the rest of the article and any others while subscribed.

  10. Jeff

    Hello, how do i remove some sections from the user profile page?
    The name and type of the form is shown to users on their profile page; please how do i address this?

  11. Mohammad Kashif

    Will it work with woocommerce?

      • Mohammad Kashif

        Woocommerce already have login page. After install this plugin now i have two login page. How can i make one login page?

        • WPBeginner Support

          Hi Kashif,

          You can disable the plugin and use WooCommerce login page.

        • Mohammad Kashif

          How can i redirect woocommerce login page to tml login page?

  12. Rahul

    Can you add extra fields to the registration page? If so how? please any one can help me?

  13. HELENANG

    I can see that TML provides quite a lot of functionality.
    I am simply looking for a login option which will return the user to the page they have come from on our website instead of their profile page. Is there a simpler plugin you would recommend to do just that w/o the chance of conflicting with other plugins? Thanks.

  14. HELENANG

    Does This My Login work well with Simple Access Control plugin which provides private access to certain pages of the website?
    Does it conflict with the Security provided by the WordFence Security plugin, e.g., Lockout for a certain amount of time after a number of unsuccessful login attempts?
    Thanks.

  15. graham

    There seem to be quite a few comments on google that woocomerce and TML dont play well together any truth to that?

  16. Don Tedlock

    I’m getting an extra, unformatted login and lost password link on my Registration form. How do I remove these links?

    • Samuel Nyamavor

      I’m getting an extra, unformatted login and lost password link on my Registration form. How do I remove these links?

  17. ST

    Hi, do you know how to put the login within the Header instead of the sidebar? Thanks! (:

    • Christina

      I would like to know this too.

      • Saurabh Saneja

        Plugin automatically creates login page. Just add it to header menu.

      • Rachid

        It’s a shortcode inside a login page (page created by the plugin once you activited it), you can call the shortcode inside your header php file…(do_shortcode(„…“))

  18. Diane

    Hi, is it possible to make the registration page available to admin only?

  19. Tim

    Is there a way to add a contact form that saves history with this plugin?

    Essentially they would login, they would see an „order form“ they could then place an „order“, it would email someone there order. But it would also save their order history so that they could re order items.

    Even if you could point me in the right direction, that would be super helpful!

    Thanks.

  20. Christian

    Is it just me, or is that the wrong video?

  21. oliverosM

    why is it that every one puts in their title how to do something and it ends up being a plugin setup and not what it says i was expecting something else but it seems every body does the same its easy saying how to make something when its just only a plugin.
    Well its a nice article any way.

  22. Mike Squatrito

    Can you add extra fields to the registration page? If so how

    • Rahul

      hey you got this? i also want to add a new field in registration page.

  23. Mr Darlington

    Impressive! Let’s check it out…

  24. Leonard Rattini, CCP

    Firstly, I do want to commend you for your help to understand WP.

    However, as most apps tend to do, and your teaching to accomplish, as well: you headline with a „How to…“ complex caption. I prefer to see a headline to include a single noun and single verb that explains „why“ I need to do something. Then in its body’s detail instructions, it’s there that tells me „how“ to satisfy its „single-purpose“ why-objective.

    All application sources need to understand, theirs is not the only one we users use. As their „How to’s,“ to explain, it’s not always clear what is to be satisfied, and for sure its how-to actions to execute, is not a simple step down bing-bing and done, procedure function.

    My 30-years in computer application design is my platform to make this statement. Leonard Rattini, CCP

  25. Rahul Maurya

    Is there any method to integrate register or log in using Facebook in this plugin?

  26. Ochelh

    Hello,

    Very nice tuto. I’de like to add login/logout link to my top menu, this link should switch between login and logout depending if the user is logged in or not. Is it possible to do this with TML and how ?

    Regards,

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.