WordPress – Eigene Shortcodes erstellen

0

Shortcodes stellen eine sehr gute Möglichkeit dar, Inhalte in Texten auf einer Webseite in besonderer Form zu gestalten und mit speziellen Funktionen zu versehen. Beispielsweise könnte ein Shortcode dazu eingesetzt werden, um eine farbige Box mit Text zu erstellen. Eine solche Funktion unterstützt beispielsweise auch das LB-Projects Theme.
In diesem Artikel möchte ich Ihnen anhand eines Beispiels Schritt für Schritt erklären, wie Sie Shortcodes erstellen können und worauf Sie dabei achten müssen.

1) Verwendung von Shortcodes

Um Shortcodes zu verwenden, muss in den meisten Fällen ein bestimmter Abschnitt eines Textes mit dem Shortcode eingefasst werden. Dies muss im HTML-Editor von WordPress geschehen. Soll beispielsweise der Farbbox-Code meines Themes verwendet werden, wird der Shortcode [colorbox] benötigt. Der zugehörige Text wird dann einfach vom Shortcode umschlossen, wie das folgende Code-Beispiel zeigt.

[colorbox color="red"]Lorem ipsum dolor sit amet, consetetur sadipscing elitr.[/colorbox]

Des Weiteren muss dem Shortcode ein Attribut übergeben werden. Dieses Attribut enthält die gewünschte Farbe der Box, in diesem Fall also rot.

Die grafische Ausgabe des Shortcuts sähe dann folgendermaßen aus.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Natürlich gibt es noch weitere Shortcodes und auch die Colorbox unterstützt noch andere Farben. Weitere Beispiele für die in meinem Theme zur Verfügung stehenden Shortcodes finden Sie in diesem Artikel.

2) Einfache Shortcodes programmieren

Ein Shortcode selbst steht natürlich nicht automatisch zur Verfügung, sondern muss im Theme implementiert sein. Betreiben Sie ein Theme, das keine Unterstützung für Shortcodes anbietet, können Sie diese einfach nachrüsten.

Kernelement für das Erstellen eines Shortcodes ist die WordPress-Funktion add_shortcode($name, $function). Sie erstellt einen Shortcode mit dem in $name gespeicherten Namen und ruft die in $function festgelegte Funktion auf. In dieser Funktion befindet sich der eigentliche Code für den Shortcode, der festlegt, was mit dem Text passieren soll, der sich zwischen den Shortcodes befindet.

Im folgenden Beispiel soll ein Shortcode erstellt werden, der den Text ähnlich wie im obigen Beispiel in einer roten Box darstellt.
Zunächst wird die Funktion LB_redbox() erstellt, an die die Argumente $atts und $content übergeben werden. Das erste Argument wird allerdings zu diesem Zeitpunkt noch nicht benötigt. Das Argument $content enthält den zwischen den Shortcodes eingeschlossenen Text, im oberen Beispiel also “Lorem ipsum…”.
Die Aufgabe der Funktion besteht nun darin, vor den in der Variable $content gespeicherten Inhalt, einen div-Container mit einer bestimmten Klasse zu setzen und diesen hinter dem Inhalt wieder zu schließen. Über das Stylesheet kann nun die Klasse “red-box” als eine Box mit rotem Hintergrund und roter Umrandung gestaltet werden.
Damit der Shortcode auch verwendet werden kann, wird er mithilfe der Funktion add_shortcode() registriert.

function LB_redbox($atts, $content = null) {
	
	return '<div class="red-box">' . $content . '</div>';
} 
add_shortcode('redbox' , 'LB_redbox' );

Wird nun innerhalb des Editors ein Text mit dem Shortcode [redbox] eingerahmt, so wird er in einen div-Container mit der Klasse “red-box” eingeschlossen und entsprechend der CSS-Regeln im Stylesheet dargstellt.

2) Shortcodes mit Attributen programmieren

Der oben vorgstellte Shortcode [redbox] ist zunächst vollkommen ausreichend, stößt aber an seine Grenzen, falls Boxen in verschiedenen Farben dargestellt werden sollen. Denn hier müsste für jede Farbe ein eigener Shortcode erstellt werden, was man sich einerseits schlecht merken kann und andererseits auch im Quellcode alles andere als elegant ist.

Die Lösung stellen Attribute dar, die den Shortcodes übergeben werden. Man erstellt also einen Shortcode mit einem universellen Namen, zum Beispiel [colorbox] und fügt nun das Attribut “color” hinzu, sodass man über dieses Attribut die Farbe der Box auswählen kann. Ein Beispiel für die Verwendung des Shortcodes mit dem Attribut finden Sie am Anfang dieses Artikels.

Im Gegensatz zum vorherigen Beispiel wird nun auch das Attribut $atts benötigt. Dieses erhält später das Attribut für den Shortcode, also “color”. Das wird durch die zweite Zeile des Codes erreicht. Hier wird der Variable $atts der Wert “color” zugewiesen. In den leeren Anführungszeichen steht der Standardwert für das Attribut, der dann zum Einsatz kommt, wenn ein Nutzer nur den Shortcode [colorbox] ohne das Attribut “color” verwendet. In diesem Fall ist er leer. D.h. wenn keine Farbe angegeben wird, erscheint auch keine Box.

In der Switch-Anweisung darunter werden nun verschiedenen Fälle für den Wert des Attributs “color” festgelegt, also die zur Verfügung stehenden Farben. Enthält das Attribut “color” im Shortcode beispielsweise den Wert “blue”, so tritt die zweite Zeile innerhalb der Switch-Anweisung in Kraft. Hier wird nun der im Shortcode eingeschlossene Text mit einem p-Tag und der Klasse “blue-box” versehen. Anschließend wird der Inhalt des Shortcodes mitsamt dem p-Tag zurückgegeben und im Ouput dargestellt. Das Aussehen der baluen Box wird dabei nur im Stylesheet über die Klasse “blue-box” festgelegt.
Für den Fall, dass sich der User bei der Eingabe des Attributs vertippt, tritt der Fall “default” in der Switch-Anweisung ein und es wird ein leerer String zurückgegeben. Somit passiert in der Ausgabe gar nichts, es wird keine Box dargestellt. Fehlt das “default” kommt es zu einem Fehler, weil die Variable “return” keinen definierten Wert enthält.

function LB_colorbox($atts, $content = null) {
	extract(shortcode_atts(array( 'color' => '' ), $atts));
	
	switch($color) {
		case 'red': $return = '<p class="red-box">' . $content . '</p>'; break;
		case 'blue': $return = '<p class="blue-box">' . $content . '</p>'; break;		
		case 'yellow': $return = '<p class="yellow-box">' . $content . '</p>'; break;		
		case 'green': $return = '<p class="green-box">' . $content . '</p>'; break;		
		case 'grey': $return = '<p class="grey-box">' . $content . '</p>'; break;
		default: $return = '';	
	}
	
	return $return;
} 
add_shortcode('colorbox' , 'LB_colorbox' );

3) Fazit

Mithilfe von Shortcodes könne Sie nahezu jede gewünschte Formatierung von Text erzielen. Die Möglichkeiten gehen natürlich weit über das oben dargestellte Beispiel hinaus. So können zum Beipsiel in Kombination mit Javascript, erstaunliche Effekte, z.B. Text-Spoiler, Accordeon-Menüs und Tab-Boxen, erzielt werden.

Hinterlasse eine Antwort

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

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.