So passe ich die WordPress-Anmeldeseite an (ohne Code) 

Du betreibst eine Mitgliederseite oder eine Kunden-Website, und die Leute melden sich über einen Bildschirm an, der nichts mit deiner Marke zu tun hat. Die Standard-WordPress-Anmeldeseite mit ihrem kleinen WordPress-Logo fühlt sich wie eine Abweichung von deiner Website an.

Ich passe die WordPress-Anmeldeseite auf meinen eigenen Websites an und zeige dir fünf Möglichkeiten, dies zu tun, von einem No-Code-Plugin bis zu ein paar Zeilen CSS. Wähle die Methode, die deinem gewünschten Kontrollgrad entspricht.

Vorteile der Anpassung Ihrer WordPress-Anmeldeseite?

Die standardmäßige WordPress-Anmeldeseite zeigt das WordPress-Logo und zwei Formularfelder, sonst nichts. Das ist in Ordnung, wenn du die einzige Person bist, die sich im Backend anmeldet.

Aber sobald Besucher sich registrieren und anmelden, kann ein Standardbildschirm, der nichts mit deiner Website zu tun hat, verdächtig wirken. Eine benutzerdefinierte Anmeldeseite mit deinem Branding signalisiert den Nutzern, dass sie am richtigen Ort sind.

Beispiele für benutzerdefinierte WordPress-Anmeldeseiten

Wie sieht eine gebrandete Anmeldeseite in der Praxis aus? Du kannst eigene Bilder hinzufügen, zurück zu deiner Homepage verlinken, eine Handlungsaufforderung einfügen oder Social-Media-Icons einbinden.

Hier sind einige reale Beispiele, die zeigen, was möglich ist.

Anpassung der MonsterInsights WordPress-Anmeldeseite

MonsterInsights verwendet ein Zwei-Spalten-Layout. Das Anmeldeformular befindet sich links, und eine Handlungsaufforderung für das Schwesterprodukt befindet sich rechts.

Das Hintergrundbild verleiht der Seite ein unverwechselbares, gebrandetes Gefühl, das der Standardbildschirm nicht erreichen kann.

TED benutzerdefinierte WordPress-Anmeldeseite

TED verwendet ein weiteres Zwei-Spalten-Design. Links befinden sich ein Bild und eine Überschrift, rechts mehrere Anmeldemöglichkeiten.

Benutzer können sich auch für ein TED-Konto anmelden, indem sie dort ihre E-Mail-Adresse eingeben.

Church Motion Graphics angepasste Anmeldeseite

Diese Anmeldeseite erregt Aufmerksamkeit mit einem farbenfrohen Hintergrund, der widerspiegelt, was das Unternehmen tut. Der Header, Footer und die Navigation bleiben mit dem Rest der Website konsistent.

Das Anmeldeformular selbst bleibt minimalistisch, mit einem hellen Hintergrund, der sich von der leuchtenden Bildsprache abhebt. Du kannst weitere Anmeldeseiten-Beispiele zur Inspiration durchsuchen.

Welche Methode sollten Sie verwenden?

Fünf Methoden sind viel, also hier ist, wie du eine für deine Situation auswählst, bevor du anfängst. Die richtige Wahl hängt davon ab, wie viel du ändern möchtest und ob du dich mit Code wohlfühlst.

• Komplettes Redesign, kein Code: Verwende SeedProd, um die gesamte Anmeldeseite mit einem Drag-and-Drop-Builder neu zu erstellen.
• Nur das Logo: Verwenden Sie ein kostenloses Plugin zur Anpassung des Logins wie Colorlib, um das Logo und den Link zu ändern.
• Sie sind Entwickler: Fügen Sie CSS zu functions.php hinzu, um die volle Kontrolle zu erhalten und keine Plugins zu benötigen.
• Ein Login-Formular, keine Seite: Verwenden Sie WPForms, um ein gebrandetes Login-Formular zu erstellen, das Sie überall einbetten können.
• Soziales Login: Lassen Sie Leute sich mit Google oder Facebook anmelden, indem Sie ein spezielles Plugin für soziale Logins verwenden.

So passen Sie die WordPress-Anmeldeseite mit SeedProd an

SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress mit einem integrierten Login-Seiten-Modus. Er ermöglicht es Ihnen, den Login-Bildschirm visuell ohne Code neu zu gestalten, und funktioniert mit jedem WordPress-Theme.

Ich verwende den Login-Seiten-Modus von SeedProd auf meiner eigenen Website, und am meisten schätze ich die Geschwindigkeit. Das manuelle Umgestalten des Login-Bildschirms mit CSS dauert einen Nachmittag voller Versuche und Irrtümer, während der No-Code-Workflow mir in wenigen Minuten eine fertige Seite liefert.

Es ist auch ein WordPress Landing Page Builder, sodass derselbe Editor Coming-Soon-Seiten, Verkaufsseiten und benutzerdefinierte Login-Seiten von einem Ort aus verwaltet.

Hinweis: Es gibt eine kostenlose Version von SeedProd auf WordPress.org, aber sie deckt nur den Coming-Soon- und Wartungsmodus ab. Der Login-Seiten-Anpassungs-Editor ist eine kostenpflichtige Funktion, die in jedem kostenpflichtigen Plan verfügbar ist, beginnend mit Basic. Sie benötigen also nicht die Top-Stufe dafür.

Befolgen Sie die nachstehenden Schritte, um Ihre WordPress-Login-Seite mit SeedProd zu gestalten.

Schritt 1: SeedProd installieren und aktivieren

Laden Sie zuerst das SeedProd-Plugin herunter und installieren Sie es auf Ihrer WordPress-Website.

Wenn Sie neu hier sind, folgen Sie dieser Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung des Plugins sehen Sie die SeedProd-Begrüßungsseite in Ihrem Dashboard. Geben Sie Ihren Lizenzschlüssel ein und klicken Sie dann auf die Schaltfläche "Erste Seite erstellen".

Schritt 2: Bearbeiten Sie Ihre WordPress-Anmeldeseite

Sie sehen die verschiedenen Seitenmodi, die SeedProd aktivieren kann. Für dieses Tutorial benötigen Sie den Login-Seiten-Modus.

Klicken Sie auf "Seite bearbeiten" unter der Überschrift "Login-Seite", um zu beginnen.

Schritt 3: Wählen Sie eine benutzerdefinierte WordPress-Anmeldeseiten-Vorlage

Auf dem nächsten Bildschirm sehen Sie die Bibliothek von SeedProd mit Vorlagen für Login-Seiten. Jede Vorlage ist im visuellen Builder bearbeitbar.

Klicken Sie auf den Filter "Login", um alle Vorlagen für Login-Seiten anzuzeigen. Fahren Sie mit der Maus über die gewünschte Vorlage und klicken Sie auf das Häkchen-Symbol. Für diese Anleitung wähle ich Login-Seite 8.

Ein Popup fragt Sie nach dem Namen der Seite und der URL. Klicken Sie auf "Speichern und Seite bearbeiten" (Save and Start Editing Page), um sie im Drag-and-Drop-Editor zu öffnen.

Schritt 4: Passen Sie Ihre WordPress-Login-Seite an

Der Editor besteht aus zwei Teilen. Blöcke und Abschnitte befinden sich links, und eine Live-Vorschau Ihrer Login-Seite befindet sich rechts.

Um Inhalte hinzuzufügen, ziehen Sie einen Block von links und legen Sie ihn auf der Seite ab. Sie können mit wenigen Klicks ein Logo am oberen Rand der Seite hinzufügen.

Klicken Sie auf einen beliebigen Block, um ihn zu bearbeiten. Wenn Sie auf das Login-Formular klicken, werden die Einstellungen für den Login-Block von SeedProd links angezeigt.

Dort können Sie die Formularbezeichnungen bearbeiten, die Felder für Name und Passwort ein- oder ausblenden und den Text der Schaltfläche ändern.

Klicken Sie auf die Registerkarte "Vorlagen" (Templates), um aus verschiedenen Formularstilen auszuwählen. Wählen Sie einen aus, und er wird sofort auf Ihr Formular angewendet, ganz ohne Code.

Sie können Schaltflächen, Spalten und Bilder hinzufügen, um das Design abzurunden. Wenn Sie möchten, dass sich Personen schneller anmelden, können Sie hier auch eine Social-Login-Schaltfläche hinzufügen, damit sich Benutzer mit Google oder Facebook anmelden.

SeedProd hat auch vorgefertigte Abschnitte, sodass Sie Bereiche wie einen Kopf- oder Fußzeilenblock nicht Block für Block erstellen müssen. Klicken Sie auf die Registerkarte „Abschnitte“, um sie zu durchsuchen.

Um Schriftarten, Farben und den Hintergrund einmal für die gesamte Seite festzulegen, klicken Sie auf das Zahnradsymbol in der unteren rechten Ecke, um die globalen Einstellungen zu öffnen.

Ändern Sie unter der Registerkarte „Schriftarten“ Ihre Kopf- und Textschriftarten sowie deren Schriftschnitte über die Dropdown-Menüs.

Klicken Sie auf die Schaltfläche „Schriftarten-Designs“, um Kombinationen zu durchsuchen, die gut zusammenpassen, und fügen Sie sie dann mit einem Klick hinzu.

Legen Sie Farben für Links, Kopfzeilen, Text, Schaltflächen und Hintergründe mit der Farbauswahl fest.

Oder klicken Sie auf die Schaltfläche „Farbpaletten“, um aus über 20 fertigen Schemata auszuwählen.

Der Abschnitt „Hintergrund“ verwaltet den Hintergrund Ihrer Seite. Legen Sie eine Volltonfarbe, einen Farbverlauf oder ein bild in voller Breite fest.

Klicken Sie auf das Papierkorbsymbol, um das vorhandene Bild zu entfernen. Klicken Sie dann auf „Eigenes Bild verwenden“, um ein neues aus Ihrem Computer oder Ihrer Mediathek auszuwählen.

Denken Sie daran, auf „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Schritt 5: Konfigurieren Sie Ihre WordPress-Anmeldeseiten-Einstellungen

Wenn das Design vorhanden ist, richten Sie einige Optionen ein. Wenn Sie ein Opt-in-Formular zum Sammeln von E-Mail-Adressen hinzugefügt haben, verbinden Sie zuerst Ihren E-Mail-Marketingdienst.

Klicken Sie oben auf die Registerkarte „Verbinden“, wählen Sie Ihren E-Mail-Dienst aus und folgen Sie den Schritten, um Ihr Konto zu verknüpfen.

SeedProd integriert sich in beliebte E-Mail-Newsletter-Dienste, darunter Constant Contact, ConvertKit, AWeber und Mailchimp.

Noch keinen E-Mail-Anbieter? Die Abonnentenverwaltungsfunktion von SeedProd speichert Anmeldungen auf Ihrer Website. Zeigen Sie sie unter SeedProd » Abonnenten an.

Klicken Sie als Nächstes auf die Registerkarte „Seiteneinstellungen“. Von dort aus können Sie Folgendes anpassen:

• Allgemein: Ändern Sie den Seitennamen und die URL und legen Sie sie auf Entwurf oder Veröffentlicht fest.
• SEO: Bearbeiten Sie den Seitentitel und die Meta-Beschreibung über ein SEO-Plugin wie All in One SEO.
• Analyse: Verfolgen Sie die Leistung mit einem Plugin wie MonsterInsights.
• Skripte: Fügen Sie Tracking- oder Retargeting-Skripte wie den Facebook-Pixel hinzu.

Klicken Sie auf „Speichern“, bevor Sie fortfahren.

Schritt 6: Stellen Sie sicher, dass Ihre Anmeldeseite mobilfreundlich ist

Jede Seite, die Sie veröffentlichen, sollte mobil-responsiv sein, sonst ist es für Telefonbenutzer schwieriger, sich anzumelden. Die Vorlagen von SeedProd sind responsiv und ein Vorschauwerkzeug ermöglicht Ihnen die Überprüfung.

Klicken Sie auf das mobile Vorschau-Symbol am unteren Bildschirmrand, um Ihre Seite so zu sehen, wie Telefonbenutzer sie sehen würden.

Sie können die Bearbeitung in beiden Ansichten fortsetzen, und SeedProd speichert die Änderungen für beide.

Schritt 7: Veröffentlichen Sie Ihre benutzerdefinierte WordPress-Anmeldeseite

Wenn Sie mit der Seite zufrieden sind, klicken Sie auf den Pfeil nach unten neben der grünen Schaltfläche „Speichern“ und wählen Sie „Veröffentlichen“.

Ein Popup bestätigt, dass die Seite live ist. Klicken Sie auf „Live-Seite anzeigen“, um sie anzuzeigen.

Der letzte Schritt ist die Aktivierung des Anmeldeseitenmodus. Verlassen Sie den Builder und schalten Sie dann unter der Überschrift „Anmeldeseite“ den Schalter auf „Aktiv“.

Jetzt sieht jeder, der Ihre WordPress-Anmeldeseite besucht, Ihr benutzerdefiniertes Design.

WordPress-Anmeldeseite mit WPForms anpassen

Die zweite Methode verwendet WPForms, den besten Drag-and-Drop-Formularersteller für WordPress. Was Sie vielleicht nicht wissen, ist, dass sein User Registration Form Add-on ein Anmeldeformular für Ihre Website erstellen kann.

Mit Millionen von Websites, die WPForms zum Erstellen intelligenterer Formulare verwenden, sind Sie in guten Händen. WPForms ist Teil der Awesome Motive-Produktfamilie, genau wie SeedProd.

Wenn Sie ein Anmeldeformular anstelle einer vollständigen Seite wünschen, folgen Sie dieser Anleitung, wie Sie mit WPForms ein benutzerdefiniertes WordPress-Anmeldeformular erstellen. Sie behandelt auch das Hinzufügen eines Links zum Zurücksetzen des Passworts und das Anzeigen des Formulars mit einem Shortcode.

So passen Sie die WordPress-Anmeldeseite manuell an

Können Sie die WordPress-Anmeldeseite ohne Plugin anpassen? Ja. Sie können Code zur functions.php-Datei Ihres Themes oder zu einem sitespezifischen Plugin hinzufügen, obwohl dies etwas Übung mit Code erfordert und Ihnen weniger Kontrolle gibt als ein visueller Builder.

Wenn Sie neu hier sind, lesen Sie diese Anleitung, wie Sie Code-Snippets in WordPress hinzufügen, damit Sie Ihre Website nicht versehentlich beschädigen.

Der folgende Snippet gestaltet den Anmeldebildschirm neu und tauscht das Logo aus. Bearbeiten Sie die Farbwerte und den Logo-Pfad, um sie an Ihre Marke anzupassen, und fügen Sie ihn dann zu functions.php hinzu:

// Custom WordPress login page styles
function clp_login_head() { ?>
    <style>
        /* Replace the default logo */
        .login h1 a {
            background-image: url('https://example.com/wp-content/uploads/your-logo.png');
            background-size: contain;
            width: 320px;
            height: 80px;
        }
        /* Link colors */
        .login #nav a,
        .login #backtoblog a { color: #0073aa !important; }
        /* Submit button */
        .login .button-primary {
            background: #0073aa;
            border-color: #0073aa;
        }
    </style>
<?php }
add_action( 'login_head', 'clp_login_head' );

// Point the logo link to your home page instead of wordpress.org
function clp_login_url() { return home_url(); }
add_filter( 'login_headerurl', 'clp_login_url' );

// Change the logo hover/title text
function clp_login_title() { return get_bloginfo( 'name' ); }
add_filter( 'login_headertext', 'clp_login_title' );

Das ändert das Logo, den Link, auf den es verweist, und die Farben des Formulars auf Ihrer bestehenden Anmeldeseite. Wenn Sie Code ganz vermeiden möchten, erledigt die oben genannte SeedProd-Methode die gleiche Aufgabe im visuellen Editor.

Zeigen Sie Ihr WordPress-Anmeldeformular überall ohne Plugin an

Um das WordPress-Anmeldeformular auf jeder Seite oder Vorlage anzuzeigen, ohne ein Plugin oder Widget, fügen Sie dies zu Ihrer Theme-Vorlagendatei hinzu:

<?php wp_login_form(); ?>

Das gibt das Standard-Anmeldeformular aus, wo immer Sie den Code platzieren. Um die Beschriftungen, die Weiterleitung und die Feldoptionen anzupassen, übergeben Sie stattdessen Argumente:

<?php
$args = array(
    'echo'           => true,
    'redirect'       => home_url(), // where to send users after login
    'form_id'        => 'loginform',
    'label_username' => __( 'Username' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'remember'       => true,
);
wp_login_form( $args );
?>

Sie können die CSS um dieses Formular herum ändern, um es an den Rest Ihrer Website anzupassen.

Wie ändere ich das WordPress-Anmelde-Logo?

Sie brauchen nicht immer eine vollständige benutzerdefinierte Seite. Manchmal reicht es aus, das Logo und den Link dahinter zu ändern, und ein kostenloses Plugin erledigt dies ohne Code.

Installieren und aktivieren Sie das Colorlib Login Customizer Plugin. Gehen Sie dann zu Darstellung » Anpassen und klicken Sie auf den neuen Punkt Colorlib Login Customizer.

Der Customizer lädt Ihren Anmeldebildschirm mit Einstellungen auf der linken Seite und einer Live-Vorschau auf der rechten Seite. Klicken Sie auf den Reiter Logo-Optionen.

Von dort aus können Sie das WordPress-Logo ausblenden, Ihr eigenes hochladen und seine URL und seinen Text ändern. Sie können auch die Größe, Breite und Höhe des Logos anpassen.

Sie können mit Spalten, Hintergrundbildern und benutzerdefinierten Farben weiter gehen. Veröffentlichen Sie die Änderungen, sobald Sie mit dem neuen Logo zufrieden sind.

Wie sichere ich meine benutzerdefinierte Anmeldeseite?

Eine gebrandete Anmeldeseite ist auch ein besser sichtbares Ziel, daher lohnt es sich, sie zu härten, sobald sie gut aussieht. Ein paar Schritte reduzieren Brute-Force-Versuche und Bots.

• Ändern Sie die Anmelde-URL: Verschieben Sie die Anmeldung von der offensichtlichen wp-login.php. Hier erfahren Sie, wie Sie Ihre WordPress-Admin-Anmelde-URL ändern.
• Begrenzen Sie die Anmeldeversuche: Legen Sie fest, wie oft jemand ein Passwort versuchen kann, bevor er gesperrt wird, was die meisten Brute-Force-Angriffe blockiert.
• Verwenden Sie generische Fehlermeldungen: Der Standard "Ungültiger Benutzername" teilt einem Angreifer mit, welche Hälfte er richtig erraten hat. Eine vage Nachricht verrät weniger.
• Zwei-Faktor-Authentifizierung hinzufügen: Ein zweiter Code zusätzlich zum Passwort verhindert, dass ein gestohlenes Passwort allein ausreicht.

Auf meinen eigenen Websites ändere ich als Erstes die Login-URL, da dies die meisten automatisierten Angriffe abwehrt, bevor sie überhaupt das Formular erreichen.

Wie teste ich meine benutzerdefinierte Anmeldeseite?

Bevor Sie es für erledigt erklären, führen Sie einen schnellen Test durch, damit ein Tippfehler Ihre Benutzer nicht aussperrt. Ich melde mich immer ab und rufe die Seite frisch auf, so wie es ein echter Besucher tun würde.

• Seitenladezeit: Überprüfen Sie, ob die Seite sauber und ohne defekte Elemente geladen wird.
• Logo und Design: Bestätigen Sie, dass das neue Logo und die neue Gestaltung wie erwartet erscheinen.
• Login-Test: Melden Sie sich mit Ihrem Benutzernamen und Passwort an und stellen Sie sicher, dass es funktioniert.
• Fehlermeldungen: Geben Sie falsche Anmeldedaten ein und prüfen Sie, ob die Fehlermeldung korrekt angezeigt wird.
• Passwort vergessen: Lösen Sie eine Zurücksetzung aus und bestätigen Sie, dass die E-Mail mit einem funktionierenden Link ankommt.
• Benutzerdefinierte URL: Wenn Sie eine benutzerdefinierte URL festgelegt haben, bestätigen Sie, dass sie auf die neue Login-Seite verweist. Nicht sicher, wo sich Ihre befindet? Hier erfahren Sie, wie Sie Ihre WordPress-Login-URL finden.
• Responsivität: Öffnen Sie die Seite auf Mobilgeräten, Tablets und Desktops, um zu prüfen, ob sie überall richtig aussieht.

WordPress-Anmeldeseite FAQs anpassen

Kann man die WordPress-Login-Seite ohne Plugin anpassen?

Ja. Sie können den vorhandenen Login-Bildschirm neu gestalten, indem Sie CSS und einige Hooks zur functions.php-Datei Ihres Themes oder einem sitespezifischen Plugin hinzufügen. Dies ändert das Logo, den Link dahinter und die Formularfarben, ohne einen Seitenersteller zu installieren.

Der Nachteil ist, dass dies etwas Code-Komfort erfordert und Ihnen weniger Designkontrolle gibt als ein visuelles Werkzeug. Für eine vollständige Neugestaltung ohne Code ist ein Builder wie SeedProd einfacher.

Wie ändere ich das WordPress-Login-Logo ohne Code?

Installieren Sie ein kostenloses Login-Customizer-Plugin wie Colorlib Login Customizer, gehen Sie dann zu Darstellung » Anpassen und öffnen Sie dessen Einstellungen. Im Tab Logo-Optionen können Sie das WordPress-Logo ausblenden, Ihr eigenes hochladen und die Größe sowie den Link festlegen.

Alles wird in einer Live-Vorschau aktualisiert, sodass Sie das neue Logo sehen, bevor Sie es veröffentlichen. Der Login-Seiten-Modus von SeedProd ermöglicht es Ihnen auch, einen Logo-Block einzufügen, wenn Sie die gesamte Seite neu gestalten möchten.

Ist es sicher, die WordPress-Login-Seite anzupassen?

Ja, die Anpassung der Login-Seite ist sicher, wenn Sie ein seriöses Plugin oder sorgfältigen Code verwenden. Es ändert das Aussehen der Seite, nicht die Art und Weise, wie WordPress Benutzer authentifiziert, sodass Ihre Sicherheit durch das Design selbst nicht geschwächt wird.

Eine benutzerdefinierte Seite ist ein guter Zeitpunkt, um auch echten Schutz hinzuzufügen. Das Ändern der Login-URL, das Begrenzen von Login-Versuchen und das Aktivieren der Zwei-Faktor-Authentifizierung reduzieren alle das Risiko von Brute-Force-Angriffen.

Wie füge ich Social Login zur WordPress-Login-Seite hinzu?

Social Login ermöglicht es Benutzern, sich mit einem bestehenden Google- oder Facebook-Konto anstelle eines separaten WordPress-Passworts anzumelden. Sie fügen es mit einem speziellen Social-Login-Plugin hinzu, das sich mit diesen Diensten verbindet.

Es reduziert die Hürden bei der Anmeldung, da Benutzer die Erstellung und das Merken eines weiteren Passworts überspringen. Sobald das Plugin eingerichtet ist, können Sie die Social-Login-Buttons auf Ihrer benutzerdefinierten Login-Seite neben dem Standardformular platzieren.

Passen Sie Ihre WordPress-Anmeldeseite an

Dieser Standard-Anmeldebildschirm muss Ihre Mitglieder nicht mehr begrüßen. Mit SeedProd können Sie Farben, Schriftarten, Logos und Layouts ändern, ohne Code schreiben zu müssen, und in wenigen Minuten eine gebrandete Anmeldeseite live schalten.

Starten Sie mit SeedProd und branden Sie Ihre Anmeldeseite neu.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.