WordPress Login-Logo ändern: So passt du das Admin-Logo individuell an

Das Standard-WordPress-Logo im Login-Bereich ist funktional, aber nicht besonders individuell. Wer eine Marke aufbaut oder für Kundenprojekte arbeitet, möchte oft das eigene Logo im Login-Bereich anzeigen.

Warum sollte das Admin-Logo geändert werden?

Ein eigenes Logo im WordPress-Login-Bereich sorgt für:

• Professionelles Branding: Die WordPress-Installation wirkt individuell und hochwertiger.
• Wiedererkennung: Kunden und Teammitglieder identifizieren sich schneller mit dem Projekt.
• Vertrauen und Konsistenz: Ein einheitliches Design stärkt die Marke.

Voraussetzungen

Bevor du loslegst, stelle sicher, dass du folgende Voraussetzungen erfüllst:

• Zugriff auf die WordPress-Installation (FTP, cPanel oder Dateimanager)
• Administrationsrechte (Benutzerrolle: Administrator)
• Grundlagenkenntnisse in PHP und CSS (für manuelle Anpassungen)

Methode 1: Änderung per Plugin

Die einfachste Möglichkeit, das Login-Logo zu ändern, ist ein Plugin.

Empfohlenes Plugin: Custom Login Page Customizer

Ein praktisches Plugin ist Custom Login Page Customizer. Es ermöglicht die einfache Anpassung des Login-Bereichs, einschließlich Farben, Hintergrundbildern und Logos.

Schritt-für-Schritt-Anleitung

1. Plugin installieren:
   • Navigiere in WordPress zu Plugins → Installieren
   • Suche nach Custom Login Page Customizer
   • Installiere und aktiviere das Plugin
2. Login-Bereich anpassen:
   • Gehe zu Design → Login Customizer
   • Wähle unter „Logo“ dein eigenes Bild aus
   • Speichere die Änderungen

Diese Methode ist ideal für Nutzer ohne Programmierkenntnisse.

Methode 2: Manuelle Änderung per Code

Falls du kein Plugin nutzen möchtest, kannst du das Logo per Code ändern.

Anpassung über die functions.php

Füge folgenden Code in die functions.php deines Child-Themes ein:

function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a {
            background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/custom-logo.png');
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>
<?php }
add_action('login_head', 'custom_login_logo');

Erklärung:

• background-image: Hier wird das Logo geladen.
• get_stylesheet_directory_uri() verweist auf das Theme-Verzeichnis.
• background-size: contain; sorgt für die richtige Skalierung.

Speichere das Bild (custom-logo.png) im Verzeichnis /wp-content/themes/dein-child-theme/images/.

Anpassung per CSS

Alternativ kannst du eine separate CSS-Datei einbinden:

Erstelle eine CSS-Datei z. B. custom-login.css und füge diesen Code hinzu:

#login h1 a {
    background-image: url('/wp-content/uploads/custom-logo.png');
    background-size: contain;
    width: 100%;
    height: 80px;
}

Lade die Datei im Theme mit folgendem Code in die functions.php:

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

Testen und Fehlerbehebung

Nach der Änderung solltest du folgende Tests durchführen:

Cache leeren und prüfen

• Browser-Cache und WordPress-Cache (z. B. mit einem Caching-Plugin) leeren
• Seite im Inkognito-Modus öffnen

Häufige Probleme und Lösungen

Fazit

Die beste Methode hängt von deinen Anforderungen ab:

Für Anfänger & schnelle Lösung: Plugin wie „Custom Login Page Customizer“
Für Entwickler & saubere Umsetzung: Anpassung via functions.php + CSS

Mit diesen Methoden kannst du dein eigenes Branding professionell in den WordPress-Login-Bereich integrieren. 🚀