Was sind Shortcodes in WordPress?

Wenn man eine Weile mit WordPress, PlugIns und Themes gearbeitet hat stößt man irgendwann auf den Begriff „Shortcode“. Da fragt man sich vielleicht, was sind Shortcodes und wozu benötige ich diese?

Der Name ist nicht unbedingt selbsterklärend. Es handelt sich dabei um den Aufruf einer Funktionalität, mit der dynamische Inhalte in Beiträgen, Seiten und Widgets eingefügt werden können.

Inhaltsverzeichnis
  1. Welche Typen von Shortcodes gibt es?
  2. Wie erstelle ich einen Custom Shortcode?
  3. Wie binde ich Shortcodes in WordPress ein?
  4. Shortcode PlugIns
  5. Vorteile und Nachteile von Shortcodes
  6. Shortcodes versus Gutenberg Editor

Aus technischer Sicht sind sie eine Art Workaround, da diese ermöglichen dynamische Funktionalität in Posts und Pages hinzuzufügen. Um sicherzustellen, dass kein bösartiger Code eingefügt werden kann, wird alles außer HTML-Code gefiltert.

Mit der Shortcode-API kann diese Beschränkung umgangen werden, der Code wird in einer PHP-Funktion erstellt und als Shortcode registriert. Dies ermöglicht Anwendern ohne jegliche Programmierkenntnisse diese einfach zu verwenden.

Welche Typen von Shortcodes gibt es?

Grunds?tzlich werden sie von eckigen Klammern umschlossen: [custom_shortcode]

Es gibt drei verschiedene Typen von Shortcodes:

  • Einfacher Shortcode:

In WordPress sind standardmäßig folgende Shortcodes integriert:

  • Audio: Einbinden einer Audio-Datei
  • Bildunterschrift: Eine Beschreibung für ein Bild
  • Einbetten: Festlegen der maximalen Abmessungen für ein Element, z.B. ein Bild
  • Galerie: Ermöglicht das Einbinden von Bildern als Galerie
  • Wiedergabeliste: Erstellt eine Audio- oder Video-Wiedergabeliste
  • Video: Einbinden einer Video-Datei

Wie erstelle ich einen Custom Shortcode?

Einen eigenen Shortcode zu erstellen ist gar nicht so schwer. Man benötigt dazu etwas PHP-Kenntnisse und Einfallsreichtum. In dem Beispiel soll von der Webseite zitate-online.de ein Zufallszitat erzeugt und ausgegeben werden.

// function called by shortcode
function random_quote_shortcode() { 
    // get random quote 
	$quote = wp_remote_request('https://www.zitate-online.de/zufallszitat.txt.php');
	$body = wp_remote_retrieve_body($quote);
    
    // return random quote
    return $body;
} 

// register shortcode
add_shortcode('random_quote', 'random_quote_shortcode');

Das Code-Schnippsel muss in die functions.php (am besten des Child Themes) kopiert werden. In der Funktion random_quote_shortcode() wird mit der WordPress Funktion wp_remote_request() per HTTP Request das Zitat angefordert. Die Funktion wp_remote_retrieve_body() extrahiert den Body aus dem Request, also das eigentliche Zitat im HTML-Format. Der Shortcode wird dann per hook mit add_shortcode() registriert und kann eingebunden werden. Die Ausgabe sieht dann so aus:

Albert Einstein: „Geniale Menschen sind selten ordentlich, Ordentliche selten genial.“
von zitate-online.de

Wie binde ich Shortcodes in WordPress ein?

In Posts und Pages

Mit dem modernen Gutenberg Editor erstellt man zuerst einen neuen Block und wählt dann „Shortcodes“:

Shortcodes in GutenbergShortcodes in Gutenberg

Im klassischen Texteditor fügt ihn man einfach in den Text ein:

In einem Widget

Möchte man den Code an einer bestimmten Stelle, wie z.B. der linken Seitenleiste einfügen, wählt man einfach ein Text-Widget und kopiert ihn hinein:

Shortcode PlugIns

Shortcodes Ultimate

Shortcodes Ultimate ist die beliebteste Lösung unter den kostenlosen WordPress Shortcodes-Plugins. Es gibt eine riesige Auswahl an Elementen (Content, Box, Media, Galerie, Daten usw.) alles sehr ?bersichtlich kategorisiert und zugänglich:

Features:

  • Mehr als 40 professionell aussehende Shortcodes
  • Premium-Add-ons: zus?tzliche Shortcodes, zus?tzliche Skins
  • Benutzerdefinierte Shortcodes.
  • Voll responsiv
  • Benutzerdefinierter CSS-Editor.
  • Benutzerdefiniertes Widget.
  • Gutenberg kompatibel
  • Mehrsprachigkeit

WP Shortcode by MyThemeShop

WP Shortcode verfolgt eher einen minimalistischen Ansatz und bietet einfache Elemente und Anpassungen an: Im Angebot sind einfache Buttons, Video-Links, Tabs, Spalten-Layouts, Hinweis-Meldungen, Google Maps usw. Das PlugIn ist intuitiv zu benutzen und leichtgewichtig.

Features:

  • Voll responsiv
  • Über 24 Shortcodes enthalten
  • Minimalistische Elemente
  • Kostenlose Unterst?tzung
  • Einfach zu benutzen, intuitiv und leichtgewichtig

Vorteile und Nachteile von Shortcodes

Ein Vorteil ist die Benutzerfreundlichkeit, simples Einfügen an gewünschter Stelle und beliebig große Funktionalität wie z.B. einer Bildergalerie sind möglich. Dadurch sind sie auch universell nutzbar. Zudem sind sie durch die Attribute einfach konfigurierbar (Zeilen- und Spaltenanzahl einer Galerie). Sie sind platzsparend für eine größere Menge Code, die hinter der Funktionalität steckt.

Ein großer Nachteil der „harten Verdrahtung“: Im Gegensatz zu Widgets und PlugIns verschwinden die Codes nach Deinstallation nicht einfach, sie bleiben im Text bzw. an anderer Stelle zurück und müssen von Hand entfernt werden. Noch schlimmer ist es, wenn diese zu einem Theme bzw. Page-Builder gehören. Dann ist Funktionalität und Layout auf eine unsägliche Art und Weise verquickt und man bleibt am besten bei der Lösung oder nimmt ein aufwendiges Neustrukturierung in Kauf.

Shortcodes versus Gutenberg Editor

Gutenberg Editor Blöcke kann man als Shortcodes im neuen Gewand bezeichnen. Das sie als visuelle Drag and Drop Elemente genutzt werden sind sie deutlich zeitgemäßer und anwenderfreundlich. Schnell können aus eigenen Kombinationen neue Blöcke erstellt werden, all das nur mit Bordmitteln. Es gibt mittlerweile auch ein großes Universum an PlugIns und Bibliotheken mit designten Elementen, mit denen man direkt Pages und Posts nach Baukastenprinzip erstellen kann. Auch die Vermengung von Funktionalität und Darstellung ist durch das neue Konzept deutlich reduziert. Für ein frisches WordPress Projekt empfehle ich auf jeden Fall gleich mit Gutenberg Blocks zu starten!

://about*labs