t3n News Entwicklung

So baust du Widgets für dein eigenes WordPress-Theme

Das eigene WordPress-Theme erstellen – #17: Die Theme-Widgets

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. In Teil 17 geht es um die zwei Widgets, die das mitbringt.

Das eigene WordPress-Theme erstellen – #17: Die Theme-Widgets

Im letzten Teil hatte ich geschrieben, dass es ab jetzt um den Customizer gehen würde – dabei habe ich allerdings die zwei Widgets vergessen, die das Theme mitbringt. Die müssen vorher besprochen werden, da auch sie mit Customizer-Einstellungen angepasst werden können.

Das Theme bringt wie gesagt zwei Widgets mit – eins zum Anzeigen der neuesten Galerien und eins zum Hervorheben bestimmter Galerien. Um ein Widget zu erstellen, muss eine Unterklasse von WP_Widget erstellt und darin mindestens die Methoden widget(), update(), form() sowie der Konstruktor genutzt werden. Im Konstruktor werden grundlegende Eigenschaften des Widgets festgelegt, wie dessen Name und Beschreibung. Die widget()-Methode stellt das Widget im Frontend dar, update() kümmert sich um die Aktualisierung der Einstellungen im Backend und form() zeigt das Widget im Widget-Bereich an.

Das Recent-Galleries-Widget

So könnte das Widget für die neuesten Galerien später in der Sidebar aussehen. (Screenshot: eigene Installation; Bilder: Dennis Brinkmann)
So könnte das Widget für die neuesten Galerien später in der Sidebar aussehen. (Screenshot: eigene Installation; Bilder: Dennis Brinkmann)

Für die Klassen erstellen wir jeweils eine eigene Datei innerhabl des inc-Ordners unseres Themes. Das Widget für die neuesten Galerien kommt in die Datei class-recent-galleries.php.

<?php

/** * Recent_Galleries widget class */ class Bornholm_Recent_Galleries extends WP_Widget {

public function __construct() { $widget_ops = array( 'classname' => 'widget_recent_galleries', 'description' => _x( 'Your site’s most recent galleries.', 'Description of the recent galleries widget', 'bornholm' ) ); parent::__construct( 'recent-galleries', _x( 'Recent Galleries', 'Name of the recent galleries widget', 'bornholm' ), $widget_ops ); }

Im Code-Block oben ist der Anfang der Klasse Bornholm_Recent_Galleries abgebildet, die die WP_Widget-Klasse erweitert. Über __construct() wird direkt nach Aufrufen der Klasse ein Array mit dem Klassennamen des Widgets sowie der übersetzbaren Beschreibung erstellt. Im Anschluss wird an den Konstruktor der Oberklasse, also WP_Widget, als erster Parameter ein Bezeichner für das Widget übergeben. Es folgt der Name des Widgets sowie die Optionen aus dem Array.

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );

$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 2; if ( ! $number ) { $number = 2; }

/** * Filter the arguments for the Recent Galleries widget * * @see WP_Query::get_posts() * * @param array $args An array of arguments used to retrieve the recent posts. */ $result = new WP_Query( apply_filters( 'widget_galleries_args', array( 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true, 'tax_query' => array( array( 'taxonomy' => 'post_format', 'field' => 'slug', 'terms' => 'post-format-gallery' ) ) ) ) );

if ( $result->have_posts() ) { echo $args['before_widget']; if ( $title ) { echo $args['before_title'] . $title . $args['after_title']; } while ( $result->have_posts() ) { $result->the_post(); $post = get_post( get_the_ID() ); $images = bornholm_get_gallery_images( $post->ID ); if ( $images ) { ?> <div> <?php bornholm_gallery_header( 'h4', $images, 'thumbnail', $post ); ?> </div> <?php } } echo $args['after_widget']; // Reset the global $the_post as this query will have stomped on it wp_reset_postdata(); } }

Innerhalb der widget()-Methode, der Argumente von der Sidebar sowie die aktuelle Instanz des Widgets übergeben werden, wird zuerst der Titel des Widgets der $title-Variable zugewiesen. Diese Anwendung des Filters ist leicht angepasst aus einem der Core-Widgets übernommen. Falls kein Titel eingetragen wurde, wird ein leerer String gespeichert. Im nächsten Schritt holen wir uns aus $instance['number'] die Anzahl, die angezeigt werden soll. Ist nichts eingetragen, setzen wir den Wert auf 2.

Als nächstes müssen wir uns die neuesten Beiträge mit dem Post-Format „Galerie“ holen, und starten dafür eine neue WP_Query. Innerhalb des Argument-Arrays geben wir für posts_per_page die Anzahl aus $number an. Mit dem Wert true für no_found_rows geben wir an, dass WordPress die gefundenen Datenbankzeilen nicht zählen soll, was die Performance verbessert aber wohl nur funktioniert, wenn keine Pagination eingesetzt wird. Die Beiträge sollen des Weiteren veröffentlicht sein und Sticky-Posts ignoriert werden. Für tax_query geben wir das bereits bekannte Array an, um nur Beiträge des Galerie-Post-Formats zu bekommen.

Wenn wir im Ergebnis Beiträge haben, dann geben wir mit $args['before_widget'] das Markup aus, das in der register_sidebar()-Funktion von der Sidebar, in der das Widget angezeigt wird, für before_widget eingetragen wurde. Das sah beispielsweise für eine Sidebar so aus:

register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar-1',
'description' => '',
'before_widget' => '<div class="widget clearfix %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
) );

Wenn ein Titel vergeben wurde, umschließen wir ihn mit dem Markup aus der entsprechenden register_sidebar()-Funktion und geben ihn aus. Danach starten wir eine Schleife und holen uns die ID des aktuellen Beitrags. Damit können wir uns die Bilder aus der Funktion bornholm_get_gallery_images() holen und das erste mit dem Titel durch die ebenfalls bereits besprochene Funktion bornholm_gallery_header() ausgeben. Nach der Schleife wird das Markup für nach dem Widget ausgegeben und die Postdaten zurückgesetzt.

public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['number'] = (int) $new_instance['number'];

return $instance; }

Die update()-Methode ist relativ kurz. Hier werden nach dem Speichern des Nutzers im Backend die alte Widget-Werte gegen die Neuen ausgetauscht. Als Parameter bekommt die Methode die neue und alte Instanz des Widgets übergeben. Zuerst wird der Variable $instance die alte Instanz zugewiesen. Anschließend werden die Schlüssel des Arrays mit den neuen Werten überschrieben, für die gleichzeitig sichergestellt wird, dass sie einen sinnvollen Wert enthalten. Danach wird die neue Instanz zurückgegeben.

public function form( $instance ) {
$title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 2;
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'bornholm' ); ?></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 $title; ?>"/>
</p>

<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of galleries to show:', 'bornholm' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $number; ?>"/></p> <?php } }

Mit form() wird das Formular ausgegeben, das im Backend angezeigt wird. Als Parameter bekommt es die aktuelle Instanz des Widgets. Zuerst wird geprüft, ob Titel und Anzahl gesetzt sind, sonst werden die Standard-Werte eingesetzt. Anschließend wird für den Titel ein einfaches Textfeld erstellt. Um das id-Attribut und somit auch das for-Attribut des label-Elements zu erstellen, soll die get_field_id()-Methode eingesetzt werden, der der Name des Feldes übergeben wird. Über diesen Namen kann in den anderen Methoden auf den Wert zugegriffen werden, beispielsweise in update() mit $new_instance['title'].

Um das name-Attribut zu erstellen, soll die Methode get_field_name() genutzt werden. Die widefat-Klasse wird von WordPress für Widgets genutzt und damit gleich gestylt. Als value geben wir den eventuell eingetragenen Titel aus. Nach demselben Prinzip wird für das Eingabefeld der Anzahl vorgegangen, nur dass hier als type der Wert number angegeben wird. Anschließend ist das Widget fertig und kann genutzt werden.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von E. am 27.12.2015 (22:12 Uhr)

    Sogar am Sonntag arbeitest du! :) Danke dir ganz herzlich für diese schöne Reihe!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Templates
30 kostenlose WordPress-Themes für Responsive Design
30 kostenlose WordPress-Themes für Responsive Design

Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich. » weiterlesen

Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen
Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen

Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos. » weiterlesen

Baukasten für responsive WordPress-Themes: Das kann Cloudpress
Baukasten für responsive WordPress-Themes: Das kann Cloudpress

CloudPress ist ein Theme-Baukasten für WordPress. Wir zeigen euch, was das Tool alles kann. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?