Die Standard-WordPress-Login-Seite zeigt das WordPress-Logo und generisches Styling. Dieses Snippet lässt dich sie mit eigenem Logo, Farben und Styles für einen professionellen Auftritt anpassen.
In deine functions.php einfügen
// Benutzerdefinierte Login-Seiten Styles
function custom_login_styles() {
$logo_url = get_template_directory_uri() . '/images/logo.png';
?>
<style>
body.login {
background-color: #f5f5f5;
}
#login h1 a {
background-image: url('<?php echo esc_url($logo_url); ?>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 80px;
}
.login form {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.login #backtoblog a,
.login #nav a {
color: #333;
}
.login #backtoblog a:hover,
.login #nav a:hover {
color: #0073aa;
}
.wp-core-ui .button-primary {
background-color: #0073aa;
border-color: #006799;
border-radius: 4px;
}
.wp-core-ui .button-primary:hover {
background-color: #006799;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'custom_login_styles');
// Login-Logo URL zur Startseite ändern
function custom_login_logo_url() {
return home_url('/');
}
add_filter('login_headerurl', 'custom_login_logo_url');
// Login-Logo Hover-Text ändern
function custom_login_logo_title() {
return get_bloginfo('name');
}
add_filter('login_headertext', 'custom_login_logo_title');Was dieses Snippet macht
- login_enqueue_scripts – Injiziert benutzerdefiniertes CSS in die Login-Seite
- login_headerurl – Ändert den Logo-Link von wordpress.org zu deiner Startseite
- login_headertext – Ändert den Logo-Hover-Text zu deinem Website-Namen
Hinweis: Ersetze /images/logo.png mit dem tatsächlichen Pfad zu deiner Logo-Datei im Theme-Verzeichnis.