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.

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)
    {
    }
}
PHP - Datei: functions.php

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.'
            )
        );
    }
}
PHP - Datei: functions.php

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
    }
}
PHP - Datei: functions.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']
        );
    }
}
PHP - Datei: functions.php

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;
    }
}
PHP - Datei: functions.php

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');
});
PHP - Datei: functions.php

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

WordPress-Admin-Bereich: Eigenes Widget auswählen

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.

Aktualisierungshistorie:
  • 7. Januar 2013
    ursprüngliche Veröffentlichung in meinem ehemaligen Blog "Smart-Webentwicklung"
Feedback

Für Feedback zum Beitrag, seien es Fragen, Korrigierungen und/oder Anregungen, könnt ihr mir gerne eine Nachricht per E-Mail oder Mastodon schreiben (siehe Kontakt).