Was sind Shortcodes?

Shortcodes sind Platzhalter, die man in Beiträge, Seiten oder auch in Templates schreiben kann, um dort immer wieder den gleichen Text auszugeben. Das ist zum einen dann nützlich, wenn man den gleichen Text oder Code immer wieder verwendet – etwa wenn man in jedem Beitrag eine Anzeige oder einen Hinweis auf seinen Newsletter o.ä. einbinden möchte. Denn statt das HTMl-Formular für eine Newsletter-Anmeldung wieder und wieder in die Beiträge zu kopieren, muss man nur den Shortcode [newsletter] schreiben.

Shortcode erstellen

Bevor man die Shortcodes nutzen kann, muss man diese zunächst in der funktions.php registrieren. Für einen einfachen Shortcode sieht das etwa so aus:

function banner_func( $atts ){
  return '
    <div class="ad-code">
        <!-- hier dein ad-code --->
      </div>
  ';
}
add_shortcode( 'banner', 'banner_func' );

Möchte man nun einen Banner im Beitrag einfügen, dann schreibt man einfach diesen Shortcode in den Beitrag einer Seite:

[banner]

Praktisch: Shortcodes kann man auch in den WordPress-Templates verwenden, etwa man man einen Banner mal innerhalb vom Beitrag, aber auch mal in der Sidebar einbinden will. Dazu verwendet man diese PHP-Funktion

echo do_shortcode('[banner]');

Shortcodes wie HTML-Tags nutzen

Will man in WordPress-Beiträgen mit HTML-Tags arbeiten, macht nicht nur der Editor manchmal einen Strich durch die Rechnung, sondern der Beitrag wird auch unübersichtlich. Auch hier können Shortcodes helfen. Im Beispiel soll ein DIV-Container um einen bestimmten Textteil gelegt werden. Zunächst muss der Shortcode wieder in der functions.php registriert werden:

function infobox_beispiel ($attr, $content) {
    return '
    <div class="info-box"> 
    	<p class="info-box-header">Weitere Informationen finden Sie hier</p> 
    	' . $content . '
    	<p class="info-box-footer">Alle Angaben ohne Gewähr</p>
    </div>';
}
add_shortcode(infobox, 'infobox_beispiel');

Im WordPress Beitrag markiert man eine Info-Box mit diesen Tags:

[infobox] Irgendein Text [/infobox]

und erhält im Frontend diesen Code:

<div class="info-box"> 
   <p class="info-box-header">Weitere Informationen finden Sie hier</p> 
      Irgendein Text
   <p class="info-box-footer">Alle Angaben ohne Gewähr</p>
</div>

Shortcodes mit Parametern und mehr

Man kann den Shortcodes auch Parameter mitgeben, Code-Beispiele dazu findet man auf https://codex.wordpress.org/Shortcode_API Weitere Beispiele zu Shortcodes gibt es hier: Shortcodes API Overview. Wer lieber mit Plugins arbeitet, findet bei t3n.de eine schöne Übersicht zu verschiedenen Shortcode-Plugins.

Vorteile der Shortcodes in WordPress

Shortcodes haben zum einen den Vorteil, dass der Artikel bzw. die Seite im Backend von WordPress übersichtlicher bleibt. Zudem muss man HTML-Laien, die eine WordPress-Website pflegen sollen, kein großes HTML zumuten und minimiert so die Fehlergefahr 😉 Weiterer Pluspunkt: Bei einem späteren Relaunch kann man die Shortcodes bequem durch andere Tags ersetzen, CSS-Klassen austauschen o.ä.