WordPress: Eigenes Widget erstellen
Da der Einsatz von Widgets in WordPress sehr beliebt ist, zeige ich euch 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 Beitrag 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 ein Widget zum Anzeigen der Top-Kommentatoren entwickeln.
Teil 16 der Beitragsserie: WordPress ohne Plugins erweitern & optimieren
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 einfachhalber in die functions.php 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 Konstruktor und 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)
{
}
} Der o.a. Code stellt im Normalfall das Grundgerüst eines Widgets dar. Der Klassenname des Widgets lautet in unserem Fall Top_Commentator_Widget. Neben dem Konstruktor (__construct) müssen, wie bereits erwähnt, die in der Basisklasse vordefinierten Methoden überschrieben werden (form, update und widget).
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. 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)
{
return array(
'title' => strip_tags($new_instance['title']),
'day_interval' => (int)$new_instance['day_interval'],
'limit' => (int)$new_instance['limit']
);
}
}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 Beitrag Top-Kommentatoren in WordPress anzeigen zu finden.
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:
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 beliebtesten Artikel erstellen.
- 7. Januar 2013
ursprüngliche Veröffentlichung in meinem ehemaligen Blog "Smart-Webentwicklung"