WordPress: Custom Background für wp-login.php
28.08.2012 in: CSS, Webdesign und WordPress
Viele Themes unterstützen heute die nativen Funktionen für einen angepassten Hintergrund. Dazu braucht das Theme nur eine Zeile in der Setup-Funktion:
add_theme_support( 'custom-background'
);
Man kann noch ein paar Parameter übergeben. Die kann man auch weglassen; die Voreinstellungen sind schon recht gut.
Wenige Themes verwenden diesen Hintergrund für die Login-Seite (wp-login.php
). Schade, denn hier kann man mit wenig Aufwand für Konsistenz sorgen.
Benutzt man die Standardfunktion _custom_background_cb()
für die Ausgabe des Hintergrundes, so stolpert man über ein kleines Problem: Sie benutzt als einzigen Selektor body.custom-background
. Dafür gibt es keinen Filter, und in der wp-login.php
wird diese Klasse nicht gesetzt. Ich habe heute ein Ticket und einen Patch dazu erstellt. Mal sehen, was daraus wird.
Obendrein kann man mit der Standardfunktion body_class()
nicht im Element html
benutzen … was ansonsten ja recht praktisch wäre.
Also nehmen wir eine modifizierte Variante der Standardfunktion ins Theme:
/** * Creates custom background styles for 'body' and 'html' and for login body. * * @return void */ function t5_custom_background_frontend() { $background = get_background_image(); $color = $color = get_theme_mod('background_color'
); if ( ! $background && ! $color ) return; $style = $color ?"background-color:#$color;"
:''
; if ( $background ) { $image ="background-image:url('$background');"
; $repeat = get_theme_mod('background_repeat'
,'repeat'
); if ( ! in_array( $repeat, array('no-repeat'
,'repeat-x'
,'repeat-y'
,'repeat'
) ) ) $repeat ='repeat'
; $repeat ="background-repeat: $repeat;"
; $position = get_theme_mod('background_position_x'
,'left'
); if ( ! in_array( $position, array('center'
,'right'
,'left'
) ) ) $position ='left'
; $position ="background-position:top $position;"
; $attachment = get_theme_mod('background_attachment'
,'scroll'
); if ( ! in_array( $attachment, array('fixed'
,'scroll'
) ) ) $attachment ='scroll'
; $attachment ="background-attachment:$attachment;"
; $style .= trim( $image . $repeat . $position . $attachment ); } ?> <style>body.login,html.custom-background,body.custom-background {<?php echo $style; ?>}</style> <?php }
Diese Funktion setzen wir als Callback für den normalen Hintergrund ein …
$bg_options = array ('wp-head-callback'
=>'t5_custom_background_frontend'
,'default-color'
=>'f0f0f0'
,'default-image'
=>''
, ); add_theme_support('custom-background'
, $bg_options );
… und wir hängen sie auch in die Login-Seite:
add_action('login_head'
, $bg_options['wp-head-callback'
] );
Fertig. Man kann die Loginseite noch deutlich mehr gestalten; das sehen wir uns ein andermal an.