So erstellen Sie eine benutzerdefinierte Anmeldeseite in WordPress richtig (Schritt für Schritt)

Haben Sie sich jemals gefragt, ob Sie eine benutzerdefinierte Anmeldeseite in WordPress erstellen können?

Das Erstellen einer benutzerdefinierten Anmeldeseite hilft Ihnen, eine konsistente Marke für Ihre Benutzer anzuzeigen, was Ihrer Website ein professionelleres Aussehen verleiht.

In diesem Artikel zeigen wir Ihnen, wie Sie eine benutzerdefinierte Anmeldeseite in WordPress erstellen.

Erstellen einer benutzerdefinierten WordPress-Anmeldeseite – Inhaltsverzeichnis

• Warum eine benutzerdefinierte Anmeldeseite erstellen?
• Das richtige Plugin für die Erstellung einer benutzerdefinierten Anmeldeseite auswählen
• Methode 1: SeedProd zur Erstellung einer Anmeldeseite verwenden
• Methode 2: WPForms zur Erstellung einer Anmeldeseite verwenden
• Methode 3: Theme My Login zur Erstellung einer Anmeldeseite verwenden
• Methode 4: Vorhandene WordPress-Anmeldeseite ohne Plugin anpassen
• Methode 5: Anmeldeformular überall ohne Plugin anzeigen

Warum eine benutzerdefinierte Anmeldeseite erstellen?

Wenn Sie eine Community-basierte Website betreiben, wie z. B. ein Forum, eine Mitgliederseite, ein Nischen-soziales Netzwerk oder eine andere Website, auf der Benutzer ein Konto registrieren und sich anmelden müssen, dann müssen Sie eine benutzerdefinierte Anmeldeseite erstellen.

Die Standard-WordPress-Anmeldeseite sieht generisch und langweilig aus. Mit einer benutzerdefinierten Anmeldeseite können Sie alle Elemente auf der Seite rund um das Formular personalisieren.

Wenn Sie eine benutzerdefinierte Anmeldeseite haben, können Sie die Standard-Anmeldeseite ausblenden, wenn Sie möchten. Dies kann Anmelde-Spam reduzieren und Ihre WordPress-Site sicher halten.

Das richtige Plugin für die Erstellung einer benutzerdefinierten Anmeldeseite auswählen

Im offiziellen WordPress-Plugin-Repository finden Sie Dutzende verschiedener Plugins, die Ihnen helfen, einfach eine benutzerdefinierte Anmeldeseite zu erstellen. In diesem Artikel werden wir uns 3 verschiedene Plugins ansehen: SeedProd, WPForms und Theme My Login.

Wählen Sie SeedProd, wenn Sie einen einfach zu bedienenden Landingpage-Builder benötigen, um benutzerdefinierte Anmeldeseiten, Verkaufseiten, Optin-Seiten, „Coming Soon“-Seiten, Wartungsmodus-Seiten und mehr zu erstellen.

Hier sind einige herausragende Funktionen von SeedProd:

• Professionell gestaltete Vorlagen für Anmeldeseiten, um Ihnen den Einstieg zu erleichtern.
• Passen Sie Ihre Anmeldeseite vollständig mit Elementen wie sozialen Profilen, Videos, Testimonials, Sternebewertungen und mehr an.
• Fügen Sie ein Anmeldeformular zu jeder Landingpage hinzu, die Sie mit SeedProd erstellen.

Wählen Sie WPForms, wenn Sie ein voll ausgestattetes WordPress-Formular-Plugin benötigen, das Ihnen hilft, auf einfache Weise alle Arten von Online-Formularen zu erstellen, einschließlich Registrierungsformularen, Zahlungsformularen, Kontaktformularen usw.

Einige Vorteile von WPForms sind:

• Passen Sie Ihr Anmeldeformular nach Belieben und ohne Einschränkungen an.
• Veröffentlichen Sie Ihr Anmeldeformular auf beliebigen Beiträgen oder Seiten.
• Binden Sie Ihr Anmeldeformular in die Seitenleiste oder sogar in den mit Widgets versehenen Footer ein.

Wählen Sie Theme My Login, wenn Sie auf einfache Weise eine einfache Anmeldeseite erstellen möchten.

Nachfolgend finden Sie einige Funktionen von Theme My Login:

• Keine Konfiguration erforderlich, um eine benutzerdefinierte Anmeldeseite zu erstellen.
• Blendet automatisch die Standard-Anmeldeseite aus und leitet zur neu erstellten Anmeldeseite weiter.
• Fügen Sie einen Link zur Anmeldeseite in Ihre Seitenleiste mit einem benutzerdefinierten Anmelde-Widget hinzu.

Der Nachteil ist, dass Theme My Login im Gegensatz zu SeedProd und WPForms Ihr Anmeldeformular nicht überall auf Ihrer Website einbetten lässt und es ausschließlich auf Ihrer Anmeldeseite angezeigt wird. Da es sich nicht um ein voll ausgestattetes Formular-Plugin wie die anderen handelt, sind die Möglichkeiten zur Anpassung Ihres Anmeldeformulars begrenzt.

Methode 1: SeedProd zur Erstellung einer Anmeldeseite verwenden

Schauen wir uns zunächst Schritt für Schritt an, wie Sie mit SeedProd eine benutzerdefinierte Anmeldeseite erstellen.

Schritt 1: Installieren Sie SeedProd auf Ihrer Website

Zuerst müssen Sie das SeedProd Plugin herunterladen. Laden Sie dann das Plugin auf Ihre WordPress-Seite hoch und aktivieren Sie es.

Für detaillierte Anweisungen folgen Sie diesem Tutorial zum Installieren eines WordPress-Plugins.

Nach der Aktivierung des Plugins sehen Sie einen Begrüßungsbildschirm, auf dem Sie Ihren Lizenzschlüssel eingeben müssen. Sie finden Ihren Lizenzschlüssel in Ihrem Konto auf der SeedProd-Website.

Nachdem Ihr Lizenzschlüssel verifiziert wurde, scrollen Sie weiter nach unten auf der Seite und klicken Sie auf die Schaltfläche Erstellen Sie Ihre erste Seite.

Als Nächstes werden Sie zum SeedProd-Dashboard weitergeleitet. Hier sehen Sie die verschiedenen Arten von Landingpages, die Sie erstellen können. Klicken Sie auf Anmeldeseite einrichten, um zu beginnen.

Schritt 2: Wählen Sie eine Vorlage für die Anmeldeseite

In diesem Schritt werden Sie aufgefordert, eine Vorlage für die Anmeldeseite auszuwählen. SeedProd bietet eine Vielzahl von professionell gestalteten Vorlagen, aus denen Sie wählen können.

Es gibt auch eine leere Vorlage, die Sie verwenden können, wenn Sie Ihr Design von Grund auf neu erstellen möchten.

Um eine Vorlage für die Anmeldeseite auszuwählen, fahren Sie einfach mit der Maus darüber und klicken Sie auf das Häkchen-Symbol.

Als Nächstes ist es an der Zeit, die Vorlage anzupassen.

Schritt 3: Passen Sie Ihre Anmeldeseite an

Das Beste an SeedProd ist, dass Sie Ihre Anmeldeseite ganz einfach mit dem visuellen Drag-and-Drop-Builder anpassen können. Zuerst können Sie jedes vorhandene Element auf der Vorlage anpassen, indem Sie darauf klicken.

Sie können zum Beispiel auf die Überschrift „Anmelden“ klicken, um den Text, die Größe, die Ausrichtung, die Typografie und mehr zu ändern.

Um neue Inhalte zu Ihrer Anmeldeseite hinzuzufügen, können Sie die fertigen Landingpage-Blöcke von SeedProd verwenden.

Auf der linken Seite des visuellen Builders befinden sich Landingpage-Blöcke wie Bild, Video, Schaltfläche, soziale Profile, Countdown-Timer, Fortschrittsbalken und mehr.

Ziehen Sie einfach den gewünschten Block per Drag & Drop auf Ihre Anmeldeseite. Wieder können Sie auf den Block klicken, um Stil, Größe, Ausrichtung usw. anzupassen.

SeedProd bietet auch vorgefertigte Abschnitte wie Funktionen, FAQ, Fußzeile und andere, die Sie zu Ihrer Anmeldeseite hinzufügen können.

Klicken Sie einfach auf einen Abschnitt und SeedProd fügt ihn automatisch zu Ihrer Seite hinzu.

Sie können auch zu den Globalen Einstellungen von SeedProd in der unteren Ecke gehen, um das Hintergrundbild, die Schriftart und die Farben Ihrer gesamten Anmeldeseite zu ändern, anstatt jedes Element einzeln zu ändern.

Wenn Sie beispielsweise das Farbschema Ihrer Anmeldeseite ändern möchten, bietet SeedProd über 20 Farbpaletten, mit denen Sie ein zusammenhängendes Erscheinungsbild erstellen können.

Wenn Sie mit dem Aussehen Ihrer Anmeldeseite zufrieden sind, klicken Sie oben rechts auf Speichern.

Schritt 4: Konfigurieren Sie die Einstellungen Ihrer Anmeldeseite

Wenn Sie Ihrer Anmeldeseite ein E-Mail-Opt-in-Formular hinzufügen, können Sie es auf der Registerkarte Verbinden mit Ihrem E-Mail-Marketing-Dienst verbinden.

Klicken Sie einfach auf Ihren bevorzugten E-Mail-Marketing-Anbieter und folgen Sie den Anweisungen, um Ihr Konto zu verbinden. Jedes Mal, wenn jemand seine E-Mail-Adresse über das Opt-in-Formular angibt, wird er automatisch zu Ihrer E-Mail-Liste hinzugefügt.

Sie können auch zur Registerkarte Seiteneinstellungen gehen, um andere Einstellungen zu konfigurieren.

Die Einstellungen auf dieser Seite umfassen:

• Allgemein – Ändern Sie den Namen und die URL Ihrer Anmeldeseite, zeigen Sie einen SeedProd-Affiliate-Link an und mehr.
• SEO – Legen Sie den SEO-Titel, die Meta-Beschreibung usw. Ihrer Seite fest. Wenn Sie ein SEO-Plugin wie All in One SEO verwenden, können Sie dies als Verknüpfung zu dessen Einstellungen verwenden.
• Analyse – Verfolgen Sie die Leistung Ihrer Anmeldeseite mit einem Analyse-Plugin wie MonsterInsights.
• Skripte – Verwenden Sie Tracking- und Retargeting-Skripte wie Cookies oder Facebook-Tracking-Pixel.

Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Einstellungen zu speichern.

Schritt 5: Veröffentlichen Sie Ihre Anmeldeseite

Jetzt ist es an der Zeit, Ihre benutzerdefinierte Anmeldeseite auf Ihrer Website zu veröffentlichen. Klicken Sie dazu auf den Dropdown-Pfeil neben der grünen Schaltfläche Speichern und dann auf die Schaltfläche Veröffentlichen.

Anschließend sehen Sie eine Erfolgsmeldung, die Sie darüber informiert, dass die Anmeldeseite jetzt live ist.

Klicken Sie auf Live-Seite anzeigen, um Ihre neue benutzerdefinierte Anmeldeseite anzuzeigen.

Der letzte Schritt ist die Aktivierung des Anmeldeseitenmodus in Ihrem WordPress-Adminbereich. Das klingt vielleicht schwierig, aber SeedProd macht es super einfach.

Verlassen Sie einfach den visuellen Landingpage-Builder und kehren Sie zum Haupt-SeedProd-Dashboard zurück. Unter dem Abschnitt Anmeldeseite schalten Sie den Schalter von Inaktiv auf Aktiv.

Das war's! Jetzt hat Ihre WordPress-Anmeldeseite ein benutzerdefiniertes Design. Wenn Sie die Anmeldeseite jemals deaktivieren möchten, müssen Sie einfach zum selben Schalter zurückkehren und sie deaktivieren.

Methode 2: Erstellen einer Anmeldeseite mit WPForms

Werfen wir einen Blick darauf, wie man mit WPForms eine Anmeldeseite erstellt.

Schritt 1: Installieren Sie WPForms auf Ihrer Website

Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Stellen Sie sicher, dass Sie Ihren Lizenzschlüssel überprüfen, indem Sie zu WPForms » Einstellungen navigieren. Sie können den Lizenzschlüssel in Ihrem Konto auf der WPForms-Website erhalten.

Um mit WPForms eine benutzerdefinierte Anmeldeseite erstellen zu können, müssen Sie das User Registration Addon installieren, indem Sie zu WPForms » Addons gehen. Klicken Sie auf Addon installieren neben User Registration Addon und dann auf Aktivieren.

Sobald das Addon aktiviert ist, können Sie mit WPForms ein Benutzeranmeldeformular erstellen.

Schritt 2: Erstellen Sie ein benutzerdefiniertes Anmeldeformular

Mit dem leistungsstarken Drag-and-Drop-Builder von WPForms können Sie in nur wenigen Minuten, nicht Stunden, ein Anmeldeformular erstellen, ohne eine einzige Zeile Code schreiben zu müssen.

Um ein Anmeldeformular zu erstellen, besuchen Sie WPForms » Neu hinzufügen. Auf der Formular-Einrichtungsseite müssen Sie die Vorlage Benutzeranmeldeformular auswählen, um ein Anmeldeformular zu erstellen.

Sie sehen nun den Formular-Builder, in dem Sie Felder für das Anmeldeformular hinzufügen, anpassen und entfernen können. Standardmäßig fügt die Vorlage für das Anmeldeformular die folgenden Formularfelder hinzu: Benutzername und Passwort.

Sie können jedes Feld anpassen, indem Sie im Page Builder darauf klicken. Anschließend können Sie die gewünschten Anpassungen im linken Bereich vornehmen.

Schritt 3: Formular-Konfiguration

Um allgemeine Einstellungen zu konfigurieren, können Sie zu Einstellungen » Allgemein gehen. Auf dieser Seite können Sie den Formularnamen, die Beschreibung, den Text des Absende-Buttons usw. anpassen.

Sie müssen im Tab Benachrichtigungen für Ihr benutzerdefiniertes Anmeldeformular nichts tun. Standardmäßig sind Benachrichtigungen deaktiviert, sodass Sie keine E-Mail erhalten, wenn sich jemand auf Ihrer Website anmeldet.

Wenn sich ein Benutzer über Ihr benutzerdefiniertes Anmeldeformular anmeldet, landet er auf der Homepage Ihrer Website. Sie können die Weiterleitungs-URL, falls gewünscht, im Feld Bestätigungs-Weiterleitungs-URL ändern.

Schritt 4: Veröffentlichen Sie Ihr WordPress-Formular

Einer der Hauptvorteile der Verwendung von WPForms zum Erstellen eines Anmeldeformulars ist, dass Sie Ihr Formular überall auf Ihrer Website einbetten können, einschließlich Beiträgen, Seiten, Sidebar-Widgets oder widgetisierten Footer-Bereichen.

Werfen wir einen Blick darauf, wie Sie Ihr Formular in Beiträgen oder Seiten veröffentlichen.

Erstellen Sie einen neuen Beitrag oder eine neue Seite in WordPress und klicken Sie dann im Gutenberg-Blockeditor auf das + Symbol. Sie können nach dem WPForms-Block suchen und darauf klicken.

Wählen Sie als Nächstes Ihr Anmeldeformular im WPForms-Block aus, und es wird automatisch in Ihrem Beitrag / Ihrer Seite geladen.

Nachdem Sie das Formular hinzugefügt haben, können Sie Ihren Beitrag / Ihre Seite veröffentlichen.

Sie können das Anmeldeformular auch wie folgt zu Ihrem Sidebar-Widget hinzufügen. Gehen Sie zu Darstellung » Widgets und fügen Sie das WPForms-Widget zu Ihrer Sidebar hinzu.

Wählen Sie Ihr benutzerdefiniertes Anmeldeformular in den Einstellungen des Widgets aus und klicken Sie auf die Schaltfläche Speichern, um die Änderungen zu speichern.

Methode 3: Verwenden von Theme My Login zum Erstellen einer Anmeldeseite

Das Theme My Login Plugin macht es super einfach, ein benutzerdefiniertes Anmeldeformular auf Ihrer WordPress-Website zu veröffentlichen. Um eine einfache Anmeldeseite zu erstellen, müssen Sie lediglich das Theme My Login Plugin installieren und aktivieren.

Das Plugin funktioniert sofort ohne weitere Konfiguration.

Wenn Sie die Plugin-Einstellungen jedoch anpassen müssen, können Sie im WordPress-Dashboard auf das Menü Theme My Login klicken.

Sie können dann die Anmelde- und Registrierungstypen ändern. Sie können auch die URL-Slugs für die Anmelde-, Abmelde-, Registrierungs-, Passwort-vergessen- und Passwort-zurücksetzen-Seiten anpassen.

Methode 4: Bestehende WordPress-Anmeldeseite ohne Plugin anpassen

Wenn Sie Änderungen vornehmen oder benutzerdefinierte Stile zu Ihrer bestehenden Anmeldeseite hinzufügen möchten, anstatt eine komplett neue zu erstellen, erfahren Sie hier, wie Sie das tun.

Fügen Sie diesen Code einfach zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin ein:

//Custom login page
function clp_login_head() {
		
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
		
}
add_action('login_head', 'clp_login_head');

Sie können die CSS- und Bild-URL im obigen Code ändern, um Ihre benutzerdefinierten Stile für die WordPress-Anmeldeseite hinzuzufügen.

Methode 5: WordPress-Anmeldeformular überall ohne Plugin anzeigen

Wenn Sie das WordPress-Anmeldeformular auf einer beliebigen Seite, Sidebar oder im Footer-Bereich anzeigen möchten, können Sie diesen Code zur Vorlagendatei Ihres Themes hinzufügen:

<?php
          wp_login_form();
?>

Der obige Code zeigt nur die allgemeine WordPress-Anmeldeseite an der Stelle an, an der Sie den Code einfügen. Wenn Sie eine benutzerdefinierte WordPress-Formularseite mit zusätzlichen Feldern und Optionen hinzufügen möchten, können Sie diesen Code verwenden:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Ein paar weitere Code-Snippets, die Sie hilfreich finden werden:

• Ändern Sie Ihre Anmelde-URL über die .htaccess-Datei
• Ändern Sie Ihre Anmelde-URL über functions.php
• Entfernen Sie den WordPress-Login-Shake-Effekt, wenn ein Fehler auftritt

Das ist alles! Wenn Sie vorhaben, öfter Code-Snippets zu Ihrer Website hinzuzufügen, schauen Sie sich das WPCode-Plugin an. Es ist die beste Lösung, um benutzerdefinierte Code-Snippets einfach hinzuzufügen.

Wir hoffen, dieser Leitfaden hat Ihnen geholfen, eine benutzerdefinierte Anmeldeseite in WordPress zu erstellen. Wenn Ihnen dieser Artikel gefallen hat, möchten Sie vielleicht auch lernen, wie Sie eine passwortgeschützte Seite in WordPress erstellen. Dieser Beitrag hilft Ihnen, Ihre Inhalte mit einem Passwort zu beschränken, um Geld zu verdienen oder E-Mail-Adressen von Benutzern zu sammeln.

Sie möchten vielleicht auch die Anmeldeversuche auf Ihrer Anmeldeseite begrenzen, um Hacker daran zu hindern, Brute-Force-Angriffe auf Ihre Website durchzuführen.

Lesen Sie unseren vollständigen Sicherheitsleitfaden für WordPress für weitere Informationen dazu.