Leitfaden zu WordPress Shortcodes

Was sind WordPress Shortcodes

Shortcodes sind spezielle Tags in eckigen Klammern, die der WordPress-Mechanismus automatisch durch dynamischen Inhalt ersetzt. Zum Beispiel zeigt [gallery] eine Bildergalerie an, [video] bettet ein Video ein und [contact-form] zeigt ein Kontaktformular an. Shortcodes ermöglichen es Benutzern ohne technische Kenntnisse, komplexe Inhalte in Beiträge und Seiten durch einfaches Eingeben eines kurzen Codes einzufügen.

Die in WordPress integrierten Shortcodes decken grundlegende Bedürfnisse ab, aber die wahre Stärke kommt von der Möglichkeit, eigene Shortcodes zu erstellen. Plugin-Entwickler verwenden sie zum Hinzufügen von Funktionalitäten wie Formularen, Preistabellen, Slidern und Buttons, während Theme-Entwickler Shortcodes für wiederkehrende Designelemente verwenden. Das Verständnis des Shortcode-Systems ist eine wichtige Fähigkeit für jeden WordPress-Benutzer und -Entwickler.

Eingebaute WordPress Shortcodes

WordPress kommt mit mehreren eingebauten Shortcodes, die grundlegende Multimedia-Bedürfnisse abdecken. Diese Shortcodes funktionieren sofort ohne zusätzliche Plugins und unterstützen verschiedene Parameter zur Anpassung der Ausgabe.

Liste der eingebauten Shortcodes

• [caption] - fügt eine Bildunterschrift unter einem Bild mit stilisiertem Rahmen hinzu
• [gallery] - zeigt eine Bildergalerie aus der Medienbibliothek mit Optionen für Spalten und Größe
• [audio] - bettet einen Audioplayer mit Wiedergabesteuerung ein
• [video] - bettet einen Videoplayer mit Unterstützung für MP4-, WebM- und Ogg-Formate ein
• [playlist] - erstellt eine Audio- oder Video-Playlist aus mehreren Dateien
• [embed] - bettet Inhalte von externen Diensten über das oEmbed-Protokoll ein

Gallery Shortcode im Detail

Der Gallery Shortcode ist der am häufigsten verwendete eingebaute Shortcode, da er die schnelle Erstellung von Bildergalerien ermöglicht. Er unterstützt Parameter wie ids für spezifische Bilder, columns für die Anzahl der Spalten, size für Bildgröße, orderby zur Sortierung und link zum Bestimmen, wohin der Klick auf ein Bild führt. Zum Beispiel zeigt [gallery ids="1,2,3" columns="3" size="medium"] drei spezifische Bilder in drei Spalten in mittlerer Größe an.

Erstellen von benutzerdefinierten Shortcodes

Das Erstellen eigener Shortcodes in der WordPress-Entwicklungsumgebung ist überraschend einfach. Die Funktion add_shortcode() wird verwendet, die zwei Argumente entgegennimmt: den Shortcode-Namen und eine Callback-Funktion, die das anzuzeigende HTML zurückgibt. Diese Funktion fügen Sie in die functions.php Ihres Themes oder in ein Custom Plugin ein.

Grundstruktur

Die Callback-Funktion erhält bis zu drei Parameter: $atts (Array von Attributen, die der Benutzer übergibt), $content (Inhalt zwischen öffnenden und schließenden Tags) und $tag (Name des Shortcodes selbst). Die Funktion muss einen String mit HTML zurückgeben und darf niemals echo verwenden, da dies die Reihenfolge der Anzeige auf der Seite stören würde. Dies ist ein häufiger Fehler bei Anfängern, der dazu führt, dass der Shortcode-Inhalt oben auf der Seite erscheint, anstatt an der Stelle, an der der Shortcode eingefügt wurde.

Beispiel eines einfachen Shortcodes

Stellen Sie sich vor, Sie möchten einen Shortcode, der ein hervorgehobenes Zitat mit dem Namen des Autors anzeigt. In functions.php würden Sie eine Funktion definieren, die Attribute (author, color) und Inhalt (Zitattext) entgegennimmt und einen stilisierten HTML-Block zurückgibt. Der Benutzer würde im Editor [citat author="Ivo Andrić"]Die Brücke an der Drina...[/citat] schreiben und WordPress würde dies durch ein formatiertes Zitat mit dem Namen des Autors unter dem Text ersetzen.

Shortcode-Parameter

Parameter (Attribute) machen Shortcodes flexibel, da sie Benutzern ermöglichen, die Ausgabe ohne Änderung des Codes anzupassen. Verwenden Sie die Funktion shortcode_atts() zum Definieren von Standardwerten und zum Zusammenführen mit Werten, die der Benutzer übergeben hat. Dies stellt sicher, dass der Shortcode auch dann funktioniert, wenn der Benutzer nicht alle Parameter angibt.

Parametertypen

• Text - Titel, Farbe, Klasse, ID (z. B. title="Titel")
• Numerisch - Anzahl der Spalten, Ergebnislimit, Breite (z. B. columns="3")
• Boolean - Ja/Nein-Optionen (z. B. show_date="true")
• Liste - durch Kommas getrennte IDs (z. B. ids="1,5,12,7")
• Enum - vordefinierte Optionen (z. B. size="small|medium|large")

Validieren und sanitisieren Sie immer Parameter, die der Benutzer übergibt, da Shortcodes ein Vektor für XSS-Angriffe sein können, wenn Benutzereingaben direkt in HTML eingebettet werden. Verwenden Sie die Funktionen esc_attr(), esc_html() und wp_kses() zur Ausgabebereinigung. Numerische Parameter konvertieren Sie mit intval() in int und Boolean-Parameter vergleichen Sie mit dem String true oder false.

Verschachtelte Shortcodes

WordPress unterstützt die Verschachtelung von Shortcodes, was bedeutet, dass Sie einen Shortcode innerhalb eines anderen platzieren können. Dies ist nützlich zur Erstellung komplexer Layouts, bei denen Sie zum Beispiel einen Shortcode für eine Zeile und darin einen Shortcode für Spalten haben. Verschachtelter Inhalt wird durch Aufrufen der Funktion do_shortcode() auf den $content-Parameter innerhalb Ihrer Callback-Funktion verarbeitet.

Eine wichtige Einschränkung ist, dass Sie nicht denselben Shortcode in sich selbst verschachteln können, da der WordPress-Parser öffnende und schließende Tags nicht richtig unterscheiden kann. Wenn Sie eine solche Funktionalität benötigen, erstellen Sie Varianten des Shortcodes mit verschiedenen Namen, wie zum Beispiel [row] für eine Zeile und [column] für eine Spalte innerhalb einer Zeile. Diese Einschränkung ist beabsichtigt und wird wahrscheinlich in zukünftigen Versionen nicht geändert.

Beispiel der Verschachtelung

Ein klassisches Beispiel ist ein Layout-Shortcode, bei dem [row] einen Flex- oder Grid-Container erstellt und [col width="6"] eine Spalte einer bestimmten Breite. Der Benutzer kann [row][col width="4"]Linke Spalte[/col][col width="8"]Rechte Spalte[/col][/row] schreiben und ein zweispaltiges Layout erhalten. Der Row-Shortcode muss do_shortcode($content) aufrufen, damit WordPress die verschachtelten col-Shortcodes verarbeitet, bevor er das endgültige HTML zurückgibt.

Shortcodes im WordPress Block-Editor

Mit der Einführung des Gutenberg Block-Editors haben Shortcodes einen dedizierten Block namens Shortcode erhalten, der jeden Shortcode akzeptiert. Der Trend in der modernen WordPress-Entwicklung geht jedoch dahin, Shortcodes durch benutzerdefinierte Blöcke zu ersetzen, die eine visuelle Vorschau im Editor anstelle von Rohtext in eckigen Klammern bieten. Für neue Projekte ziehen Sie das Erstellen von Blöcken statt Shortcodes in Betracht, aber für bestehende Websites bleiben Shortcodes vollständig unterstützt und funktional.

Wann Shortcodes und wann Blöcke verwenden

• Shortcodes sind besser für einfache Einfügungen (Zitat, Button, Symbol)
• Blöcke sind besser für komplexe Layout-Elemente mit visueller Darstellung
• Shortcodes funktionieren in Classic- und Block-Editor
• Blöcke funktionieren nur im Block-Editor (Gutenberg)
• Shortcodes sind schneller in der Entwicklung, Blöcke erfordern JavaScript-Kenntnisse
• Für Plugin-Kompatibilität sind Shortcodes universeller

Praktische Tipps und Best Practices

Benennen Sie Shortcodes mit einem Präfix Ihres Themes oder Plugins, um Konflikte mit anderen Plugins zu vermeiden. Verwenden Sie beispielsweise statt [button] [beo_button], da es weniger wahrscheinlich ist, dass ein anderes Plugin denselben Namen verwendet. Fügen Sie Dokumentation für jeden Shortcode hinzu, den Sie erstellen, einschließlich Parameterliste, Standardwerte und Verwendungsbeispiele, denn ohne Dokumentation werden Sie sich nach einigen Monaten selbst nicht an alle Optionen erinnern.

Für komplexere Shortcodes, die erhebliches HTML generieren, verwenden Sie Output-Buffering oder Template-Dateien anstelle von String-Konkatenation. Dies macht den Code lesbarer und wartungsfreundlicher. Cachen Sie Ergebnisse von Shortcodes, die Datenbankabfragen erfordern. Verwenden Sie das Leistungsprüfungstool mit der Transients-API, da Shortcodes bei jedem Seitenladevorgang ausgeführt werden und langsame Shortcodes die Website erheblich verlangsamen können. Testen Sie Shortcodes immer in verschiedenen Kontexten einschließlich Widgets, Auszügen und RSS-Feeds, da sich das Verhalten unterscheiden kann.