Eigene Shortcodes in WordPress

Gibt es bestimmte Inhalte, die sich auf deinem Blog an verschiedenen Stellen wiederholen? Beispielsweise eine Box mit deinen Kontaktdaten, oder der Erklärungstext für gesponserte Beiträge? – Es ist ja potentiell mühselig, diesen Kram wieder und wieder kopieren und einfügen zu müssen… und wenn sich dann am Inhalt etwas ändert, musst du das x-mal machen. Böh. Das geht einfacher! 🙂

In diesem Tutorial erfährst du, wie du dir das Leben leichter machst, indem du hierfür die Shortcode-Funktion von WordPress nutzt. 🙂

Was können Shortcodes?

Wie der Name schon andeutet, fungieren diese kleinen Dingerchen als Platzhalter für verschiedene Inhalte. Im Beitragseditor tippst du beispielsweise einfach das hier ein:

[adresse]

… und daraus wird im Artikel deine komplette Anschrift:

Maria Mustermann
Musterstr. 12
12345 Musterstadt

In dem Fall würde einfach nur Text eingefügt. Shortcodes können aber auch HTML beinhalten, also beispielsweise ein umgebendes p-Tag mit der Klasse .adresse, was du dann entsprechend mit CSS stylen kannst:

<p class="adresse">
Maria Mustermann<br>
Musterstr. 12<br>
12345 Musterstadt</p>

Und noch mehr ist möglich: du kannst mit Shortcodes dynamische Inhalte ausgeben lassen, etwa deine letzten 3 Beiträge.

Magic, oder? 😀

Welche Vorteile bieten Shortcodes?

Eine ganze Menge! 🙂

• Sie sparen dir Zeit: du musst die immer gleichen Inhalte nicht wieder und wieder tippen bzw. aus einem anderen Beitrag herauskopieren. Stattdessen notierst du einfach nur den Shortcode.
• Sie helfen dir, Fehler zu vermeiden: Tippfehler schleichen sich ja liebend gerne ein. Durch die Verwendung von Shortcodes minimierst du dieses Risiko, weil du den Inhalt an nur einer einzigen Stelle pflegen musst.
• Sie erleichtern dir das Aktualisieren: wenn du den betreffenden Inhalt überarbeiten möchtest, brauchst du das an nur einer einzigen zentralen Stelle zu tun.

Wie sehen Shortcodes aus?

Grundsätzlich werden Shortcodes immer mit eckigen Klammern [ ] notiert.

Es gibt zwei verschiedene Sorten von Shortcodes:

1. Standalone-Shortcodes

   [adresse]

2. Umschließende Shortcodes

   [hinweis]Hier steht ein Hinweistext...[/hinweis]

Außerdem können Shortcodes Attribute beinhalten:

[box typ="fehler"]Möp, geht so nicht.[/box]

Wie funktionieren Shortcodes?

Das Geheimnis ist ein entsprechender Eintrag in der Datei functions.php deines Themes.
Hier rufen wir den Shortcode als erstes ins Leben und sagen ihm, was er ausgeben soll. Anschließend verknüpfen wir diese Funktionalität mit dem entsprechenden Platzhalter-Tag.

Beispiel 1: Standalone-Shortcode

Hier ist mal ein ganz einfaches Beispiel für einen Standalone-Shortcode, das du dir so ans Ende deiner functions.php kopieren kannst:

function adresse_shortcode(){
   return '<p class="adresse">
      Maria Mustermann<br>
      Musterstr. 12<br>
      12345 Musterstadt</p>';
}

add_shortcode("adresse","adresse_shortcode");

Unsere Funktion nennen wir adresse_shortcode. Der Teil nach dem return beinhaltet das, was der Shortcut ausgeben soll. In der Zeile mit dem add_shortcode brauchen wir zwei Werte – als erstes den gewünschten Platzhalter-Namen, als zweites den Namen der Funktion.

Im Beitragseditor gibst du einfach nur [adresse] ein – et voilà, der Adressblock taucht auf. 🙂

Beispiel 2: umschließender Shortcode

Lass uns als nächstes einen umschließenden Shortcode bauen, wie du ihn beispielsweise für eine Hinweisbox brauchen kannst:

function box_shortcode($attr, $content=null){
   return '<div class="box">'. $content .'</div>';
}

add_shortcode("box","box_shortcode");

Im Beitragseditor:

[box]Hallo Welt![/box]

Das ist die einfache Version: die Variable $content spuckt das aus, was du im Beitragseditor zwischen den beiden Tags notierst.
Heraus kommt also:

<div class="box">Hallo Welt!</div>

Sooo… aber jetzt wollen wir noch verschiedene Varianten von Boxen bauen! Sinnvollerweise bekommen alle die Klasse .box, die du im CSS nett stylst. Hinzu kommt dann jeweils eine weitere Klasse, die den Typ der Box definiert: Fehler-Boxen könnten dann einen roten Rahmen bekommen, Hinweise einen orangen, Tipps einen grünen und so weiter.

Beispiel 3: umschließender Shortcode mit Attributen

Im Beitragseditor notierst du also:

[box typ="fehler"]Ich bin ein Fehler.[/box]

oder

[box typ="tipp"]Ich bin ein Tipp![/box]

Je nachdem, was du als Typ einträgst, soll sich auch die HTML-Klasse deiner Box ändern.

Voilà:

function box_shortcode($atts, $content=null) {
extract(shortcode_atts(array(
'typ' => hinweis
), $atts));
return '<div class="box '. $typ . '">'. $content .'</div>';
}

add_shortcode( 'box', 'box_shortcode' );

Hier führen wir jetzt einfach noch die zweite Variable $typ ein – defaultmäßig setzen wir die Box auf die Klasse .hinweis, du kannst aber jeden beliebigen Namen übergeben.

Shortcodes im Template ausgeben

Natürlich kannst du Shortcodes nicht nur innerhalb von Beiträgen und Seiten nutzen, sondern auch direkt im Template – beispielsweise in der footer.php, um etwas im Fußbereich deiner Seite anzeigen zu lassen.

Hier ist die Funktion do_shortcode(); dein Freund und Helfer:

<?php
   echo do_shortcode('[adresse]');
?>

Das war jetzt mal ein kleiner Einstieg in die Möglichkeiten, die Shortcodes dir bieten. Wenn du mehr wissen magst, wirf mal einen Blick in die Dokumentation der Shortcode-API. 🙂

Verwendest du schon Shortcodes? Fällt dir eine Einsatzmöglichkeit auf deinem Blog ein?

Ich hoffe, dieser Beitrag war hilfreich für dich!