WordPress – Eigene Widgets programmieren

4

Seit Version 2.3 bietet WordPress sogenannte Widgets. Diese erlauben eine einfache Anpassung der Inhalte in einem Theme. Die meisten Themes verfügen über vordefinierte Widget-Bereiche, zum Beispiel in der Sidebar oder im Footer. Im WordPress-Backend kann jedem Bereich eine beliebige Anzahl an Widgets hinzugefügt werden. Im Folgenden möchte ich beschreiben, wie man eigene Widgets programmieren und diese in das bestehende Theme integrieren kann.

Bevor man mit der Programmierung beginnt, sollte man sich zunächst darüber im Klaren sein, was man in diesem Widget anzeigen möchte. In meinem Fall möchte ich ein Widget erstellen, in dem die neuesten Artikel in der Form angezeigt werden, wie man es rechts in der Sidebar erkennen kann.

1) Aufbau eines Widgets

Erstellt werden kann ein Widget in der Datei functions.php des aktuellen Themes. Bevor man sich um den Inhalt des Widgets kümmert, sollte man den strukturellen Aufbau eines Widgets verstanden haben. Ein Widget ist eine Klasse aus verschiedenen Funktionen, die unterschiedliche Aufgaben übernehmen. Die erste Funktion im folgenden Listing dient zur Definition der Widget-Eigenschaften, wie zum Beispiel dessen Name und Beschreibung. Darauf folgt eine Funktion, die für die Ausgabe der Inhalte im Frontend zuständig ist. Daran schließt die Funktion an, die aufgerufen wird, wenn man die Widget-Einstellungen im Backend speichert. Und zu guter Letzt sorgt eine Funktion für die Definition der möglichen Widget-Eigenschaften im Backend.

<?php

//Widget für das Anzeigen der neuesten Artikel
class LB_recent_posts_widget extends WP_Widget {

	function LB_recent_posts_widget() {

            //Eigenschaften des Widgets festlegen
	}

	function widget($args, $instance) {

		// Ausgabefunktion für das Widget

	}

	function update($new_instance, $old_instance) {
             
            //Speichern der Widget-Einstellungen

	}

	function form($instance) {

		//Formular für die Widget-Optionen im Backend

	}
}
register_widget('LB_recent_posts_widget');

?>

Im nachfolgenden Abschnitt möchte ich die einzelnen Funktionen näher betrachten und deren Funktion erläutern.

1.1) Grundlegende Eigenschaften des Widgets

Die erste Funktion mit dem Namen LB_recent_posts_widget() übernimmt in meinem Beispiel die Registrierung des Widgets mithilfe der Klasse WP_Widget(). Dort wird sowohl der Name festgelegt (“LB – Recent Posts”), als auch eine Beschreibung erstellt, die später in der Widget-Übersicht im Admin-Bereich angezeigt wird.

function LB_recent_posts_widget() {
	$wp_options = array('description' => __('This Widget displays your most recent posts.', 'lbprojects'));
	parent::WP_Widget(false, $name = __('LB - Recent Posts', 'lbprojects'), $wp_options);
}

1.2) Ausgabefunktion des Widgets

Im nächsten Schritt wird innerhalb der Funktion widget() die Ausgabe der Inhalte des Widgets im Frontend festgelegt. Hierzu werden zunächst die an das Argument $args übergebenen Werte, wie zum Beispiel die Titel der neuesten Artikel, extrahiert und stehen damit zur weiteren Verwendung zur Verfügung.
In einem <div>-Container mit der id recent-posts wird zunächst eine im Argument $instance festgelegte Anzahl an Artikeln ausgelesen, deren Titel und Veröffentlichungsdatum im drauffolgenden Abschnitt innerhalb einer ungeordneten Liste ausgegeben werden.

function widget($args, $instance) {
	extract( $args );
	$title = apply_filters('widget_title', $instance['title']);	
			
	echo '<div id="recent-posts">';

	$last_posts = wp_get_recent_posts( array( 'numberposts' => $instance['count'], 'post_status' => 'publish' ) ); 

	if ( $title ) echo '<h2 id="news-title">' . $title . '</h2>';

		echo '<ul>';
			foreach($last_posts as $cur_post) {
				echo '<a href="' . home_url() . '/?p=' . $cur_post['ID'] . '" title="' . $cur_post['post_title'] . '">';
				echo '<li>';
					echo '<small class="recent-post-date">(' . get_the_time('d. M', $cur_post['ID']) . ')</small>';
					echo '<div class="recentpost-content">' . $cur_post['post_title'] . '</div>';					
				echo '</li>';
				echo '</a>';
			} 
		echo '</ul>';

	echo '</div>';
}

1.3) Speicherfunktion des Widgets

Die nachstehende Funktion update() legt fest, was passiert, wenn man im Backend die Einstellungen für das Widget speichert. In meinem Beispiel werden der Variable $instance die im Backend eingegeben Werte, wie zum Beispiel die Anzahl der zu zeigenden Artikel count oder der Titel title, übergeben.

function update($new_instance, $old_instance) {               

	$instance = $old_instance;

	$instance['title'] = strip_tags( $new_instance['title'] );
	$instance['count'] = strip_tags( $new_instance['count'] );

	return $instance;
}

1.4) Optionen des Widgets im Backend

Im letzten Arbeitsschritt werden die im Backend zur Verfügung stehenden Optionen eines Widgets festgelegt. Dies geschieht innerhalb eines einfachen Formulars. Im Falle meines Widgets, sollen der Titel des Widgets und die Anzahl der zu zeigenden Artikel verändert werden können. Dazu werden je ein label und ein Eingabefeld für Text benötigt. Dem Wert value des Feldes wird schließlich die Eingabe des Nutzers zugewiesen und steht zur weiteren Verarbeitung in den oben stehenden Funktionen zur Verfügung. Gleiches gilt für die Anzahl der Artikel.
Die zu Beginn festgelegte Variable $default_settings enthält Standardwerte für die beiden Eingabefelder, die dann verwendet werden, wenn der Nutzer keine eigenen Werte für den Titel und die Anzahl eingibt.

function form($instance) {
	$default_settings = array( 'title' => __('Recent Posts', 'lbprojects'), 'count' => '12' );
	$instance = wp_parse_args( (array) $instance, $default_settings ); 

	echo '<p>';
		echo '<label for="' . $this->get_field_id( 'title' ) . '">' . __('Title:', 'lbprojects') . '</label>';
		echo '<input id="' . $this->get_field_id( 'title' ) . '" name="' . $this->get_field_name( 'title' ) . '" value="' . $instance['title'] . '" style="width:100%;" />';
	echo '</p>';
	echo '<p>';
		echo '<label for="' . $this->get_field_id( 'count' ) . '">' . __('Count:', 'lbprojects') . '</label>';
		echo '<input id="' . $this->get_field_id( 'count' ) . '" name="' . $this->get_field_name( 'count' ) . '" value="' . $instance['count'] . '" style="width:100%;" />';
	echo '</p>';
}

Hat man alle Funktionen an die entsprechenden Stellen in der übergeordneten Widget-Klasse eingefügt, sollte das Widget im Backend zur Verfügung stehen. Aktiviert man das Widget, sollte an der entsprechenden Position im Frontend eine Liste der neuesten Artikel angezeigt werden.

2) Stylesheet für das Widget

Abschließend erhält das Widget noch einige Styles, die in das zentrale Stylesheet style.css des Themes eingetragen werden können. Die Eigenschaften können sie nach Belieben an Ihr eigenes Theme anpassen.

#recent-posts {
	margin-bottom: 15px;  
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;
}

.recent-post-date {
	float: right;
}

div#recent-posts ul{
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 25px;	
}

div#recent-posts ul li {
	margin-top: 5px;
	padding: 0 10px 0 10px;
	height: 25px;
	overflow: hidden;
	border: 1px solid #ddd;	
	transition: background-color .15s, border-color .15s;
	-moz-transition: background-color .15s, border-color .15s;
	-webkit-transition: background-color .15s, border-color .15s; 
	-o-transition: background-color .15s, border-color .15s;
	-ms-transition: background-color .15s, border-color .15s;
}

div#recent-posts ul li:hover {
	border-color: #aaa;
	background-color: #ccc;
}

div#recent-posts ul a,
div#recent-posts ul a:active,
div#recent-posts ul a:visited {
	color: #3a3a3a;
}

div#recent-posts ul a:hover {
	text-decoration: none;
}

.recentpost-content {
	overflow: hidden; 
	text-overflow: ellipsis;
	white-space: nowrap; 
	width: 155px;
}

3) Ergebnis

Ausgabe des Widgets im Frontend

Das fertige Widget steht nun im Admin-Panel von WordPress zur Verfügung. Es können der Titel des Widgets und die Anzahl der zu zeigenden Artikel festgelegt werden (unteres Bild). Klickt man auf den “Speichern”-Button werden die Einstelungen in die Datenbank geschrieben und beeinflussen entsprechend die Ausgabe des Widgets im Frontend der Webseite (rechtes Bild).

Ansicht des Widgets im Backend

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

4 Kommentare zu "WordPress – Eigene Widgets programmieren"

  • Hubert sagt:

    Hallo Lukas,

    ich habe gerade Deine Seite für das Erstellen eines Witges besucht. Toll (für mich leider ein Spanisches Dorf). Ich brauche so ein Witges, auf der Home Seite funktioniert.

    Ich will absolut keine Werbung machen, aber vielleicht kann ich das so besser erklären.

    Meine Seite ist http://www.mobile-paradise.info, da habe ich am Ende der Seite den Azon Discountfinder hin geklebt, zum besseren Verständnis.

    Jetzt möchte ich den Azon Discountfinder, in einen Banner (wie der obere mittlere Banner 300x 250 Pix)
    einbauen, das das ganze besser aussieht.

    Der Banner/ Witges muss eine Größe von 250 Pix Breite und eine Höhe von 450 Pix haben.

    Jetzt gibt es ja ein Grundgerüst wie Du das beschreibst aber ich sehe nirgends, wo man die Größe einträgt.

    Ich bin leider auf diesen Tech-Gebiet etwas unbeholfen.

    Jetzt habe ich die Bitte an dich, mir irgendwie zu helfen. Vielleicht im Grundgerüßt farblich unterlegt, wo ich was eintragen muss.

    Mit freundlichen Gruß

    Hubert Woldrich

    PS: Jetzt weiß ich nicht genau ob Du in dieser Richtung aktiv bist.

    • Lukas Bommes sagt:

      Hallo Hubert,

      die Größe des Widgets kannst du im Stylesheet (style.css) anpassen. Allerdings wird aus dem Code deiner Site nicht ganz ersichtlich, wie du den “Finder” hinzugefügt hast. Offensichtlich hast du einfach ein Textwidget erstellt, in das du das HTML-Formular des Finders eingefügt hast. Ist das richtig?

      Ich weiß nicht genau, wie es später aussehen soll, aber generell kannst du so vorgehen: Du machst in Chrome (Firefox) einen Rechtsklick auf das Objekt, in dem Fall also den Finder, und wählst “Element untersuchen”. Dann öffnet sich ein Fenster, in dem man sowohl das HTML, als auch das CSS sieht. Jetzt guckst du, wie das Element heißt (HTML-Klassenname bzw. ID des Elements) und kannst im Stylesheet über “width: 250px;” und “height: 450px;” die Größe des Objekts ändern.

      Lukas

      • Hallo Lukas,
        danke für die Antwort.
        Genau, ich habe den Finder in ein Textwitges eingebaut, das Ergebnis ist aber nicht so, wie ich es möchte.
        Ich habe jetzt nach Deinen Tipp befolgt, Rechtsklick auf das Objekt und dann hat sich das Spanische Dorf geöffnet.

        Select a sub-department

        Ich habe das “Stylesheet”kopiert und möchte Dich bitten, den Teil zu makieren den ich ändern soll.

        Das ganze soll dann so aussehen das der Finder frei steht, ohne den weißen Hintergrund links und rechts. Und zirka 15 mm Abstand zum unteren Banner (728×90)

        Ist die Aktion so zu bewältigen ohne das ich die Seite abschieße.

        Danke für Deine Mühe im voraus.

        Beste Grüße

        Hubert

        • Lukas Bommes sagt:

          Den Hintergrund sowie den Schatten kannst du ab Zeile 213 der Datei style.css ändern. Dort müsste irgendwo “.ad2 {” stehen. Unter diesem sogenannten CSS-Selektor löschst du alle CSS-Eigenschaften bis auf “width: 728px;” und “margin-top: 25px;”. Dann steht der Finder schon einmal frei ohne Hintergrund.

          Falls du die Formularfelder nebeneinander stehen haben möchtest, musst du hier mit der CSS-Eigenschaft “float: left” arbeiten. Diese kannst du am besten direkt in den Finder-Code im Widget-Editor von WordPress eintragen. Dort fügst du in den HTML Paragraphen-Tag (<p>) einfach ‘style=”float: left;”‘ ein.

          Vielmehr kann ich vom Browser aus leider nicht machen. Ich hoffe, dass die das trotzdem schonmal weitergeholfen hat.

          Lukas