Shortcode in WordPress Tabelle anzeigen

Kleines WordPress-Abenteuer: Ich wollte im Theme Twenty Twenty-Four eine Tabelle mit Shortcode-Beispielen erstellen. Der Plan war simpel – die Codes sollten nur als Text erscheinen, links der Shortcode, rechts die Erklärung. Erst sah in der Vorschau alles perfekt aus, aber beim Live-Test in Firefox kam die Ernüchterung: Die Shortcodes wurden gnadenlos ausgeführt. Bevor ich mich in der Fehlersuche verrenne, habe ich kurz Gemini konsultiert und das ist das nicht ganz perfekte Ergebnis. Es brachte mich der richtigen Lösung aber sehr nah.

Meine Frage an Gemini

Ich möchte in WordPress mit TT4 zeigen, wie in einer Tabelle Code darstellen, der nicht ausgeführt wird. Ist das möglich?

Geminis Antwort

Ja, das ist absolut möglich! Da du das Theme Twenty Twenty-Four (TT4) nutzt, hast du vollen Zugriff auf den WordPress-Block-Editor (Gutenberg), der genau dafür eine saubere Lösung bietet.

Um Code innerhalb einer Tabelle darzustellen, ohne dass dieser vom Browser ausgeführt wird, gibt es zwei gängige Wege:

Methode 1: Der integrierte Code-Inline-Stil (Empfohlen)

Diese Methode ist am einfachsten, wenn du nur kurze Code-Schnipsel in die Tabellenzellen einfügen möchtest.

Erstelle oder öffne deine Tabelle.
Schreibe deinen Code direkt in die Zelle (z. B. <html> oder $variable).
Markiere den Text, den du als Code formatieren willst.
Klicke in der Werkzeugleiste des Blocks auf den kleinen Abwärtspfeil (Mehr Formatierungsoptionen).
Wähle dort “Code” aus.

Der Vorteil: WordPress wandelt kritische Zeichen automatisch um (z. B. wird aus < ein <), sodass der Code nur als Text angezeigt wird.

Methode 2: Den Code-Block in die Tabelle schachteln

Falls du ganze Code-Blöcke (mit Zeilenumbrüchen) innerhalb einer Zelle anzeigen willst, ist das im Standard-Tabellen-Block von WordPress etwas knifflig, da dieser normalerweise nur Text erlaubt.

So geht es trotzdem:

Spalten-Block nutzen: Anstatt einer klassischen Tabelle kannst du den Spalten-Block verwenden. In jede Spalte kannst du dann einen echten Code-Block ziehen. Das sieht optisch aus wie eine Tabelle, bietet aber mehr Freiheit.
Plugins: Wenn es eine echte, komplexe Datentabelle sein muss, bieten Plugins wie TablePress oder Ninja Tables oft erweiterte Felder an, die HTML-Code sicher “escapen” (also neutralisieren).

Wichtiger Hinweis zur Sicherheit

WordPress ist heute klug genug: Wenn du Text in einen Code-Block oder als Inline-Code markierst, wird er standardmäßig nicht als aktives Skript ausgeführt.

Pro-Tipp für TT4: Da Twenty Twenty-Four ein Block-Theme ist, kannst du im Site-Editor unter Stile > Blöcke > Code das Design (Hintergrundfarbe, Schriftart) global anpassen, damit dein Code in der Tabelle auch optisch hervorsticht.

Welche Art von Code möchtest du denn genau anzeigen – eher kurze Befehle oder längere Skripte?

Meine Korrektur:

Ich glaube, ich habe mich falsch ausgedrückt, ich möchte genauer gesagt Shortcode in eine Tabelle einfügen, der aber nicht ausgeführt wird, sondern nur als Text erscheint.

Geminis Antwort

Das ist ein klassisches Problem in WordPress! Da Shortcodes (alles in eckigen Klammern wie [mein-shortcode]) vom System automatisch gescannt und ersetzt werden, sobald die Seite lädt, musst du WordPress explizit sagen: „Finger weg, das ist nur Text!“

Hier sind die drei effektivsten Wege, um Shortcodes in einer Tabelle (oder überall sonst) als reinen Text anzuzeigen:

1. Die “Double Bracket” Methode (Am einfachsten)

Die gängigste Methode in WordPress ist das Verdoppeln der eckigen Klammern. Wenn du den Shortcode doppelt umschließt, erkennt WordPress ihn als Text und zeigt ihn im Frontend einfach (und ohne die äußeren Klammern) an.

Eingabe im Editor: [[dein-shortcode]]
Ausgabe auf der Website: [dein-shortcode]

Dies funktioniert auch mit Attributen wunderbar, z. B. [gallery id="123"].

2. Nutzung des Code-Formats

Wenn du den Shortcode innerhalb der Tabelle markierst und über die Werkzeugleiste (der kleine Pfeil nach unten) als “Code” formatierst, wird er oft (je nach Plugin-Konfiguration) ebenfalls neutralisiert.

Schritt: Text markieren → Werkzeugleiste → Inline-Code.
Hinweis: Manchmal führen Plugins Shortcodes trotzdem aus, wenn sie innerhalb von HTML-Code-Tags stehen. Teste dies kurz in der Vorschau. Wenn er trotzdem ausgeführt wird, kombiniere es mit Methode 1.

3. HTML-Entities (Die “Nummer sicher”)

Wenn du ganz sichergehen willst, dass absolut nichts passiert (auch nicht durch Plugins, die Shortcodes aggressiv suchen), kannst du die eckigen Klammern durch ihre HTML-Entsprechungen ersetzen. WordPress interpretiert diese dann nur als Symbole zum Zeichnen, nicht als Funktionsaufruf.

Ersetze die Klammern wie folgt:

[ durch [
] durch \

Beispiel: Anstatt [kontakt] schreibst du in die Tabellenzelle: [kontakt\

Zusammenfassung für TT 4

Da du Twenty Twenty-Four nutzt, empfehle ich dir Methode 1. Es ist die sauberste Lösung im Block-Editor:

Tipp: Schreibe in deine Tabellenzelle einfach [[dein-shortcode]]. Das ist im Editor schnell gemacht und sieht für deine Besucher exakt so aus, wie du es beabsichtigst.

Soll der Shortcode in deiner Tabelle einfach nur als Referenz dienen oder möchtest du eine ganze Liste von verfügbaren Shortcodes für deine Nutzer erstellen?

Die Nachfrage

Wie üblich gab es eine Erweiterungs-Frage von Gemini und meine Antwort war: Eine ganze Liste

Geminis Antwort

Wenn du eine ganze Liste von Shortcodes in einer Tabelle erstellen möchtest (z. B. für eine Dokumentation oder eine Anleitung), ist die Double-Bracket-Methode ([[shortcode]]) zwar funktional, aber bei vielen Einträgen etwas mühsam zu tippen.

Hier ist der effizienteste Weg, wie du das in Twenty Twenty-Four (TT4) sauber und übersichtlich umsetzt:

1. Die Tabellen-Struktur anlegen

Verwende den Standard-Tabellen-Block. Erstelle zwei oder drei Spalten (z. B. “Shortcode”, “Funktion”, “Beispiel-Attribute”).

2. Die Eingabe-Tricks (Wähle einen)

Der Klammer-Trick (Empfohlen): Gib in die Zellen einfach den Shortcode mit doppelten Klammern ein: [[mein_shortcode]]. Vorteil: WordPress erkennt das automatisch und zeigt im Frontend nur [mein_shortcode] an.
Der “Code”-Stil: Wenn du möchtest, dass die Shortcodes optisch wie Programmiercode aussehen (meist mit grauem Hintergrund und Monospace-Schrift), markiere den Text in der Zelle und wähle in der Werkzeugleiste Code (unter dem kleinen Abwärtspfeil). Hinweis: Kombiniere dies mit den doppelten Klammern, falls der Shortcode trotz “Code”-Formatierung ausgeführt wird.

3. Styling-Tipps für die Liste (TT4 Spezifisch)

Da du das Theme Twenty Twenty-Four nutzt, kannst du die Liste professioneller aussehen lassen:

Feature	Tipp
Abwechselnde Zeilen	Aktiviere in den Block-Einstellungen (rechts) unter “Stile” die Option Streifen, damit die Liste bei vielen Einträgen lesbar bleibt.
Feste Breite	Aktiviere “Tabellenzellen mit fester Breite”, wenn alle Shortcodes untereinander bündig abschließen sollen.
Typografie	Nutze die globale Stil-Einstellung von TT4, um die Schriftart für den “Code”-Block auf eine schicke Monospace-Schrift (wie System Sans-Serif) zu setzen.

Profi-Alternative: Der “Code-Block” (statt Tabelle)

Falls deine Liste eher wie ein technisches Cheat-Sheet aussehen soll, kannst du statt einer Tabelle auch einfach den Code-Block verwenden. Dort schreibst du die Liste einfach untereinander:

Plaintext

[shortcode_1] - Beschreibung A
[shortcode_2] - Beschreibung B
[shortcode_3] - Beschreibung C

Wichtig: Im echten Code-Block (nicht Inline-Code) führt WordPress Shortcodes in der Regel gar nicht aus. Du musst hier also keine doppelten Klammern nutzen. Das ist der schnellste Weg für eine lange Liste.

Soll die Liste für die Besucher deiner Website auch kopierbar sein (z. B. mit einem “Copy to Clipboard”-Button)?

Meine Lösung:

Es hat nicht funktioniert, aber es war die richtige Richtung. Ich habe eine doppelte eckige Klammer gesetzt und dann alles noch als Code definiert, nun hat es erst in TT4 funktioniert.

Geminis Antwort

Das ist ein klassisches Beispiel für die Eigenheiten des WordPress-Block-Editors! Es freut mich, dass du die Lösung durch die Kombination beider Methoden gefunden hast.

Warum das in TT4 (Twenty Twenty-Four) so ist

In modernen Block-Themes wie TT4 interagieren der Standard-Tabellen-Block und der Shortcode-Parser manchmal etwas übereifrig.

Die doppelten Klammern [[ ]] signalisieren dem PHP-Backend von WordPress: “Ignoriere den Inhalt und gib ihn als Text aus.”
Die “Als Code definieren”-Funktion (Inline-Code) fügt das HTML-Tag <code> hinzu. Dies verhindert oft, dass der Browser oder andere Plugins versuchen, den Inhalt doch noch als aktives Element zu interpretieren.

Ein kleiner Tipp für deine Liste:

Da du eine ganze Liste erstellst, hier ein kurzer Workflow-Check, um Zeit zu sparen:

Schreibe alle Shortcodes zuerst mit doppelten Klammern in die Tabelle (z. B. [[mein_shortcode]]).
Markiere die gesamte Spalte (oder Zelle für Zelle) und wende den Code-Stil an.
Vorschau prüfen: Manchmal sieht es im Editor (Backend) anders aus als auf der fertigen Seite (Frontend). Verlasse dich am besten immer auf die echte Seitenvorschau.

Alternative für sehr lange Listen

Falls die Tabelle irgendwann zu unübersichtlich wird oder du das Styling mühsam findest, könntest du auch den Code-Block (nicht Inline-Code innerhalb einer Tabelle) nutzen. In einem dedizierten Code-Block führt WordPress Shortcodes standardmäßig nie aus. Du könntest dort deine Liste so pflegen:

Plaintext

[shortcode_1] | Beschreibung | Parameter
[shortcode_2] | Beschreibung | Parameter

Aber wenn das Tabellen-Design für deine Seite wichtig ist, bleib bei deiner kombinierten Lösung – die ist technisch absolut “sauber”.

Soll die Liste eigentlich zum reinen Lesen sein, oder möchtest du deinen Besuchern auch ermöglichen, die Shortcodes mit einem Klick zu kopieren?