WordPress: Shortcode einfügen

Mit Shortcodes arbeiten

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

Irgendwann passiert es: Ein WordPress Plugin gibt einen Shortcode aus, und der Admin steht wie der Ochs vorm Berg. Dieser Beitrag beantwortet die wichtigen drei Fragen:

  1. Was ist ein Shortcode?
  2. Wozu ist ein Shortcode gut?
  3. Was muss der Admin mit dem Shortcode tun

Was ist ein Shortcode?

Ein Shortcode ist ein Platzhalter, der im WordPress-Editor oder in einem Textwidget eingefügt wird, um irgendetwas anderes auszugeben, in der Regel einen Text oder ein Bild.

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

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

Wozu ist ein Shortcode gut?

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
  • Galerie-Plugins vergeben Shortcodes für Bilder oder Bilderserien

Die exakte Darstellung des Produkts, Kontaktformulars oder Bildes wird dann 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
  • Man kann über eine einzige Änderung in der Plugin-Konfiguration alle Darstellungen zentral verändern

Was muss der Admin mit dem Shortcode tun?

Shortcode kopieren

Shortcode kopieren

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

Diesen Code kopiere ich nun mit Strg A in die Zwischenablage. Dann wechsle ich dahin, wo das Bild erscheinen soll. Wenn es ein Beitrag ist, rufe ich den Editor auf.

Shortcode einfügen

Shortcode einfügen

 

Im Editor füge ich den Code dann so ein:

  1. Umschalten des Editors vom visuellen Modus in den Text-Modus
  2. Platzierung des Shortcodes mit Strg V

Theoretisch könnte ich den Shortcode auch per Hand eintippen, aber dabei passieren dann leicht Fehler. Nach dem Abspeichern sehe ich dann im Frontend den Effekt, der durch den Shortcode ausgelöst wird.

Ähnliche Beiträge auf onlineshop-DIY:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.