Post navigation

WordPress: Login-Seite mit eigenem Logo und Hintergrundfarbe

WordPress Snippets · · Keine Kommentare

Du bist stolz auf Deine WordPress-Website, weil sie so richtig schick aussieht? Dann liegt ja nichts näher, als auch die Login-Seite Deines WordPress ein wenig anzupassen. Hier bekommst Du den Code für ein eigenes Logo mit eigener Hintergrundfarbe.

WordPress Login-Logo und Hintergrundfarbe anpassen

  • WordPress Version: inkl. 4.7
  • PHP-Version: inkl. PHP 7

Passe den Code an und kopiere ihn in die functions.php Deines aktiven Themes hinein.

➜ Meine Empfehlung für Dich:Raidboxes Managed WordPress Hosting
<?php
// Ab hier kopieren 
/**
 * Ein neues Logo für den Adminbereich und eine eigene Hintergrundfarbe
 * @author Andreas Hecht
 */
function ah_login_logo() { 
?>
 <style type="text/css">
 #login h1 a, .login h1 a {
 background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/dein-logo.png);
 margin-bottom: 0;
 background-size: 180px;
 height: 180px;
 width: 180px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 2em;
 }
 body.login {background-color: #0073bf;} .login #backtoblog a, .login #nav a {color: #fff !important}
 </style>
<?php }
add_action( 'login_enqueue_scripts', 'ah_login_logo' );

Bei mir sieht das Ergebnis nun so aus:

Der Adminbereich von Andreas-Hecht.com

Die zur Anpassung des Login-Bereichs nötigen CSS-Selektoren

Doch das ist längst noch nicht alles, was geht. Die Login-Seite von WordPress ist komplett auf die eigenen Bedürfnisse und Wünsche anpassbar. Auch ein vollflächiges Hintergrundbild ist denk- und machbar. Hier die CSS-Klassen des Login-Bereichs, die Du für eine Anpassung benötigst:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Wenn Deine Anpassungen umfangreicher werden sollen, dann kannst Du der Login-Seite auch eigene Stylesheets und JavaScript-Dateien zuweisen.


<?php
//Ab hier kopieren

function ah_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'ah_login_stylesheet' );

Einen genauen Überblick bekommst Du auf der »Customizing the Login Form« Seite des WordPress Codex.

Abonniere meinen Newsletter

Melde Dich für meinen Newsletter "WordPress & Bloggen" an und verpasse keinen Artikel. Als Dankeschön bekommst Du Gratis meine nützliche Checkliste:
»12 Dinge, die Du vor einem Theme-Wechsel beachten solltest«.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er ist ebenfalls Autor von drei richtig guten WordPress E-Books.

Schreibe einen Kommentar

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