WordPress-Shortcodes: So bringen Sie Dynamik in Ihr Projekt

WordPress zählt zu den meistgenutzten Content-Management-Systemen weltweit. Unzählige Plug-ins haben der ehemaligen Blogger-Software zu einem gewaltigen Funktionsumfang verholfen, mit dem sich die unterschiedlichsten Webprojekte realisieren lassen. In einer Sache ist sich WordPress allerdings über die Jahre hinweg treu geblieben: Es ist ein für Blogger, Redakteure und andere Texter auch ohne Fachwissen in HTML und CSS bedienbares System und eignet sich somit als schnelle und unkomplizierte Lösung, um Inhalte im World Wide Web zu verbreiten. Wer also seine ersten Schritte als Webautor wagen will, 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 problemlos dynamische Elemente hinzufügen kann.

Was sind Shortcodes?

Bei den sogenannten Shortcodes, die WordPress mit Version 2.5 hinzugefügt wurden, handelt es sich um Kurzbefehle, die innerhalb von Texten platziert werden können und mit einem PHP-Code verknüpft sind. Dieser ist entweder in der functions.php oder in einer separaten .php-Datei hinterlegt, die in die functions.php eingebunden wird. Werden Seiten mit einem Shortcode aufgerufen, sorgt WordPress für die Ausführung und Interpretation des jeweiligen Skriptes. Dadurch sieht der Besucher anstelle des Codes den durch die PHP-Funktion erzeugten Inhalt. Der Shortcode fungiert also genau genommen als Platzhalter, zum Beispiel für einfache Elemente wie einen Textauszug oder auch für dynamische Inhaltstypen wie Pop-ups 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. So hat ein Shortcode beispielsweise die Form [aktuelle-posts]. Mit der passenden PHP-Funktion verknüpft, sollen mit diesem Code an der ausgewählten Position andere, kürzlich veröffentlichte Beiträge angezeigt werden. Mit zusätzlichen Parametern lassen sich die WordPress-Shortcodes außerdem spezifizieren. Um die Anzeige kürzlich veröffentlichter Artikel auf fünf zu begrenzen, ist es zum Beispiel möglich, den eben genutzten Kurzbefehl folgendermaßen zu erweitern: [aktuelle-posts posts="5"].

Warum WordPress-Shortcodes so nützlich sind

Vor allem aufgrund zweier Aspekte sind Shortcodes in WordPress so praktisch: Zum einen können durch sie auch solche Nutzer Dynamik in ihr Webprojekt bringen, die über keinerlei JavaScript- oder CSS-Kenntnisse verfügen. Selbst die für die Shortcodes elementare Skriptsprache PHP brauchen Sie nicht unbedingt zu beherrschen, denn diverse Kurzbefehle inklusive entsprechender Skripte sind bereits standardmäßig in WordPress verfügbar. Auf der offiziellen Homepage sind selbige übersichtlich aufgelistet. Zudem finden Sie dort Anleitungen, wie Sie den jeweiligen Shortcode freischalten und nutzen können. Darüber hinaus stellen viele WordPress-Nutzer ihre eigens entwickelten WordPress-Shortcodes auf unterschiedlichen Plattformen wie SNIPPLR kostenfrei zur Verfügung. Außerdem bieten viele Plug-ins und Templates eigene Shortcodes. Eigenständig programmieren müssen Sie daher nur, wenn Sie ein bestehendes Skript ändern wollen oder ein gänzlich neues Skript benötigen.

Das zweite große Plus der Shortcodes ist die Zeitersparnis: Nutzen Sie beispielsweise eine bestimmte Textpassage, ein Logo oder ein anderes Element in Ihren Beiträgen immer wieder, bedeutet die Platzierung eines entsprechend programmierten Shortcodes eine enorme Zeitersparnis. Wollen Sie nachträglich etwas an diesem Element verändern, sind Sie außerdem nicht dazu gezwungen, dies separat für jeden Artikel zu tun. Sie passen einfach den PHP-Code an und die Änderungen werden für alle Seiten Ihres WordPress-Projektes übernommen, die den Kurzbefehl enthalten.

Eigene Shortcodes in WordPress erstellen – so funktioniert‘s

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. Es soll im Folgenden aber weniger darum gehen, wie Sie ein solches Skript programmieren, denn das würde einen vom Thema wegführenden Grundkurs in PHP-Programmierung bedeuten. Vielmehr erfahren Sie in den folgenden Abschnitten, wie Sie Shortcodes in WordPress einbinden, für Ihr Projekt nutzen und wieder deaktivieren können. Den jeweiligen PHP-Code fügen Sie entweder in die functions.php im Verzeichnis des genutzten Themes oder in eine separate PHP-Datei ein, die Sie entsprechend einbinden. Um sicherzugehen, dass die eigenen Shortcodes nicht mit dem nächsten Update des Themes verschwinden, sollten Sie ein Child-Theme anlegen. Das ist mit wenigen Handgriffen erledigt wie die Anleitung im WordPress-Support-Forum zeigt.

Callback-Funktion erstellen

Die PHP-Funktion, die ausgeführt wird, sobald WordPress einen Shortcode registriert, ist eine sogenannte Callback-Funktion, zu Deutsch: Rückruf-Funktion. Als solche wird sie einer anderen Funktion als Parameter übergeben und unter definierten Bedingungen mit definierten Parametern aufgerufen. Die folgende Beispiel-Funktion durchsucht die Datenbank und erzeugt für den Shortcode [aktuelle-posts] einen Link zum zuletzt verfassten 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 Variable $return_string (PHP kennzeichnet alle Variablen mit $). Die PHP-Funktion (aktuelle_posts_function) gibt diese Variable per return zurück. Nutzen Sie stattdessen irrtümlich den echo-Befehl, landet das per Shortcode implementierte Element plötzlich vor dem eigentlichen Inhalt.

Shortcode in WordPress registrieren

Sie müssen WordPress darauf aufmerksam machen, dass es sich bei der erstellten Funktion um eine Shortcode-Funktion handelt, die automatisch ausgeführt werden soll, wenn eine aufgerufene Seite den Kurzbefehl [aktuelle-posts] enthält. Dazu erweitern Sie Ihre PHP-Datei um den folgenden Code:

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

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

Funktionsstärkere Shortcodes mit Parametern definieren

Um Ihrem WordPress-Shortcode zusätzliche Flexibilität zu verleihen, haben Sie die Möglichkeit, optionale Parameter hinzufügen. Im bisher verwendeten Beispiel bietet es sich an, im Shortcode auszuzeichnen, wie viele Beiträge genau angezeigt werden sollen. Zu diesem Zweck benötigen Sie zwei weitere Funktionen: Einerseits die Funktion shortcode_atts(), die nutzergenerierte Shortcode-Attribute mit nativen Attributen kombiniert und benötigte Standardwerte automatisch eingibt. Andererseits wird die PHP-Funktion extract() vorausgesetzt, um die Shortcode-Attribute zu extrahieren. Für den Fall, dass das Argumentfeld frei bleibt, formulieren Sie außerdem den Standardwert 1 ('posts' => 1):

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;
}

Spezifizieren Sie nun den Shortcode im Text zum Beispiel folgendermaßen [aktuelle-posts posts="5"], erscheint nicht nur der zuletzt veröffentlichte, sondern eine Auflistung der fünf aktuellsten Artikel.

Bestimmte Inhalte als Shortcode-Parameter nutzen

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 Content-Parameter den Titel einer <h3>-Überschrift definieren. Dazu erweitern Sie das Callback-Skript um die Variable $content und fügen vor der Auflistung <ul> die HTML-Überschrift <h3> 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;
}

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

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

WordPress-Shortcode in einem Widget verwenden

Bisher ging es ausschließlich darum, wie Sie Shortcodes im WordPress-Texteditor einsetzen können. Häufig ergeben sich allerdings auch Situationen, in denen die Kurzbefehle auch für ein Widget wie eine Sidebar interessant sind. Standardmäßig erkennt WordPress die Shortcodes dort zwar nicht, doch mit einer kleinen zusätzlichen Codezeile in der PHP-Datei schaffen Sie diesen Umstand schnell aus der Welt:

add_filter('widget_text', 'do_shortcode');

Mit diesem Code signalisieren Sie WordPress, dass es auch die Textelemente in Widgets auf Shortcodes überprüfen soll.

Nicht mehr benötigte Shortcodes ausschalten

Wenn Sie einen bestimmten WordPress-Shortcode nicht mehr benötigen, haben Sie zwei Möglichkeiten, selbigen 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. Löschen Sie stattdessen nur die Callback-Funktion, würde WordPress den Shortcode nicht mehr als solchen erkennen und ihn im Klartext mitten im Artikel ausgeben. Da diese Methode bei einem häufig genutzten Shortcode einen sehr hohen Aufwand bedeutet, gibt es für solche Fälle eine zweite Möglichkeit: Statt Code und PHP-Funktion zu löschen, wird die Callback-Funktion durch eine nichts zurückgebende Anweisung erweitert und auf diese Weise quasi blockiert:

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

Praktische Shortcodes für Ihren Blog

Nachdem Sie einen kleinen Einblick über die Struktur von Shortcodes gewonnen haben und wissen, wie Sie selbige in WordPress registrieren und einbinden, sollen Ihnen die folgenden Beispiele einen Einblick über die vielfältigen Möglichkeiten der Kurzbefehl-Technik gewähren.

Link-Button einfügen

Um Ihrem Projekt einen Link-Button mit individuellem Schriftzug 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');

Den gewünschten Schriftzug des Buttons setzen Sie nun einfach zwischen öffnenden und schließenden Shortcode:

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

WordPress-Menü anzeigen

Mit dem folgenden Code können Sie ein ausgewähltes Menü Ihres WordPress-Projektes unter dem Textbeitrag anzeigen lassen:

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 nutzen wollen, geben Sie einfach als Parameter den Namen des jeweiligen Menüs an, wie zum Beispiel:

[menu name="Hauptmenü"]

Google Maps integrieren

Mit der Shortcode-Technik lassen sich auch schnell und unkompliziert Kartenausschnitte des Kartendienstes Google Maps in Ihr Projekt einbinden, ohne dass Sie den Quellcode anpassen müssen. Der passende Code für Ihre PHP-Datei sieht folgendermaßen aus:

function googlemap_function($atts, $content = null) {
    extract(shortcode_atts(array(
        "width" => '640',
        "height" => '480',
        "src" => ''
    ), $atts));
    return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&key=IHR_API_SCHLUESSEL"></iframe>';
}
add_shortcode("googlemap", "googlemap_function");

Der Shortcode, der zu den Standard-Kurzbefehlen gehört, ist an die drei Parameter Höhe (height), Breite (width) und Google-Maps-Quelle (src) gebunden. Daher sollte der Code in Ihrem Editor wie folgt aussehen:

[googlemap width="640" height="480" src= https://www.google.com/maps/place/Brandenburger+Tor/@52.5158015,13.3776636,233m?hl=de]

WordPress-Shortcode-Plug-ins: der einfache Weg

Für alle, die weder einen eigenen Shortcode erstellen, noch vorgefertigte Exemplare manuell in die functions.php bzw. die jeweilige PHP-Datei implementieren wollen, gibt es noch eine weitere Möglichkeit, die nützlichen Kurzbefehle für das eigene Webprojekt freizuschalten: Auf der offiziellen WordPress-Homepage finden Sie eine große Auswahl an Plug-ins, die Ihrer WordPress-Installation sowohl einzelne als auch mehrere verschiedene Shortcodes hinzufügen. So können Sie mit der Erweiterung Last Updated Shortcode zum Beispiel auf den gleichnamigen Shortcode [lastupdated] zurückgreifen, der anzeigt, wann ein Artikel oder eine Seite zuletzt aktualisiert wurde. Mit über 50 Shortcodes und einem eigenen CSS-Editor etwas umfangreicher ist das Plug-in Shortcodes Ultimate. Mit diesem erweitern Sie WordPress zum Beispiel um Kurzbefehle für Tabs, Buttons, Boxen oder Slider. Wenn Sie Shortcode-Plug-ins nutzen, sollten Sie folgendes jedoch immer im Hinterkopf behalten: Die Erweiterungen nehmen Rechner-Ressourcen in Anspruch und bremsen Ihr Webprojekt bei unverhältnismäßiger Verwendung. Zudem wissen Sie meist nicht, ob ein Plug-in weiterentwickelt bzw. regelmäßig aktualisiert wird oder eine Sicherheitslücke darstellt. Abschließend sei auch erwähnt, dass es nicht nur Plug-ins gibt, die Shortcodes implementieren, sondern auch solche, die Ihnen helfen, eigene Callback-Funktionen zu erzeugen und Ihre Shortcodes zu verwalten. Für diesen Zweck eignen sich beispielsweise die folgenden drei WordPress-Erweiterungen:

  • Shortcoder: In einem visuellen Editor erzeugen Sie Ihren eigenen Shortcode und versehen ihn unkompliziert mit HTML- und JavaScript-Snippets.
  • Shortcodes in Use: Mit diesem Administrationswerkzeug erhalten Sie einen Überblick darüber, in welchen Artikeln bzw. auf welchen Seiten Sie Shortcodes verwenden und woher die jeweiligen Codes eigentlich stammen (Plug-ins, Standard oder benutzerdefiniert).
  • Shortcode Reference: Durch die Installation dieses Plug-ins erhalten Sie während der Content-Erstellung eine detaillierte Übersicht über alle verfügbaren Shortcodes Ihrer WordPress-Installation.
War dieser Artikel hilfreich?