Eigene Shortcodes für Dein WordPress Theme

Erstellt am 30. Juli 2014
Kategorie: Allgemein

Mit der WordPress Shortcodes API könnt ihr den Usern eures Themes oder Plugins ermöglichen, komplexe Fuktionen, wie z.B. Accordions mit extrem geringem Aufwand einzubauen.

Arten von Shortcodes

Alle Shortcodes werden im WordPress Editor in eckige Klammern gesetzt.

1. Sich selbst schließende Shortcodes

Bei dieser Art wird nach Eingabe des Shortcodes ein fest definierter Content ausgegeben. Er wird folgendermaßen in den Editor geschrieben:
[shortcode]

2. Umschließende Shortcodes

Umschließende Shortcodes beinhalten variablen Content, den die User im Editor vergeben können und müssen wieder geschlossen werden:
[shortcode]Hier steht der variable Inhalt[/shortcode]

3. Umschließende Shortcodes mit weiteren Variablen

Bei dieser Art können im Shortcodes zusätzlich Variablen vergeben werden, um z.B. eine Klasse zu bestimmen:
[shortcode variable=“headline“]Hier steht der variable Inhalt[/shortcode]

Erstellen von Shortcodes

Shortcodes kommen generell in die functions.php. Ich erstelle gerne eine extra shortcodes.php Datei und binde diese in die functions.php ein, um den Überblick nicht zu verlieren.

Sich selbst schließende Shortcodes

Kurz erklärt: Die Funktion (in diesem Fall self_closing_shortcode) legt die spätere Ausgabe fest.
add_shortcode bestimmt hingegen den Namen des Codes (shortcodename) und die dazugehörige Ausgabefunktion.

Gebe ich im Editor nun [shortcodename] ein, erscheint auf der Seite folgendes:

Ich bin die Ausgabe!

Umschließende Shortcodes

Diese Art von Shortcodes möchte ich gerne an der Bootstrap Komponente well veranschaulichen:

$content = null  sagt WordPress, dass dies ein umschließender Shortcode ist.
Mit $content wird der eingegebene Content ausgegeben.

Wenn ich im Editor nun
[well]Dieser Text steht dank des Shortcodes in einem grauen Kasten[/well]
eingebe, erscheint auf der Seite folgendes:

Dieser Text steht dank des Shortcodes in einem grauen Kasten

Umschließende Shortcodes mit weiteren Variablen

Diese Art demonstriere ich an der Bootstrap Komponente Alerts. Damit ich nicht für jede Art von Alert einen eigenen Shortcode erstellen muss, kann ich innerhalb des Shortcodes weitere Variablen übergeben, die die Art bestimmen:

Ich habe innerhalb des arrays festgelegt, dass die Variable type direkt mit übergeben werden kann.
Mit ‚type‘ => ‚alert-success‘ definiere ich einen Standardwert, der genommen wird, wenn der User diese Variable nicht angibt.
[alert]Ich bin ein Standard-Success-Alert![/alert]
wird zu


[alert type="alert-warning"]Ich habe bin eine Warnung. Der Standardwert alert-success wurde dadurch überschrieben.[/alert]
wird dementsprechend zu

Verschachtelung von Shortcodes

Wenn ihr innerhalb der Shortcodes weitere Shortcodes ermöglichen wollt, bedarf es nur einer kleinen Änderung:

Ihr ersetzt das $content einfach durch do_shortcode($content)

Der Shortcode Generator

Für eine schnellere Erstellung von Shortcodes gibt es auch den Shortcode Generator!

Codex: Shortcode API


Kommentare

Bisher gibt es keine Kommentare zu diesem Artikel.


Schreibe einen Kommentar