WordPress Login-Seite anpassen: Der komplette Leitfaden (2026)

Der Standard-WordPress-Anmeldebildschirm (wp-login.php) ist ikonisch, schreit aber “Generischer Blog”. Wenn Sie eine Agentur sind, die eine Website für einen Kunden (z. B. Coca-Cola) erstellt, ist das Sehen des WordPress-Logos ein Branding-Fehler.

Im Jahr 2026 ist White-Labeling Standardpraxis. Dieser Leitfaden zeigt Ihnen, wie Sie das Anmeldeerlebnis mit functions.php vollständig anpassen und es wie eine maßgeschneiderte Anwendung aussehen lassen, während Sie gleichzeitig robuste Sicherheit implementieren.

1. Vollständige Logo-Anpassung

1.1 Ändern des Logos (Die Grundlagen)

Lassen Sie uns zuerst das WordPress-”W” loswerden und durch das Logo Ihres Kunden ersetzen.

function wppoland_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/kunden-logo.svg);
            height: 65px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_login_logo' );

Profi-Tipp: Der Standardlink führt zu WordPress.org. Ändern Sie ihn auf die Startseite Ihrer Website:

function wppoland_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wppoland_login_logo_url' );

function wppoland_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'wppoland_login_logo_url_title' );

1.2 Responsives Logo

function wppoland_responsive_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/kunden-logo.svg);
            height: 65px;
            width: 100%;
            max-width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding-bottom: 30px;
        }

        @media (max-width: 768px) {
            #login h1 a, .login h1 a {
                height: 50px;
                max-width: 280px;
            }
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_responsive_login_logo' );

2. Benutzerdefinierte Login-Formulare

2.1 Komplette CSS-Überholung (Der moderne Look)

Der graue Standardhintergrund (#f1f1f1) ist langweilig. Machen wir daraus ein Vollbild-Markenerlebnis. Erstellen Sie eine Datei login-style.css in Ihrem Theme und laden Sie sie nur auf der Anmeldeseite.

function wppoland_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'wppoland_login_stylesheet' );

Beispiel style-login.css:

body.login {
    background-color: #0d1117; /* Dark Mode */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.login form {
    background: #161b22;
    border: 1px solid #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 40px;
}

.login label {
    color: #c9d1d9;
    font-size: 14px;
    font-weight: 500;
}

.login input[type="text"],
.login input[type="password"] {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    padding: 12px 16px;
    font-size: 14px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
    outline: none;
}

.wp-core-ui .button-primary {
    background: #238636; /* GitHub Green */
    border-color: rgba(27,31,35,0.15);
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    transition: all 0.2s ease;
}

.wp-core-ui .button-primary:hover {
    background: #2ea043;
    border-color: rgba(27,31,35,0.15);
    transform: translateY(-1px);
}

.login #nav,
.login #backtoblog {
    text-align: center;
}

.login #nav a,
.login #backtoblog a {
    color: #8b949e;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #58a6ff;
}

2.2 Mehrspaltiges Layout

function wppoland_login_two_column() { ?>
    <style type="text/css">
        body.login {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
            margin: 0;
        }

        .login-left {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .login-left-content {
            color: white;
            text-align: center;
        }

        #login {
            justify-self: center;
            align-self: center;
        }
    </style>
    <div class="login-left">
        <div class="login-left-content">
            <h2>Willkommen zurück!</h2>
            <p>Melden Sie sich an, um auf Ihr Konto zuzugreifen.</p>
        </div>
    </div>
<?php }
add_action( 'login_header', 'wppoland_login_two_column' );

2.3 Benutzerdefinierte Inhalte unter dem Formular hinzufügen

function wppoland_login_footer_content() { ?>
    <div class="login-footer-content">
        <p>Brauchen Sie Hilfe? Kontaktieren Sie den Support unter <a href="mailto:support@beispiel.de">support@beispiel.de</a></p>
        <p>&copy; <?php echo date('Y'); ?> <?php echo get_bloginfo('name'); ?>. Alle Rechte vorbehalten.</p>
    </div>
    <style>
        .login-footer-content {
            text-align: center;
            margin-top: 30px;
            color: #8b949e;
            font-size: 12px;
        }
        .login-footer-content a {
            color: #58a6ff;
            text-decoration: none;
        }
    </style>
<?php }
add_action( 'login_footer', 'wppoland_login_footer_content' );

3. Zwei-Faktor-Authentifizierung (2FA) Integration

3.1 Vorbereitung für 2FA

Im Jahr 2026 sind Passwörter wohl veraltet. Während Sie 2FA nicht einfach von Grund auf in functions.php erstellen können, sollten Sie die 2FA-Felder stylen, wenn Sie ein Plugin verwenden.

Hinweis: Wir empfehlen keine Sicherheits-Plugins. 2FA kann über Hosting-Features oder minimale Lösungen umgesetzt werden. Wenn Sie dennoch 2FA-Felder stylen, nutzen Sie z. B. Two Factor (WordPress.org) oder Google Authenticator-kompatible Plugins – ohne schwere Security-Suites.

3.2 Styling der 2FA-Felder

function wppoland_2fa_styling() { ?>
    <style type="text/css">
        /* Styling für Two Factor Plugin */
        .login .two-factor-prompt {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .login .two-factor-prompt h3 {
            color: #c9d1d9;
            margin-top: 0;
        }

        .login .two-factor-prompt input[type="text"] {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            color: #c9d1d9;
            padding: 12px 16px;
            font-size: 16px;
            letter-spacing: 4px;
            text-align: center;
            width: 100%;
        }

        .login .two-factor-methods {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .login .two-factor-methods button {
            flex: 1;
            background: #21262d;
            border: 1px solid #30363d;
            color: #c9d1d9;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .login .two-factor-methods button:hover {
            background: #30363d;
        }

        /* Styling für Passkeys/WebAuthn */
        .login .passkey-button {
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .login .passkey-button:before {
            content: "🔐";
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_2fa_styling' );

3.3 Rollenbasierter 2FA-Zwang

function wppoland_require_2fa_for_admins( $user ) {
    if ( isset( $user->roles ) && in_array( 'administrator', $user->roles ) ) {
        // Prüfen, ob 2FA aktiviert ist
        if ( function_exists( 'two_factor_user_enabled' ) && ! two_factor_user_enabled( $user->ID ) ) {
            // Optional: Nachricht anzeigen oder Umleitung
            add_action( 'admin_notices', function() {
                echo '<div class="error"><p>2FA ist für Administratoren erforderlich!</p></div>';
            } );
        }
    }
    return $user;
}
add_filter( 'wp_login_errors', 'wppoland_require_2fa_for_admins', 10, 2 );

4. Login-Seite Sicherheitshärtung

4.1 Sicherheits-Härtung (Verschleierung)

Wenn Sie standardmäßig ein falsches Passwort eingeben, sagt WordPress: “Das Passwort, das Sie für den Benutzernamen admin eingegeben haben, ist falsch.” Das sagt einem Hacker: “Der Benutzername admin existiert! Jetzt einfach das Passwort knacken.”

Zwingen wir WordPress, vage zu sein.

function wppoland_login_errors() {
    return 'Etwas stimmt nicht! Überprüfen Sie Ihre Anmeldedaten.';
}
add_filter( 'login_errors', 'wppoland_login_errors' );

Jetzt ist die Fehlermeldung generisch und verrät nichts.

4.2 Begrenzung der Anmeldeversuche

function wppoland_limit_login_attempts() {
    $ip = $_SERVER['REMOTE_ADDR'];
    $transient_key = 'login_attempts_' . $ip;
    $attempts = get_transient( $transient_key );

    if ( $attempts === false ) {
        $attempts = 0;
    }

    if ( $attempts >= 5 ) {
        wp_die( 'Zu viele Anmeldeversuche. Bitte versuchen Sie es in 15 Minuten erneut.' );
    }

    // Versuche bei Fehlschlag erhöhen
    add_action( 'wp_login_failed', function() use ( $transient_key, $attempts ) {
        set_transient( $transient_key, $attempts + 1, 15 * MINUTE_IN_SECONDS );
    } );
}
add_action( 'login_init', 'wppoland_limit_login_attempts' );

4.3 Login-URL ändern (Verschleierung)

// Erfordert Server-Web-Konfiguration oder spezialisiertes Plugin
// Beispiel mit .htaccess oder nginx-Konfiguration

function wppoland_custom_login_url() {
    return site_url( 'zugang' ); // wp-login.php in /zugang ändern
}
// add_filter( 'login_url', 'wppoland_custom_login_url' );

4.4 CSRF-Schutz

function wppoland_add_login_nonce() {
    wp_nonce_field( 'wppoland_login_action', 'wppoland_login_nonce' );
}
add_action( 'login_form', 'wppoland_add_login_nonce' );

function wppoland_verify_login_nonce( $user, $password ) {
    if ( ! isset( $_POST['wppoland_login_nonce'] ) || ! wp_verify_nonce( $_POST['wppoland_login_nonce'], 'wppoland_login_action' ) ) {
        return new WP_Error( 'invalid_nonce', 'Ungültige Anmeldeanfrage.' );
    }
    return $user;
}
add_filter( 'authenticate', 'wppoland_verify_login_nonce', 30, 2 );

4.5 Sicherheits-Header

function wppoland_security_headers() {
    header( 'X-Frame-Options: DENY' );
    header( 'X-Content-Type-Options: nosniff' );
    header( 'X-XSS-Protection: 1; mode=block' );
    header( 'Referrer-Policy: strict-origin-when-cross-origin' );
}
add_action( 'login_init', 'wppoland_security_headers' );

5. Entfernen des “Shake”-Effekts

Wenn die Anmeldung fehlschlägt, wackelt das Formular. Manche Kunden finden das nervig oder unprofessionell. Sie können das JS entfernen, das dies auslöst.

function wppoland_remove_login_shake() {
    remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'wppoland_remove_login_shake' );

6. Vergleich von Login-Anpassungs-Plugins

6.1 Integration mit LoginPress

// Zusätzliche Anpassungen, wenn LoginPress aktiv ist
function wppoland_loginpress_customizations() {
    if ( function_exists( 'loginpress' ) ) {
        // Zusätzliches CSS hinzufügen
        wp_add_inline_style( 'loginpress-login', '
            .loginpress-container {
                backdrop-filter: blur(10px);
            }
        ' );
    }
}
add_action( 'login_enqueue_scripts', 'wppoland_loginpress_customizations', 20 );

7. Branding-Richtlinien für Agenturen

7.1 Markenkonsistenz

function wppoland_agency_branding() {
    $primary_color = '#0073aa'; // Primärfarbe des Kunden
    $secondary_color = '#005177'; // Sekundärfarbe
    ?>
    <style type="text/css">
        :root {
            --brand-primary: <?php echo $primary_color; ?>;
            --brand-secondary: <?php echo $secondary_color; ?>;
        }

        body.login {
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        }

        .wp-core-ui .button-primary {
            border-color: var(--brand-primary);
        }

        .wp-core-ui .button-primary:hover {
            background: var(--brand-secondary);
            border-color: var(--brand-secondary);
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_agency_branding' );

7.2 Benutzerdefinierte Willkommensnachricht

function wppoland_welcome_message( $message ) {
    if ( empty( $message ) ) {
        return '<p class="message">Willkommen! Melden Sie sich an, um auf den Admin-Bereich zuzugreifen.</p>';
    }
    return $message;
}
add_filter( 'login_message', 'wppoland_welcome_message' );

7.3 Favicon und Metadaten

function wppoland_login_favicon() {
    echo '<link rel="icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico">';
    echo '<meta name="robots" content="noindex, nofollow">';
}
add_action( 'login_head', 'wppoland_login_favicon' );

8. Fehlerbehebung

8.1 CSS wird nicht angewendet

• Dateipfad der CSS-Datei überprüfen
• Browser-Cache leeren
• Priorität der Hooks überprüfen

8.2 Logo wird nicht angezeigt

• Dateiberechtigungen überprüfen
• Bildformat bestätigen (SVG erfordert Server-Unterstützung)
• Pfad mit get_stylesheet_directory_uri() überprüfen

8.3 Umleitungsschleifen

• Alle Login-Plugins deaktivieren
• 2FA-Einstellungen überprüfen
• Hooks login_redirect überprüfen

8.4 Konflikte mit Sicherheits-Plugins

• Ein Plugin nach dem anderen testen
• Ladereihenfolge der Hooks überprüfen
• Plugin-Dokumentation konsultieren

9. FAQ

F: Kann ich einen Page Builder verwenden, um die Login-Seite zu erstellen? A: Ja, Plugins wie Theme My Login ermöglichen die Erstellung von Frontend-Login-Seiten mit Page Buildern.

F: Ist es sicher, die Login-URL zu ändern?

F: Wie füge ich CAPTCHA zum Login hinzu?

F: Kann ich mehrere benutzerdefinierte Login-Seiten haben?

F: Ist 2FA für alle Benutzer obligatorisch?

F: Wie teste ich Anpassungen, ohne Benutzer zu beeinträchtigen?

F: Bleiben Anpassungen nach WordPress-Updates erhalten?

Zusammenfassung

Eine benutzerdefinierte Anmeldeseite ist das “i-Tüpfelchen” eines professionellen WordPress-Projekts.

Wichtige Punkte:

• Branding: Logo + Konsistenter Link
• Styling: Volle CSS-Kontrolle
• Sicherheit: Generische Fehlermeldungen, 2FA, Versuchsbegrenzung
• Erfahrung: Nervige Animationen entfernen, nützliche Inhalte hinzufügen

Lassen Sie Ihren Kunden nicht die Standard-WordPress-Oberfläche sehen. Es bricht die Immersion einer maßgeschneiderten Lösung.

Investieren Sie Zeit in die Anpassung des Logins, um einen professionellen und sicheren ersten Eindruck zu hinterlassen.