Homepage erstellen in Biberach, Sigmaringen, Ulm und Ravensburg

Die WordPress-Login-Seite durch ein functions.php-Snippet individualisieren (aktualisiert)
5. Oktober 2023 WordPress 7

WordPress-LoginJeder WordPress-User kennt sie: Die Standard-Login-Seite wp-login.php von WordPress (hier dargestellt 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.

WordPress-Login-LogDas 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');
?>

Eine Meldung auf der WordPress-Loginseite ausgeben

Ein weiteres Snippet in der functions.php von WordPress lässt uns eine Meldung auf der Login-Seite ausgeben:

<?php
function sub_add_login_message($message){
	return $message.'<h2 style="text-align:center;">Wir l&ouml;sen Technik-Probleme.</h2>';
	}
add_filter('login_message', 'sub_add_login_message');
?>

Angepasste WordPress-Login-Seite für Technik-Oberschaben.de

Das Ergebnis: Eine individuell angepasste WordPress-Login-Seite

Bei 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.

  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

  2. 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

  3. Gleich zu Beginn: Ich bin WordPress-Laie. 😀
    Das scheint für mich eine total nette Spielerei zu sein, aber ist das auch zu irgendwas nütze?
    Ich meine es ist bestimmt für jemanden, der für viele Kunden-Accounts WordPress-Konten betreibt, hilfreich um die Übersicht zu behalten, aber meine Frage ist, ob das auch einen rein technischen Vorteil hat, den ich nicht durchblicke?
    Ansonsten ein echt toller Artikel und die Anleitung finde ich sehr anschaulich und gut erklärt.

  4. Gleich zu Beginn: Ich bin WordPress-Laie. 😀
    Das scheint für mich eine total nette Spielerei zu sein, aber ist das auch zu irgendwas nütze?
    Ich meine es ist bestimmt für jemanden, der für viele Kunden-Accounts WordPress-Konten betreibt, hilfreich um die Übersicht zu behalten, aber meine Frage ist, ob das auch einen rein technischen Vorteil hat, den ich nicht durchblicke?
    Ansonsten ein echt toller Artikel und die Anleitung finde ich sehr anschaulich und gut erklärt.

    • Technische Vorteile? Nein. Aber Design ist mehr als Technik. Trotzdem zwei Antworten:
      1.) Das Auge isst mit.
      2.) Wenn man als Agentur eine Vielzahl von WordPress-Projekten betreut, bietet es tatsächlich einen Vorteil.

Schreibe eine Antwort