Anpassen der Loginseite

Wie finde ich am schnellsten heraus, ob eine Internetseite mit Word­Press aufgebaut wurde? Die Antwort kennt sicher jede(r), die oder der schon einmal selbst mit Word­Press experimentiert hat: Tippe im Browser direkt hinter die URL der Website die Ergänzung /wp-admin ein und lade die Seite neu. Wenn man danach auf die Seite /wp-login weitergeleitet wird und das vertraute blaue Word­Press-Logo mit einer Anmeldemaske darunter erscheint, ist das ein sicherer Hinweis auf den Einsatz des Content-Management-Systems der Word­Press Foundation mit Sitz in San Francisco. Muss das so sein? Oder kann man die Anmeldeseite an die Gestaltung des eigenen Auftritts anpassen?

(Natürlich kann man diese Loginseite auch komplett verstecken, aber das ist ein anderes Thema.)

Die Loginseite sieht bei allen Internetpräsenzen erst einmal identisch und womöglich gar ein wenig langweilig aus. Es gibt Plugins, mit denen Individualisten das Anmeldeformular für Ihre Seite vollständig frei gestalten können. Das ist in bestimmten Fällen auch sehr empfehlenswert. Wer zum Beispiel eine Website betreibt, die nur angemeldete Benutzer sehen können, wird die Loginseite sicher vollständig an das eigene Seitenlayout anpassen wollen.
Für solche Fälle empfiehlt sich ein Plugin wie etwa der Custom Login Page Customizer von WP Experts.

Wer jedoch lediglich ein eigenes Seitenlogo statt des blauen WordPress-Logos verwenden möchte und eventuell noch eine andere Farbe als das bekannte Blau der Loginfelder beim Login sehen möchte, der kann sich die Installation eines Plugins ersparen.

Anpassungen in der Datei functions.php

Lade aus dem Serververzeichnis Deines aktiven Themes die Datei functions.php mit Hilfe eines FTP-Programms auf Deinen PC herunter und öffne sie mit mit einem Texteditor. An das Ende dieser Datei, fügst Du vor der letzten Zeile ?> den folgenden Programmcode ein:

/**
 * Eigenes Logo mit Link zur eigenen Homepage auf der Loginseite einbinden
*/
add_action( 'login_head', 'custom_login_style' );
function custom_login_style() {
    echo '<style>';
    echo '.login h1 a { background-image: url( ';
    echo 'https://wordpress.fassbar.de/wp-content/uploads/2022/12/2022-12-06-WordPress-Fassbar-Himbeer-130x130-1.png';
    echo ' ) !important; }';
/*  Farbe des Bildschirmhintergrundes: #f2f0ef */
    echo 'body { background-color: #f2f0ef; }';
/*  Farbe des Anmelden-Buttons: #d32150 */
	echo '.login input.button-primary { background: #d32150; border: #d32150 solid 1px; }';
/*  Farbe des Anmelden-Buttons bei Mauskontakt und beim Klick: #bf0D3c */
	echo '.login input.button-primary:hover, .login input.button-primary:focus ';
    echo '{ background: #bf0D3c; border: #bf0D3c solid 1px; }';
/*  Farbe der Formularfeld-Rahmen: #d32150 */
	echo '.login input:hover, .login input:focus, .login #rememberme:hover, .login #rememberme:focus ';
	echo '{ border: #d32150 solid 1px; box-shadow: 0 0 0 1px #d32150; }';
/*  Farbe des linken Rahmens bei Fehlermeldungen: #d32150 */
	echo '.login #login_error { border-color: #d32150; }';
    echo '</style>';
}

add_filter( 'login_headerurl', 'custom_login_headerurl' );
function custom_login_headerurl( $url ) {
    $url = home_url( '/' );
    return $url;
}

Dabei ersetzt Du die Adresse meines Logos, https://wordpress.fassbar.de/wp-content/uploads/2022/12/2022-12-06-WordPress-Fassbar-Himbeer-130x130-1.png, durch die URL Deines eigenen Bildchens. (Falls Dein Logo nicht quadratisch ist, musst Du hinter !important; noch passende Höhen- und Breitenangaben gemäß der CSS-Regeln für Bilder einfügen, zum Beispiel height: 80px; width: 160px; background-size: 160px 80px;.)

Außerdem kannst Du die Farbangaben für den Bildschirmhintergrund, für den Anmelde-Button und für die verschiedenen Formularfelder (bei mir sind das alles himbeerfarbene Töne wie in meinem Logo) nach Deinen eigenen Wünschen abändern.

Spachauswahl entfernen?

Wenn sich auf Deiner Seite nur deutschsprachige Benutzer anmelden, kannst Du auch das Auswahlmenü für die Sprache ausblenden. Dazu fügst Du auch noch das folgende Codeschnipsel in die Datei functions.php ein:

/**
* Sprachauswahl auf der Loginseite ausblenden
*/
add_filter( 'login_display_language_dropdown', '__return_false' );

---

Zu guter Letzt lädst Du die abgeänderte Datei functions.php mit dem FTP-Programm von Deinem PC wieder hoch in das Themeverzeichnis auf Deinem Webserver. Danach sieht Deine Loginseite so ähnlich aus wie meine eigene.

Vorsicht: Beachte beim Bearbeiten und Hochladen unbedingt meine Hinweise im Beitrag zum Child-Theme. Denn mit der nächsten Aktualisierung des installierten Standardthemes werden alle Inhalte der Datei functions.php dort wieder durch die Standardinhalte überschrieben. Das kannst Du verhindern, indem Du ein Child-Theme anlegst und alle permanenten Änderungen dort einträgst.