Eigene WordPress Shortcodes erstellen

WordPress ist äußerst flexibel. Aber mit ein paar Handgriffen kann WordPress noch flexibler werden, nämlich mit WordPress Shortcodes.

im Rahmen von Themes sind Shortcodes ein zweischneidiges Schwert. Denn Shortcodes sind in der Regel für ein Theme maßgeschneidert. Und so bricht in der Regel bei einem Themewechsel das Layout der Website in sich zusammen.

Aber Shortcodes können auch ein Segen sein. Denn man kann mit Shortcodes viele Arbeitsschritte vereinfachen und automatisieren. Statt jedes Mal komplizierten Code in eine Seiten einfügen zu müssen, kann man über Shortcodes die gewünschten Code-, Text-, HTML-Inhalte bequem an jeder Stelle meiner Website ausgeben. Praktisch.

Eigene WordPress Shortcodes erstellen

Okay. Aber wie erstellt man nun eigene WordPress Shortcodes? Der Aufbau ist erfreulich einfach:

1. Ich lege in der Datei function.php eine neue Funktion für meinen Shortcode fest
2. Ich füge ebenfalls in der function.php diesen Shortcode meinem Theme hinzu
3. Ich rufe an beliebiger Stelle im Theme meinen Shortcode auf.

Grundsätzlich gibt es drei verschiedene Varianten von Shortcodes:

1. Einfache Shortcodes:[meinshortcode]
2. Umschließende Shortcodes: [meinshortcode]Hier ist der Inhalt. [/meinshortcode]
3. Shortcodes mit Attributen: [meinshortcode width=500]

Einfache WordPress Shortcodes erstellen

Der Weg zum eigenen Shortcode ist bei allen drei Versionen von Shortcodes nahezu identisch. Fangen wir mit dem einfachen Shortcode an. Der einfache (auch sich selbst schließende Shortcode genannt) wird über eine Funktion in der functions.php erstellt. Öffne also die Datei function.php und füge folgendes hinzu:

// Mein erster Shortcode: [meinshortcode]
function meinshortcode_function(){
return "<h1>Hey, das ist mein Shortcode!</h1>";
}

Mit „function“ geben wir an, dass wir eine Funktion erstellen. Diese Funktion heisst xyz_function. Statt xyz kannst du deinen Shortcode beliebig nennen. In diesem Fall „meinshortcode“.

Die Ausgabe erfolgt nicht über einen ECHO-BEFEHL, sondern als RETURN. Dadurch ist gewährleistet, dass der Code nur an der Stelle aufgerufen wird, an der wir später unseren Shortcode nutzen.

Gut. Jetzt fügen wir den Shortcode dem Theme hinzu. Dazu schreiben wir gleich im Anschluss zu unserem obrigen Code folgendes:

add_shortcode('meinshortcode', 'meinshortcode_function' );

Alles klar: Über ADD_SHORTCODE fürgen wir den Code dem Theme hinzu. Der erste Parameter ist der Name des Shortcodes, mit dem wir den Code später ausführen wollen. Hier also [meinshortcode].

Der zweite Parameter ist dann die Funktion, die ausgeführt werden soll. Hier entsprechend die Funktion, die wir oben angelegt haben: meinshortcode_function

Fertig.

Umschließende WordPress Shortcodes erstellen

Beim einfachen Shortcode wird ein Baustein (Text, Code, HTM, etc.) eingefügt. Bei umschließenden Shortcodes kann man den Inhalt des Shortcodes anpassen. Nehmen wir einmal an, wir wollen einen Shortcode erstellen, der jeden Text zwischen den Klammern als Überschrift 2 in fett schreibt:

// Shortcode Überschrift 2 in fett:
function heading_fett( $atts , $content = null ) {
return '<h2><strong>' . $content . '</strong></h2>';
}
add_shortcode( 'heading_fett', 'heading_fett_kursiv' );

Der Trick besteht hier an der Festlegung des Inhalts $CONTENT. Diesem weisen wir zunächst dem Wert NULL zu. Denn wir wollen diesen ja später selbst angeben. Und angeben wollen wir diesen in der RETURN-SCHLEIFE … und zwar genau zwischen unseren Angaben h2 (für die Überschrift) und strong (für fett). Aufgerufen wird der Befehl dann mit

.$content.

Nun können wir einen beliebigen Text mit unserem Umschließende Shortcodes als fette Überschrift 2 formatieren:

[heading_fett]Wow! Ich bin aber eine fette Überschrift![/heading_fett]

WordPress Shortcodes mit Attributen

Jetzt wird es richtig spannend. Denn wir können dem Shortcode auch Attribute zuweisen. Häufig kann man bei existierenden Shortcodes beispielsweise Werte wie die Höhe oder Breite des einzubettenden Inhaltes als Attribut angeben. Erstellen wir nun einen Shortcode bei dem wir eine Variable übergeben wollen.

function meinshortcode_function ( $atts ){
extract(shortcode_atts(array(
"meinattribut" => 'Guten Tag'
),$atts));
$return = ''.$meinattribut.'';
return $return;
}
add_shortcode('meinshortcode', 'meinshortcode_function');

Der Shortcode besitzt nun ein Attribut ($ATTS). Dieses soll aus dem Shortcode extrahiert werden (extract). Das Attribut können wir nennen angeben (meinattribut). Hinter dem Pfeil (=>) legen wir den Standardwert fest. Geben wir später bei dem Shortcode keinen Wert an, so erscheint dieser Standardwert als Platzhalter.

[meinshortcode]
Der Text: „Guten Tag“ wird ausgegeben[meinshortcode meinaatribut=“Guten Abend“]
Der Text: „Guten Abend“ wird ausgegeben

Ein etwas kompliziertes Beispiel

Ich nutze für meine Videos unter anderem den ZOOMPLAYER. Dieser ist kein Plugin, sondern es wird ein sehr leichtes Codeschnipselchen im Theme eingebunden. Dies ist fein, aber die Anwendung ist dann etwas mühselig.

So muss ich für jedes Video die einzelnen Parameter definieren: Wo liegt das Video? Welches Design soll genutzt werden? Welche Coverbild soll eingefügt werden? und viele mehr.

<div id="whiteplayer" class="zoomvideoplayer auto-init" data-source="https://meineurl/meinvideo.mp4" data-cover="https://meineurl/coverimage.jpg"></div>

Über einen Shortcode rufe ich nun diesen Player auf, wobei ich die Video-Url (URL), das Coverbild (COVER) und das Design (ID) und im Shortcode festlegen möchte. Bei dem Design habe ich einen Standardplayer (mainplayer). Aber über CSS habe ich auch verschiedene Abwandlungen, zB einen Player in Weiss (whiteplayer). Gebe ich nihcts an, wird der Standardplayer aufgerufen. Lege ich einen Wert fest, kann ich leicht zwischen den Designs wechseln:

Shortcode:
[vidzoom url="https://meineurl.de/meinvideo.mp4" id="whiteplayer" cover="https://meineurl.de/coverbild.jpg"]

function meinvideo_shortcode($atts) {
$a = shortcode_atts( array(
'url' => '#',
'id' => 'mainplayer',
'cover' => '#',
), $atts );
return '<div id="'.esc_attr($a['id']).'" class="zoomvideoplayer auto-init" data-source="'.esc_attr($a['url']).'" data-cover="'.esc_attr($a['cover']).'"></div>';
}
add_shortcode('meinvideo', 'meinvideo_shortcode');

Shortcodes im Template ausgeben

Shortcodes kann man nicht nur in Beiträgen und Seiten ausgeben, sondern auch direkt im Template verbauen, zum Beispiel in der footer.php. Die dazu passende Funktion heißt do_shortcode(); In der Praxis schaut dies dann so aus:

<!--?php echo do_shortcode('[meinshortcode]'); ?-->

Okay, ich hoffe ich konnte ein wenig Licht ins Dunkel bringen. Mehr Infos rund um Shortcodes findest du im WordPress Codex: https://codex.wordpress.org/Shortcode_API