Fü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.
Unterschiedliches Aussehen der Artikel auf der Startseite.