Wordpress / Webtools / CSS und HTML ...

Das eigene WordPress Template “ Schritt für Schritt “ Teil 4 “ WP-Theme

Schritt 6 - Widgets/Sidebar

Das Feature “widgets” das vor einigen Versionen eingeführt wurde ist im Bereich Usability ein sehr guter Helfer. Dadurch ist es möglich das Anwender, welche das Theme in ihren Blog verwenden, selbst entscheiden können - welche Elemente in der Sidebar oder im Footer angezeigt werden sollen. Es muss somit nicht für jede Änderung das Theme im Editor angepasst werden, sondern kann einfach über das Menü Element Widgets entsprechend konfiguriert werden. Dazu muss ein Theme aber Widget fähig sein. Folgender Code ist notwendig um zwei Sidebars (Bereiche für Widgets) zu erstellen und muss in die functions.php eingefügt werden:

function own_theme_widgets_init() {

register_sidebar( array(
    'name' => __( 'NameDerSidebar'),
    'id' => 'sidebar-$',
    'before_widget' => '',
    'after_widget' => "",
    'before_title' => '<h3>',
    'after_title' => '</h3>',
) );

register_sidebar( array(
    'name' => __( 'NameDerSidebar2'),
    'id' => 'sidebar-$',
    'description' => __( 'The description, you seet it on widget area in admin area'),
    'before_widget' => '<span id="%1$s">',
    'after_widget' => "</span>",
    'before_title' => '<h3>',
    'after_title' => '</h3>',
) );

}
add_action( ‘widgets_init’, ‘own_theme_widgets_init’ );

Die Methode “add_action()” ist eine Wordpress Methode und sorgt dafür, dass die Sidebars im Adminbereich unter Widgets verwendet werden können. Die Funktion

own_theme_widgets_init

enthält dabei 2 Sidebars, der Name der Funktion kann sich jeder frei überlegen. Wichtig ist nur, das ihr den selben Namen für die add_action Methode verwendet. Die Methode register_sidebar in der Funktion “own_theme_widgets_init” sorgt für die eigentliche Registrierung der Sidebar. Dieser Funktion kann als Parameter ein Array mit den folgenden Werten übergeben werden:

  • name => Name der Sidebar, wird Adminbereich unter Widgets angezeigt
  • id => Die Id der Sidebar, über diese Id wird die Sidebar eingebunden - WICHTIG die ID muss eindeutig sein
  • description => Beschreibung der Sidebar, wird Adminbereich unter Widgets angezeigt
  • before_widget => HTML Code, welcher vor den einzelnen Widgets verwendet werden soll
  • after_widget => HTML Code, welcher nach den einzelnen Widgets verwendet werden soll
  • before_title => HTML Code, welcher vor den Titel der einzelnen Widgets verwendet werden soll
  • after_title => HTML Code, welcher hinter den Titel der einzelnen Widgets verwendet werden soll

Wer mehrere Sidebars auf einmal erzeugen möchte, welche alle das gleiche HTML Gerüst haben sollen - kann einfach register_sidebars() verwenden:

<?php register_sidebars( $number, array(
‘name’ => ‘Sidebar %d’,
‘id’ => ‘sidebar-$i’,
‘description’ => __( ‘The description, you seet it on widget area in admin area’),
‘before_widget’ => ‘‘,
‘after_widget’ => ““,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
) );
?>

$number muss dabei durch die Anzahl der gewünschten Sidebars ersetzt werden. Mit Hilfe von $i, wird automatisch eine Zahl hochgezählt und für jede Sidebar im Attribute id die nächste Nummer verwendet. Beim ersten Beispiel ist somit sidebar-1 und sidebar-2 vorhanden. Die nun vorhandenen Sidebars müssen noch in das Theme eingebaut werden. Der folgenden Code baut die beiden Sidebars vom Anfang des Artikels in das Theme ein, der Ort an dem ihr diesen Code platziert entspricht dem Ort wo die Sidebars angezeigt werden:

<?php if ( is_active_sidebar( ‘sidebar-1’ ) ) :
dynamic_sidebar( ‘sidebar-1’ );
endif; ?>

<?php if ( is_active_sidebar( ‘sidebar-2’ ) ) :
dynamic_sidebar( ‘sidebar-2’ );
endif; ?>

Die Prüfung mit “is_active_sidebar” ist wichtig, falls die gewünschte Sidebar nicht vorhanden ist - wird dadurch kein Fehler auf eurer Webseite geworfen. Eine Prüfung ob die Funktion “dynamic_sidebar” existiert ist nur bei abwärts kompatiblen Themes notwendig, falls dies der Fall sein sollte, erfolgt eine Prüfung mit:

function_exists(‘dynamic_sidebar’)

Wer sich in das Thema vertiefen möchte oder weitere Informatione benötigt, findet auf wordpress.org die richtigen Antworten: