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, Ihren Benutzern eine konsistente Marke zu präsentieren, 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?
• Auswahl des richtigen Plugins zum Erstellen einer benutzerdefinierten Anmeldeseite
• Methode 1: Verwenden von SeedProd zum Erstellen einer Anmeldeseite
• Methode 2: Verwenden von WPForms zum Erstellen einer Anmeldeseite
• Methode 3: Verwenden von Theme My Login zum Erstellen einer Anmeldeseite
• Methode 4: Anpassen der vorhandenen WordPress-Anmeldeseite ohne Plugin
• 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 sich Benutzer registrieren und 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 um das Formular herum 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.

Auswahl des richtigen Plugins zum Erstellen einer benutzerdefinierten Anmeldeseite

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, Verkaufsseiten, Optin-Seiten, „Bald verfügbar“-Seiten, Wartungsmodus-Seiten und mehr zu erstellen.

Hier sind einige herausragende Funktionen von SeedProd:

• Professionell gestaltete Vorlagen für Anmeldeseiten für den Einstieg.
• 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, mit dem Sie ganz einfach alle Arten von Online-Formularen erstellen können, 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 widget-fähigen Footer ein.

Wählen Sie Theme My Login, wenn Sie einfach eine 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 ausschließlich auf Ihrer Anmeldeseite angezeigt wird. Da es sich nicht um ein vollwertiges Formular-Plugin wie die anderen handelt, sind die Möglichkeiten zur Anpassung Ihres Anmeldeformulars begrenzt.

Methode 1: SeedProd zum Erstellen einer Anmeldeseite verwenden

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

Schritt 1: SeedProd auf Ihrer Website installieren

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

Ausführliche Anweisungen finden Sie in diesem Tutorial zur Installation 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 Erste Seite erstellen.

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: Vorlage für die Anmeldeseite auswählen

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: Ihre Anmeldeseite anpassen

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

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

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

Auf der linken Seite des Visual 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 Features, FAQ, Footer und andere, die Sie 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: Einstellungen Ihrer Anmeldeseite konfigurieren

Wenn Sie ein E-Mail-Opt-in-Formular zu Ihrer Anmeldeseite hinzufügen, können Sie es im Tab Verbinden mit Ihrem E-Mail-Marketing-Service 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 zum Tab 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.
• Analysen – 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 sichern.

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 besteht darin, den Anmeldeseitenmodus in Ihrem WordPress-Adminbereich zu aktivieren. 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 Sie mit WPForms eine Anmeldeseite erstellen.

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 der Erstellung eines Benutzeranmeldeformulars mit WPForms fortfahren.

Schritt 2: Erstellen Sie ein benutzerdefiniertes Anmeldeformular

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

Um ein Anmeldeformular zu erstellen, besuchen Sie WPForms » Neu hinzufügen. Auf der Seite zur Formulareinrichtung 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 Anmeldeformulare die folgenden Formularfelder hinzu: Benutzername und Passwort.

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

Schritt 3: Formulareinstellungen

Um allgemeine Einstellungen zu konfigurieren, können Sie zu Einstellungen » Allgemein gehen. Auf dieser Seite können Sie den Formulartitel, 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 ändern, wenn Sie möchten, im Feld Bestätigungs-Weiterleitungs-URL.

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 Widget-Einstellungen 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 Plugin Theme My Login 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 jedoch die Plugin-Einstellungen 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: Vorhandene WordPress-Anmeldeseite ohne Plugin anpassen

Wenn Sie lieber Änderungen an Ihrer vorhandenen Anmeldeseite vornehmen oder benutzerdefinierte Stile 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 standortspezifisches 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, in der Seitenleiste oder im Fußbereich anzeigen möchten, können Sie diesen Code zu Ihrer Theme-Datei hinzufügen:

<?php
          wp_login_form();
?>

Der obige Code zeigt nur die allgemeine WordPress-Anmeldeseite an dem Ort an, an dem 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-Anmelde-Shake-Effekt bei Fehlern

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 Anmeldeversuche begrenzen auf Ihrer Anmeldeseite, 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.