Eigenes Wordpress Widget entwickeln

Die Blogsoftware WordPress wird längst nicht mehr nur für Blogs eingesetzt. Ihre modulare Architektur, sowie die zahlreichen Erweiterungsmöglichkeiten haben sicherlich zum Erfolg von WordPress beigetragen. Besonders praktisch sind die sogenannten „Widgets“, kleine Applikationen, die in den Sidebar integriert werden können. WordPress bringt von Haus aus schon einige Widgets mitsich und es gibt auch eine Menge fertige Plugins, die einfach installiert werden können um den Funktionsumfang zu erweitern, ohne in den Code eingreifen zu müssen. Doch manchmal sind eben etwas speziellere Wünsche gefragt, weshalb man sein eigenes Widget entwickeln muss. Doch wie geht das?

Wenn man das Prinzip verstanden hat, ist es eigentlich ganz einfach ein eigenes WordPress Widget zu entwickeln. Ich will Ihnen hier Schritt für Schritt zeigen, wie das geht.

Als erstes legen Sie einfach im Ordner „/wp-content/plugins“ Ihrer WordPress Installation eine PHP-Datei an, die einen aussagekräftigen Namen trägt. In diese PHP-Datei schreiben Sie am besten erstmal ein paar Kommentare, die den Namen des Plugins, Ihren Namen, sowie eine kleine Beschreibung enthalten.

< ?php

/*
Plugin Name: Name des Widgets
Plugin URI: http://www.IHREDOMAIN.de
Description: Eine kleine Beschreibung was dieses Widget bewirkt
Version: 1.0
Author: Ihr Name
Author URI: http://www.IHRPROFIL.de
*/

Danach folgt der Konstruktor, welcher die WP_Widget Klasse erweitert.

class CategoryWidget extends WP_Widget {
/** Konstruktor */
function CategoryWidget() {
parent::WP_Widget(false, $name = 'CategoryWidget');
}

Nun kommt die Frontend Ausgabe:

/** Frontend Ausgabe */
function widget($args, $instance) {
extract( $args );
$title = apply_filters('widget_title', $instance['title']);
$category = $instance['category'];
?>
< ?php echo $before_widget; ?>
< ?php if ($title)
echo $before_title . $title . $after_title;
global $post;
$latest_events = get_posts('category_name='.$instance['category'].'&amp;amp;amp;showposts=2');
foreach($latest_events as $post) : setup_postdata($post);
?>

< ?php the_post_thumbnail(array( 180,250 ), array( 'class' => 'alignleft' )); ?>

< ?php the_title(); ?>

< ?php endforeach;
echo $after_widget; ?>
< ?php
}

In diesem simplen Beispiel wird der Titel des Widgets ausgegeben. Dem folgt die Überschrift und ein Vorschaubild des letzten Blogeintrags einer zuvor im Backend festgelegten Kategorie. Die Thumbnail-Funktionalität gibt es erst seit der WordPress Version 2.9.1. Sie wird aktiviert, indem man der Datei functions.php folgenden Code hinzufügt:

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Diese Funktion sorgt dafür, dass die Daten, welche Sie im Backend eintragen auch gespeichert werden:

< ?php
}

/** Update bzw. speichern der Daten */
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['category'] = strip_tags($new_instance['category']);
return $instance;
}

Nun zum Backend Eintrag:

/** Backend Formular */
function form($instance) {
$title = esc_attr($instance['title']);
$category = esc_attr($instance['category']);
?>


< ?php _e('Title:'); ?>


< ?php _e('Category:'); ?>

< ?php
}

} // class CategoryWidget

Diese Funktion stellt die grafische Oberfläche für das Backend zur Verfügung. Sie besteht eigentlich nur aus zwei Eingabefeldern, eines für den Titel der in der Sidebar angezeigt werden soll und eines für die Kategorie, aus welcher die Blogeinträge angezeigt werden sollen.

Zu guterletzt müssen die Frontend- sowie die Backend-Funktionen noch registriert werden. Dies erfolgt über folgenden Code:

// register CategoryWidget widget
add_action('widgets_init', create_function('', 'return register_widget("CategoryWidget");'));

?>

In diesem Bereich können Sie auch einen Namen und eine Beschreibung für Ihr neues Widget eingeben, welche dann im Backend angezeigt werden. In diesem Fall ist das „CategoryWidget“ und „Zeigt die Posts aus einer speziellen Kategorie an“. Und fertig ist Ihr erstes eigenes Widget.