Erstellen Sie eine benutzerdefinierte WordPress-Anmeldeseite ohne Plugin

Veröffentlicht: 2022-09-01

Haben Sie sich jemals mit der WordPress-Standard-Anmeldeseite gelangweilt?

Haben Sie sich jemals gefragt, ob es eine Möglichkeit gibt, die Anmeldeseite mit dem Design Ihrer Website in Einklang zu bringen?

Wenn ja, sind Sie bei uns genau richtig. In diesem Artikel führen wir Sie durch verschiedene Methoden, um Ihre Anmeldeseite ohne Plugins anzupassen.

Was haben wir heute aufgenommen?

  • WordPress-Standard-Anmeldeseite
  • Warum sollten Sie eine benutzerdefinierte Anmeldeseite erstellen?
  • Passen Sie die WordPress-Standard-Anmeldeseite an
    • Passen Sie das Logo der Anmeldeseite an
    • Deaktivieren des Sprachumschalters für die WordPress-Anmeldeseite
  • Erstellen Sie eine neue benutzerdefinierte Anmeldeseite

WordPress-Standard-Anmeldeseite

Standardmäßig können Sie auf die WordPress-Anmeldeseite zugreifen, indem Sie /login/, /admin/ oder wp-login.php am Ende Ihrer Website-URL hinzufügen.

Sie erhalten jedes Mal diesen Anmeldebildschirm, nicht wahr?

PPWP Pro: WordPress-Standard-Anmeldeseite

Wie Sie sehen können, enthält die WordPress-Anmeldeseite die folgenden Elemente:

  1. Standardhintergrund
  2. Das WordPress-Logo
  3. Eingabefelder (Benutzername und Passwort)
  4. Das Kontrollkästchen An mich erinnern
  5. Die Schaltfläche Senden
  6. Der Link „Passwort vergessen“.
  7. Zurück zum Verlinken

Was ist, wenn Sie diese generische Seite durch Ihre benutzerdefinierte Seite ersetzen möchten, sagen wir zu Branding-Zwecken?

Lesen Sie einfach bis zum Ende unseres Blogs. Es wird einige Überraschungen für Sie geben.

Warum sollten Sie eine benutzerdefinierte WordPress-Anmeldeseite erstellen?

In erster Linie bringen benutzerdefinierte Anmeldeseiten eine viel bessere Benutzererfahrung. Wenn Sie ein kleines Unternehmen führen, in dem sich nur wenige Benutzer auf Ihrer Website anmelden müssen, können Sie unbedingt die Standard-Anmeldeseite von WordPress verwenden.

Stellen Sie sich jedoch vor, dass Ihre Website ein Online-Shop ist, und Kunden sich über ein langweiliges Gateway ohne Branding auf Ihrer Website anmelden zu lassen, ist keine gute Idee.

Die beste Vorgehensweise besteht darin, die Anmeldeseite mit dem Stil Ihrer Website in Einklang zu bringen.

Ein weiterer Vorteil einer benutzerdefinierten WordPress-Anmeldeseite ist die Verbesserung der Sicherheit Ihrer Website. Durch das Ändern der standardmäßigen WordPress-Anmelde-URL können unerwünschte Benutzer nicht einfach auf Ihre Administrator-Anmeldeseite gelangen. Dies hilft, unerwünschte Angriffe auf Ihre Website zu vermeiden.

Kommen wir nun zu den nächsten Abschnitten, in denen wir Sie durch die detaillierten Schritte zum Erstellen Ihrer eigenen Anmeldeseite führen.

Passen Sie die WordPress-Standard-Anmeldeseite an

Wussten Sie, dass Sie Logos und Links auf der WordPress-Standard-Anmeldeseite durch Ihre eigenen ersetzen können?

Passen Sie das Logo der Anmeldeseite an

Um das WordPress-Logo zu ersetzen, fügen Sie einfach das folgende Code-Snippet zur Datei functions.php Ihres (untergeordneten) Themes hinzu.

 Funktion ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
Hintergrundbild: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        Höhe: 100px ;
        Breite: 300px ;
        Hintergrundgröße: 300px 100px ;
        Hintergrundwiederholung: keine Wiederholung ;
        Polsterung unten: 10px ;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo' );

Mit dieser Aktion können Sie nur das Logo ersetzen. Wenn Sie auf Ihr Logo klicken, werden Sie immer noch auf die WordPress-Seite weitergeleitet.

Wie können Sie Benutzer auf Ihre Website umleiten?

Mit dem folgenden Codeschnipsel ein Kinderspiel.

 Funktion ppwp_custom_login_url() {
    Rückkehr home_url();
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url' );
Funktion ppwp_login_logo_url_redirect() {
    ' https://passwordprotectwp.com/ ' zurückgeben;
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect' );

Vergessen Sie nicht, die Site-URL durch den tatsächlichen Namen Ihrer Site zu ersetzen. Das benutzerdefinierte Logo auf Ihrem Anmeldebildschirm verweist jetzt auf die Homepage Ihrer Website.

Deaktivieren des Sprachumschalters für die WordPress-Anmeldeseite

WordPress 5.9 enthält eine Funktion, mit der Benutzer Sprachen auswählen können, wenn sie sich bei Ihrer Website anmelden.

Es ist praktisch, wenn Sie eine mehrsprachige Website betreiben. Wenn Ihre Website in einer einzigen Sprache verfügbar ist, sollten Sie diese Funktion möglicherweise deaktivieren, um Ihr Anmeldeformular zu vereinfachen.

Wie können Sie das tun?

Fügen Sie einfach das folgende Code-Snippet zur Datei functions.php Ihres (untergeordneten) Themes oder zum Code-Snippets-Plugin hinzu.

 add_filter( 'login_display_language_dropdown', '__return_false' );

Erstellen Sie eine neue benutzerdefinierte WordPress-Anmeldeseite

Was ist, wenn Sie mehr tun möchten, als nur Logos und Links zu ändern?

Ermöglicht WordPress es Ihnen, Ihre eigene Anmeldeseite zu erstellen und die WordPress-Standardseite durch Ihre zu ersetzen?

Ja! Das können Sie absolut!

Folgen Sie einfach unseren Schritten unten. Bitte beachten Sie, dass diese Anleitung ein wenig Programmierkenntnisse erfordert. Wenn Sie mit Codes nicht vertraut sind, verwenden Sie stattdessen Plugins.

Denken Sie daran, Ihre Website zu sichern, bevor Sie beginnen.

Schritt 1: Erstellen Sie eine neue Vorlagendatei

Gehen Sie dazu zu Ihrem Aussehen > Designdatei-Editor.

Fügen Sie im Abschnitt Vorlagenteile eine neue .php-Datei hinzu und benennen Sie sie nach Ihren Wünschen, z. B. custom-login-page.php.

Fügen Sie als erstes diese Zeile zu Ihrer benutzerdefinierten Vorlagendatei hinzu:

 <?php /* Vorlagenname: Benutzerdefinierte Anmeldeseiten */ ?>

Diese Aktion macht Ihre erstellte PHP-Datei zu einer Seitenvorlage. Dementsprechend sehen Sie den Vorlagennamen, wenn Sie Seiten im Backend bearbeiten.

Schritt 2: Passen Sie Ihre erstellte Vorlagendatei an

Der nächste Schritt besteht darin, PHP-Codes hinzuzufügen, um ein vollständiges Anmeldeformular zu erstellen.

Fügen Sie ein Anmeldeformular hinzu

 <?php
/**
* Vorlagenname: Benutzerdefinierte Anmeldeseite
*/
get_header();
if ( ! is_user_logged_in() ) {
    $args = Array
        'redirect' => admin_url(), // Weiterleitung zum Admin-Dashboard.
        'form_id' => 'custom_loginform',
        'label_username' => __( ' Benutzername: ' ),
        'label_password' => __( ' Passwort: ' ),
        'label_remember' => __( ' Erinnere dich an mich ' ),
        'label_log_in' => __( ' Mich anmelden ' ),
         'erinnern' => wahr
    );
wp_login_form( $args );
}
get_footer();

Leite wp-login.php auf die benutzerdefinierte Anmeldeseite um

Sie haben erfolgreich eine benutzerdefinierte Anmeldeseite erstellt. Benutzer können jedoch immer noch direkt zur WordPress-Standard-Anmeldeseite gelangen, indem sie wp-admin oder wp-login.php nach den URLs Ihrer Website eingeben.

Um dies zu vermeiden, müssen Sie Benutzer von WordPress-Standard-Anmelde-URLs zu Ihren benutzerdefinierten umleiten.

Fügen Sie dazu die folgenden benutzerdefinierten Codes zum Plugin functions.php oder Code Snippets Ihres (untergeordneten) Designs hinzu.

 Funktion forward_login_page() {
    $login_url = home_url( '/login' );
    $url = Basisname($_SERVER['REQUEST_URI']); // angeforderte URL erhalten
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // wenn Benutzer eine Anfrage an wp-admin senden
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect( $login_url );
        Ausfahrt;
    }
}
add_action('init','redirect_login_page');

Behandlung von Anmeldefehlern

Sobald Sie mit dem Erstellen einer benutzerdefinierten Anmeldeseite fertig sind, gelangen Benutzer, die die richtigen Anmeldedaten eingeben, zum Dashboard. Fehlgeschlagene Login-Anforderungen werden an die Standard-WordPress-Anfrage umgeleitet.

Um mit fehlgeschlagenen Anmeldeversuchen fertig zu werden, fügen Sie den folgenden Code zur Datei functions.php Ihres (untergeordneten) Designs hinzu.

 Funktion error_handler() {
    $login_page = home_url( '/login' );
    globale $Fehler;
    $fehler_codes = $fehler->get_error_codes(); // eingebaute WordPress-Fehlercodes erhalten
    $_SESSION["Fehlercodes"] = $Fehlercodes;
    wp_redirect( $login_page); // Benutzer auf derselben Seite halten
    Ausfahrt;
}
add_filter( 'login_errors', 'error_handler');

Fügen Sie als Nächstes die folgenden Codes zur custom_login_page.php hinzu.

 $fehler_codes = isset( $_SESSION["fehler_codes"] )? $_SESSION["Fehlercodes"] : 0;
    if( $err_codes !== 0 ){
        echo display_error_message( $err_codes);
}
Funktion display_error_message( $err_code ){
    // Ungültiger Benutzername.
    if ( in_array( 'ungültiger_benutzername', $err_code ) ) {
        $error = '<strong>FEHLER</strong>: Ungültiger Benutzername.';
    }
    // Falsches Passwort.
    if ( in_array( 'falsches_passwort', $fehler_code ) ) {
        $error = '<strong>FEHLER</strong>: Das eingegebene Passwort ist falsch.';
    }
    // Leerer Benutzername.
    if ( in_array( 'leerer_Benutzername', $err_code ) ) {
        $error = '<strong>FEHLER</strong>: Das Feld für den Benutzernamen ist leer.';
    }
    // Leeres Passwort.
    if ( in_array( 'leeres_passwort', $err_code ) ) {
        $error = '<strong>FEHLER</strong>: Das Passwortfeld ist leer.';
    }
    // Leerer Benutzername und leeres Passwort.
    if( in_array( 'leerer_Benutzername', $err_code ) && in_array( 'leeres_Passwort', $err_code )){
        $error = '<strong>FEHLER</strong>: Benutzername und Passwort sind leer.';
    }
$Fehler zurückgeben;
}

Schritt 3: Erstellen Sie eine neue Seite und weisen Sie die erstellte Vorlage einer benutzerdefinierten Seite zu

Navigieren Sie nun zum Abschnitt Seiten unter Ihrem Admin-Dashboard und erstellen Sie eine neue Seite.

Wählen Sie im Drop-down-Menü Vorlage unter dem Abschnitt Seitenattribute Ihre erstellte Vorlage aus.

PPWP Pro: Erstellen Sie benutzerdefinierte Anmeldeseiten

Speichern Sie die Seite.

Jetzt haben Sie Ihre eigene Login-Seite.

Haben Sie Ihre benutzerdefinierte Anmeldeseite erfolgreich erstellt?

Wir haben Sie durch die detaillierten Schritte zum Anpassen Ihrer Administrator-Anmeldeseite geführt.

Sie können das Logo und die zugehörige URL im WordPress-Standard-Anmeldeformular ändern.

Alternativ können Sie Ihre eigene benutzerdefinierte WordPress-Anmeldeseite erstellen, indem Sie eine neue Seitenvorlage erstellen. Während die 2. Lösung zunächst Programmierkenntnisse zu erfordern scheint, ist es mit unserer übersichtlichen Schritt-für-Schritt-Anleitung ziemlich einfach. Mach dir also überhaupt keine Sorgen.

Haben Sie es schon geschafft, Ihre benutzerdefinierte Anmeldeseite zu erstellen?

Benötigen Sie weitere Informationen?

Lass es uns im Kommentarbereich unten wissen!