WordPress: Shortcode einfügen

Mit Shortcodes arbeiten

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

Irgendwann passiert es: Ein Plugin gibt einen Shortcode aus, und der WordPress-Einsteiger steht wie der Ochs vorm Berg. Dieser Beitrag beantwortet die wichtigen vier 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-Editor oder in ein Widget eingefügt wird, um irgendetwas anderes auszugeben, zum Beispiel eine Galerie, 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. Ein paar Beispiele:

  • Das Shop-Plugin wpShopGermany vergibt für jedes Produkt einen eigenen Shortcode
  • 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 Galery ausgegeben hat (ein einfach zu bedienendes Galerie-Plugin, kann ich empfehlen).

Der Dreh: Die genaue 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

Den 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.

Der Shortcode kann mit Strg A in die Zwischenablage kopiert werden.

Shortcode einfügen

Dann wechselst du  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. Umschalten des Editors vom visuellen Modus in den Text-Modus
  2. Platzierung des Shortcodes mit Strg V

Theoretisch kannst du  den Shortcode auch per Hand eintippen, aber dabei passieren dann leicht Fehler. Nach dem Einfügen und Abspeichern gehst du ins Frontend, um den Effekt zu kontrollieren, der durch den Shortcode ausgelöst wird.

Kommentar verfassen