Warum WordPress Shortcodes so nützlich sein können

Warum WordPress Shortcodes so nützlich sein können

WordPress ist eines der weltweit meistgenutzten Content Management Systeme. Unzählige Plugins haben der einstigen Blogger-Software zu einem enormen Funktionsumfang verholfen, mit dem sich die unterschiedlichsten Webprojekte realisieren lassen. Einer Sache ist sich WordPress jedoch über die Jahre treu geblieben: Es ist ein System, das von Bloggern, Redakteuren und anderen Textern auch ohne HTML- und CSS-Kenntnisse bedient werden kann und sich somit als schnelle und unkomplizierte Lösung zur Verbreitung von Inhalten im World Wide Web eignet.

Wer also seine ersten Schritte als Webautor machen möchte, ist mit WordPress bestens bedient. Darüber hinaus haben die WordPress-Entwickler 2008 mit den sogenannten Shortcodes ein Feature eingeführt, mit dem man seinen redaktionellen Beiträgen auf einfache Weise dynamische Elemente hinzufügen kann.

Was ist ein Shortcode?

Bei den sogenannten Shortcodes, die mit der WordPress Version 2.5 eingeführt wurden, handelt es sich um Kurzbefehle, die innerhalb von Texten platziert werden können und mit einem PHP-Code verknüpft sind. Dieser wird entweder in der Datei functions.php hinterlegt oder in einer separaten .php-Datei, die in die Datei functions.php eingebunden wird. Wird eine Seite mit einem Shortcode aufgerufen, sorgt WordPress dafür, dass das entsprechende Skript ausgeführt und interpretiert wird. Der Besucher sieht also statt des Codes den Inhalt, der durch die PHP-Funktion erzeugt wurde. Der Shortcode fungiert also genau genommen als Platzhalter, zum Beispiel für einfache Elemente wie einen Textauszug oder auch für dynamische Inhaltstypen wie Popups oder eine Bildergalerie.

Die Implementierung eines Shortcodes in WordPress stellt keine große Herausforderung dar: Sie werden direkt im Editor an der entsprechenden Stelle im Beitrag eingefügt. Damit WordPress die Codes als solche erkennt, werden sie in eckige Klammern [ ] gesetzt. Ein Shortcode hat beispielsweise die Form [aktuelle-posts]. In Verbindung mit der entsprechenden PHP-Funktion zeigt dieser Code an der gewählten Position andere, kürzlich veröffentlichte Beiträge an. Die WordPress-Shortcodes können auch mit zusätzlichen Parametern spezifiziert werden. Um beispielsweise die Anzeige der zuletzt veröffentlichten Beiträge auf fünf zu beschränken, kann der eben verwendete Shortcode wie folgt erweitert werden: [aktuelle-posts posts=“5″].

Warum WordPress Shortcodes so nützlich sein können

Vor allem zwei Aspekte machen Shortcodes in WordPress so praktisch: Zum einen können auch Nutzerinnen und Nutzer, die über keinerlei JavaScript- oder CSS-Kenntnisse verfügen, Dynamik in ihr Webprojekt bringen. Selbst die für Shortcodes elementare Skriptsprache PHP muss nicht unbedingt beherrscht werden, da diverse Shortcodes inklusive der dazugehörigen Skripte bereits standardmäßig in WordPress vorhanden sind. Auf der offiziellen Homepage sind diese übersichtlich aufgelistet. Dort finden Sie auch Anleitungen, wie Sie den jeweiligen Shortcode freischalten und nutzen können. Darüber hinaus stellen viele WordPress-Nutzer ihre selbst entwickelten WordPress-Shortcodes auf verschiedenen Plattformen wie SNIPPLR kostenlos zur Verfügung. Außerdem bieten viele Plugins und Templates eigene Shortcodes an. Sie müssen also nur dann selbst programmieren, wenn Sie ein bestehendes Script ändern möchten oder ein komplett neues Script benötigen.

Der zweite große Vorteil von Shortcodes ist die Zeitersparnis: Wenn Sie beispielsweise eine bestimmte Textpassage, ein Logo oder ein anderes Element immer wieder in Ihren Beiträgen verwenden, bedeutet die Platzierung eines entsprechend programmierten Shortcodes eine enorme Zeitersparnis. Wenn Sie später etwas an diesem Element ändern möchten, müssen Sie dies nicht für jeden Artikel einzeln tun. Sie passen einfach den PHP-Code an und die Änderungen werden für alle Seiten Ihres WordPress-Projekts übernommen, die den Shortcode enthalten.

So funktioniert das Erstellen eigener Shortcodes in WordPress

Es ist bereits deutlich geworden, dass der Kern eines Shortcodes das PHP-Skript ist, das ausgeführt wird, sobald WordPress auf einen zuvor definierten Shortcode stößt. Im Folgenden soll es aber weniger darum gehen, wie man ein solches Skript programmiert, denn das würde einen Grundkurs in PHP-Programmierung bedeuten, der vom Thema wegführen würde. Vielmehr erfahren Sie in den folgenden Abschnitten, wie Sie Shortcodes in WordPress einbinden, für Ihr Projekt nutzen und wieder deaktivieren können. Den entsprechenden PHP-Code fügen Sie entweder in die Datei functions.php im Verzeichnis des verwendeten Themes ein oder in eine separate PHP-Datei, die Sie entsprechend einbinden. Damit die eigenen Shortcodes nicht beim nächsten Update des Themes verschwinden, sollten Sie ein Child-Theme anlegen. Dies ist mit wenigen Handgriffen erledigt, wie die Anleitung im WordPress-Supportforum zeigt.

Callback-Funktion erstellen

Die PHP-Funktion, die ausgeführt wird, sobald WordPress einen Shortcode registriert, ist eine sogenannte Callback-Funktion. Als solche wird sie einer anderen Funktion als Parameter übergeben und unter definierten Bedingungen mit definierten Parametern aufgerufen. Die folgende Beispielfunktion durchsucht die Datenbank und erzeugt für den Shortcode [aktuelle-posts] einen Link zum letzten Beitrag:

function aktuelle_posts_function() {
  query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
  if (have_posts()) :
    while (have_posts()) : the_post();
      $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
    endwhile;
  endif;
  wp_reset_query();
  return $return_string;
}

Der Text, der den Shortcode ersetzen soll, steht in der Variablen $return_string (PHP kennzeichnet alle Variablen mit $). Die PHP-Funktion (current_posts_function) gibt diese Variable per return zurück. Wenn Sie stattdessen versehentlich den Befehl echo verwenden, steht das per Shortcode implementierte Element plötzlich vor dem eigentlichen Inhalt.

Shortcode in WordPress eintragen

Sie müssen WordPress mitteilen, dass es sich bei der erstellten Funktion um einen Shortcode handelt, der automatisch ausgeführt werden soll, wenn eine aufgerufene Seite den Shortcode [aktuelle-posts] enthält. Fügen Sie dazu den folgenden Code in Ihre PHP-Datei ein:

add_shortcode('aktuelle-posts', 'aktuelle_posts_function');

Damit haben Sie einerseits den Namen des Shortcodes [aktuelle-posts], den Sie später im Editor verwenden werden, und andererseits die zu verwendende Funktion aktuelle_posts_function() definiert. Um Konflikte zwischen verschiedenen WordPress-Shortcodes zu vermeiden, ist es wichtig, einen eindeutigen Namen zu wählen.

Shortcodes parametrisiert und funktionalisiert definieren

Um Ihren WordPress-Shortcode noch flexibler zu gestalten, können Sie optionale Parameter hinzufügen. Im bisher verwendeten Beispiel ist es sinnvoll, im Shortcode anzugeben, wie viele Beiträge genau angezeigt werden sollen. Dazu benötigen Sie zwei weitere Funktionen: Zum einen die Funktion shortcode_atts(), die benutzergenerierte Shortcode-Attribute mit nativen Attributen kombiniert und benötigte Standardwerte automatisch einfügt. Zum anderen wird die PHP-Funktion extract() benötigt, um die Shortcode-Attribute zu extrahieren. Für den Fall, dass das Argumentfeld leer bleibt, ist der Standardwert 1 (‚posts‘ => 1) anzugeben:

function aktuelle_posts_function($atts){
  extract(shortcode_atts(array(
    'posts' => 1,
  ), $atts));

  $return_string = '<ul>';
  query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
  if (have_posts()) :
    while (have_posts()) : the_post();
      $return_string .='<li><ahref="'.get_permalink().'">'.get_the_title().'</a></li>';
    endwhile;
  endif;
  $return_string .= '</ul>';

  wp_reset_query();
  return $return_string;
}

Wenn Sie nun den Shortcode im Text wie folgt angeben [aktuelle-posts posts=“5″], wird nicht nur der zuletzt veröffentlichte Artikel angezeigt, sondern eine Liste der fünf neuesten Artikel.

Verwendung bestimmter Inhalte als Shortcode-Parameter

Sie können das vorgestellte Beispiel noch weiter modifizieren und zusätzlich noch ein ganz bestimmtes Inhaltselement als Parameter hinzufügen. In unserem Beispiel soll dieser Contentparameter den Titel einer Überschrift definieren. Erweitern Sie dazu das Callback-Skript um die Variable $content und fügen Sie vor der Aufzählung die HTML-Überschrift ein:

function aktuelle_posts_function($atts, $content = null) {
  extract(shortcode_atts(array(
    'posts' => 1,
  ), $atts));

  $return_string = '<h3>'.$content.'</h3>';
  $return_string .= '<ul>';
  query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
  if (have_posts()) :
    while (have_posts()) : the_post();
       $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    endwhile;
  endif;
  $return_string .= '</ul>';

  wp_reset_query();
  return $return_string;
}

Umgeben Sie nun die gewünschte Überschrift in Ihrem Text mit einem öffnenden und einem schließenden Shortcode, ähnlich wie bei einem HTML-Tag:

[aktuelle-posts posts ="5"]Überschrift der Auflistung aktueller Artikel[/aktuelle-posts]

Verwendung des WordPress Short Codes in einem Widget

Bisher haben wir uns ausschließlich mit der Verwendung von Shortcodes im WordPress-Texteditor beschäftigt. Oft gibt es aber Situationen, in denen Shortcodes auch für ein Widget wie eine Sidebar interessant sind. Standardmäßig erkennt WordPress die Shortcodes dort nicht, aber mit einer kleinen zusätzlichen Codezeile in der PHP-Datei lässt sich das schnell ändern:

add_filter('widget_text', 'do_shortcode');

Mit diesem Code weisen Sie WordPress an, auch Textelemente in Widgets auf Shortcodes zu überprüfen.

Deaktivierung nicht mehr benötigter Shortcodes

Wenn Sie einen bestimmten WordPress-Shortcode nicht mehr benötigen, haben Sie zwei Möglichkeiten, ihn zu deaktivieren: Die optimale Lösung wäre, die Callback-Funktion aus der PHP-Datei und alle Einträge des Codes aus Ihren Beiträgen zu entfernen. Wenn Sie stattdessen nur die Callback-Funktion löschen, erkennt WordPress den Shortcode nicht mehr als solchen und gibt ihn im Klartext mitten im Artikel aus. Da diese Methode bei einem häufig verwendeten Shortcode sehr aufwendig ist, gibt es für solche Fälle eine zweite Möglichkeit: Statt Code und PHP-Funktion zu löschen, wird die Callback-Funktion um eine nichts zurückgebende Anweisung erweitert und damit quasi blockiert:

add_shortcode('aktuelle-posts', '__return_false');

Nützliche Shortcodes für Ihren Blog

Nachdem Sie nun einen kleinen Einblick in die Struktur von Shortcodes erhalten haben und wissen, wie Sie diese in WordPress registrieren und einbinden können, sollen Ihnen die folgenden Beispiele einen Einblick in die vielfältigen Möglichkeiten der Shortcode-Technik geben.

Link-Button einfügen

Um Ihrem Projekt einen Link-Button mit individueller Beschriftung hinzuzufügen, genügt ein Shortcode mit folgender Callback-Funktion:

function link_button_function( $atts, $content = null ) {
  return '<button type="button">'.do_shortcode($content).'</button>';
}
add_shortcode('link-button', 'link_button_function');

Die gewünschte Beschriftung des Buttons wird einfach zwischen den öffnenden und schließenden Shortcode gesetzt:

[link-button]Hier klicken![/link-button]

Anzeige des Menüs von WordPress

Mit dem folgenden Code können Sie ein ausgewähltes Menü Ihres WordPress-Projekts unterhalb des Textbeitrags anzeigen:

function menu_function($atts, $content = null) {
  extract(
    shortcode_atts(
      array( 'name' => null, ),
      $atts
    )
  );
  return wp_nav_menu(
    array(
      'menu' => $name,
      'echo' => false
      )
  );
}
add_shortcode('menu', 'menu_function');

Wenn Sie diesen Shortcode verwenden möchten, geben Sie als Parameter einfach den Namen des entsprechenden Menüs an, z.B:

[menu name="Hauptmenü"]

Der einfache Weg zu WordPress Shortcode sind Plugins

Für alle, die weder einen eigenen Shortcode erstellen noch die vorgefertigten Exemplare manuell in die functions.php bzw. die jeweilige PHP-Datei implementieren möchten, gibt es eine weitere Möglichkeit, die nützlichen Shortcodes für das eigene Webprojekt freizuschalten: Auf der offiziellen WordPress-Homepage finden Sie eine große Auswahl an Plugins, die Ihrer WordPress-Installation sowohl einzelne als auch mehrere verschiedene Shortcodes hinzufügen. Mit der Erweiterung Last Updated Shortcode können Sie beispielsweise auf den gleichnamigen Shortcode [lastupdated] zugreifen, der anzeigt, wann ein Artikel oder eine Seite zuletzt aktualisiert wurde.

Mit über 50 Shortcodes und einem eigenen CSS-Editor ist das Plugin Shortcodes Ultimate etwas umfangreicher. Damit lässt sich WordPress beispielsweise um Shortcodes für Tabs, Buttons, Boxen oder Slider erweitern. Bei der Verwendung von Shortcode-Plug-ins sollten Sie jedoch immer folgendes im Hinterkopf behalten: Die Erweiterungen verbrauchen Rechenressourcen und bremsen bei übermäßiger Nutzung Ihr Webprojekt aus. Außerdem wissen Sie in der Regel nicht, ob ein Plugin weiterentwickelt und regelmäßig aktualisiert wird oder ob es eine Sicherheitslücke darstellt.

Abschließend sei noch erwähnt, dass es nicht nur Plugins gibt, die Shortcodes implementieren, sondern auch solche, die Ihnen helfen, eigene Callback-Funktionen zu erstellen und Ihre Shortcodes zu verwalten.

Shortcoder: In einem visuellen Editor können Sie eigene Shortcodes erstellen und diese einfach mit HTML- und JavaScript-Schnipseln versehen.