WordPress-Shortcodes: So bringen Sie Dynamik in Ihr Projekt
Das WordPress-Entwicklerteam hat 2008 mit den sogenannten Shortcodes ein Feature eingeführt, mit dem man seinen redaktionellen Beiträgen problemlos dynamische Elemente hinzufügen kann. Obwohl WordPress seit Version 5.0 auf den Block-Editor Gutenberg setzt, der mit zahlreichen Funktionen ausgestattet ist, die früher ausschließlich über Shortcodes verfügbar waren, bleiben Shortcodes ein wichtiger Bestandteil für viele Plugins und Themes.
- Keine Vorkenntnisse nötig dank benutzerfreundlicher AI-Tools
- Vollständig anpassbar mit Themes und Plugins
- Einfache Updates und minimaler Admin-Aufwand
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 sehen die Besuchenden 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.
Während Shortcodes zwar weiterhin funktionieren, bietet WordPress mit dem Block-Editor mittlerweile eine intuitivere Möglichkeit, ähnliche Funktionen direkt über Blöcke einzufügen. Viele klassische Shortcodes wurden durch Gutenberg-Blöcke ersetzt, sodass die Nutzerinnen und Nutzer auf noch einfachere Weise dynamische Inhalte einfügen können, ohne Code zu verwenden. Wenn Sie auf die Nutzung von Shortcodes nicht verzichten möchten, stellt WordPress den speziellen Shortcode-Block bereit. Dieser ermöglicht es, Shortcodes direkt in den Block-Editor einzufügen.
Warum WordPress-Shortcodes so nützlich sind
Mit der Einführung des Block-Editors hat sich die Nutzung von Shortcodes verändert. Viele frühere Shortcode-Funktionen wurden durch Blöcke ersetzt, sodass Nutzerinnen und Nutzer Inhalte nun direkt per Drag-and-Drop einfügen können, ohne Code zu verwenden. Dennoch sind Shortcodes weiterhin nützlich, insbesondere für spezialisierte Plugins oder individuelle Funktionen, die noch keine eigene Block-Alternative haben.
Besonders in bestehenden WordPress-Installationen bleiben Shortcodes eine sinnvolle Lösung, um Kompatibilität mit älteren Themes und Plugins zu gewährleisten. Diese setzen weiterhin vielfach auf Shortcodes, wenn sie noch nicht vollständig auf Blöcke umgestellt wurden. Shortcodes in WordPress eignen sich darüber hinaus für dynamische Inhalte und komplexe Funktionen. Auch, wer eigene Funktionen entwickeln möchte, profitiert von Shortcodes: Mit diesen kann man spezifische Features einbinden, ohne direkt am Code des Themes arbeiten zu müssen.
Obwohl WordPress sich zunehmend in Richtung Blöcke entwickelt, sind Shortcodes besonders für fortgeschrittene Nutzende und spezielle Anwendungsfälle weiterhin eine wertvolle Ergänzung.
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 unsere Anleitung „WordPress-Child-Theme erstellen“ 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
Früher mussten Shortcodes manuell für Widgets aktiviert werden. Seit WordPress 5.8 lassen sich viele Inhalte jedoch direkt über den Block-Editor in Widgets einfügen, wodurch die Notwendigkeit von Shortcodes wie bereits erwähnt in vielen Fällen sogar entfällt. Falls ein Shortcode weiterhin genutzt werden soll, kann er einfach in einen „Shortcode“-Block innerhalb eines Widgets eingefügt werden.
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-Plugins: 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 Plugins, die Ihrer WordPress-Installation sowohl einzelne als auch mehrere verschiedene Shortcodes hinzufügen. Beispielhaft können die folgenden Plugins genannt werden:
- Shortcoder: In wenigen Schritten zum eigenen WordPress-Shortcode: In einem visuellen Editor erzeugen Sie Ihren eigenen Shortcode und versehen ihn unkompliziert mit HTML- und JavaScript-Snippets.
- Shortcodes Ultimate: Dieses Plugin enthält über 50 vordefinierte hilfreiche Shortcodes und unterstützt den Block-Editor.
Sie interessieren sich für weitere spannende WordPress-Plugins? Ein Blick auf unsere Ratgeberartikel kann helfen:
