WordPress Snippets

WordPress Login Logo und Hintergrundfarbe anpassen

WordPress: Login-Seite mit eigenem Logo und Hintergrundfarbe

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

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

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

Schreibe einen Kommentar

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

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen