So änderst du das WordPress-Login-Logo mit einem Custom-Snippet

Codeschnippsel, Wordpress /

Das Ändern des WordPress-Login-Logos ist eine einfache, aber effektive Möglichkeit, das Admin-Erlebnis deiner Website zu personalisieren. Indem du das Standard-WordPress-Logo durch dein eigenes Logo ersetzt, kannst du einen professionelleren Eindruck schaffen. In diesem Leitfaden zeige ich dir, wie du das WordPress-Login-Logo mit einem benutzerdefinierten Code-Snippet änderst.

Dieses Snippet ist Teil meines eigenen benutzerdefinierten WordPress-Plugins, das kleine, nicht-breaking Verbesserungen für jede von mir verwaltete Website hinzufügt. Es ist leichtgewichtig und sorgt für maximale Flexibilität bei verschiedenen Projekten. Du findest das komplette Plugin auf GitHub: Marc’s Custom WP Functions.

Warum sollte man das WordPress-Login-Logo ändern?

Das Standard-WordPress-Logo ist zwar funktional, aber durch ein eigenes Logo zu ersetzen, kann:

  • Deine Markenpräsenz stärken.
  • Bei Kunden einen besseren Eindruck hinterlassen, wenn du eine individuelle Website erstellt hast.
  • Ein konsistenteres Erlebnis für Administratoren und Nutzer schaffen.

Das Code-Snippet, um das Login-Logo zu ändern

Hier ist das Snippet, das ich in meinem benutzerdefinierten WordPress-Plugin verwende, um das Login-Logo dynamisch zu ändern. Es stellt auch sicher, dass das Logo zur Startseite der Website und nicht zur WordPress-Website verlinkt.

<?php

// Login-Logo ändern
function custom_login_logo() {
    // Hole die URL des benutzerdefinierten Logos
    $custom_logo_id = get_theme_mod('custom_logo'); // Hole die ID des benutzerdefinierten Logos
    $logo_url = wp_get_attachment_image_url($custom_logo_id, 'full'); // Hole die URL des Logos

    // Standard-WordPress-Logo verwenden, falls kein benutzerdefiniertes Logo gesetzt ist
    if (!$logo_url) {
        $logo_url = admin_url('images/wordpress-logo.svg'); // Standard-WordPress-Logo
    }

    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(' . esc_url($logo_url) . ');
            height: 150px; /* Nach Bedarf anpassen */
            width: 100%; /* Für Responsiveness */
            background-size: contain; /* Nach Bedarf anpassen */
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_logo');

// URL des Logos auf die Startseite der Website setzen
function custom_login_logo_url() {
    return home_url(); // URL der Startseite zurückgeben
}
add_filter('login_headerurl', 'custom_login_logo_url');

// Optional: Title-Attribut des Logo-Links anpassen
function custom_login_logo_url_title() {
    return get_bloginfo('name'); // Name der Website zurückgeben
}
add_filter('login_headertext', 'custom_login_logo_url_title');

Wie funktioniert dieses Snippet?

  1. Dynamische Logo-Abfrage:
    • Die Funktion get_theme_mod('custom_logo') ruft das im WordPress-Customizer festgelegte Logo ab.
    • Falls kein Logo gesetzt ist, wird das Standard-WordPress-Logo (admin_url('images/wordpress-logo.svg')) verwendet.
  2. Benutzerdefiniertes Styling:
    • Das Erscheinungsbild des Logos (Größe, Responsiveness) wird über Inline-CSS gesteuert.
  3. Individueller Logo-Link:
    • Der Filter login_headerurl sorgt dafür, dass das Logo zur Startseite deiner Website verlinkt.
  4. Tooltip-Anpassung:
    • Der Filter login_headertext ändert das Title-Attribut des Logo-Links in den Namen der Website.

So fügst du das Snippet zu deinem benutzerdefinierten Plugin hinzu

Anstatt dieses Snippet in die functions.php deines Themes einzufügen, empfehle ich die Erstellung eines benutzerdefinierten Plugins. So bleibt die Funktionalität unabhängig vom Theme und kann auf mehreren Projekten wiederverwendet werden.

Schritte zur Erstellung eines benutzerdefinierten Plugins:

  1. Erstelle eine neue Plugin-Datei:
    • Gehe in dein Verzeichnis wp-content/plugins/ und erstelle einen neuen Ordner, z. B. mein-benutzerdefiniertes-plugin/.
    • Erstelle darin eine Datei, z. B. mein-plugin.php.
  2. Füge den Plugin-Header hinzu:
    • Füge folgenden Header in die Datei ein:
<?php
/*
Plugin Name: Mein Benutzerdefiniertes Plugin
Description: Ein leichtgewichtiges Plugin, das kleine, nicht-breaking Verbesserungen für WordPress-Websites hinzufügt.
Version: 1.0
Author: [Dein Name]
*/
  1. Füge das Snippet ein:
    • Kopiere das Login-Logo-Snippet in die Plugin-Datei.
  2. Aktiviere das Plugin:
    • Gehe im WordPress-Dashboard zu Plugins > Installierte Plugins und aktiviere dein benutzerdefiniertes Plugin.

Fazit

Die Personalisierung der WordPress-Login-Seite ist eine kleine, aber wirkungsvolle Möglichkeit, das Nutzererlebnis zu verbessern. Mit diesem Snippet als Teil eines benutzerdefinierten Plugins kannst du Flexibilität sicherstellen und einen konsistenten Workflow für all deine Projekte schaffen.

Du kannst mein komplettes benutzerdefiniertes Plugin, das dieses und andere nützliche Funktionen enthält, auf GitHub ansehen. Wenn dir dieser Leitfaden geholfen hat, teile ihn gerne. Viel Erfolg beim Coden!