WordPress: Eigene Shortcodes

Shortcodes sind etwas schönes. Für den Anwender verbessern sie den Workflow und sorgen gleichzeitig für Übersicht und Struktur. Wer in Worpress viel mit Plugins arbeitet, wird sicherlich schon einmal mit ihnen in Kontakt getreten sein. Interessant wird es vor allem, wenn man sich eigene Shortcodes erstellt.

Wie funktioniert das?

Das zu realisieren ist im Grunde ziemlich simpel. Jedes Theme besitzt eine “functions.php”. Das ist die Datei, in der die eigenen Shortcodes später abgerufen werden. Diese öffnen wir nun mit einem Texteditor oder einem HTML-Editor wie Dreamweaver. Was wir dort eintragen müssen ist folgendes:

function testfoto() {
return '<img src="testfoto.jpg" alt="Testfoto" />';
}
add_shortcode('werbung', 'testfoto');

Was haben wir nun gemacht? In Zeile 1 haben wir einen Namen für die Funktion definiert. In diesem Fall heißt die Funktion “testfoto”. Zeile 2 gibt den Inhalt aus, den wir mit unserem Shortcode bestimmen möchten. Anstatt “echo” wird hier mit “return” gearbeitet. In Zeile 4 geben wir unserem Shortcode einen Namen. In meinem Fall soll er hier “werbung” heißen. “testfoto” in Zeile 4 verweist hier lediglich auf die Funktion. Würde man also in den Texteditor von WordPress “[werbung]” eintragen, würde er somit mein Foto “testfoto.jpg” platzieren.

Im Grunde war´s das auch schon. Ich möchte euch noch eine andere Variante zeigen.

Als kleines Beispiel: Ich möchte mittels Shortcode einen Text rot einfärben. Dies soll im WordPress Texteditor in etwa so aussehen:

[rot]Der Text, der in Rot erscheinen soll[/rot]

Dazu sind im Code nur minimale Veränderungen notwendig. Schauen wir uns das mal an:

function rotertext($atts, $content = null) {
return '<div style="color:red;">' . $content . '</div>';
}
add_shortcode('rot', 'rotertext');

Zeile 1 definiert wie im vorherigen Beispiel den Namen der Funktion, die aufgerufen wird. Wichtige Änderungen gibt es in der zweiten Zeile. Dort wird definiert, wie der Code vor und nach dem eingetragenen Content aussehen soll. In unserem Beispiel beginnt der Code mit

<div style="color:red;">

Darauf folgt der Content, der vom Anwender eingetragen wird. Schließlich endet der Code mit dem Schließen des Div-Containers. In Zeile 4 wird wie oben der Name der Shortcodes definiert und auf die Funktion verwiesen.

Wie man sieht ist es sehr einfach in WordPress eigene Shortcodes zu erstellen. Sie erweisen sich als besonders nützlich und man sollte von ihnen profitieren.