So erstellen Sie eine maßgeschneiderte WordPress-Anmeldeseite

Ah, ja, die WordPress-Anmeldeseite – eine der bekanntesten Seiten in WordPress – nicht wahr?

Aber gleichzeitig ist es nicht immer die beste Idee, diese Seite in ihrer Standardform auf Ihrer WordPress-Site zu haben.

Warum? - du fragst.

Hier ist die Antwort:

Warum benötigen Sie eine maßgeschneiderte WordPress-Anmeldeseite?

Das Problem ist ein dreifaches:

1. Verkehr . Je mehr Traffic Sie erhalten, desto mehr „schlechten“ Traffic erhalten Sie als direkte Folge. Mit schlechtem Datenverkehr meine ich bösartige Skripte und Bots, Spammer und alle Arten von Benutzern, die mit schlechten Absichten auf Ihre Website kommen. Das Anpassen Ihrer WordPress-Anmeldeseite kann Ihre Website sicherer machen.
2. Website für mehrere Benutzer . Wenn Ihre Website von mehreren Personen verwaltet wird – seien es Administratoren oder Autoren/Blogger – erfolgt eine mehrfache Anmeldung. Die Bereitstellung eines benutzerdefinierten Anmeldeformulars macht den Prozess insgesamt angenehmer.
3. Branding . Die Standard-Anmeldeseite ist alles gut, aber da ist das große WordPress-Logo genau in der Mitte. Dies zu ändern und die Anmeldeseite mehr wie Ihre eigene aussehen zu lassen, kann ein netter Branding-Touch sein. Dies gilt insbesondere, wenn Sie eine Website für einen Kunden erstellen. Ihren Kunden ein konsistentes Erlebnis zu bieten, wird sie sicherlich zu schätzen wissen.

Wenn einer der oben genannten Punkte für Sie überzeugend klingt, sollten Sie erwägen, Ihre Anmeldeseite auf eine benutzerdefinierte Seite umzustellen. Hier ist wie:

So erstellen Sie eine maßgeschneiderte WordPress-Anmeldeseite

Es gibt zwei Hauptwege, wie Sie vorgehen können:

• der manuelle Weg,
• der Plugin- Weg.

Beide Wege haben ihre Vor- und Nachteile. Der manuelle Weg gibt Ihnen mehr Kontrolle über das Aussehen der letzten Seite. Der Plugin- Weg ist einfacher zu befolgen, besonders wenn Sie keine Programmierkenntnisse haben, aber Sie müssen sich damit zufrieden geben, was das Plugin Ihnen ermöglicht.

Lassen Sie uns beide abdecken.

Manuelles Erstellen einer benutzerdefinierten Anmeldeseite

Obwohl Sie dazu einige der Quelldateien Ihres Designs optimieren müssen, ist es nicht so schwierig. Ich werde hier Twenty Fifteen als mein Beispiel verwenden.

Der Spaß beginnt mit dem Erstellen einer Kopie der Datei page.php und der Datei content-page.php .

Benennen Sie diese neuen Kopien in page-login.php bzw. content-login.php um.

Öffnen page-login.php und ändern Sie nur eine Zeile. Davon:

 get_template_part( 'content', 'page' );

Dazu:

 get_template_part( 'content', 'login' );

Bearbeiten wir nun content-login.php und fügen eine Zeile direkt unter <?php the_content(); ?> <?php the_content(); ?> . So:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Notiz. In diesem Stadium können Sie eine Reihe anderer Anpassungen vornehmen, wenn Sie möchten (wie das Anpassen des Designs/Layouts, das Entfernen der Seitenleiste), aber das ist alles optional. Wenn Sie mit Ihrer neuen WordPress-Anmeldeseite einen extrem minimalen Ansatz verfolgen, reicht es aus, nur diese beiden Zeilen zu ändern.

Jetzt erstellen wir eine neue Seite im wp-admin und nennen sie einfach „login“. Stellen Sie sicher, dass der Permalink auch „Login“ lautet:

Dadurch wird sichergestellt, dass WordPress automatisch Ihre page-login.php Vorlagendatei verwendet.

Wenn Sie Ihre neue Seite gerade besuchen, sollte sie ungefähr so ​​​​aussehen:

In diesem Stadium müssen Sie nur noch Umleitungen festlegen, um die Standard-Anmeldeseite von WordPress endgültig zu eliminieren. Platzieren Sie dazu diese Zeilen am Ende Ihrer Datei functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Code-Snippets erstellt basierend auf: [1][2].)

Im Moment ist die einzige zugängliche Anmeldeseite die von Ihnen neu erstellte. Das Tolle hier ist, dass Sie es frei über den Standard-Seiteneditor von WordPress bearbeiten können (genau wie Sie jede andere Seite bearbeiten würden).

Erstellen einer benutzerdefinierten WordPress-Anmeldeseite mit einem Plugin

Diese Methode funktioniert etwas anders, denn anstatt eine komplett neue Anmeldeseite zu erstellen, ändern wir tatsächlich die Standardseite.

Das Plugin, das wir verwenden werden, ist zunächst: Custom Login Page Customizer.

Gehen Sie nach der Installation und Aktivierung einfach zu Appearance > Login Customizer , wo Sie das Customizer-Panel starten können.

Die Optionen dieses Plugins sind recht nett und ermöglichen es Ihnen, Dinge anzupassen wie:

• Legen Sie ein Logo fest, das anstelle des standardmäßigen WordPress-Logos angezeigt wird.
• Legen Sie einen Hintergrund für die gesamte Anmeldeseite fest.
• Legen Sie einen Hintergrund für das Formular selbst fest.
• Passen Sie das Styling des Formulars und jedes kleine Detail darüber an (Schriftarten, Größen, Farben, Felder).
• Installieren Sie ein Sicherheits-Add-On, um ein zusätzliches Captcha-Feld im Formular zu erhalten (ideal, um Spam-Logins / Bots zu verhindern).

Zum Beispiel nur ein paar Minuten Arbeit mit dem Plugin und ich habe dieses Ergebnis erhalten:

Eine weitere Plugin-Option

Ein weiteres benutzerdefiniertes Login-Seiten-Plugin, das einen Blick wert ist, ist: Login Designer. Dieses Plugin soll das Anpassen der WordPress-Anmeldeseite super einfach machen und Ihnen dennoch Flexibilität im Design geben.

Eine Möglichkeit, Benutzerfreundlichkeit zu erreichen, besteht darin, den Anpassungsprozess vertraut zu machen. Alle Optionen und Tools sind direkt in den WordPress Customizer integriert. Wenn Sie es also gewohnt sind, den Customizer zum Ändern von Themenoptionen zu verwenden, werden Sie sich wie zu Hause fühlen.

Sehen Sie sich dieses Video an, um einen Überblick über die Funktionsweise des Plugins zu erhalten.

Manuell oder über ein Plugin ?

Was ist Ihre Methode der Wahl? Bevorzugen Sie es, Dinge manuell zu programmieren oder alles von einem Plugin erledigen zu lassen? Sie können dies gerne teilen.