dynamicinternet Webdesign

Das Blog

Themen, Tutorials sowie Tipps & Tricks über Webdesign, (X)HTML und CSS, Programmierung, WordPress und was uns sonst noch bewegt.

RSS abonnieren

WordPress 2.8 Widget erstellen

Eine der wichtigsten Neuerungen in WordPress 2.8 ist die neue Widget API. Diese API ist komplett objektorientiert und stellt dem Programmierer alle nötigen Funktionen für die Erstellung von WordPress Widgets zur Verfügung. Ebenso erlaubt sie nun eine Mehrfachnutzung jedes Widgets.

Zu finden ist die Widget API in wp-includes/widget.php und die Widgtes selbst in wp-includes/default-widgets.php. Die Klasse WP_Widget stellt die Funtionalität für die Widgets her und muß von jeden Widget vererbt werden. Die Klasse WP_Widget_Factory ist für die Registrierung und Instanzierung der Widgets zuständig.

Wie erstellt man ein Widget in WordPress 2.8?

Es soll ein einfaches Beispiel sein und wird die Links für das RSS Feed der Artikel und der Kommentare ausgeben. In der functions.php erstellen wir zuerst das Gerüst unseres Widgets:

class My_RSS_Widget extends WP_Widget {
	function My_RSS_Widget() {
		//Konstruktor
	}
 
	function widget($args, $instance) {
		// Ausgabefunktion
	}
 
	function update($new_instance, $old_instance) {
		//Speichern des Widgets
	}
 
	function form($instance) {
		//Widgetform im Backend
	}
}
register_widget('My_RSS_Widget');

Wir haben eine Klasse My_RSS_Widget erstellt, die von der Klasse WP_Widget Eigenschaften und Methoden erbt (extends). In einem neuen Widget sind die Methoden widget und update immer anzulegen, form ist optional. Mit register_widget(‘My_RSS_Widget’) wird das Widget registriert. Füllen wir unser Widget mit Leben.

class My_RSS_Widget extends WP_Widget {
	function My_RSS_Widget() {
		$widget_ops = array('classname' => 'widget_rss_links', 'description' => 'A list with your feeds links' );
		$this->WP_Widget('rss_links', 'Feed links', $widget_ops);
	}
 
	function widget($args, $instance) {
		extract($args, EXTR_SKIP);
 
		echo $before_widget;
		$title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
		$entry_title = empty($instance['entry_title']) ? ' ' : apply_filters('widget_entry_title', $instance['entry_title']);
		$comments_title = empty($instance['comments_title']) ? ' ' : apply_filters('widget_comments_title', $instance['comments_title']);
 
		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
		echo '<ul id="rss">';
		echo '  <li><a href=" ' . get_bloginfo('rss2_url') . '" rel="nofollow" title=" ' . $entry_title . ' ">' . $entry_title . '</a></li>';
		echo '  <li><a href=" ' . get_bloginfo('comments_rss2_url') . '" rel="nofollow" title="  '. $comments_title . ' ">' . $comments_title . '</a></li>';
		echo '</ul>';
		echo $after_widget;
	}
 
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['entry_title'] = strip_tags($new_instance['entry_title']);
		$instance['comments_title'] = strip_tags($new_instance['comments_title']);
 
		return $instance;
	}
 
	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'entry_title' => '', 'comments_title' => '' ) );
		$title = strip_tags($instance['title']);
		$entry_title = strip_tags($instance['entry_title']);
		$comments_title = strip_tags($instance['comments_title']);
?>
			<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
			<p><label for="<?php echo $this->get_field_id('entry_title'); ?>">Title for entry feed: <input class="widefat" id="<?php echo $this->get_field_id('entry_title'); ?>" name="<?php echo $this->get_field_name('entry_title'); ?>" type="text" value="<?php echo attribute_escape($entry_title); ?>" /></label></p>
			<p><label for="<?php echo $this->get_field_id('comments_title'); ?>">Title for comments feed: <input class="widefat" id="<?php echo $this->get_field_id('comments_title'); ?>" name="<?php echo $this->get_field_name('comments_title'); ?>" type="text" value="<?php echo attribute_escape($comments_title); ?>" /></label></p>
<?php
	}
}
register_widget('My_RSS_Widget');

RSS Widget Backened

Der Code ist eigentlich selbsterklärend. Die Funktion widget ist für die Ausgabe im Frontend zuständig, update prüft die Daten und speichert eine Instanz des Widgets und form erstellt im Backend die Eingabemaske, in unserem Fall für den Titeldes Widgets und den auzuzeigenden Linktext.

WordPress 2.8 Widget

So und nun eigene Ideen umsetzten!

8 Kommentare
  1. thomas57 sagt:

    hallo,
    eine kurze frage sei erlaubt,
    bei der function der class sind kommas enthalten, ist das so richtig oder sollte dort nicht ein punkt stehen?
    Gruß aus dem norden von
    thomas

  2. Micha sagt:

    Ist alles richtig so. Wo meinst du genau?

  3. thomas57 sagt:

    Hier;
    /*$widget_ops = array(‘classname’ => ‘widget_rss_links’, ‘description’ => ‘A list with your feeds links’ );
    $this->WP_Widget(‘rss_links’, ‘Feed links’, $widget_ops);*/

    Bei mir kommen folgende Fehlermeldungen;
    Parse error: syntax error, unexpected T_VARIABLE, expecting ‘,’ or ‘;’ in /www/wp-content/themes/PRiNZ_BranfordMagazine_latest/branfordmagazine/functions.php on line 61

    Parse error: syntax error, unexpected T_DOUBLE_ARROW, expecting ‘)’ in /www/wp-content/themes/PRiNZ_BranfordMagazine_latest/branfordmagazine/functions.php on line 47

    Arbeite mit wp2.7
    Gehe jetzt erst einmal Brötchen verdienen, falls meine Antwort länger dauert. Vielen Dank noch für Deine Geduld.
    Gruß aus dem Norden von
    Thomas

  4. Micha sagt:

    thomas, in der Überschrift steht riesengroß Version 2.8. Wp 2.7 kennt die Klassen garnicht.

  5. thomas57 sagt:

    Na klasse, Brille aufsetzen und erstmal lesen. Danke für Deinen Hinweis an einen Depp.
    gruß aus dem Norden von
    einem (esel)

  6. Ben sagt:

    Also bei mir meckert er in der widget function wegen dem wp vor $entry_title (Zeile 17).

    Sollte das einen Sinn haben? Löscht man das wp funktioniert alles wunderbar.

    Vielen Dank für die schöne Widgetanleitung.

    Gruß
    Ben

  7. Micha sagt:

    Danke Ben, da hatte sich der Fehlerteufel eingeschlichen. Das wp hat dort wirklich nichts zu suchen. Ich habs korrigiert.

  8. Fred sagt:

    Hi,
    vielen Dank für das super Tutorial hat mir echt weitergeholfen!!! Weiter so!!!

2 Pingbacks
  1. WordPress Standard Widgets deaktivieren – bueltge.de [by:ltge.de]
  2. WP-Standard-Widgets pimpen | realloc's asylum
Einen Kommentar schreiben