Widgets in Wordpress Themes einfügen

Die Widgets in eurem Theme reichen euch nicht? Wir zeigen, wie ein Wordpress-Theme mit wenigen Codezeilen weitere Widgets erhält.

Was sind Widgets?

Wordpress bezeichnet Inhaltsblöcke als Widgets. Von Hause aus verfügen das CMS und einige Themes über unterschiedliche Widget-Typen. Die Widgets müssen dabei vom Theme durch so genannte Widget-Bereiche unterstützt werden. Die Widgets selbst verwaltet ihr im Admin-Bereich des CMS.

Jeder Widget-Bereich erhält im Backend eine Art Konfigurationsfläche. In diese zieht ihr die Widgets. Ein solcher Bereich kann dabei mehrere Widgets aufnehmen. Das Sortieren der verwendeten Widgets ist durch Verschieben im Admin-Abschnitt für den jeweiligen Widgetbereich möglich. Programmierkenntnisse sind für die Verwendung von Widgets und Widget-Bereichen nicht nötig. Möchtet ihr eigene Widgetbereiche und Widgets definieren, ist dies je nach gewünschtem Funktionsumfang bereits mit geringem PHP und Wordpress-Know-how möglich.

Eigene Widgets erstellen

Seit der Version 2.8 hält das Blog-CMS zum Erstellen eigener Widgets die Klasse WP_Widget bereit. Das macht die Arbeit vergleichsweise einfach: für simple Widgets reicht bei der Entwicklung die Konzentration auf vier Funktionen. Diese sind die Initialisierung, eine Update-Funktion, das Frontend display und ein Backend-Formular.

Und der nötige Code muss nicht einmal selbst gesponnen werden. Die Wordpress API (http://codex.wordpress.org/Widgets_API) stellt diesen praktisch bereit:

Wir starten dabei mit der Klasse

class My_Custom_Widget extends WP_Widget {

} // class Foo_Widget

In dieses Gerüst fügen wir die genannten Funktionen ein. Wir starten mit dem Konstruktor, der wiederum den Konstruktor des Parent-Elementes aufruft.

/** 
 * Register widget with WordPress.
 */
 function __construct() {
 parent::__construct(
 'my_custom_widget', // Base ID
 __( 'My Widget Title', 'text_domain' ), // Name
 array( 'description' => __( 'My custom Widget', 'text_domain' ), ) // Args
 );
 }

Als nächstes gehört unsere Aufmerksamkeit der Display-Funktion. Diese bestimmt, was das Widget im Frontend – also auf der Webseite - dem Besucher anzeigt. Im Beispiel beschränkt sich die Funktionalität auf die Ausgabe des Textes 'Only a Domainssaubillig Widget Sample!'. Bei entsprechender Programmierung können hier Infos aus der Datenbank abgerufen, aufbereitet und ausgegeben oder auch externe RSS-Feeds eingebunden werden.

/**
 * Front-end display of widget.
 *
 * @see WP_Widget::widget()
 *
 * @param array $args Widget arguments.
 * @param array $instance Saved values from database.
 */
 public function widget( $args, $instance ) {
 echo $args['before_widget'];
 if ( ! empty( $instance['title'] ) ) {
 echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
 }
 echo __( 'Only a Domainssaubillig Widget Sample!', 'text_domain' );
 echo $args['after_widget'];
 }

Mit der Funktion form stellen wir die nötige Funktionalität für das Backend bereit. Anpassungen des Codes sind für einfache Widgets meist nicht nötig.

/**
 * Back-end widget form.
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
 public function form( $instance ) {
 $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
 ?>
 <p>
 <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
 <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
 </p>
 <?php 
 }
?>

Gleiches gilt für die Update-Funktion:

/**
 * Sanitize widget form values as they are saved.
 *
 * @see WP_Widget::update()
 *
 * @param array $new_instance Values just sent to be saved.
 * @param array $old_instance Previously saved values from database.
 *
 * @return array Updated safe values to be saved.
 */
 public function update( $new_instance, $old_instance ) {
 $instance = array();
 $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;
 }

Was zum Schluss noch fehlt ist die Registrierung des Widgets via Widget Init Hook:

// register Foo_Widget widget
function register_my_custom_widget() {
 register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

Source-Code-Quelle: http://codex.wordpress.org/Widgets_API (mit leichten eigenen Anpassungen)

Themes um Widget-Bereiche erweitern

Reichen euch in einem Theme die vorhandenen Widget-Bereiche nicht aus, erweitert ihr diese durch Modifikationen an der functions.php und je nach Bedarf an header.php, footer.php oder sidebar.php.

Tipp zur Arbeit mit Themes: Erweitert ihr Themes, die ihr nicht selbst entwickelt habt, nutzt das Child-Theme Konzept von Wordpress. So ist das Theme bei Updates des Original-Themes weiterhin updatefähig und eure Modifikationen sind leichter zu aktualisieren.

function mythemename_widgets_init() {
 register_sidebar( array(
 'name' => __( 'Custom Widget Area', 'yourthemename' ),
 'id' => 'my-custom-widget',
 'description' => __( 'Custom widget area for my theme', 'yourthemename' ),
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );
}
add_action( 'widgets_init', 'yourthemename_widgets_init' );

Tipp: Passt das HTML der Parameter <code>'before_widget'</code>, <code>'after_widget'</code>, <code>'before_title'</code> und <code>'after_title'</code> an das HTML, das eure bisherigen Theme-Widgets verwendet, an. So vermeidet ihr Darstellungsunterschiede zwischen „original-“ und custom-Widgets.

Wollt ihr euer Theme um mehr als einen Widget-Bereich erweitern, wiederholt ihr den Funktionsaufruf <code>register_sidebar </code> für jedes eurer Widgets. Ihr müsst dabei nur darauf achten, dass jedes Widget eine eigene ID erhält:

function mythemename_widgets_init() {
 register_sidebar( array(
 'name' => __( 'Custom Widget Area', 'yourthemename' ),
 'id' => 'my-custom-widget',
 'description' => __( 'Custom widget area for my theme', 'yourthemename' ),
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );
 register_sidebar( array(
 'name' => __( 'Custom Widget Area', 'yourthemename' ),
 'id' => 'my-custom-widget-2',
 'description' => __( 'Custom widget area 2 for my theme', 'yourthemename' ),
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );
}
add_action( 'widgets_init', 'yourthemename_widgets_init' );

Anschließend fügt ihr den Widget-Bereich in euer Theme ein:

<?php if ( is_active_sidebar( 'my-custom-widget' ) ) : ?>
 <div id="my-custom-widget">
 <?php dynamic_sidebar( 'my-custom-widget' ); ?>
 </div>
<?php endif; ?>
bzw. für den zweiten Widget-Bereich
<?php if ( is_active_sidebar( 'my-custom-widget-2' ) ) : ?>
 <div id="my-custom-widget-2">
 <?php dynamic_sidebar( 'my-custom-widget-2' ); ?>
 </div>
<?php endif; ?>

Dies geschieht an der Stelle, an der im Theme das jeweilige Widget erscheinen soll. Für Header-Widgets ist dies die header.php, für Widgets im Footer die footer.php und für die Sidebar die sidebar.php. Theoretisch könnt ihr den Code fast an beliebiger Stelle einfügen, also auch im Content-Bereich, nur auf Kategorieseiten oder Pages.