Die wichtigsten WordPress Shortcodes im Überblick

WordPress gehört zu den beliebtesten Content-Management-Systemen, um Webseiten und Blogs einzurichten. Ohne großen Programmieraufwand ist die Plattform in wenigen Schritten installiert. Mit dem Editor lassen sich spannende Webseiten und Blogbeiträge erstellen. Dank den eingeführten WordPress Shortcodes können sogar dynamische Inhalte direkt über den Editor eingefügt werden.

Was es mit Shortcodes auf sich hat und welche Sie unbedingt kennen sollten, erfahren Sie in diesem Beitrag.

Was sind Shortcodes und wozu werden sie genutzt? 

Shortcodes sind Kurzbefehle, die sich in WordPress ganz einfach im Editor hinzufügen lassen und unterschiedliche Aktionen und Inhalte präsentieren. Shortcodes dienen im Editor als Platzhalter, weil an der Stelle, an der der Shortcode eingefügt wird, das entsprechende dynamische Element gezeigt wird. Shortcodes sind mit dem .php-Code der Webesite verknüpft. Das sorgt dafür, dass das Skript ausgeführt wird, sobald eine WordPress-Seite mit eingebautem Shortcode aufgerufen wird. Damit der Shortcode erkannt wird, muss er in eckigen Klammern stehen. Neben dem Shortcode selbst können verschiedene Parameter dazu genutzt werden, um die Darstellung des Inhaltes noch genauer zu definieren. 

Besonders nützlich sind Shortcodes immer dort, wo sich Dynamik auf einer Webseite gut macht. Sie sind ein leichtes Mittel, um Effekte im Editor zu erzeugen – ohne, dass Sie CSS oder sogar Programmiersprachen verwenden müssen.

Die WordPress Core Shortcodes sind auf der Wordpress-Webseite (in den Kategorien Video, Audio, Bilder und Dokumente sowie Verschiedenes) aufgelistet. So kann mit dem [gallery]-Shortcode beispielsweise eine Fotogalerie erzeugt werden, die Bilder einer bestimmten Seite oder Kategorie zeigt. 

Selbst Einsteigerinnen und Einsteiger können so tolle Effekte in Ihr Webprojekt mit einbinden. Viele Templates und Plugins bieten bereits eine Reihe von Shortcodes an. Möchten Sie hingegen einen eigenen Shortcode verwenden, müssen Sie diesen nur einmal programmieren - dann kann er an die Stelle im Editor gesetzt werden, wo das dynamische Element erscheinen soll. 

So funktioniert’s: In WordPress Shortcode einfügen

Verwenden Sie einen der Shortcodes, den WordPress auf der offiziellen Webseite selbst vorstellt, können Sie diesen ganz einfach in den Texteditor einfügen. Mit den Anleitungen auf der WordPress-Webseite wird es so selbst Neulingen möglich, die Kurzbefehle zu verwenden. Benutzen Sie den Gutenberg-Editor, dann finden Sie dort den Block Shortcode. Klicken Sie den Block an und fügen Sie den gewünschten Kurzbefehl ein.

Quelle: Screenshot WordPress Gutenberg-Editor

Um einen eigenen Shortcode zu verwenden, müssen Sie den PHP-Code zunächst in die functions.php-Datei Ihrer Webseite einfügen. Erstellen Sie dazu am besten ein Child Theme, da es ansonsten sein kann, dass die Funktion immer wieder überschrieben wird. 

Der PHP-Code muss definiert werden, damit das Skript des Shortcodes beim Abrufen der Webseite gefunden und angezeigt werden kann. Hierbei wird von einer Callback-Funktion (Rückruf-Funktion) gesprochen. Immer dann, wenn die Seite aufgerufen wird, wird das Skript an den PHP-Code geschickt, der dann wiederum „zurückruft“ und die gewünschte Funktion ausliefert. 

Um Überschneidungen oder Fehler zu vermeiden, sollten Sie zudem einen eindeutigen Namen für den Shortcode verwenden. Fügen Sie die Callback-Funktion anschließend in Ihre functions.php-Datei mit ein. Tools wie Generate WP helfen Ihnen dabei, die PHP-Funktion zu erstellen. Jeder Shortcode wird über die Funktion add_shortcode() zum Code hinzugefügt: 

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

'shortcode_name' gibt dabei nichts anderes als den Namen des Shortcodes an. Die Callback-Funktion ('shortcode_handler_function') ist wie folgt definiert: 

function shortcode_handler_function( $atts, $content, $tag ){ }

• $atts umfasst ein Array mit Attributen. 

• $content umfasst den Inhalt, der durch einen umschließenden Shortcode ausgegeben wird.

• $tag definiert den Wert des Shortcode-Tags, der für das Auslösen der Handler-Funktion sorgt. 

Möchten Sie einen Shortcode nicht mehr verwenden, dann können Sie den Parameter '__return_false' in der Callback-Funktion verwenden. 

Wie für jede Funktion bei WordPress können Sie natürlich auch auf Plugin-Lösungen zurückgreifen, um Shortcodes zu nutzen. Mit Shortcodes Ultimate erhalten Sie beispielsweise 50 verschiedene Kurzbefehle, mit denen Sie unterschiedliche Elemente wie Slider, Accordions, Lightbox-Effekte oder Bilder-Karusselle einfügen können. Content- und Loop-Shortcodes bietet auch das Plugin Custom Content Shortcode. Mit der loop-Funktion werden query loops erzeugt. So können beispielsweise verfügbare Produkte einer Kategorie ausgespielt werden.  

Einfügen von WordPress Shortcode: Widget, Header- und Footer-Bereich

Klassischerweise werden Shortcodes nur im Editor erkannt (mit dem Gutenberg Editor werden Shortcodes auch in Widgets erkannt). Möchten Sie einen Shortcode jedoch im Widget-Bereich, Footer oder Header einsetzen, gibt es einen kleinen Trick, mit dem Sie dafür sorgen, dass das Skript auch hier erkannt und ausgespielt wird. Nutzen Sie dazu folgenden Codeschnipsel: 

add_filter('widget_text', 'do_shortcode');

Fügen Sie den Code je nach Anwendungsfall in die header.php, footer.php oder functions.php-Datei ein.

Shortcode mit Parametern näher bestimmen 

Jeder Shortcode kann mit optionalen Parametern definiert werden und erhält dadurch noch mehr Flexibilität. So können Sie beispielsweise die Anzahl der Inhalte oder auch die Größe der Anzeige bestimmen. Darüber hinaus haben Sie die Möglichkeit, ein ganz bestimmtes Element zu definieren, dass beim entsprechenden Shortcode ausgespielt werden soll. 

Beispiel: 

[gallery columns="5" orderby="title DESC, ID ASC"]

Dieser Shortcode zeigt eine Fotogalerie mit fünf Spalten und ordnet die Bilder nach ihrem Titel. Für die WordPress Core Shortcodes finden Sie eine Anleitung mit allen möglichen Parametern auf der WordPress Webseite.

Überblick WordPress Shortcode Liste: Diese Shortcodes sollten Sie kennen 

Shortcodes bieten vielfältige Möglichkeiten, Dynamik in die eigene Webseite zu bringen. Einmal programmiert, können sie immer wieder verwendet werden und sind schnell in den Editor eingefügt. 

Einige Themes kommen direkt mit vorinstallierten Shortcodes und können so ganz intuitiv im Editor genutzt werden. Für alle, die nicht mit PHP programmieren können, ist es daher sinnvoll, vorher zu überprüfen, welche Shortcodes in einem Theme bereits vorhanden sind. 

Nachfolgend stellen wir Ihnen die zehn nützlichsten Shortcodes vor, die Ihren Webauftritt auf die nächste Stufe heben: 

1. [googlemaps]

Geschäfte, Restaurants oder Ferienunterkünfte fügen in den Kontaktbereich Ihrer Webseite oftmals eine Google Maps-Karte ein. So können Websitebesucherinnen und -besucher ganz intuitiv die Routenbeschreibung in Google Maps öffnen und ihre Anfahrt planen. Dank dem Shortcode [googlemaps] kann die Karte ganz einfach in jede WordPress-Webseite eingefügt werden. 

Da der Shortcode zum WordPress Core gehört, sind auch keinerlei PHP-Kenntnisse notwendig. Alles, was sie tun müssen, ist den Shortcode in den Editor einzufügen. Suchen Sie dazu Ihr Unternehmen auf Google Maps. Klicken Sie nun auf „Teilen“, um den iframe-Code zu erhalten. 

Fügen Sie den Code nun in einen HTML-Block in Ihre Seite ein. Speichern Sie die Bearbeitung und veröffentlichen Sie den Code. Sobald Sie den Block erneut bearbeiten wollen, werden Sie feststellen, dass Sie dort nun einen Shortcode vorfinden. Kopieren Sie diesen ganz einfach, um Google Maps an den verschiedenen Stellen Ihrer Webseite zu präsentieren. 

2. [link-button]

Nutzen Sie auf Ihrer Webseite beispielsweise einen wiederkehrenden Button, dann können Sie diesen ganz einfach als Shortcode definieren. Dazu müssen Sie folgende Callback-Funktion in Ihre php.functions-Datei einfügen: 

function link_button_function( $atts, $content = null ) {

  return '<button type="button">'.do_shortcode($content).'</button>';

}

add_shortcode('link-button', 'link_button_function');

Den Call-to-Action fügen Sie dann zwischen einem öffnenden und schließenden Shortcode (wie bei HTML) ein: 

[link-button]Jetzt downloaden![/link-button]

3. [box]

Die Themes von ElegantThemes gehören zu den beliebtesten Vorlagen für WordPress-Webseiten. Vor allem das Theme Divi kann für vielfältige Konzepte genutzt werden – dank der vielfältigen Funktionen. Selbstverständlich gehören auch Shortcodes zu der Theme-Vorlage. 

Mit dem [box]-Shortcode können beispielsweise Informationskästen auf Seiten oder in Beiträge eingefügt werden. 

Dafür stehen unterschiedliche Box-Typen zur Verfügung. Mit dem box type=“warning“ wird ein Hinweis-Feld erzeugt, in dem ein wichtiger Text eingefügt werden kann. Die Auswahl des Typs bestimmt über die Hintergrundfarbe des Kastens. Der Text, der in der Box stehen soll, wird ganz einfach zwischen einem öffnenden und schließenden Shortcode geschrieben.

[box type="warning"]

Hier steht der Hinweis-Text!

[/box]

4. [gallery]

Mit dem gallery-Shortcode erhalten Sie eine tolle Möglichkeit, Bilder in einem Galerie-Format zu präsentieren. Der Shortcode kann standardmäßig auf Seiten und in Posts verwendet werden. Als default-Einstellung wird mit dem Shortcode [gallery] das Rectangular-Format aufgespielt. 

Um ein anderes Format zu verwenden, wird hinter den Shortcode-Namen der entsprechende Typ geschrieben, beispielsweise so: 

[gallery type="slideshow"]

Als Attribute stehen folgende Eigenschaften zur Verfügung: columns, type, orderby, size, id, include sowie exclude. 

5. [instagram]

Instagram ist zu einem wichtigen Marketingkanal für viele Unternehmen geworden. Immer häufiger wird der Instagram-Feed auch in Webseiten integriert – beispielsweise, um Inspirationen für die eigenen Produkte zu präsentieren. 

Instagram-Feeds lassen sich auch auf WordPress-Seiten mithilfe eines Shortcodes integrieren. Verwenden Sie dazu ganz einfach: 

[instagram url=LINK]

An der Stelle „LINK“ fügen Sie die URL Ihres persönlichen Instagram-Accounts ein. Bestimmen Sie die Größe des Feeds mit den Attributen width und height

6. [googleapps]

Sie möchten auf Ihrer Webseite ein Dokument einfügen, um Webseitenbesuchern beispielsweise eine Checkliste zur Verfügung zu stellen? Mit dem Shortcode [googleapps] können Sie ganz einfach ein Dokument aus Google Doc in Ihre WordPress-Seite einfügen. 

Sie können so ein Spreadsheet, eine Präsentation oder ein einfaches Text-Dokument auf einer Webseite oder in einem Blogpost einbinden. Um das Dokument integrieren zu können, müssen Sie sicher gehen, dass die Privatsphäre-Einstellung auf „öffentlich“ steht. 

Kopieren Sie nun den iframe-Code und fügen Sie diesen in einen HTML-Block in WordPress ein. Nachdem Sie den Code abgespeichert haben, generiert sich der Shortcode automatisch und antwortet auf die Handler-Funktion im PHP-Code. Ihr Dokument wird nun auf Ihrer Webseite ausgespielt. 

7. [contact-form]

Sie möchten Kontaktdaten von Ihren Webseitenbesuchern erfragen, um Ihnen beispielsweise ein Angebot zuschicken zu können? Dazu eignet sich ein Kontaktformular ideal. 

Mit dem Shortcode [contact-form] lässt sich ein einfaches Kontaktformular erstellen. Abhängig vom verwendeten Theme lässt der Shortcode verschiedene Attribute zu und kann entsprechend gestaltet werden. 

8. [portfolio]

Für Agenturen, Freelancer oder B2B-Unternehmen ist der [portfolio]-Shortcode eine interessante Möglichkeit, Referenzen auf der eigenen WordPress-Seite vorzustellen. Der Shortcode bettet verschiedene Portfolio-Beiträge ein und präsentiert diese in einer Übersicht. 

Als Attribute stehen eine Vielzahl von Auswahlmöglichkeiten bereit: display_types, display_tags, display_content, display_author, include_type, include_tag, columns, showposts, order sowie orderby. Ein Beispiel könnte so aussehen: 

[portfolio display_types=true display_tags=false include_type=whitepaper-kunde1,casestudy-kunde2 columns=4 showposts=6 orderby=title]

9. [display-posts]

Möchten Sie auf Ihrem Blog eine Seite zeigen, auf der mehrere Blogposts einer Kategorie oder eines Tags präsentiert werden, können Sie dazu auf den Shortcode [display_posts] zurückgreifen. Mit dem Kurzbefehl haben Sie die Möglichkeit, Beiträge einer bestimmten Kategorie, eines Autors oder eines Tags in einer Liste auszuspielen. 

Der Code funktioniert sowohl auf Seiten, Beiträgen als auch im Widget-Bereich. Vielfältige Attribute stehen für die Gestaltung der Übersicht zur Verfügung. Ein Beispiel könnte wie folgt aussehen:

[display-posts category="SEO" posts_per_page="10" include_date="true" order="ASC" orderby="title"]

10. [blog_subscription_form]

Geben Sie Ihren Webseitenbesuchern und Webseitenbesucherinnen die Möglichkeit, sich für E-Mail-Updates zu einem Newsletter anzumelden. Mit dem Shortcode [blog_subscription_form] richten Sie ein einfaches Formular ein, bei dem Besucherinnen und Besucher Ihre Daten hinterlassen können. 

Um den Block zu konfigurieren, können Sie folgende Attribute nutzen: 

• title – Titel für Personen, die noch nicht abonniert haben.  

• title_following – Titel für Personen, die bereits abonniert haben.

• subscribe_text – Anmeldeaufforderung für abgemeldete User.

• subscribe_logged_in – Anmeldeaufforderung für angemeldete User.

• subscribe_button – Text für Anmeldebutton.

• show_subscribers_total – Anzahl der Abonnentinnen und Abonnenten.

Innerhalb eines Shortcodes können alle Attribute aufgeführt werden. Ein Beispiel könnte so aussehen: 

[blog_subscription_form title="Anmelden" title_following="Sie sind bereits angemeldet" subscribe_text="Geben Sie Ihre E-Mail für Benachrichtigungen ein" subscribe_logged_in="Hier klicken zu Anmeldung" subscribe_button="Anmelden!" show_subscribers_total=true]

Fazit: Mehr Dynamik durch WordPress Shortcodes

WordPress Shortcodes sind eine tolle Möglichkeit, die es selbst Nicht-Developern erlauben, dynamische Elemente auf Webseiten zu integrieren. Die WordPress Core Shortcodes funktionieren mit gängigen WordPress-Themes. Darüber hinaus kann der Umfang der möglichen Shortcodes jedoch auch durch Plugins oder andere Themes ausgeweitet werden. Um eigene Shortcodes auf Ihrer WordPress-Webseite vorzunehmen, müssen Sie die entsprechende Callback-Funktion im PHP-Code definieren.

Titelbild: scyther5 / iStock / Getty Images Plus