WordPress: Shortcode einfügen

Mit Shortcodes arbeiten

In WordPress mit Shortcodes arbeiten. Bild: onlineshop-DIY.de

WordPress-Plugins (und auch Themes) sorgen immer wieder für Überraschungen, zum Beispiel mit der Ausgabe von Shortcodes. Dieses Einsteiger-Tutorial beantwortet die wichtigsten Shortcode-Fragen:

  1. Was ist ein Shortcode?
  2. Wozu ist ein Shortcode gut?
  3. Wo wird der Shortcode abgerufen?
  4. Wo wird der Shortcode platziert?

Was ist ein Shortcode?

Ein Shortcode ist ein Platzhalter, der in den WordPress eingefügt wird, um irgendetwas anderes auszugeben, zum Beispiel eine Galerie, eine Spalte, ein Kontaktformular oder eine Ware.

Erkennbar ist ein Shortcode an den eckigen Klammern am Anfang und am Ende. Ein längerer Shortcode hat ein öffnendes und ein schließendes Tag. Das schließende Tag unterscheidet sich durch den Schrägstrich.

  • Beispiel für einen kürzeren Shortcode: [id=134]
  • Beispiel für einen kürzeren Shortcode: [envira-gallery id="44"]
  • Beispiel für einen längeren Shortcode: [irgendwas]irgendein-zeugs[/irgendwas]

Wozu ist ein Shortcode gut?

Freunde, Fans und Follower

Shortcodes werden hauptsächlich von Plugins verwendet. Beispiele:

  • Das Shop-Plugin wpShopGermany vergibt für jedes Produkt einen eigenen Shortcode
  • Mit dem Plugin Column Shortcodes kannst du in WordPress mehrere Spalten erzeugen
  • Das Kontaktformular-Plugin Contact Form 7 vergibt für jedes erzeugte Kontaktformular einen Shortcode
  • Diverse Galerie-Plugins vergeben Shortcodes für Bilder oder Bilderserien. Im zweiten Beispiel oben siehst du einen Shortcode, den die Envira Gallery ausgegeben hat (einfach zu bedienendes Galerie-Plugin, kann ich empfehlen).

Der Sinn von Shortcodes: Die Darstellung des Produkts, Kontaktformulars oder Bildes wird nicht im Editor oder Widget definiert, sondern an zentraler Stelle – innerhalb der Plugin-Konfiguration. Das hat zwei Vorteile:

  • Der Code im Editor oder Textwidget bleibt schlank und übersichtlich
  • Über eine einzige Änderung in der Plugin-Konfiguration können alle Darstellungen zentral verändert werden

Shortcode abrufen

Shortcode kopieren

Shortcode kopieren

Produziert wird ein Shortcode vom jeweiligen Plugin. Das Beispiel zeigt einen Shortcode, den ein Image-Plugin erzeugt hat (Image Hover Effects Ultimate Pro). Der Code ist genau das, was blau hinterlegt wurde.

Um einen Shortcode abzurufen, kopiere ihn mit Strg A in die Zwischenablage (theoretisch kannst du den Shortcode auch per Hand eintippen, aber dabei passieren leicht Vertipper).

Shortcode einfügen

Um einen Shortcode einzufügen, wechsle dahin, wo beispielsweise ein Bild erscheinen soll. Wenn es ein Beitrag ist, rufe den Editor auf.

Shortcode einfügen

Shortcode einfügen

 

So fügst du den Shortcode in den Editor ein:

  1. Schalte rechts oben den Editor um, vom visuellen Modus in den Text-Modus. Achtung, Text meint hier Quelltext, also HTML-Code (igitt).
  2. Platzierung des Shortcodes mit Strg V

Nach dem Einfügen und einem Klick auf den Button Aktualisieren gehst du ins Frontend. Kontrolliere den Effekt, der durch den Shortcode ausgelöst wird.

Shortcode-Block

Im neuen Gutenberg-Editor gibst du den Shortcode ein einen eigens dafür konzipierten Gutenblock ein.

Shortcode-Eingabefenster

Shortcode in Gutenberg eingeben

  • Shortcode-Block einfügen: Gib Shortcode in das Gutenberg-Suchfeld ein.
  • Shortcode platzieren: Direkt im Shortcode-Fenster

Shortcodes entfernen

Ein verwaister Shortcode ist wie ein toter Link, er ärgert dein Publikum umd schadet dir beim Google-Ranking. Du hast ein Plugin, das einen Shortcode ausgegeben hat, wieder deaktiviert? Dann bleiben Shortcodes zurück, mit denen WordPress nichts mehr anfangen kann. Jetzt muss du die von dir eingefügten Shortcodes wieder entfernen!

Kommentar verfassen