Direkt zum Inhalt wechseln
WordPress FassbarWordPress Fassbar
Tipps für die WordPress-Website
  • Startseite
  • About
  • Startseite
  • About
Kategorien
Gestaltung

Anpassen der Loginseite

  • Beitragsautor Von Ulf Brossmann
  • Beitragsdatum 29. Dezember 2022
  • Keine Kommentare zu 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?

WordPress Loginseite

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

***
(Wie schwierig ist das?)

  • Schlagwörter anmeldung, bilder, child theme, css, custom login page customizer, farben, formularfelder, functions.php, gestaltung, login, logo, php, plugin, sprache, wp-admin, wp-login

Von Ulf Brossmann

Betreiber von und Autor der Beiträge auf WordPress fassbar. Eine Kurzbiografie von Ulf findest Du am unteren Ende der Seite über diese Website. Hier folgen nun alle Artikel, die Ulf bisher verfasst hat, in umgekehrt chronologischer Reihenfolge, also der neuste zuoberst:

Archiv anzeigen →

← Cookies → Social Icons: Mastodon

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Beiträge nach Themen:

  • Gestaltung
  • Hilfe
  • Optimierung
  • Rechtliches
  • Seitenkomfort
  • Sicherheit
  • Software
  • Suchmaschinenoptimierung
  • Vorbereitung

Die 10 aktuellsten Beiträge:

  • Cronjobs auf dem Webserver einrichten28. Juli 2023
  • PuTTY (Secure-Shell-Programm)21. Juli 2023
  • Suchergebnisse bereinigen14. Juli 2023
  • Im Team arbeiten7. Juli 2023
  • Hintergrundverarbeitung mit Cronjobs30. Juni 2023
  • Administratorzugang erzwingen23. Juni 2023
  • Meine Identität (Logo)16. Juni 2023
  • Word­Press-Instal­lation aufräumen9. Juni 2023
  • Achtung: Baustelle!2. Juni 2023
  • Verwendung von Links: eine Strategie26. Mai 2023

Soziale Medien:

© 2022–2025 WordPress Fassbar

Impressum

Datenschutzerklärung

63.408 Leser

Nach oben ↑ Hoch ↑