smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress: Eigenes Widget erstellen

7. Januar 2013
Stephan
WordPress: Eigenes Widget erstellen

Da der Einsatz von Widgets in WordPress sehr beliebt ist, zeige ich heute, wie ihr ein eigenes Widget für euren WordPress Blog erstellen könnt.

Für die Erstellung von Widgets können wir die von WordPress bereitgestellte Widgets API verwenden.

In einem anderen Artikel hatte ich euch bereits vorgestellt, wie ihr die Top-Kommentatoren in WordPress ohne Plugin anzeigen könnt.

Auf Basis des dort vorgestellten Codes, werden wir nun ein Widget zum Anzeigen der Top-Kommentatoren entwickeln.

Grundaufbau eines Widgets

Vorab sei erwähnt, dass ein Widget im Grunde nichts weiter als ein Plugin ist. Da wir das Widget aber nicht veröffentlichen wollen, fügen wir den Code in die functions.php-Datei unseres Themes ein.

Für ein eigenes Widget erstellen wir uns eine eigene Widget-Klasse. Diese Klasse erbt von der WP_Widget-Klasse und wir überschreiben hierbei 3 Methoden:

class Top_Commentator_Widget extends WP_Widget 
{
	public function __construct() 
	{
	}

 	public function form($instance) 
	{
	}

	public function update($new_instance, $old_instance) 
	{
	}

	public function widget($args, $instance) 
	{
	}
}

So sieht im Normalfall das Grundgerüst für ein Widget aus. In unserem Fall heißt das Widget Top_Commentator_Widget. Wie erwähnt wollen wir 3 Methoden der Basisklasse – form, update und widget – überschreiben. Außerdem haben wir noch einen Konstruktor (__construct) mit hinzugefügt.

ID, Name und Beschreibung des Widgets definieren

Im Konstruktor können wir nun die Widget-ID, den Namen und die Beschreibung des Widgets festlegen. Name als auch Beschreibung werden im Admin-Bereich für das Widget angezeigt.

class Top_Commentator_Widget extends WP_Widget 
{
	public function __construct() 
	{
		parent::__construct(
			'top_commentator_widget',
			'Top Commentator Widget',
			array(
				'description' => 'Die Top-Kommentatoren deines Blogs anzeigen.'
			)
	    );
	}
}

Wir rufen im Konstruktor den Konstruktor der Basisklasse auf. Dabei übergeben wir als erstes die Widget-ID, dann den Namen und innerhalb eines Arrays die Beschreibung.

Widget-Formular für Admin-Bereich

Als nächstes benötigen wir ein Formular. Das Formular soll uns dazu dienen, einen Titel für das Widget anzugeben. Weiterhin möchten wir für das Widget angeben können, wie viele Top-Kommentatoren angezeigt werden und wie viele der letzten x Tage berücksichtigt werden sollen.

Dazu passen wir nun die form-Methode wie folgt an:

class Top_Commentator_Widget extends WP_Widget 
{
        // Konstruktor

 	public function form($instance) 
	{
		$defaults = array(
			'title' => '',
			'day_interval' => '30', 
			'limit' => '5'
	    );
	    $instance = wp_parse_args((array)$instance, $defaults);

	    $title = $instance['title'];
	    $day_interval = $instance['day_interval'];
	    $limit = $instance['limit'];
	    ?>
		<p>
			<label for="<?php echo $this->get_field_id('title'); ?>"><?php echo 'Titel:'; ?></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>
		<p>
			<label for="<?php echo $this->get_field_id('day_interval'); ?>"><?php echo 'Tage:'; ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id('day_interval'); ?>" name="<?php echo $this->get_field_name('day_interval'); ?>" type="text" value="<?php echo esc_attr($day_interval); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('limit'); ?>"><?php echo 'Anzahl:'; ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" type="text" value="<?php echo esc_attr($limit); ?>" />
		</p>
		<?php
	}
}

Zum Anfang definieren wir die Standardeinstellungen ($defaults) für unser Widget (Zeile 7 – 11). Anschließend mergen wir die Einstellungen, die in $instance gekapselt sind mit den Standardeinstellungen.

Die letzten Zeilen dienen dem Anzeigen des Formulars.

Einstellungen des Widgets speichern

Damit unsere Formulardaten und somit die Widget-Einstellungen auch gespeichert werden, muss die update-Methode angepasst werden:

class Top_Commentator_Widget extends WP_Widget 
{
        // Konstruktor, form

 	public function update($new_instance, $old_instance) 
	{
		$instance = array();
		
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['day_interval'] = (int)$new_instance['day_interval'];
		$instance['limit'] = (int)$new_instance['limit'];

		return $instance;
	}
}

Hier erzeugen wir uns ein Array und fügen unsere Einstellungen, die gespeichert werden sollen, hinzu.

Frontend-Ansicht

Zum Schluss muss nur noch die Frontend-Ansicht erstellt werden. Dazu wird der folgende Code in die widget-Methode eingefügt:

class Top_Commentator_Widget extends WP_Widget 
{
        // Konstruktor, form, update

 	public function widget($args, $instance) 
	{
		extract($args);
		$title = apply_filters('widget_title', $instance['title']);
		$day_interval = $instance['day_interval'];
		$limit = $instance['limit'];

		echo $before_widget;
		
		if(!empty($title))
		{
			echo $before_title . $title . $after_title;
		}
		
		global $wpdb;

		$results = $wpdb->get_results('
			SELECT
				COUNT(comment_author_email) AS comments_count, 
				comment_author, 
				comment_author_url
			FROM
				'.$wpdb->comments.'
			WHERE
				comment_author_email != ""
				AND user_id != 1
				AND comment_type = "" 
				AND comment_approved = 1 
				AND comment_date >= DATE_SUB(CURDATE(), INTERVAL '.$day_interval.' DAY)
			GROUP BY
				comment_author_email
			ORDER BY
				comments_count DESC, 
				comment_author ASC
			LIMIT '.$limit.'
		');

		$output = '<ul>';
		
		foreach($results as $row)
		{
			$url = $row->comment_author_url;
			$title = $row->comment_author;
			$text = $row->comment_author;
			$output .= '<li>';
			$output .= '<a href="'.$url.'" title="'.$title.'">';
			$output .= $text.'</a>';
			$output .= '('.$row->comments_count.')';
			$output .= '</li>';
		}
		echo $output . '</ul>';
		
		echo $after_widget;
	}
}

Eine ausführliche Erklärung des Code der sich zwischen Zeile 19 – 55 befindet, ist im bereits erwähnten Artikel „Top-Kommentatoren in WordPress anzeigen (ohne Plugin)“ zu finden.

Der Rest des Codes ist denke ich leicht zu verstehen. Falls ihr dennoch Fragen haben solltet, hinterlasst mir einfach ein Kommentar.

Widget registrieren

Zuguterletzt müssen wir unser Widget noch registrieren, damit es im Admin-Bereich auch angezeigt wird. Dazu fügen wir noch folgenden Code unterhalb unserer Top_Commentator_Widget-Klasse:

add_action('widgets_init', function()
{
     return register_widget('Top_Commentator_Widget');
});

Anschließend können wir im Admin-Bereich unser Widget verwenden:

WordPress Widget: Top-Kommentatoren

Fazit

Dank der Widgets API von WordPress ist es sehr leicht ein eigenes Widget zu erstellen. Ihr könntet also auch beispielsweise ein Widget zum Anzeigen der beliebesten Artikel erstellen.

Welche Widgets verwendet ihr denn gerne? Habt ihr selbst schon mal ein Widget entwickelt?

Kommentare  
5 Kommentare vorhanden
1 Viktor schrieb am 13. Januar 2013 um 14:17 Uhr

Hallo Stephan,
wie immer ein guter Tutorial ohne Fachchinesische Begriffe. Danke
MfG
Viktor

2 Stephan L. schrieb am 14. Januar 2013 um 15:00 Uhr

Hey Viktor,

danke dir, dass hört man gerne. 😉

Ich versuche auch immer alles so zu erklären, dass auch Laien/Anfänger damit (einigermaßen) zu recht kommen. Das klappt bei manchen Artikeln besser als bei anderen. Falls es dennoch mal offene Fragen gibt, dann schreibt mir einfach ein Kommentar oder eine Mail.

Grüße Stephan

3 Thommy schrieb am 12. Mai 2013 um 15:00 Uhr

danke!
sehr gut erklärt. weiter so

4 Andy schrieb am 1. August 2015 um 13:32 Uhr

Danke für die Anleitung, jetzt kann ich auch ein Widget für meinen Blog erstellen.

Grüße Andy

5 Benny schrieb am 27. Januar 2016 um 10:51 Uhr

Hi Stephan,

weist du wie man Widgets in dem Plugin Page Builder by SiteOrigin erstellen kann. ? Ich bin Anwendungsentwickler aber in sachen WordPress der totale Anfänger.

Es dürfe auch Fachbegriffe benutzt werden 🙂

vielen Dank im Vorraus

Benny

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!