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

Das Stan­­dard-Word­­Press-Logo im Log­in-Bereich ist funk­tio­nal, aber nicht beson­ders indi­vi­du­ell. Wer eine Mar­ke auf­baut oder für Kun­den­pro­jek­te arbei­tet, möch­te oft das eige­ne Logo im Log­in-Bereich anzei­gen.

Warum sollte das Admin-Logo geändert werden? #

Ein eige­nes Logo im Word­­Press-Log­in-Bereich sorgt für:

• Pro­fes­sio­nel­les Bran­ding: Die Word­­Press-Instal­la­­ti­on wirkt indi­vi­du­ell und hoch­wer­ti­ger.
• Wie­der­erken­nung: Kun­den und Team­mit­glie­der iden­ti­fi­zie­ren sich schnel­ler mit dem Pro­jekt.
• Ver­trau­en und Kon­sis­tenz: Ein ein­heit­li­ches Design stärkt die Mar­ke.

Voraussetzungen #

Bevor du los­legst, stel­le sicher, dass du fol­gen­de Vor­aus­set­zun­gen erfüllst:

• Zugriff auf die Word­­Press-Instal­la­­ti­on (FTP, cPa­nel oder Datei­ma­na­ger)
• Admi­nis­tra­ti­ons­rech­te (Benut­zer­rol­le: Admi­nis­tra­tor)
• Grund­la­gen­kennt­nis­se in PHP und CSS (für manu­el­le Anpas­sun­gen)

Methode 1: Änderung per Plugin #

Die ein­fachs­te Mög­lich­keit, das Log­in-Logo zu ändern, ist ein Plug­in.

Emp­foh­le­nes Plug­in: Cus­tom Log­in Page Cus­to­mi­zer

Ein prak­ti­sches Plug­in ist Cus­tom Log­in Page Cus­to­mi­zer. Es ermög­licht die ein­fa­che Anpas­sung des Log­in-Bereichs, ein­schließ­lich Far­ben, Hin­ter­grund­bil­dern und Logos.

Schritt-für-Schritt-Anleitung

1. Plug­in instal­lie­ren:
   • Navi­gie­re in Word­Press zu Plug­ins → Instal­lie­ren
   • Suche nach Cus­tom Log­in Page Cus­to­mi­zer
   • Instal­lie­re und akti­vie­re das Plug­in
2. Log­in-Bereich anpas­sen:
   • Gehe zu Design → Log­in Cus­to­mi­zer
   • Wäh­le unter „Logo“ dein eige­nes Bild aus
   • Spei­che­re die Ände­run­gen

Die­se Metho­de ist ide­al für Nut­zer ohne Pro­gram­mier­kennt­nis­se.

Methode 2: Manuelle Änderung per Code #

Falls du kein Plug­in nut­zen möch­test, kannst du das Logo per Code ändern.

Anpassung über die functions.php

Füge fol­gen­den Code in die functions.php dei­nes Child-The­­mes 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:

• back­­ground-image: Hier wird das Logo gela­den.
• get_stylesheet_directory_uri() ver­weist auf das The­­me-Ver­­­zeich­­nis.
• back­­ground-size: con­tain; sorgt für die rich­ti­ge Ska­lie­rung.

Spei­che­re das Bild (custom-logo.png) im Ver­zeich­nis /wp-con­­ten­­t/­­the­­mes/dein-child-the­­me/i­­ma­­ge­s/.

Anpassung per CSS

Alter­na­tiv kannst du eine sepa­ra­te CSS-Datei ein­bin­den:

Erstel­le eine CSS-Datei z. B. custom-login.css und füge die­sen Code hin­zu:

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

Lade die Datei im The­me mit fol­gen­dem 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 Ände­rung soll­test du fol­gen­de Tests durch­füh­ren:

Cache leeren und prüfen

• Bro­w­­ser-Cache und Word­­Press-Cache (z. B. mit einem Caching-Plu­g­in) lee­ren
• Sei­te im Inko­­g­ni­­to-Modus öff­nen

Häufige Probleme und Lösungen

Fazit #

Die bes­te Metho­de hängt von dei­nen Anfor­de­run­gen ab:

Für Anfän­ger & schnel­le Lösung: Plug­in wie „Cus­tom Log­in Page Cus­to­mi­zer“
Für Ent­wick­ler & sau­be­re Umset­zung: Anpas­sung via functions.php + CSS

Mit die­sen Metho­den kannst du dein eige­nes Bran­ding pro­fes­sio­nell in den Word­­Press-Log­in-Bereich inte­grie­ren. 🚀