Inhaltsverzeichnis
Möchten Sie eine individuelle WordPress-Login-Seite für Ihre Website erstellen?
Wenn Sie eine WordPress-Mitgliedswebsite oder einen Online-Shop betreiben, dann werden viele Ihrer Benutzer die Anmeldeseite häufig sehen. Wenn Sie die Standard-WordPress-Anmeldeseite anpassen, können Sie eine bessere Benutzererfahrung bieten.
In diesem ultimativen Leitfaden zeigen wir Ihnen verschiedene Möglichkeiten, eine benutzerdefinierte WordPress-Login-Seite zu erstellen. Sie können dieses Tutorial auch für die Erstellung einer benutzerdefinierten WooCommerce-Login-Seite verwenden.
Das werden Sie in diesem Leitfaden erfahren.
Warum eine eigene WordPress-Anmeldeseite erstellen?
Ihre WordPress-Website verfügt über ein leistungsstarkes Benutzerverwaltungssystem, mit dem Benutzer Konten für eCommerce-Shops, Mitglieder-Websites und Blogs erstellen können.
Standardmäßig zeigt die Anmeldeseite das WordPress-Branding und -Logo. Das ist in Ordnung, wenn Sie einen kleinen Blog betreiben oder die einzige Person mit Administratorrechten sind.
Wenn Ihre Website jedoch die Möglichkeit bietet, sich zu registrieren und anzumelden, dann bietet eine benutzerdefinierte Anmeldeseite ein besseres Benutzererlebnis.
Einige Nutzer könnten misstrauisch werden, wenn Ihr WordPress-Anmeldebildschirm nicht wie Ihre Website aussieht. Sie werden sich wahrscheinlich wohler fühlen, wenn Sie Ihr eigenes Logo und Design verwenden.
Und schließlich enthält der Standard-Anmeldebildschirm nichts weiter als das Anmeldeformular. Wenn Sie eine benutzerdefinierte Anmeldeseite erstellen, können Sie den Platz nutzen, um andere Seiten oder spezielle Angebote zu bewerben.
Werfen wir also einen Blick auf einige Beispiele für benutzerdefinierte WordPress-Anmeldeseiten-Designs.
WordPress Login Seite Design Beispiele
Website-Besitzer können die WordPress-Anmeldeseite mit verschiedenen Stilen und Techniken anpassen. Einige erstellen eine benutzerdefinierte Anmeldeseite, die das Thema und die Farben ihrer Website verwendet. Andere ändern die Standard-Anmeldeseite, indem sie einen benutzerdefinierten Hintergrund, Farben und ein Logo hinzufügen.
Hier sind einige Beispiele dafür, was möglich ist.
WPForms
WPForms ist das beste WordPress-Kontaktformular-Plugin auf dem Markt. Zufälligerweise enthält ihr Plugin auch ein Add-on, um schöne WordPress-Anmelde- und Registrierungsformulare zu erstellen, die wir Ihnen später in diesem Artikel zeigen werden.
Die benutzerdefinierte Anmeldeseite verwendet ein zweispaltiges Layout: Die linke Spalte enthält das Anmeldeformular, die rechte Spalte dient zur Hervorhebung von Werbeaktionen und anderen Aufforderungen zum Handeln.
Die oben gezeigte Anmeldeseite informiert die Nutzer über neue Funktionen und bietet durch ein individuelles Branding, eine Hintergrundillustration und Markenfarben ein einzigartiges Anmeldeerlebnis.
Jacquelynne Steves
Jacquelynne Steeves ist eine Kunsthandwerk-Website, auf der die Autorin Inhalte über das Dekorieren von Häusern, das Herstellen von Quilts, Mustern, Stickereien und mehr veröffentlicht.
Die Anmeldeseite verwendet ein benutzerdefiniertes Hintergrundbild, das zum Thema der Website passt, und das Anmeldeformular auf der rechten Seite.
Kirche Motion Graphics
Die Anmeldeseite dieser Firma für Grafikanimationen verwendet einen farbenfrohen Hintergrund, der das Geschäftsfeld des Unternehmens widerspiegelt.
Die Kopf- und Fußzeile der Website sowie die Navigationsmenüs auf dem Anmeldebildschirm sind identisch. Das Anmeldeformular selbst ist recht einfach und hat einen hellen Hintergrund.
MITSloan Management Review
MITSloan Management Review verwendet ein Popup-Modal, um das Anmelde- und Registrierungsformular anzuzeigen.
Der Vorteil eines Popup-Fensters ist, dass sich die Benutzer anmelden können, ohne die Seite zu verlassen, was ihnen ein erneutes Laden der Seite erspart und eine schnellere Benutzererfahrung ermöglicht.
Sind Sie nun bereit zu lernen, wie man eine benutzerdefinierte Anmeldeseite in WordPress erstellt?
Erstellen einer WordPress-Anmeldeseite mit Theme My Login
Theme My Login ist ein kostenloses Plugin, das Ihre Anmeldeseite an Ihr WordPress-Theme anpasst. Es ist nicht sehr anpassbar, aber es ersetzt die standardmäßige Anmeldeseite im WordPress-Logo und sieht etwas professioneller aus.
Als erstes müssen Sie das Theme My Login Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung erstellt Theme My Login automatisch URLs für Ihre benutzerdefinierten Aktionen Login, Logout, Registrierung, Passwort vergessen und Passwort zurücksetzen.
Sie können diese WordPress-Login-URLs anpassen, indem Sie Thema Mein Login " Allgemein Scrollen Sie nach unten zum Abschnitt "Slugs", um die URLs zu ändern, die das Plugin für Login-Aktionen verwendet.
Sie können einfach eine Seite für jede Aktion erstellen und dann den Slug der Seite hier hinzufügen, damit das Plugin die Benutzer richtig finden und weiterleiten kann.
Beginnen wir mit der Anmeldeseite.
Gehen Sie rüber zu Seite " Neu hinzufügen um eine neue WordPress-Seite zu erstellen. Als Nächstes müssen Sie Ihrer Seite einen Titel geben und dann den folgenden Shortcode eingeben [theme-my-login] auf der Seite.
Sie können Ihre Seite nun veröffentlichen und eine Vorschau anzeigen, um Ihre benutzerdefinierte Anmeldeseite in Aktion zu sehen.
So sieht es auf unserer Test-Website aus.
Wiederholen Sie den Vorgang einfach, um weitere Seiten zu erstellen, indem Sie die folgenden Shortcodes verwenden.
[theme-my-login action="register"] für das Anmeldeformular.
[theme-my-login action="lostpassword"] für die Seite mit dem verlorenen Passwort.
[theme-my-login action="resetpass"] für die Seite zum Zurücksetzen des Passworts.
Erstellen einer benutzerdefinierten WordPress Login-Seite mit WPForms
WPForms ist das beste WordPress-Formularerstellungs-Plugin auf dem Markt, mit dem Sie ganz einfach individuelle Anmelde- und Registrierungsformulare für Ihre Website erstellen können.
WPForms ist ein Premium-WordPress-Plugin, und Sie müssen mindestens ihre Pro-Plan, um Benutzer-Registrierung Add-on zugreifen. Benutzer können 50% Rabatt erhalten, indem Sie unsere WPForms Gutschein-Code: SICHERN50
Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie Folgendes besuchen WPForms " Einstellungen Sie können diese Informationen unter Ihrem Konto auf der WPForms-Website finden.
Nachdem Sie den Lizenzschlüssel eingegeben haben, können Sie Add-ons installieren.
Besuchen Sie auch WPForms " Zusätze Seite und suchen Sie das Addon für die Benutzerregistrierung.
Klicken Sie anschließend auf die Schaltfläche Addon installieren, um das Addon herunterzuladen und zu aktivieren. Jetzt können Sie Ihre eigenen Anmeldeformulare erstellen.
Gehen Sie rüber zu WPForms " Neu hinzufügen Seite und scrollen Sie nach unten zur Vorlage 'User Login Form'. Sie müssen auf die Schaltfläche 'Use Template' klicken, um fortzufahren.
WPForms lädt das Benutzeranmeldeformular mit den erforderlichen Feldern.
Sie können auf die Felder klicken, um eine eigene Beschreibung oder einen eigenen Text zu den Feldern hinzuzufügen.
Sie können auch andere Einstellungen ändern.
Sie können auf die Schaltfläche klicken und den Text stattdessen in "Anmeldung" ändern.
Sie können auch entscheiden, was passiert, wenn ein Benutzer erfolgreich angemeldet ist.
Sie müssen sich zu folgenden Seiten begeben Einstellungen " Bestätigung Sie können den Benutzer auf eine beliebige andere URL umleiten, ihn auf die Homepage umleiten oder ihm einfach eine Meldung anzeigen, dass er jetzt angemeldet ist.
Wenn Sie mit den Formulareinstellungen zufrieden sind, klicken Sie auf die Schaltfläche "Speichern" in der oberen rechten Ecke des Bildschirms und schließen Sie das Formularerstellungsprogramm.
Hinzufügen Ihres benutzerdefinierten Anmeldeformulars zu einer WordPress-Seite
WPForms macht es super einfach, Ihre benutzerdefinierte Login-Formular auf jedem WordPress Post oder Seite hinzufügen.
Bearbeiten Sie einfach die Seite, auf der Sie das Anmeldeformular hinzufügen möchten, oder erstellen Sie eine neue Seite. Fügen Sie dann auf dem Bildschirm zur Seitenbearbeitung den WPForms-Block zu Ihrem Inhaltsbereich hinzu.
Als nächstes wählen Sie das Anmeldeformular aus, das Sie zuvor erstellt haben, und der WPForms-Block wird es automatisch in den Inhaltsbereich laden.
Sie können nun mit der Bearbeitung der Seite des Anmeldeformulars fortfahren oder Ihre Änderungen speichern und veröffentlichen.
Erstellen einer benutzerdefinierten WordPress Login-Seite mit SeedProd
Standardmäßig verwendet Ihre benutzerdefinierte WordPress-Anmeldeformularseite die Seitenvorlage und die Stile Ihres Themes und verfügt über die Navigationsmenüs, die Kopfzeile, die Fußzeile und die Widgets der Seitenleiste Ihres Themes.
Wenn Sie die gesamte Seite komplett übernehmen und von Grund auf neu gestalten möchten, können Sie ein WordPress Page Builder Plugin verwenden.
SeedProd ist der beste Landing Page Builder für WordPress. Er ist einsteigerfreundlich und bietet einen Drag-and-Drop-Builder, mit dem Sie jede Art von Landing Page erstellen können, einschließlich einer Login-Seite, einer Seite, die demnächst erscheint, einer Seite für den Wartungsmodus und mehr.
Für diesen Artikel verwenden wir die SeedProd Pro-Version, da sie eine Vorlage für die Anmeldeseite und erweiterte Seitenblöcke zur Anpassung enthält.
Es gibt auch eine kostenlose Version von SeedProd, die jedoch nicht die Möglichkeit bietet, eine Login-Seite für Ihre WordPress-Website zu erstellen.
Zunächst müssen Sie das SeedProd-Plugin auf Ihrer Website installieren. Weitere Informationen finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Sobald das Plugin aktiviert ist, werden Sie in Ihrem WordPress-Adminbereich zu SeedProd weitergeleitet.
Hier müssen Sie Ihren Lizenzschlüssel eingeben, den Sie ganz einfach über Ihr SeedProd-Konto erhalten. Wenn Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche "Schlüssel überprüfen".
Danach sind Sie bereit, Ihre Anmeldeseite in SeedProd zu erstellen.
Um zu beginnen, gehen Sie zu SeedProd " Landing Pages und wählen Sie dann die Option "Anmeldeseite", indem Sie auf die Schaltfläche "Anmeldeseite einrichten" klicken.
Auf dem nächsten Bildschirm können Sie eine Vorlage für Ihre Anmeldeseite auswählen. Sie haben auch die Möglichkeit, eine Seite von Grund auf neu zu erstellen, indem Sie die leere Vorlage verwenden.
Wir empfehlen jedoch, eine Vorlage zu verwenden, da es einfacher und schneller ist, die Anmeldeseite nach Ihren Wünschen zu gestalten.
Wenn Sie eine Vorlage auswählen, erscheint ein Popup-Fenster, in dem Sie einen Seitennamen für Ihre Anmeldeseite eingeben können. SeedProd wird den Seitennamen als URL für Ihre Landing Page verwenden.
Sobald Sie diese Angaben eingegeben haben, klicken Sie auf die Schaltfläche "Speichern und mit der Bearbeitung der Seite beginnen".
Jetzt können Sie Ihre Anmeldeseite mit dem Drag-and-Drop-Builder von SeedProd unter der Registerkarte Design bearbeiten. Mit dem Builder können Sie ganz einfach jeden Seitenblock zur Seite hinzufügen, indem Sie ihn aus dem linken Menü ziehen und an einer beliebigen Stelle auf der Seite platzieren.
So können Sie zum Beispiel Ihrer Anmeldeseite einen Text, ein Video oder eine neue Schaltfläche hinzufügen. Weitere Anpassungsmöglichkeiten finden Sie im Abschnitt Erweiterte Blöcke, wo Sie einen Countdown-Timer, Symbole für soziale Netzwerke und mehr hinzufügen können.
Sie können sogar bestehende Seitenblöcke in der Vorlage entfernen, indem Sie einfach auf das Mülleimer-Symbol klicken.
Wenn Sie auf der Anmeldeseite auf einen beliebigen Bereich klicken, werden weitere Optionen zur Anpassung angezeigt.
Sie können zum Beispiel den Text und die Farbe der Felder ändern, eine andere Schriftart wählen, die Farbe der Schaltfläche bearbeiten und vieles mehr.
Wenn Sie mit dem Design der Anmeldeseite zufrieden sind, klicken Sie auf die Registerkarte Verbinden am oberen Rand.
Sie können nun verschiedene E-Mail-Marketingdienste wie Constant Contact, Drip, SendinBlue und andere miteinander verbinden.
Unter den allgemeinen Einstellungen können Sie den Seitentitel bearbeiten und den Status der Seite von Entwurf auf Veröffentlichung ändern.
Sie können auch die Option wählen, SeedProd Link zu verwenden und Ihren SeedProd Affiliate Link hinzufügen, um mehr Geld online zu verdienen.
Wenn Sie Ihre Anmeldeseite für Suchmaschinen optimieren wollen, dann gehen Sie zu den SEO-Einstellungen. Hier finden Sie einen Button, der das All In One SEO Plugin installiert.
All in One SEO for WordPress (AIOSEO) ist das beste WordPress SEO-Plugin, mit dem Sie Ihre WordPress-Website ganz einfach für Suchmaschinen und Social Media-Plattformen optimieren können.
Wie Sie es am besten nutzen, erfahren Sie in unserem Leitfaden zur richtigen Einrichtung von All In One SEO für WordPress.
Danach können Sie auf der Registerkarte Skripteinstellungen verschiedene Codeschnipsel zu Ihrer Anmeldeseite hinzufügen.
Sie können hier zum Beispiel Google Analytics-Code, Facebook-Pixel oder andere Tracking-Codes hinzufügen.
Nachdem Sie nun die Seiteneinstellungen geändert haben, klicken Sie oben auf die Schaltfläche Speichern.
Als Nächstes müssen Sie Ihre Anmeldeseite aktivieren. Dazu können Sie den Landing Page Builder verlassen und dann zu SeedProd " Landing Pages .
Dort sollten Sie auf den Schalter klicken, um den Status der Seite von Inaktiv auf Aktiv zu ändern.
Sie können nun die URL Ihrer Anmeldeseite aufrufen und sie in Aktion sehen.
Dies ist ein Screenshot des Anmeldebildschirms auf unserer Demoseite.
Wenn WordPress-Page-Builder-Plugins nicht Ihr Ding sind, dann können Sie benutzerdefinierte CSS verwenden, um das Formular und die Anmeldeseite selbst zu gestalten. Alternativ können Sie auch das CSS Hero-Plugin verwenden, um einfach benutzerdefinierte CSS-Stile hinzuzufügen.
Ändern Sie das WordPress-Login-Logo und die URL
Sie müssen nicht immer eine komplett eigene WordPress-Anmeldeseite für Ihre Website erstellen. Viele Websites ersetzen einfach das WordPress-Logo und die Logo-URL und verwenden weiterhin die Standard-Anmeldeseite.
Wenn Sie das WordPress-Logo auf dem Anmeldebildschirm durch Ihr eigenes Logo ersetzen möchten, können Sie ganz einfach ein WordPress-Plugin verwenden oder benutzerdefinierten Code hinzufügen. Wir zeigen Ihnen beide Methoden, Sie können diejenige verwenden, die Ihnen am besten passt.
Ändern des WordPress-Login-Logos und der URL mithilfe eines Plugins
Als erstes müssen Sie das Colorlib Login Customizer. Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung fügt das Plugin dem WordPress-Theme-Customizer einen neuen Menüpunkt hinzu. Navigieren Sie einfach zu Erscheinungsbild " Anpassen und klicken Sie auf den neuen Punkt 'Colorlib Login Customizer', um den Login Customizer zu starten.
Der Login Customizer lädt Ihren Standard-WordPress-Login-Bildschirm mit Anpassungsoptionen auf der linken Seite und einer Live-Vorschau auf der rechten Seite.
Um das WordPress-Logo durch Ihr eigenes zu ersetzen, klicken Sie auf die Registerkarte "Logo-Optionen" auf der rechten Seite.
Von hier aus können Sie das WordPress-Logo ausblenden, Ihr eigenes benutzerdefiniertes Logo hochladen und die URL und den Text des Logos ändern.
Sie können auch die Größe und Farbe des Textes sowie die Breite und Höhe des benutzerdefinierten Logos anpassen.
Das Plugin ermöglicht es Ihnen auch, die Standard-WordPress-Anmeldeseite vollständig anzupassen: Sie können Spalten und Hintergrundbilder hinzufügen, die Farben des Anmeldeformulars ändern und vieles mehr.
Grundsätzlich können Sie eine benutzerdefinierte WordPress-Anmeldeseite erstellen, ohne die standardmäßige WordPress-Anmelde-URL zu ändern.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche "Veröffentlichen", um Ihre Änderungen zu speichern. Sie können nun die WordPress-Anmeldeseite besuchen, um Ihr benutzerdefiniertes Anmeldeformular in Aktion zu sehen.
Ändern des WordPress-Login-Logos und der URL ohne Plugin (Code)
Mit dieser Methode können Sie das WordPress-Logo auf dem Anmeldebildschirm manuell durch Ihr eigenes benutzerdefiniertes Logo ersetzen, ohne dass Sie ein Plugin benötigen.
Zunächst müssen Sie Ihr individuelles Logo in die Mediathek hochladen: Gehen Sie einfach zu Medien " Neu hinzufügen Seite und laden Sie Ihr individuelles Logo hoch.
Sobald Sie das Bild hochgeladen haben, klicken Sie auf den Link "Bearbeiten" neben dem Bild. Dadurch wird die Seite "Medien bearbeiten" geöffnet, auf der Sie die URL der Datei kopieren und an einer geeigneten Stelle einfügen müssen, z. B. in eine leere Textdatei auf Ihrem Computer.
Als Nächstes müssen Sie den folgenden Codeschnipsel in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfügen.
function wpb_login_logo() { ?> #login h1 a, .login h1 a { background-image: url(//path/to/your/custom-logo.png); height:100px; width:300px; background-size: 300px 100px; background-repeat: no-repeat; padding-bottom: 10px; } php } add_action( 'login_enqueue_scripts', 'wpb_login_logo' ); </pre Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress Vergessen Sie nicht, die URL für das Hintergrundbild in Zeile 4 durch die zuvor kopierte Datei-URL zu ersetzen. Sie können auch andere CSS-Eigenschaften an Ihr individuelles Logobild anpassen.
Sie können nun die WordPress-Anmeldeseite besuchen, um Ihr individuelles Logo in Aktion zu sehen.
Dieser Code ersetzt jedoch nur das WordPress-Logo und ändert nicht den Logo-Link, der auf die WordPress.org-Website verweist.
Das sollten wir ändern.
Fügen Sie einfach den folgenden Code in die Datei functions.php Ihres Themes oder in ein site-spezifisches Plugin ein, und zwar direkt unter dem Code, den Sie zuvor hinzugefügt haben.
function wpb_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'wpb_login_logo_url' ); function wpb_login_logo_url_title() { return 'Your Site Name and Info'; } add_filter( 'login_headertitle', 'wpb_login_logo_url_title' ); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress Vergessen Sie nicht, "Your Site Name and Info" durch den tatsächlichen Namen Ihrer Website zu ersetzen. Das benutzerdefinierte Logo auf Ihrem Anmeldebildschirm zeigt nun auf die Startseite Ihrer Website.
Deaktivieren des Sprachumschalters auf der WordPress-Anmeldeseite
Mit der Veröffentlichung von WordPress 5.9 wurde eine neue Dropdown-Login-Option eingeführt, mit der Benutzer eine neue Sprache auswählen können, wenn sie sich auf der Website anmelden.
Wenn es mehr als eine aktive Sprache auf der Website gibt, erscheint diese Option.
Dies eignet sich gut für mehrsprachige Websites und Teams mit verschiedenen Nutzern, die möglicherweise in einer anderen Sprache auf das WordPress-Dashboard zugreifen möchten.
Wenn Sie Ihre Anmeldeseite jedoch einfach halten wollen und Ihre Benutzer nicht häufig die Sprache wechseln müssen, kann das Entfernen der Sprache helfen, die Anmeldeseite zu entrümpeln. Sie können dies mit einem Plugin oder Code tun.
Deaktivieren des Sprachumschalters mit einem Plugin
Alles, was Sie tun müssen, ist, das Plugin Disable Login Language Switcher zu installieren und zu aktivieren. Nach der Aktivierung wird die Option zur Sprachumschaltung automatisch entfernt. Es gibt keine weiteren Einstellungen, die Sie vornehmen müssen.
Wenn Sie nun zu Ihrem Anmeldebildschirm gehen, sehen Sie den Standard-Anmeldebildschirm ohne die Option zur Sprachumschaltung.
Deaktivieren des Sprachumschalters mit Code
Eine weitere Möglichkeit, die Sprachumschaltung zu deaktivieren, ist das Hinzufügen von Code zu WordPress.
Fügen Sie einfach den folgenden Codeschnipsel in Ihre functions.php-Datei, in ein Site-spezifisches Plugin oder mit Hilfe eines Code-Snippets-Plugins ein.
add_filter( 'login_display_language_dropdown', '__return_false' );
Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress Weitere Details finden Sie in unserer Anleitung zur Deaktivierung des Sprachwechslers auf dem WordPress-Login-Bildschirm.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, verschiedene Möglichkeiten zur Erstellung einer WordPress-Anmeldeseite für Ihre Website kennenzulernen. Vielleicht möchten Sie auch unseren ultimativen WordPress-Sicherheitsleitfaden lesen, um Tipps zur Verbesserung der Sicherheit Ihrer WordPress-Anmeldeseite zu erhalten, oder unseren Vergleich der besten Live-Chat-Software für kleine Unternehmen lesen.
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.
