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:[email protected]">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.

Mehr über unsere WordPress-Sicherheitsaudits.