Folge Affiliape via: RSS : Facebook : Twitter
1&1 Webhosting
Wordpress Tutorial Banner

WP Tutorial – Ein eigenes WordPress Widget bauen

Veröffentlicht am 20.10.2012 von .

Da ich mich in den letzten Wochen intensiv mit dem Entwickeln von eigenen WordPress Templates beschäftigt habe, möchte ich mein gewonnenes Wissen gerne mit euch teilen. Ich weiß gar nicht mehr wie viele Tutorials zum Thema Widgets, Plugins & Co ich lesen musste um endlich kleine Erfolge feiern zu können… Daher versuche ich mich jetzt mal an einer kleinen Darstellung.

Warum eigene Widgets die Templateerstellung vereinfachen

Widgets sind daher sehr sinnvoll, da sie universell im Blog einsetzbar sind. Überall dort wo eine dynamische Sidebar ausgegeben wird, können die kleinen Helfer Platz finden. WordPress bietet von Haus aus ein paar nette Widgets wie “Letzte Kommentare” oder “Letzte Artikel” an, doch wenn man selbst Einfluss auf die Sidebar nehmen will muss man entweder auf das das unpraktische Textwidget, externe Lösungen oder den Quellcode zurückgreifen. Wenn man jetzt noch die Positionen verändern möchte, ist dies ein schwieriges Unterfangen.

Die Lösung, ein eigenes WordPress Widget basteln. Denn einmal erstellt, kann man es ganz leicht in weiteren Templates einbinden und vor allem auf der eigenen Seite immer mal wieder die Positionen tauschen um den z.B. Erfolg zu testen.

Beispiel: Newsletterformular als Widget deklarieren

In meinem ersten Tutorial möchte ich euch ein ganz einfaches Code-Ausgabe-Widget anhand eines Newsletterformulars zeigen. Den Code, den ich in den folgenden Zeilen benutze ist der Originalcode, den auch ich für mein NL Formular benutze (ein paar persönliche Dinge habe ich rausgenommen). Den Quelltext könnt ihr übrigens für alle Widgets nutzen, die einfach nur html ausgeben sollen.

1. Grundlagen

Der Code für ein neues Widget lässt sich grds in der functions.php einsetzen, die bei jedem Template eigentlich dabei sein sollte. Möchte man das Tool allerdings für weitere Themes benutzen, empfehle ich das Erstellen einer seperaten PHP-Datei (z.B. widget-newsletter.php), die wir dann in der functions.php aufrufen. Keine Angst, das geht über einen einfachen PHP-Befehl.

Als erstes müssen wir eine neue PHP-Schleife öffnen, damit wir mit den Funktionen anfangen können. Für echte Neulinge, das geht mit:

1
2
3
<?php
     HIER KOMMT DER DER GESAMMTE CODE REIN
?>

Im nächsten Schritt teilen wir WordPress mit, dass es ein neues Widget gibt, welches gerne aufgenommen werden möchte. Das lösen wir einfach über folgene Funktion, die natürlich innerhalb der PHP Schleife stehen muss.

1
2
add_action( 'widgets_init', 'register_Widget_Newsletter' );
function register_Widget_Newsletter() {register_widget( 'Widget_Newsletter' );}

Da es sich bei einem Widget um eine sog. PHP-Klasse handelt, müsssen wir auch diesen Bezug herstellen.

1
2
3
class Widget_Newsletter extends WP_Widget {
    HIER KOMMT DER GESAMMTE FOLGENDE CODE REIN
}

Für die weitere Erstellung benötigen wir nun 4 eigenständige Funktionen: Constructor, Widget (was ausgegeben wird), Widget Update und das Widget Formular (Voreinstellungen im Backend).

2. Der Constructor

Hier wird die eigentliche Funktionalität und Name festegelegt und lässt sich relativ simple coden.

1
2
3
function Widget_Newsletter() {
    parent::WP_Widget(false,$name='WI Newsletter');
}

3. Das Widget

Als nächstes müssen wir die eigentliche Ausgabe erstellen, also das, was dann auf der Website ausgegeben wird. Da wir einfach nur eine Ausgabe von HTML Code machen wollen, brauchen wir nur einen Titel, eine Ausgabe und die gängigen “before_ und after_widget” Elemente, die standardmäßig in der Sidebar vordeklariert sind. Diese findet ihr in der “dynamic_sidebar” Funktion in der functions.php.

Hier ist der Code für den gesamten Widget-Block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function widget($args, $instance) {
        extract( $args );
        $instance['title']?NULL:$instance['title']='WI Newsletter';
        $title=apply_filters('widget_title',$instance['title']);
    // Build widget
        $output=$before_widget."\n";
        $output.=$before_title.$title.$after_title;
        $output.='<form action="http://url-musste-ich-entfernen.de" method="post" id="post_signup" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                        Abonniere den Affiliape Infoletter und bleib auf dem neusten Stand.
   
                        <div class="mc-field-group">
                            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" size="24">
                            <label for="mce-EMAIL">Email <small><span class="red bold">*</span> Pflichtfeld</small></label>
                        </div>

                        <div class="mc-field-group">
                            <input type="text" value="" name="FNAME" class="" id="mce-FNAME" size="24">
                            <label for="mce-FNAME">Vorname </label>
                        </div>

                        <div id="mce-responses" class="clear">
                            <div class="response" id="mce-error-response" style="display:none"></div>
                            <div class="response" id="mce-success-response" style="display:none"></div>
                        </div> 

                        <div class="clear"></div>
                       
                        <input type="submit" value="Abonnieren" name="subscribe" id="post_signup_subscribe">

                        <div class="alert" style="margin-top:10px;"><span class="red bold">Ich hasse SPAM!</span> Daher werde ich Deine Daten mit Vorsicht behandeln und niemals an dritte weitergeben!</div>
                   
                    </form>'
."\n";

        $output.=$after_widget."\n";
        echo $output;
    }

4. Widget Update

Damit wir nun im Backend eigene Einstellungen, z.B. für den Titel machen können müssen wir zunächst die Funktionalität sicher stellen. Auch hier ist die Funktion recht überschaubar.

1
2
3
4
5
    function update($new_instance,$old_instance) {
        $instance=$old_instance;
        $instance['title']=strip_tags($new_instance['title']);
        return $instance;
    }

5. Widget Form

Um die gerade gebastelte Funktion nun auch nutzen zu können, brauchen wir das dazugehörige Formular um die Daten zu ändern.

1
2
3
4
5
6
7
8
9
10
11
12
function form($instance) {
        // Default widget settings
        $defaults=array('title'=>__('Recent Comments'));
        $instance=wp_parse_args((array)$instance,$defaults);
        // Build form
        $form='<p>';
        $form.='<label for="'.$this->get_field_id('title').'">Title:</label>';
        $form.='<input class="widefat" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$instance['title'].'" />';
        $form.='</p>';
        // Display form
        echo $form;
    }

Damit wäre die eigentliche Erstellung nun abgeschlossen und können nun die einfache Abfrage in der functions.php einbinden. Hierfür öffnen wir diese und geben folgenden Schnippsel am besten vor dem endenden “?>” ein. Über diesen Schnipsel könnt ihr das Widget dann auch in andere Templates einbauen. Natürlich muss die erstellte .php Datei dann in der Ordnerstruktur des Themes liegen:

1
require_once (TEMPLATEPATH . '/ordner-des-widgets/widget-newsletter.php');

Fertig!

Wenn alles korrekt ist müsste das neue Widget nun im Bereich /Design/Widgets/ auftauchen. Einfach auswählen und wie gewohnt in die Sidebar ziehen.

Download

Die komplette Codevorlage für ein einfaches eigenes HTML Widget findet ihr hier:

Jetzt kostenlos herunterladen.

Ein Abschlusswort

Ich hoffe euch hat das Tutorial zum eigenen WordPress Widget gefallen und ihr konntet in etwa verstehen wie das ganze so funktioniert. Generell ist diese Art für alle einfachen Ausgaben geeignet. Ich selbst nutze es z.B. auch für die SocialMedia Box. Nutzt bitte das Kommentarfeld wenn ihr Fragen dazu habt.

Kategorien: Wordpress, Workshops & Tutorials : Tags: , ,

Abonniere den Affiliape Newsletter und bleibe auf dem neusten Stand.

Ich hasse SPAM! Daher werde ich Deine Daten mit Vorsicht behandeln und niemals an dritte weitergeben!

Was sagst Du dazu?

(Pflichtfeld)

(Pflichfeld, bekommt aber niemand zu sehen)