Hintergrundgrafiken für Widgets

wp_logoFür jedes Widget in der Sidebar die gleichen Hintergrundbilder mit dynamischer Länge. Damit sehen in Wordpress die Widgets optisch alle gleich aus. Dies lässt sich auf einfache weise durchführen. Hierzu einige Beispiele.

 

Im folgenden Beispiel wird als erstes eine Grafik benötigt die sich nach unten wiederholt. Die Breite ist vom Theme abhängig. Die Höhe sollte so klein wie möglich gehalten werden.

 

Beispiel: Registrierung der Sidebar in der functions.php

register_sidebar( array( 
'name' => __( 'Primary Widget Area', 'twentyten' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'twentyten' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

 

Im Twentyten Theme von Wordpress ist unter “before_widget” eine Klasse “widget-container” vergeben. Bei anderen Themes, die diese Definition nicht haben, muss der Array “before_widget” und “after_widget” eingefügt werden.

 

Nun kann die Hintergrundgrafik in die CSS-Datei eingefügt werden.

 

Beispiel: Twentyten “style.css”

.widget-container { 
    background: url ("image/widget-hintergrund.jpg") repeat-y;
    margin: 0 0 18px 0;
}

Das Hintergrundbild wurde mit “repeat-y” eingefügt und wird dadurch auf die ganze Höhe des Widgets wiederholt.

Mit “margin” wird ein Abstand zu nächsten Widget gesetzt.

 

Widgets mit drei Grafiken

Oben und unten feste Grafiken und in der Mitte eine Grafik die sich wiederholt.

 

Die Registrierung in der functions.php wird erweitert.

'before_widget' => '<span class="widget-top"></span><li id="%1$s" class="widget-container %2$s">', 
'after_widget' => '</li><span class="widget-bottom"></span>',

Hier wird vor und nach dem Widget ein “<span>” vergeben.

 

Jetzt können die drei Bilder in der CSS-Datei eingefügt werden.

 

Die Definition in der “style.css”

Die Klassen “widget-top” und “widget-bottom” werden hinzugefügt.

.widget-top { 
    background: url ("image/widget-top.jpg") no-repeat;
}
.widget-container {
    background: url ("image/widget-hintergrund.jpg") repeat-y;
}
.widget-bottom {
    background: url ("image/widget-bottom.jpg") no-repeat;
    margin: 0 0 18px 0;
}

Der “margin”-Wert wird jetzt in den “widget-bottom” verschoben.

 

 

Weitere Informationen:

Sidebar oder Footer-Widgets erstellen.

Unterschiedliche Sidebars.

Unterschiedliches Aussehen der Artikel auf der Startseite.

Header gestalten in Wordpress.

Navigationsmenü einbauen in Wordpress Themes.