Trick # 441 | Dieser Beitrag beinhaltet 1137 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Geht es Ihnen wie mir? Ödet Sie die Login-Seite Ihrer WordPress-Website an? Sie können Sie ganz einfach stylen – so dass sie bestens zu Ihrem Webauftritt passt. Heute zeigen wir Ihnen wie das geht.
Zunächst haben wir einen Codeblock vorbereitet, den Sie Ihrer Datei functions.php hinzufügen müssen. Sie finden die Datei im Backend unter Design/Customizer/Zusätzliches CSS:
// WordPress-Loginseite stylen
// Logo
function custom_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
background-image: url(https://ihredomain.ch/pfadzuihrembild.png);
height:300px;
width:600px;
background-size: 600px 300px;
background-repeat: no-repeat;
}
</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' );
// CSS-Stylesheet
function custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/loginpage.css' );
wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/css/loginpage.js' );
}
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );Zur Erklärung:
- Als erstes wird das Logo definiert. Auf Zeile 6 des Codes können Sie den Pfad zu einer passenden Bilddatei angeben. Auf den Zeilen 7, 8 und 9 folgen dann Abmessungsangaben zur Logogrösse. Alle diese Werte können Sie anpassen.
- Danach folgt der Link zur Homepage. Da müssen Sie nicht viel unternehmen: der ist bereits in Ihrer WordPress-Installation hinterlegt und wird von da übernommen.
- Dasselbe beim Titel, der nun folgt. Ihr Websitename wird übernommen und Sie brauchen auf diesen Zeilen nichts zu ändern.
- Als nächstes wird ein CSS-Stylesheet für Ihre Loginseite hinterlegt. Ich habe dazu in meinem Divi-Child-Theme den Ordner «CSS» angelegt und darin ein Stylesheet unter dem Dateinamen «loginpage.css» gespeichert. Wenn Sie einen anderen Speicherort wünschen oder einen anderen Dateinamen, müssten Sie dies in den Zeilen 30 und 31 angeben.
Als nächstes kommt ein ganzer Bausatz mit CSS-Codes. Er enthält alle möglichen ansteuerbaren Elemente des WordPress-Logins – wobei ich selber einige davon gar nicht nutze. Der Vollständigkeit halber sind sie trotzdem im folgenden Code. Kopieren Sie ihn und fügen Sie ihn in das CSS-Stylesheet ein, welches Sie oben im Schritt 4 erstellt haben. Wenn die Datei bereits besteht, können Sie sie unter Design/Theme-Editor bearbeiten:
body.login {
background-color: #ffffff;
}
body.login div#login {
width: 600px;
}
body.login div#login h1 {
/* Hier CSS-Code einfügen */
}
body.login div#login h1 a {
/* Hier CSS-Code einfügen */
}
body.login div#login form#loginform {
border: 2px solid #59B14B;
border-radius: 10px;
}
body.login div#login form#loginform p {
/* Hier CSS-Code einfügen */
}
body.login div#login form#loginform p label, .user-pass-wrap label {
font-size: 20px;
}
body.login div#login form#loginform input {
/* Hier CSS-Code einfügen */
}
body.login div#login form#loginform input#user_login, body.login div#login form#loginform input#user_pass {
border: 2px solid #293280;
border-radius: 5px;
}
body.login div#login form#loginform input#user_login:focus, body.login div#login form#loginform input#user_pass:focus {
background-color: #59b14b33;
}
.dashicons {
color: #293280;
}
body.login div#login form#loginform p.forgetmenot {
/* Hier CSS-Code einfügen */
}
body.login div#login form#loginform p.forgetmenot input#rememberme {
border: 1px solid #293280;
color: #293280;
}
body.login div#login form#loginform p.submit {
/* Hier CSS-Code einfügen */
}
body.login div#login form#loginform p.submit input#wp-submit {
background-color: #293280;
border-radius: 10px;
padding: 3px 15px 3px 15px;
font-size: 22px;
border: 2px solid #293280;
}
body.login div#login form#loginform p.submit input#wp-submit:hover {
background-color: #59b14b33;
color: #293280;
}
body.login div#login p#nav {
/* Hier CSS-Code einfügen */
}
body.login div#login p#nav a, body.login div#login p#backtoblog a, #login_error a {
text-decoration: none;
padding-bottom: 0px;
border-bottom: 1px solid #293280;
font-size: 18px;
color: #293280;
}
body.login div#login p#backtoblog {
/* Hier CSS-Code einfügen */
}
div#login_error {
border-left: solid 5px #293280 !important;
font-size: 18px;
background-color: #59b14b33 !important;
}Wie gesagt: Ich verwende nur einen Teil der möglichen Blöcke. Der Code kann natürlich angepasst werden – vor allem hinsichtlich der Farben dürfte das sinnvoll sein.
Mit jenen CSS-Befehlen, die im obigen Code enthalten sind, sieht meine Loginseite so aus wie nebenan:
nachher
mit Styling
vorher
ohne Styling
Werbung
Werbung
