Die WordPress-Login-Seite durch ein functions.php-Snippet individualisieren

WordPress-Login-Seite mit Google-Authenticator-AbfrageJeder WordPress-User kennt sie: Die Standard-Login-Seite wp-login.php von WordPress (hier dargesellt mit einem zusätzlichen Abfragefeld für den Google Authenticator).

Dieser Beitrag erläutert, wie sich das Design der Login-Seite mit einigen Zeilen PHP-Code in der functions.php des Child-Themes und einigen CSS-Anweisungen individualisieren lässt.

Das PHP-Snippet für die Layoutanpassung der WordPress-Login-Seite

<?php
 
function mein_login_logo() {
    echo '<style type="text/css">
    </style>';
	}
 
add_action('login_head', 'mein_login_logo');
 
?>

CSS-Klassen, die auf der Anmeldeseite häufig angepasst werden, sind:

h1 a { background-image:url('') !important; }
.message { border-color:#777 !important; }
#loginform { background-color:#DDD; }
#loginform label { color:#777; }
#loginform .button-primary { }
.privacy-policy-link { color:#DDD; }

Bei Anweisungen, die (zunächst) nicht funktionieren, ist es stets einen Versuch wert, diese mit !important zu deklarieren, damit nicht nachfolgende, identische Anweisungen den gewünschten Wert wieder überschreiben.

Technik-Oberschwaben.de-LogoDas Logo wird von WordPress als Hintergrundgrafik einer <h1>-Überschrift dargestellt. Die Standardgröße für das Logo beträgt 84×84 Pixel.

Das PHP-Snippet zum Anpassen des Logo-Links

Außerdem ist es möglich, den Hyperlink des Logos anzupassen (Für den Hinweis vielen Dank an Sascha von Fjordkommission Flensburg). Hier entsteht beispielhaft ein Link zur Startseite:

<?php
 
function mein_login_headerlogo_url() { return "/"; }
add_filter('login_headerurl', 'mein_login_headerlogo_url');
 
function mein_login_headerlogo_title() { return "Zur Startseite"; }
add_filter('login_headertitle', 'mein_login_headerlogo_title');
 
?>

Das Ergebnis: Eine individuell angepasste WordPress-Login-Seite

Angepasste WordPress-Login-Seite für Technik-Oberschaben.deBei der hier dargestellten, neuen Anmeldeseite wurden nur die Kernelemente leicht verändert, damit der ursprüngliche Charakter der Seite noch erhalten bleibt und der User sich schnell zurechtfindet.

Sie benötigen Unterstützung bei Ihrem WordPress-Projekt?

Jetzt WordPress-Designer kontaktieren

Die Erstberatung ist kostenlos.

  1. Ich würde vielleicht nicht alles per „echo“ aus der functions.php in den Quelltext schreiben, sondern dort nur einen Verweis auf eine separate CSS-Datei einfügen und das ganze Styling dann dort ausführlich definieren. Ist später auch intuitiver wiederzufinden, wenn man im Child-Theme nach den Styles in einer CSS-Datei sucht, statt in der functions.php.

    Außerdem würde ich noch ergänzen wollen, den Link hinter dem Logo statt auf WordPress.org per Filter zum Beispiel auf die Startseite zeigen zu lassen.

    Beispiel:
    function login_headerlogo_url() { return ‚/‘; }
    add_filter(‚login_headerurl‘, ‚login_headerlogo_url‘);

    function login_headerlogo_title() { return ‚Zur Startseite‘; }
    add_filter(‚login_headertitle‘, ‚login_headerlogo_title‘);

    Viele Grüße
    Sascha

    • Hinweis an die Leser: Der Kommentar-Editor hat die öffnenden Anführungszeichen oben geändert in unten liegende Anführungszeichen. Copy&Paste wird so deshalb nicht funktionieren. 🙂

    • Hallo Sascha,
      vielen Dank für Deine wertvollen Hinweise.
      Das mit der separaten CSS-Datei stimmt natürlich immer – spätestes dann, wenn gleich mehrere Eigenschaften geändert werden.
      Und der Code zur Änderung des Links ist eine sehr gute Ergänzung – ich habe deshalb auch den Beitrag um diese Codezeilen erweitert.
      Beste Grüße zurück in den hohen Norden,
      Rüdiger

Schreibe eine Antwort

LiveZilla Live Chat Software