So ändern Sie das WordPress-Login-Logo: Plugin-, Code- und CSS-Methoden

Die WordPress-Anmeldeseite zeigt standardmäßig das WordPress-Logo an — ein generisches Branding-Element, das auf einer professionellen oder kundenorientierten Website nichts zu suchen hat. Es durch Ihr eigenes Logo zu ersetzen dauert weniger als fünf Minuten und erfordert keine tiefgreifenden technischen Kenntnisse, dennoch ist die Wirkung auf die Markenkonsistenz sofort spürbar. Dieser Leitfaden behandelt drei produktionsreife Methoden: einen GUI-basierten Plugin-Ansatz, direkte functions.php-Injektion und ein eigenständiges benutzerdefiniertes CSS-Plugin — jeweils mit dem genauen Code, den Dateipfaden und den Sonderfällen, die Sie benötigen, um es beim ersten Mal korrekt umzusetzen.

Warum das Standard-Anmeldelogo wichtiger ist, als Sie denken

Jedes Mal, wenn ein Teammitglied, ein Kunde oder ein Administrator zu /wp-login.php navigiert, sieht er ein WordPress-Logo. Bei einem White-Label-Agentur-Build, einer SaaS-Plattform oder einer Multi-Tenant-WordPress-Installation untergräbt dieses Standard-Branding aktiv das professionelle Image, das Sie überall sonst auf der Website aufgebaut haben.

Über die Ästhetik hinaus erfüllt ein benutzerdefiniertes Anmeldelogo eine subtile, aber reale Sicherheitsfunktion: Es signalisiert Ihren Benutzern, dass sie sich in einer legitimen, kontrollierten Umgebung befinden — und nicht auf einer Phishing-Kopie des Standard-WordPress-Anmeldebildschirms. Wenn Sie WordPress in einer VPS Hosting-Umgebung mit Root-Zugriff hosten, haben Sie die vollständige Kontrolle über jede Ebene dieser Anpassung, von Dateiberechtigungen bis zur Theme-Bereitstellung, ohne Einschränkungen durch gemeinsam genutzte Umgebungen.

Vergleich der drei Anpassungsmethoden

Der wesentliche architektonische Unterschied: Methoden, die auf der functions.php eines übergeordneten Themes basieren, werden bei jedem Theme-Update überschrieben. Verwenden Sie für jede direkte Dateiänderung immer ein Child-Theme.

Methode 1: Verwendung eines Plugins

Dies ist der sicherste Weg für Nicht-Entwickler und der schnellste Weg für alle, die in weniger als drei Minuten ein funktionierendes Ergebnis benötigen.

Schritt 1: LoginPress installieren und aktivieren

1. Melden Sie sich in Ihrem WordPress-Dashboard an.
2. Navigieren Sie zu Plugins > Neu hinzufügen.
3. Suchen Sie nach LoginPress oder Custom Login Page Customizer.
4. Klicken Sie auf Jetzt installieren und dann auf Aktivieren.

Beide Plugins werden aktiv gepflegt, haben große Installationsbasen und stellen ihre Einstellungen über den nativen WordPress-Customizer bereit — es gibt also keine unbekannte Benutzeroberfläche zu erlernen.

Schritt 2: Ihr Logo hochladen und konfigurieren

1. Gehen Sie zu LoginPress > Customizer (oder Design > Login Customizer, je nach Plugin).
2. Suchen Sie den Abschnitt Logo im linken Bereich.
3. Klicken Sie auf Bild auswählen und laden Sie Ihr Logo aus der Mediathek oder von Ihrem lokalen Computer hoch.
4. Passen Sie Breite, Höhe und Abstände mithilfe der Live-Vorschau-Steuerelemente des Plugins an.
5. Klicken Sie auf Veröffentlichen.

Sonderfall: Wenn Ihr Logo auf hochauflösenden (Retina-)Displays unscharf erscheint, laden Sie ein Bild hoch, das genau 2x Ihrer beabsichtigten Anzeigegröße entspricht, und begrenzen Sie es über CSS width, anstatt sich auf die Pixelabmessungen des Plugins zu verlassen. Wenn Sie beispielsweise ein 250px breites Logo möchten, laden Sie ein 500px breites PNG hoch und setzen Sie die Anzeigebreite auf 250px.

Methode 2: Manueller Code in functions.php (Fortgeschritten)

Diese Methode gibt Ihnen präzise Kontrolle über jede CSS-Eigenschaft — Positionierung, Link-Verhalten, Hover-Zustände — ohne ein zusätzliches Plugin zu installieren. Sie ist der bevorzugte Ansatz für Entwickler, die benutzerdefinierte Themes erstellen oder einen schlanken Plugin-Footprint aufrechterhalten.

Schritt 1: Ein Child-Theme erstellen oder darauf zugreifen

Bearbeiten Sie niemals die functions.php eines übergeordneten Themes direkt. Wenn Sie noch kein Child-Theme erstellt haben, tun Sie dies, bevor Sie fortfahren. Auf einem VPS mit cPanel oder einem beliebigen Server mit SSH-Zugriff können Sie das Child-Theme-Verzeichnis und die erforderlichen Dateien manuell erstellen.

Navigieren Sie in Ihrem WordPress-Dashboard zu Design > Theme-Datei-Editor und wählen Sie die functions.php Ihres Child-Themes aus.

Schritt 2: Den Login-Logo-Hook hinzufügen

Fügen Sie den folgenden Codeblock zur functions.php Ihres Child-Themes hinzu:

/**
 * Replace the default WordPress login logo with a custom image.
 * Hook: login_enqueue_scripts fires before the login page renders.
 */
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/custom-logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 250px;
            height: 80px;
            display: block;
            margin: 0 auto 20px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

Wichtiges Detail: Der ursprüngliche Quellcode in vielen Tutorials zielt nur auf #login h1 a ab. Seit WordPress 5.x trägt der Wrapper der Anmeldeseite auch die Klasse .login, sodass die Ausrichtung auf beide Selektoren die Kompatibilität mit allen WordPress-Versionen und zukünftigen strukturellen Änderungen gewährleistet.

Schritt 3: Ihre Logo-Datei hochladen

Laden Sie Ihr Logo mithilfe eines FTP-Clients, des Dateimanagers Ihres Hostings oder SSH in das images/-Verzeichnis des Child-Themes hoch:

# Example using scp from your local machine to the server
scp /local/path/custom-logo.png user@your-server-ip:/var/www/html/wp-content/themes/your-child-theme/images/

Der Dateipfad in der PHP-Funktion verwendet get_stylesheet_directory_uri(), das immer zur Root-URI des aktiven Themes aufgelöst wird — was bestätigt, warum das Child-Theme hier zwingend erforderlich ist. Wenn Sie versehentlich die Verzeichnisfunktion des übergeordneten Themes get_template_directory_uri() verwenden, wird der Pfad unterbrochen, sobald Sie das übergeordnete Theme wechseln oder aktualisieren.

Schritt 4: Den Logo-Link und den Tooltip anpassen

Standardmäßig verlinkt das Anmeldelogo zurück zu wordpress.org. Sie möchten es mit ziemlicher Sicherheit auf Ihre eigene Startseite verweisen lassen. Fügen Sie diese zwei zusätzlichen Hooks in derselben functions.php-Datei hinzu:

// Change the login logo link URL
function custom_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Change the login logo link title attribute
function custom_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'custom_login_logo_url_title' );

Dies ist ein Detail, das die Mehrheit der Tutorials völlig auslässt. Wenn Ihr Kunde auf das Logo auf der Anmeldeseite klickt und auf wordpress.org landet, ist das ein professionelles Versagen. Diese zwei Filter schließen diese Lücke.

Schritt 5: Speichern und überprüfen

Klicken Sie im Theme-Datei-Editor auf Datei aktualisieren, oder speichern Sie über Ihren Texteditor, wenn Sie über SSH/SFTP arbeiten. Navigieren Sie in einem privaten Browserfenster zu yourdomain.com/wp-login.php, um das Ergebnis zu überprüfen, ohne dass zwischengespeicherte Assets stören.

Methode 3: Benutzerdefiniertes CSS-Plugin (Keine functions.php erforderlich)

Wenn Sie an einer Kunden-Website arbeiten, bei der das Bearbeiten von Theme-Dateien riskant ist, oder wenn Sie ein Drittanbieter-Theme verwenden, das Sie nicht sicher mit einem Child-Theme erweitern können, ist ein dediziertes CSS-Plugin die sauberste Lösung.

Schritt 1: Simple Custom CSS and JS installieren

1. Gehen Sie zu Plugins > Neu hinzufügen.
2. Suchen Sie nach Simple Custom CSS and JS (oder dem leichteren Simple Custom CSS).
3. Installieren und aktivieren.

Schritt 2: Das CSS für die Anmeldeseite hinzufügen

Navigieren Sie zu Custom CSS and JS > Benutzerdefiniertes CSS hinzufügen und fügen Sie Folgendes ein:

/* Target the login logo anchor on the WordPress login page */
#login h1 a,
.login h1 a {
    background-image: url('https://yourdomain.com/wp-content/uploads/your-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 250px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
}

Ersetzen Sie die URL durch den direkten Pfad zu Ihrem hochgeladenen Logo. Die zuverlässigste Quelle ist die Mediathek: Öffnen Sie Ihr Logo in der Mediathek, kopieren Sie die Datei-URL aus dem Anhang-Detailbereich und fügen Sie sie direkt in die CSS-Regel ein.

Zu vermeidende Falle: Verwenden Sie hier keine relative URL (z. B. /wp-content/uploads/logo.png). Wenn WordPress in einem Unterverzeichnis installiert ist, werden relative Pfade lautlos unterbrochen. Verwenden Sie immer die absolute URL aus der Mediathek.

Setzen Sie die Option Wo auf Frontend oder Anmeldeseite, wenn das Plugin seitenspezifisches Targeting unterstützt, um das Laden von unnötigem CSS auf jeder öffentlichen Seite zu vermeiden.

Logo-Bildspezifikationen und Best Practices

Dateiformat: Verwenden Sie PNG mit transparentem Hintergrund. JPEG-Kompressionsartefakte sind vor dem hellgrauen Hintergrund der Anmeldeseite sichtbar. SVG wird in modernen Browsern unterstützt, erfordert jedoch zusätzliches CSS (background-size: auto verhält sich bei SVGs anders) und kann bei älteren Setups zu Rendering-Inkonsistenzen führen.

Abmessungen: Der WordPress-Anmeldeformular-Container ist 320px breit. Ein Logo von 250 x 80px passt sauber in diese Einschränkung. Für Retina/HiDPI-Bildschirme exportieren Sie mit 500 x 160px und begrenzen Sie die Anzeigegröße über CSS width: 250px; height: 80px.

Dateigröße: Halten Sie das Logo unter 50KB. Die Anmeldeseite ist ein häufig aufgerufener Zugangspunkt — jeder Administrator, Redakteur und Mitarbeiter lädt sie. Eine aufgeblähte Bilddatei fügt unnötige Latenz hinzu, insbesondere auf Servern mit begrenzter I/O-Bandbreite.

Farbkontrast: Der Standard-Hintergrund der Anmeldeseite ist #f0f0f1. Testen Sie Ihr Logo gegen diesen genauen Hex-Wert, bevor Sie es bereitstellen. Ein weißes Logo auf weißem Hintergrund ist unsichtbar — ein Fehler, der bei überstürzten Bereitstellungen peinlich häufig vorkommt.

Responsives Verhalten: Fügen Sie max-width: 100% zum Logo-Anker hinzu, um Überlauf auf mobilen Bildschirmen zu verhindern, die schmaler als 320px sind. Die WordPress-Anmeldeseite ist standardmäßig nicht vollständig responsiv, aber diese einzelne Regel verhindert horizontales Scrollen auf kleinen Viewports.

Überlegungen zur Hosting-Umgebung

Die von Ihnen gewählte Methode wird teilweise durch Ihre Hosting-Umgebung bestimmt. Auf einem Dedicated Server haben Sie uneingeschränkten SSH-Zugriff und können Child-Themes bereitstellen, Dateiberechtigungen verwalten und Logo-Updates über Deployment-Skripte automatisieren. Bei Shared Web Hosting sind Sie in der Regel auf den Dateimanager und das WordPress-Dashboard beschränkt — was die Plugin-Methode oder das Custom CSS-Plugin zu den einzigen praktikablen Optionen macht.

Für Teams, die mehrere WordPress-Installationen verwalten, sollten Sie WP-CLI verwenden, um Logo-Updates über alle Websites hinweg zu automatisieren:

# Activate a child theme via WP-CLI
wp theme activate your-child-theme --path=/var/www/html

# Verify the active theme
wp theme status --path=/var/www/html

Wenn Ihre WordPress-Website Benutzerregistrierungen, Kundenportale oder E-Commerce-Anmeldungen verwaltet, ist die Kombination einer gebrandeten Anmeldeseite mit einem gültigen SSL-Zertifikat unverhandelbar. Die Anmeldeseite überträgt Anmeldedaten — HTTPS ist die Grundvoraussetzung, keine optionale Erweiterung.

Entscheidungsmatrix: Welche Methode sollten Sie verwenden

Verwenden Sie diese Checkliste, um den richtigen Ansatz für Ihre spezifische Situation auszuwählen:

• Sie sind kein Entwickler oder bauen für einen nicht-technischen Kunden — verwenden Sie Methode 1 (LoginPress-Plugin). Es ist reversibel, erfordert keinen Code, und das Plugin übernimmt das responsive Verhalten automatisch.
• Sie sind ein Entwickler, der ein benutzerdefiniertes Child-Theme pflegt — verwenden Sie Methode 2 (functions.php). Es fügt keinen Plugin-Overhead hinzu und gibt Ihnen vollständige CSS-Kontrolle, einschließlich der Korrektur der Logo-Link-URL.
• Sie müssen ein Drittanbieter-Theme ohne Child-Theme anpassen — verwenden Sie Methode 3 (Custom CSS-Plugin). Es ist von Theme-Updates isoliert und leicht zu entfernen.
• Sie verwalten mehrere Websites — kombinieren Sie Methode 2 mit einem kundenspezifischen Child-Theme pro Kunde, bereitgestellt über Git oder WP-CLI für Konsistenz.
• Ihr Logo erscheint auf Retina-Displays unscharf — laden Sie unabhängig von der Methode ein Bild mit 2-facher Auflösung hoch und begrenzen Sie seine Anzeigegröße über CSS width– und height-Eigenschaften.
• Der Logo-Link verweist nach der Anpassung immer noch auf wordpress.org — fügen Sie die login_headerurl– und login_headertext-Filter aus Methode 2 hinzu, auch wenn Sie ein Plugin für das Bild selbst verwendet haben.

FAQ

Beeinflusst das Ändern des Anmeldelogos die WordPress-Sicherheit?

Nein, das Ersetzen des Logo-Bildes hat keine Auswirkungen auf die Authentifizierungssicherheit. Ein benutzerdefiniertes Anmeldelogo kann jedoch die visuelle Wirksamkeit generischer WordPress-Phishing-Seiten, die auf Ihre Benutzer abzielen, verringern, da Angreifer typischerweise das Standard-WordPress-Anmeldeaussehen klonen. Für eine tatsächliche Sicherheitshärtung kombinieren Sie dies mit Zwei-Faktor-Authentifizierung, Begrenzung von Anmeldeversuchen und HTTPS-Durchsetzung.

Wird das benutzerdefinierte Anmeldelogo nach einem WordPress-Core-Update unterbrochen?

Core-Updates berühren keine Theme-Dateien oder Plugin-Daten. Wenn Sie Methode 2 mit einem Child-Theme verwendet haben, sind Ihre Änderungen vollständig von Core- und übergeordneten Theme-Updates isoliert. Wenn Sie die functions.php eines übergeordneten Themes direkt bearbeitet haben, wird ein Theme-Update Ihren Code überschreiben — weshalb die Child-Theme-Anforderung unverhandelbar ist.

Was ist der richtige Hook zum Einschleusen von CSS auf der WordPress-Anmeldeseite?

Verwenden Sie login_enqueue_scripts. Diese Aktion wird speziell auf der Anmeldeseite ausgelöst, bevor Stile gerendert werden, was sie zum korrekten und offiziell dokumentierten Hook für diesen Zweck macht. Die Verwendung von wp_enqueue_scripts funktioniert auf der Anmeldeseite nicht — sie wird nur im Frontend ausgelöst.

Kann ich eine SVG-Datei als Anmeldelogo verwenden?

Ja, aber mit Einschränkungen. WordPress blockiert SVG-Uploads standardmäßig aus Sicherheitsgründen (SVGs können ausführbares JavaScript enthalten). Sie müssen entweder ein Plugin wie Safe SVG verwenden, um SVG-Uploads zu aktivieren, oder die SVG über eine fest codierte absolute URL in Ihrem CSS referenzieren. Setzen Sie außerdem background-size: auto oder explizite Pixelabmessungen, da sich das SVG-Skalierungsverhalten von Rasterbildern unterscheidet.

Mein Logo erscheint nach diesen Schritten nicht — was sollte ich überprüfen?

Laden Sie zunächst die Anmeldeseite mit Ctrl+Shift+R (Windows/Linux) oder Cmd+Shift+R (Mac) hart neu, um den Browser-Cache zu umgehen. Überprüfen Sie zweitens, ob die Bild-URL öffentlich zugänglich ist, indem Sie sie direkt in einen Browser-Tab einfügen. Öffnen Sie drittens die Browser-DevTools auf der Anmeldeseite, untersuchen Sie das #login h1 a-Element und prüfen Sie, ob Ihre CSS-Regel angewendet oder von einem anderen Stylesheet überschrieben wird. Bestätigen Sie viertens, dass die Datei in das richtige Verzeichnis hochgeladen wurde und dass der Dateiname in Ihrem Code genau mit dem hochgeladenen Dateinamen übereinstimmt, einschließlich Groß-/Kleinschreibung — Linux-Server behandeln Logo.png und logo.png als verschiedene Dateien.