Stellen Sie sich vor, Sie fügen eine Galerie mit 20 Bildern in einen Artikel ein. Ohne Shortcodes sind das Dutzende Zeilen HTML mit Wrappern, Klassen, Datenattributen und Thumbnail-Links. Mit einem Shortcode ist es eine Zeile: [gallery]. Genau wegen dieses Kontrasts zwischen Routineaufwand und Ergebnis führte WordPress 2.5 Shortcodes ein, und knapp zwei Jahrzehnte später ist der Mechanismus unverzichtbar.

Das Problem: Die meisten Nutzer fürchten Shortcodes als „Programmierer-Magie" oder kopieren sie blind, ohne die Syntax zu verstehen. Dabei kann ein einziger eigener Shortcode ein vierzig Megabyte großes Plugin ersetzen oder monatlich eine Stunde Routinearbeit einsparen. Diese Aufschlüsselung, vom eingebauten [gallery] und [audio] bis zu Ihrem eigenen Shortcode in functions.php, gibt Ihnen die vollständige Kontrolle über das Werkzeug.

💡 Kurzüberblick:

• Was ein Shortcode ist: ein Tag in eckigen Klammern, den WordPress beim Laden einer Seite durch das Ergebnis einer PHP-Funktion ersetzt.
• Eingebaute Shortcodes: gallery, audio, video, caption, embed und playlist funktionieren direkt nach der WordPress-Installation, ohne Plugins.
• Shortcode-Parameter: Die Syntax key="value" erlaubt es, die Ausgabe anzupassen, ohne Code zu ändern.
• Eigene Shortcodes erstellen: von einer einfachen URL-Ersetzung bis zu einem Bild-Shortcode mit Attributen, inklusive fertigem PHP-Code für functions.php.
• Shortcodes in Widgets und Templates: wie Sie die Unterstützung mit einer Zeile aktivieren und wo das nützlich ist.

Was ein Shortcode ist und wie er funktioniert

Ein Shortcode ist ein kurzer Tag in eckigen Klammern, den WordPress beim Rendern einer Seite durch das Ergebnis einer ausgeführten PHP-Funktion ersetzt. Sie schreiben [gallery] im Editor, Besucher sehen ein sauberes Bildraster. Keine Magie: Hinter jedem Shortcode steht eine Funktion, die über add_shortcode() im Core, Theme oder Plugin registriert wurde.

Der entscheidende Unterschied zu statischen HTML-Einschüben: Ein Shortcode wird serverseitig ausgeführt. Sie übergeben ihm Parameter, und das Ergebnis wird dynamisch generiert. Der Inhalt ändert sich, die Ausgabe ändert sich, ohne dass Sie Dutzende Seiten manuell bearbeiten müssen.

Aus Sicht des Editors gibt es eine Nuance. Der visuelle Editor (Gutenberg oder klassischer TinyMCE) rendert den Shortcode sofort als Vorschau. Um mit Parametern und verschachtelten Tags zu arbeiten, wechseln Sie daher in den Textmodus. Nur dort sehen Sie die echte Struktur: öffnendes Tag, Attribute, Inhalt, schließendes Tag.

Eingebaute WordPress-Shortcodes: was ohne Plugins verfügbar ist

WordPress wird mit sechs registrierten Shortcodes ausgeliefert. Sie müssen sie weder aktivieren noch konfigurieren, sondern fügen sie einfach in einen Beitrag ein und erhalten Ergebnisse.

Der flexibelste unter ihnen ist [gallery]. Das Attribut ids erlaubt es, bestimmte Bilder per ID anzugeben, auch solche, die nicht zum aktuellen Beitrag gehören. Das Attribut size legt die Thumbnail-Größe fest (thumbnail, medium, large oder full). Die Kombination dieser beiden Parameter deckt die meisten Szenarien ab, für die man früher ein separates Galerie-Plugin installierte.

[audio] und [video] unterstützen mehrere Quellen, der Browser wählt ein kompatibles Format. Playlists über [playlist] werden ähnlich wie eine Galerie aus Anhangs-IDs zusammengestellt, geben aber einen Player mit Titelumschaltung aus.

Shortcode-Parameter: wie Sie die Ausgabe steuern

Die meisten Shortcodes akzeptieren Attribute im Format key="value". Das Ersetzen von Werten ändert die Logik der Funktion, ohne in den Code einzugreifen.

Nehmen Sie [gallery]. Ohne Parameter zeigt es alle Bilder des Beitrags in Standardgröße. Fügen Sie konkrete Angaben hinzu:

1
[gallery ids="12,34,56" size="large" columns="3"]

Nun ist die Ausgabe auf drei bestimmte Bilder begrenzt, die Größe auf large erhöht und das Raster in drei Spalten angeordnet. Parameter lassen sich beliebig kombinieren, nicht angegebene erhalten ihre Standardwerte.

Manche Shortcodes verwenden öffnende und schließende Tags, wenn Inhalte zwischen ihnen übergeben werden müssen. Ein Google-Maps-Plugin könnte zum Beispiel eine Konstruktion wie diese erwarten:

1
[maps]New York, USA[/maps]

Das schließende Tag beginnt immer mit einem Schrägstrich /. WordPress nutzt diese Notation, um Inhalte zwischen Tags von Attributen innerhalb des öffnenden Tags zu unterscheiden.

Wie Sie Ihren eigenen Shortcode erstellen

Wenn Sie zum zehnten Mal in einer Woche dieselbe URL, denselben HTML-Block oder Handlungsaufforderung in Artikel einfügen, ist es Zeit, einen Shortcode zu schreiben. Dafür müssen Sie kein PHP-Entwickler sein: Die Grundkonstruktion passt in drei Zeilen.

Einfacher Shortcode für eine URL

Fügen Sie diesen Code am Ende der Datei functions.php Ihres Themes ein (Design → Theme-Editor → functions.php):

1
function techblog_short_url() {
2
    return 'https://techblog.sdstudio.top';
3
}
4
add_shortcode( 'techblog', 'techblog_short_url' );

Nun wird in jedem Beitrag [techblog] automatisch durch die Website-URL ersetzt. Die Funktion gibt eine Zeichenkette zurück, WordPress setzt sie anstelle des Shortcodes ein.

Zwei entscheidende Regeln aus der offiziellen Dokumentation:

• Die Funktion gibt einen Wert über return zurück, nicht über echo aus. Direkte Ausgabe durchbricht die Rendering-Reihenfolge und führt zu unerwarteten Ergebnissen.
• Registrieren Sie Shortcodes am init-Hook, damit WordPress Zeit hat, alle Abhängigkeiten zu laden:

1
add_action( 'init', 'techblog_register_shortcodes' );
2
function techblog_register_shortcodes() {
3
    add_shortcode( 'techblog', 'techblog_short_url' );
4
}

Shortcode für ein Bild mit anpassbaren Attributen

Ein etwas komplexeres Szenario: Sie möchten ein Bild einfügen und Breite sowie Höhe direkt im Editor festlegen. In der functions.php:

1
function techblog_img_shortcode( $atts, $content = null ) {
2
    $atts = shortcode_atts(
3
        array(
4
            'width'  => '',
5
            'height' => '',
6
        ),
7
        $atts,
8
        'img'
9
    );
10
    return '<img src="' . esc_url( $content ) . '" width="' . esc_attr( $atts['width'] ) . '" height="' . esc_attr( $atts['height'] ) . '" alt="" />';
11
}
12
add_shortcode( 'img', 'techblog_img_shortcode' );

Verwendung im Editor:

1
[img width="800" height="600"]https://example.com/photo.jpg[/img]

Die Funktion shortcode_atts() führt übergebene Attribute mit Standardwerten zusammen, das ist der übliche und sichere Weg, um Parameter zu verarbeiten. Beachten Sie esc_url() und esc_attr(): Escaping ist zwingend erforderlich, wenn Sie Benutzereingaben im Frontend ausgeben. Eine vollständige Liste der verfügbaren Bildattribute finden Sie in der W3C-Spezifikation.

Gesondert zu erwähnen ist die Validierung von Attributen. Wenn Sie Werte aus dem Editor entgegennehmen und in HTML einfügen, prüfen Sie stets die Datentypen. Verwenden Sie für numerische Attribute wie width und height die Funktion intval(), das schneidet versehentlich eingegebene Buchstaben ab. Legen Sie für Zeichenketten einen erlaubten Wertevorrat per in_array() fest, zum Beispiel für Bildgrößen (thumbnail, medium, large). So bleibt das Layout intakt und die Ergebnisse im Frontend bleiben vorhersehbar, selbst wenn der Autor sich bei einem Attributwert vertippt.

Shortcodes in Text-Widgets und PHP-Dateien

Seit WordPress-Version 4.9 (November 2017) funktionieren Shortcodes automatisch in Text-Widgets. Falls Sie jedoch ein eigenes Theme ohne eingebaute Unterstützung verwenden, können Sie diese mit einer Zeile in der functions.php aktivieren:

1
add_filter( 'widget_text', 'do_shortcode' );

Um das automatische Einfügen von <p>- und <br>-Tags um den Shortcode im Widget zu vermeiden (WordPress formatiert Zeilenumbrüche automatisch um), ergänzen Sie zusätzlich:

1
add_filter( 'widget_text', 'shortcode_unautop' );

Dasselbe Prinzip gilt für PHP-Templates. Wenn Sie einen Shortcode direkt in header.php oder einer anderen Theme-Datei ausführen müssen, umschließen Sie ihn mit do_shortcode():

1
echo do_shortcode( '[techblog]' );

Auf diese Weise steht dieselbe Logik im Editor, Widget und Template zur Verfügung, ohne Code zu duplizieren.

Escaping: Shortcode-Text anzeigen, ohne ihn auszuführen

Manchmal möchten Sie einen Shortcode nicht ausführen, sondern seine Syntax für den Leser darstellen, wie in diesem Artikel. Wenn Sie einfach [gallery] im Editor einfügen, führt WordPress ihn sofort aus oder zeigt einen Platzhalter an. Es gibt zwei Möglichkeiten, dies zu vermeiden.

Doppelte eckige Klammern. Die einfachste Methode: Verdoppeln Sie die äußeren Klammern:

1
[[gallery]]

Bei gepaarten Tags werden die erste öffnende und die letzte schließende Klammer verdoppelt:

1
[[maps]New York, USA[/maps]]

HTML-Zeichencodes. Im Text-Editor können Sie Klammern durch ihre ASCII-Codes ersetzen: [ statt [ und ] statt ]. Die Eingabe [gallery] wird als Text [gallery] angezeigt, aber nicht ausgeführt.

Die erste Methode ist einfacher und im Quellcode lesbarer, die zweite zuverlässiger bei komplexer Formatierung. Nutzen Sie doppelte Klammern für schnelle Bearbeitungen im Text-Editor und ASCII-Codes, wenn der Shortcode an andere eckige Klammern grenzt, zum Beispiel innerhalb von Code-Blöcken oder Meta-Feld-Beschreibungen. In beiden Fällen sehen die Seitenbesucher exakt den Shortcode-Text, und WordPress führt ihn nicht aus.

Video: Vollständige Aufschlüsselung der WordPress-Shortcodes

Für alle, die eine visuelle Erklärung bevorzugen, hier ein ausführliches Tutorial vom Kinsta-Team. Der Autor zeigt Erstellung, Debugging und reale Beispiele von Shortcodes in einem Live-Projekt, von der Theme-Installation bis zur Frontend-Ausgabe.

⁉️🤔 Häufig gestellte Fragen

Kann man Shortcodes in Gutenberg verwenden?

Ja, über den Block „Shortcode" im Block-Einfügebereich. Sie fügen den Shortcode in das Blockfeld ein, und WordPress führt ihn beim Rendern aus. Komplexe Shortcodes mit verschachteltem Inhalt können jedoch unvorhersehbar funktionieren; in solchen Fällen ist es zuverlässiger, in den Code-Bearbeitungsmodus zu wechseln. Gutenberg rendert Shortcodes per Server-Callback, daher hängen die Ergebnisse davon ab, ob die Funktion korrektes HTML zurückgibt. Block-Themes (Full Site Editing) mit theme.json können die Shortcode-Ausgabe in Templates teilweise einschränken, prüfen Sie die Kompatibilität des jeweiligen Themes.

Was tun, wenn ein Shortcode nicht funktioniert?

Prüfen Sie drei typische Ursachen. Erstens: Sie haben den Shortcode im visuellen Editor eingefügt, der die Klammern in HTML-Entities umgewandelt hat. Wechseln Sie in den Textmodus und stellen Sie sicher, dass die Klammern gerade sind. Zweitens: Das Plugin, das den Shortcode registriert, ist deaktiviert. Gehen Sie zu „Plugins" und prüfen Sie den Status. Drittens: Die Shortcode-Funktion verwendet echo statt return. Dies ist ein Entwicklerfehler, die Ausgabe erscheint an der falschen Stelle auf der Seite. Systematische Diagnosemethode: Öffnen Sie wp-config.php, aktivieren Sie WP_DEBUG und WP_DEBUG_LOG. Nach dem Laden der Seite mit dem Shortcode prüfen Sie wp-content/debug.log, dort finden Sie konkrete PHP-Fehler mit Datei- und Zeilenangabe.

Kann man PHP-Code direkt in einen Shortcode einfügen?

Nein. Ein Shortcode ist ein Auslöser, kein Container für beliebigen Code. Ausgeführt wird die serverseitig über add_shortcode() registrierte Funktion. Wenn Sie benutzerdefinierte Logik benötigen, schreiben Sie diese in functions.php (oder in einem separaten Plugin) und binden Sie sie an den Shortcode. Zwischen den eckigen Klammern können Sie nur Inhalt und Attribute übergeben, keinen ausführbaren Code. Für sicheres Ausführen von PHP im Content erkunden Sie Plugins wie „Code Snippets". Diese erlauben das Verwalten von Snippets über die Admin-Oberfläche, ohne functions.php zu bearbeiten, und bieten Schutz vor fatalen Fehlern.

Verlangsamen Shortcodes die Seite?

Für sich genommen nicht. add_shortcode() registriert lediglich die Zuordnung von Tag und Funktion im globalen Array $shortcode_tags. Overhead entsteht, wenn die Shortcode-Funktion bei jedem Seitenaufruf aufwändige Datenbankabfragen oder externe API-Aufrufe durchführt. Das Problem liegt nicht im Shortcode-Mechanismus, sondern in der spezifischen Plugin-Implementierung. Faustregel: Enthält eine Seite mehr als 20 Shortcodes, die jeweils WP_Query oder wp_remote_get() nutzen, cachen Sie die Ergebnisse über die Transients API. Für typische Szenarien (ein oder zwei Shortcodes pro Seite) ist die Performance-Auswirkung vernachlässigbar gering.

Wie entfernt man einen Shortcode aus der Ausgabe, ohne ihn aus dem Beitrag zu löschen?

Verwenden Sie remove_shortcode() in functions.php. Um beispielsweise die eingebaute Galerie zu deaktivieren: remove_shortcode( 'gallery' ). Danach wird [gallery] im Beitragstext als gewöhnlicher Text in eckigen Klammern angezeigt, ohne Ausführung. Das ist hilfreich bei der Migration zu einer anderen Lösung oder beim Debuggen von Konflikten. Partielle Deaktivierung: Sie können einen Shortcode überschreiben, indem Sie mit add_shortcode() einen eigenen Handler mit demselben Tag registrieren. Der zuletzt registrierte Handler hat Vorrang.

Lohnt es sich, Shortcodes im Jahr 2026 zu lernen?

Gutenberg und der Block-Editor haben viele Aufgaben übernommen, für die man früher Shortcodes schrieb: Spalten, Buttons, Medieneinbindung, Wrapper. Aber Shortcodes sind nicht verschwunden. Plugins registrieren sie weiterhin zu Hunderten, von Anmeldeformularen bis zu WooCommerce-Warenkörben. Und vor allem: Ein einziger benutzerdefinierter Shortcode kann ein Plugin ersetzen und exakt das tun, was Ihr Projekt benötigt, ohne den Admin mit fremden Einstellungen zu überfrachten.

Wenn Sie regelmäßig denselben HTML-Block, Link oder dasselbe Template in Artikeln wiederholen, investieren Sie 10 Minuten in add_shortcode() in functions.php. Return on Investment: Dutzende Stunden pro Jahr, die Sie nicht mit Copy-Paste verbringen. Shortcodes sind abwärtskompatibel, heute geschriebener Code funktioniert auch in künftigen WordPress-Versionen, denn die Shortcode-API hat sich seit ihrer Einführung nicht verändert und bleibt eines der stabilsten Kernelemente.