WordPress-Login-Seite individuell anpassen

7. März 2021 | functions.php, WordPress

Geschätzte Lesezeit für diesen Beitrag: ca. 3 Minuten.

Die Login-Seite von WordPress kommt standardmässig mit dem WordPress-Logo und einem Link auf wordpress.org daher. Das ist ja ganz OK, solange man als Administrator die Seite nur selber sieht. Wer aber auf der eigenen Website einen Login-Bereich – etwa für Mitglieder – führt, sollte die Login-Seite individuell gestalten.

Auch wenn Sie Ihren Login-Bereich innerhalb der Website gestaltet haben kann es nämlich sein, dass Usern die Standard-Loginseite von WordPress angezeigt erhalten. Das kann etwa passieren, wenn die User sich mit einem falschen Passwort anmelden. Darum empfiehlt es sich, die WordPress-Standards mit eigenen Inhalten zu übersteuern.

Das ist nicht schwierig. Den folgenden Code kopieren Sie in die Datei functions.php Ihrer Website. Diese finden Sie im Backend unter Design/Theme-Editor.

// Logo
function custom_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(https://dr-code.ch/wp-content/uploads/favicon.png);
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

// Link
function custom_login_logo_url() {
    return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

// Titel
function custom_login_logo_url_title() {
    return get_bloginfo( 'blogname' );
}
add_filter( 'login_headertitle', 'custom_login_logo_url_title' );

Eine kleine Anpassung ist nötig: In Zeile 5 verweist der Code auf das Login-Logo, das die Seite dr-code.ch verwendet. Diese URL müssen Sie natürlich mit dem Logo austauschen, das Sie verwenden möchten. Beachten Sie aber, dass WordPress da sein Standardlogo in den Massen 84x84px erwartet. Sie fahren also gut, wenn Sie Ihr Logo daran anpassen; in meinem Fall verwende ich einfach das Favicon der Website. Das ist ja bereits quadratisch.

Kurz noch, was der Code macht:

  • Auf den Zeilen 1-9 wird der Login-Kopf mit dem Logo gestylt
  • Anschliessend (Zeile 11-15) wird der standardmässige Link auf wordpress.org mit einem Link auf Ihre eigene Website ersetzt.
  • Dann wird von Zeile 17 bis 21 noch der Titel Ihrer Website ausgelesen, verlinkt und dargestellt und das ganze Script angeworfen.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This