WordPress-Anmeldeseite anpassen: Der ultimative Leitfaden

Sind Sie es leid, immer wieder die gleiche WordPress-Anmeldeseite zu sehen? Wenn Sie eine reguläre Website haben, sehen Ihre Besucher die Anmeldeseite nicht. Wenn Sie jedoch eine Mitgliederseite oder einen Online-Shop haben, wird die Standard-WordPress-Anmeldeseite angezeigt, was eine schlechte Benutzererfahrung darstellt. Also habe ich beschlossen, eine einfache Anleitung zu schreiben, wie man die WordPress-Anmeldeseite anpassen kann. Dies ist eine vollständige Anleitung, der Sie leicht folgen können.

Was Sie heute lernen werden:

Es gibt Plugins, mit denen Sie das Layout/Design Ihrer Website für die Anmeldeseite anpassen können. Hier, in diesem Artikel, werde ich über zwei von ihnen sprechen und Ihnen zeigen, wie Sie die Anmeldeseite mit diesen beiden anpassen können. Außerdem zeige ich Ihnen schließlich, wie Sie das WordPress-Logo der Anmeldeseite manuell in Ihr eigenes Logo ändern können. Ohne Verwendung von Plugins von Drittanbietern.

Ok, lassen Sie uns eintauchen.

WordPress-Anmeldeseite mit LoginPress anpassen

LoginPress ist ein kostenloses Plugin, das Sie aus dem WordPress-Plugin-Repository herunterladen können. Es gibt eine Pro-Version, aber die kostenlose Version ist mehr als genug für das, was wir heute tun werden.

Gehen Sie rüber zum Dashboard > Plugins > Neu hinzufügen und suchen Sie nach LoginPresse . Sobald Sie es gefunden haben, klicken Sie auf Jetzt installieren und aktivieren Sie es.

Bei der Aktivierung fügt das Plugin einen neuen Menüpunkt " LoginPresse " zum Dashboard hinzu. Klicken Sie einfach auf das Symbol LoginPress > Einstellungen , um die Grundeinstellungen des Plugins festzulegen.

LoginPress Grundeinstellungen

Auf der Einstellungsseite können Sie einige grundlegende Dinge festlegen, wie z. B. die Option "Ein-/Ausblenden, um mich zu speichern", die Ablaufzeit der Sitzung, das benutzerdefinierte Passwortfeld im Registrierungsfeld usw. (Normalerweise werden auf der Registrierungsseite nur der Benutzername und das E-Mail-Feld angezeigt).

Branding Ihrer WordPress-Anmeldeseite

Sobald Sie mit den Grundeinstellungen fertig sind, gehen wir zur Gestaltung der Anmeldeseite über. Klicken Sie auf den Customizer-Link und es öffnet sich der WordPress Customizer. Ja, die Styling-Einstellung für LoginPress befindet sich im WP Customizer.

Wie Sie oben sehen können, bietet das Plugin viele Optionen, um unsere Anmeldeseite anzupassen.

• Logo : Hier können Sie ein benutzerdefiniertes Logo hinzufügen und die Größe, den Link usw. ändern.
• Hintergrund: Hier können Sie das Hintergrundbild und die zugehörigen Einstellungen ändern. Wenn Sie möchten, können Sie auch ein Video als Hintergrund verwenden.
• Login-Formular anpassen: In diesem Abschnitt können Sie mit dem Erscheinungsbild des Anmeldeformulars spielen.
• Vergessen Formular anpassen: Hier können Sie eine Hintergrundfarbe oder ein Bild für das Formular zum Vergessen des Passworts hinzufügen.
• Recaptcha: Du kannst hier Recaptcha hinzufügen, benötigst aber die kostenpflichtige Version des Plugins.
• Schönheit der Knöpfe: Ändern Sie hier das Styling der Login-Schaltfläche.

Es gibt noch ein paar weitere Einstellungen, mit denen Sie spielen können. Am Ende haben Sie eine Marken-Anmeldeseite, die besser für die Benutzererfahrung ist. So werden Ihre Kunden oder Leser diese einfache, standardmäßige WordPress-Anmeldeseite nie wieder sehen.

So können Sie die Anmeldeseite mit LoginPress anpassen. Schauen wir uns das andere Plugin in der Liste an.

So passen Sie die WordPress-Anmeldeseite mit dem Theme My Login-Plugin an

Theme Mein Login ist ein weiteres großartiges Plugin, das Sie im WordPress-Plugin-Repository finden können. Gehen Sie einfach zu Plugins > Neu hinzufügen und suchen Sie nach Theme Mein Login .

Installieren und aktivieren Sie es. Sobald Sie das Plugin aktiviert haben, sehen Sie den neu hinzugefügten Menüpunkt Theme Mein Login im Dashboard.

Dieses Plugin unterscheidet sich von dem, was wir zuvor besprochen haben. Anstatt den Standard-Anmeldebildschirm von WordPress zu gestalten Theme Mein Login Das Plugin erstellt benutzerdefinierte URLs für Ihre Anmeldeseite, Abmeldeseite, Registrierungsseite, Seite "Passwort vergessen" und Seite zum Zurücksetzen des Passworts. Wie Sie im folgenden Screenshot sehen können, ist www.yourtheme.com/wp-admin nicht mehr Ihre Anmeldeseite. Dieses Plugin ändert es in www.yourtheme.com/login. Sie können dies in etwas Einzigartiges ändern, das Ihrer WordPress-Site eine weitere Sicherheitsebene verleiht.

Zusätzlich Theme Mein Login ermöglicht es Ihnen, benutzerdefinierte Seiten zu erstellen und die entsprechenden Formulare zu den erstellten Seiten hinzuzufügen. Auf diese Weise können Sie eine einzigartige, benutzerdefinierte Anmeldung haben und Seiten für Ihre Website registrieren. Lassen Sie uns eintauchen und sehen, wie das geht.

Gehen Sie rüber zu Seiten> Neu hinzufügen . Erstellen Sie eine neue Seite und veröffentlichen Sie sie. Fügen Sie dann eine neue hinzu Shortcode-Block auf die Seite und fügen Sie den folgenden Shortcode ein.

[theme-my-login]

Kopieren Sie dann die URL-Slug vom Permanenter Link Meta-Box auf der rechten Seite. Wir müssen diesen Slug einfügen Theme Mein Login Einstellungsseite, wie ich es unten getan habe (siehe Screenshot).

Jetzt ist die neu erstellte Seite also Ihre Anmeldeseite. Da es sich nur um eine normale WordPress-Seite handelt, können Sie sie so gestalten, wie Sie es möchten. Keine Einschränkung. Gehen Sie voran und gestalten Sie die Seite so, dass sie zu Ihrem Unternehmensbranding passt.

Sie können dasselbe für andere Seiten wie Registrieren, Passwort vergessen, Passwort zurücksetzen usw. tun. Nachfolgend finden Sie die zu verwendenden Shortcodes.

• Anmeldeformular: [theme-my-login action="registrieren"]
• Seite "Passwort vergessen": [theme-my-login action="verlorenes Passwort"]
• Seite zum Zurücksetzen des Passworts: [theme-my-login action="resetpass"]

Vergessen Sie nicht, die Slugs in der Theme My Plugin Einstellungen , nachdem Sie Ihre neuen Anmeldeseiten erstellt haben.

So kannst du die WordPress-Anmeldeseite ganz einfach anpassen. Verwendung einiger Plugins von Drittanbietern. Aber es gibt einen anderen Weg, der für eine nicht-technische Person etwas schwieriger sein wird. Wir können das Logo der Anmeldeseite und die URL ändern, indem wir einfach etwas PHP zur functions.php Datei hinzufügen. Mal sehen, wie das geht.

WordPress-Login-Logo und URL manuell ändern (für fortgeschrittene Benutzer)

Wenn du wie ich die Anzahl der installierten Plugins so gering wie möglich halten möchtest, dann ist dies eine gute Option für dich. Wir können das Login-Logo und die URL manuell ändern, indem wir einige PHP-Snippets zur functions.php-Datei des Themes hinzufügen und vermeiden, dass unserer Website ein weiteres Plugin hinzugefügt wird.

Schritt eins: Fügen Sie das Logo zur Medienbibliothek hinzu

Laden Sie Ihre Logo-Datei in die Medienbibliothek hoch und kopieren Sie die URL der Datei.

Schritt zwei: Ersetzen Sie das Logo durch PHP

Gehe zu Aussehen > Theme-Editors und wählen Sie die Schaltfläche functions.php Datei Ihres Themes.

Wichtig: Es ist immer eine gute Praxis, das Child-Theme zu verwenden, wenn Sie eine WordPress-Website erstellen.

Scrollen Sie zum Ende der functions.php Datei und fügen Sie den folgenden PHP-Code ein.

Funktion my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            Hintergrundbild: url(http:yourwebsite.com/my_logo.png);
		Höhe:65px;
		Breite:320px;
		Hintergrundgröße: 320px 65px;
		background-repeat: keine Wiederholung;
        	padding-unten: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' ); 

Aktualisieren Sie nun die URL des Hintergrundbildes an die Logo-URL, die Sie im ersten Schritt hochgeladen haben. Spielen Sie mit den CSS-Einstellungen für Breite und Höhe, um sie an die Breite und Höhe Ihres Logos anzupassen.

Dadurch wird das Standard-WordPress-Logo aktualisiert, das Sie auf der wp-admin-Seite sehen können. Aber wie Sie bereits wissen, ist dieses Logo mit dem wordpress.org Website. Mit einem weiteren einfachen PHP-Snippet können Sie diese URL so ändern, dass sie auf die Startseite Ihrer Website verweist.

Funktion my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

Funktion my_login_logo_url_title() {
    Geben Sie "Ihren Website-Namen und Ihre Informationen" zurück.
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' ); 

Ändern ' Name und Informationen zu Ihrer Website ' an den Namen Ihrer Website und aktualisieren Sie die functions.php Datei. Gehen Sie nun zur wp-admin-Anmeldeseite und Sie werden sehen, dass das Logo aktualisiert wurde. Versuchen Sie, auf das Logo zu klicken. Es sollte Sie auf die Startseite umleiten.

Das wars. So können Sie die WordPress-Anmeldeseite an etwas Einzigartiges, Persönlicheres anpassen.