Blog

Widgets in WordPress – Wie erstelle ich mein eigenes?


Kurze Anleitung zum Erstellen eines WordPress Widgets

In dieser Anleitung erstellen wir ein WordPress Widget, ohne besondere Fähigkeiten. Ihr könnt dann jedes x-beliebige Widget daraus konstruieren.

Der komplette Code kommt in die functions.php hinein.

Zuerst erstellen wir eine neue Klasse.

class yourWidgetName_widget extends WP_Widget {

Als nächstes melden wir unser Widget bei WordPress an. Das sorgt dafür, dass wir es später auch im Backend finden.

public function __construct() {
        parent::__construct(
                'yourWidgetName-widget', // Base ID
                'yourWidgetName Widget', // Name
                array('description' => __('yourWidgetName Widget'),) // Args
        );
    }

In der “describtion” könnt Ihr auch einen etwas längeren Text verfassen., der den Sinn eures Widgets genau erklärt. Das kann sehr sinnvoll sein, wenn ihr die Webseite komplett an einen Kunden ausliefert. Das ersparrt spätere Nachfragen, wo, was, wie funktioniert:-)

Kommen wir zum wichtigsten Teil, dem Content:

function widget($args, $instance) {
        extract($args);

        /* Display Widget */
        ?>
        <div class="sidebar_widget">

           <!-- Your Content goes here -->

        </div>

        <?php

    }

Hier könnt ihr euch austoben. Ob Links, beliebteste Posts, oder statischer Contant. Hier ist das Herzstück des WordPress Widgets!

Was noch fehlt sind Settings, wie zum Beispiel das Ändern des Titles im WordPressbackend und das Speichern der Änderungen.

function update($new_instance, $old_instance) {

        $instance = $old_instance;

        /* Strip tags to remove HTML (important for text inputs). */
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['number'] = strip_tags($new_instance['number']);

        /* No need to strip tags for.. */

        return $instance;
    }

    function form($instance) {

        /* Set up some default widget settings. */
        $defaults = array(
            'title' => 'Title'
        );
        $instance = wp_parse_args((array) $instance, $defaults);
        ?>

        <!-- Title: Text Input -->
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Title:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
        </p>

        <!-- more Settings goes here! -->

        <?php
    }

Bei “More Settings goes here!” könnt ihr beispielsweise noch verschiedene Variablen definieren, die Ihr dann bei der Ausgabe des Widgets verwenden könnt. So könnt ihr später schnell im WordPressbackend Kleinigkeiten ändern. Denkt daran auch einen Defaultwert für die neue Varable einzurichten. Das passiert ein paar Zeilen höher!

Zu guter letzt, lassen wir unser Widget noch anzeigen.

add_action('widgets_init', create_function('', 'register_widget( "yourWidgetName_widget" );'));

Und alles zusammen:

// WordPress Widget
class yourWidgetName_widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
                'yourWidgetName-widget', // Base ID
                'yourWidgetName Widget', // Name
                array('description' => __('yourWidgetName Widget'),) // Args
        );
    }

    function widget($args, $instance) {
        extract($args);

        /* Display Widget */
        ?>
        <div class="sidebar_widget">

           <!-- Your Content goes here -->

        </div>

        <?php

    }

    function update($new_instance, $old_instance) {

        $instance = $old_instance;

        /* Strip tags to remove HTML (important for text inputs). */
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['number'] = strip_tags($new_instance['number']);

        /* No need to strip tags for.. */

        return $instance;
    }

    function form($instance) {

        /* Set up some default widget settings. */
        $defaults = array(
            'title' => 'Title'
        );
        $instance = wp_parse_args((array) $instance, $defaults);
        ?>

        <!-- Title: Text Input -->
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Title:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
        </p>

        <!-- more Settings goes here! -->

        <?php
    }

}

add_action('widgets_init', create_function('', 'register_widget( "adsense_widget" );'));

Voilá, fertig sind wir schon! Das können wir zum Beispiel verwenden um Werbung einzubinden!

Du magst den Post?
Loading...Loading...

Blog