toscho.design

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.

←   →

Web discoveries