Die Diät für Ihren Code: So halten Sie Ihre Seite mit WordPress Shortcode schlank

Posted on 18. März 2019

Lesezeit 9 minuten|Posted on 18. März 2019

Audio- und Videodateien, Galerien, Playlists, Buttons und andere Design-Elemente: mit WordPress Shortcodes und eventuell einem entsprechenden Plugin binden Sie all das mühelos in Ihre Seite ein – oft mit nur einem einzigen [Shortcode].

Damit sieht nicht nur Ihre Seite chic aus, sondern auch Ihr Code. Das Faszinierende: mit Shortcodes binden Sie komplexe Elemente ein, ohne selbst über Programmierkenntnisse verfügen zu müssen. In diesem Beitrag erfahren Sie, wie genau die Abkürzung für schlanken Code funktioniert.

Und keine Sorge: beim Arbeiten mit Shortcodes dürfen Sie natürlich Cola trinken und Pizza essen!

WPShortcode01

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

Quelle: pixabay.com

1 Was sind WordPress Shortcodes?
2 Wie sieht ein WordPress Shortcode aus?
3 Beispiele für Shortcodes in WordPress
4 So fügen Sie einen Shortcode in Ihre WordPress-Seite ein
5 Shortcode-Plugins

1. Was sind WordPress Shortcodes?

„Shortcodes“ sind Code-Kürzel, die stellvertretend für einen längeren Code stehen. Dank ihnen bleibt der Code schlank und übersichtlich, obwohl er komplexe Funktionen umfasst. Der ausführliche Code, für den der Shortcode die Abkürzung darstellt, ist an anderer Stelle von einem Theme oder Plugin genau definiert. Der Shortcode funktioniert daher wie eine Art Link zum ausführlichen Code: WordPress bezieht diesen über den Shortcode automatisch mit ein, ohne dass er im Code der Seite einzeln angeführt werden müsste.

Statt lange und ausführliche Codeabschnitte zum Beispiel für eine Galerie in die Seite einfügen zu müssen, genügt der Shortcode [Galerie]. Der exakte Code für die Galerie liegt dann in einem Theme oder Plugin vor. WordPress genügt darum der kurze Verweis „[Galerie]“, um die detaillierten Informationen andernorts abrufen und eine Galerie abbilden zu können.

Shortcodes erweisen sich vor allem dann als wertvoll, wenn ein bestimmtes Element – etwa eine Galerie – mehrfach in eine Seite eingefügt werden soll. In diesen Fällen genügt es, den Code an einer Stelle en détail auszuführen und diesen per Shortcode in die Seiten einzubinden, auf denen er realisiert werden soll.

2. Wie sieht ein WordPress Shortcode aus?

In der Textansicht wird ein Shortcode in einer eckigen Klammer dargestellt. Je nach Shortcode können oder müssen Sie weitere Parameter definieren, damit WordPress den Shortcode umsetzen kann.

Kommen wir wieder auf das Beispiel der Galerie zurück. Der grundlegende Shortcode sieht dabei folgendermaßen aus:

[gallery]

Damit weiß WordPress nun, dass es an der entsprechenden Stelle eine Galerie in die Seite einbinden soll. Doch damit ist weder etwas über die Anzahl und die Auswahl der Bilder gesagt. Aus diesem Grund geben wir WordPress weitere Informationen, indem wir ein zusätzliches Attribut hinzufügen: die ID der Bilder, die in die Galerie aufgenommen werden sollen (und die somit auch die Anzahl der Bilder festlegen):

[gallery id=“131,132,133“]

Wir haben nun die Möglichkeit, eine Vielzahl weiterer Attribute hinzuzufügen, zum Beispiel die Anzahl der Säulen („columns“) oder die Bildgröße („size“):

[gallery id=“131,132,133“ columns=“2“ size=“large“]

Welche Werte hier genau eingetragen werden können, ist für jeden Shortcode eigens geregelt und kann hier nicht eigens erörtert werden. Die Bestimmungen für den Galerie-Shortcode finden sich im WordPress Codex

Andere Shortcodes werden ganz ähnlich über die eckigen Klammern und eventuell weitere Attribute in den WordPress-Code eingebettet.

3. Beispiele für Shortcodes in WordPress

WordPress selbst stellt standardmäßig sechs Shortcodes bereit. Diese können Sie immer nutzen – also auch dann, wenn Sie keine spezifischen Plugins für Shortcodes verwenden. Diese sechs Shortcodes lauten:

  • [audio]
  • Mit dem Audio-Shortcode betten Sie Audio-Dateien in Ihre WordPress-Seite ein. Besucher können diese dann mit einem Klick abspielen. Üblicherweise fügen Sie den Dateinamen dabei in den Shortcode mit ein – schließlich muss WordPress ja wissen, welches Audio es überhaupt abspielen soll:
  • [audio src=“mein-audio.mp3]
  • Wichtig ist natürlich, dass eine entsprechende Audio-Datei mit diesem Dateinamen in Ihrer Medienbibliothek hinterlegt ist.
  • Ausführliche Informationen über den Audio-Shortcode finden Sie hier.
  • [video]
  • Mit dem Video-Shortcode binden Sie – zugegeben, das ist nun nicht wirklich überraschend – Videos in Ihre Seite ein. Genau wie bei den Bildern geben Sie auch hier den Dateinamen der Video-Datei mit an. Letztere sollte sich entsprechend unter den Medien Ihrer Mediathek befinden. Der Shortcode sieht dann zum Beispiel so aus:
  • [video src=“mein-video.mp4]
  • Die ausführliche Beschreibung dieses Shortcodes im WordPress-Codex finden Sie hier.
  • [caption]
  • Mit dem Caption-Shortcode fügen Sie Bildunterschriften zu Bildern hinzu. WordPress benötigt von Ihnen eine Eingabe zu „width“, mit der Sie die Breite der Bildunterschrift in Pixeln festlegen. Zusätzlich können Sie wählen, ob die Bildunterschrift links, mittig oder rechts unter dem Bild angezeigt wird. Außerdem können Sie der Bildunterschrift eine ID oder class zuordnen, um das Design per CSS zu verändern.
    Mehr Informationen zu Captions finden Sie hier.
  • [gallery]
  • Mit dem Galerie-Shortcode binden Sie eine Galerie in Ihre WordPress-Seite ein. Eine nähere Erläuterung finden Sie im vorigen Abschnitt dieses Beitrags, den Link zur offiziellen Beschreibung des Shortcodes im WordPress-Codex hier.
  • [playlist]
  • Eine Playlist können Sie per Shortcode sowohl für Audio- als auch Video-Dateien in Ihre WordPress-Seite einbinden. Über verschiedene Zusatzangaben können Sie das Design, den Dateityp sowie die IDs der eingebundenen Elemente hinzufügen. Der Shortcode kann dann am Ende zum Beispiel so aussehen:
  • [playlist type=“audio“ ids=“211,212,213“ style=“dark“]
  • Ausführliche Informationen zum Playlist-Shortcode im WordPress-Codex finden Sie hier.

4. So fügen Sie einen Shortcode in Ihre WordPress-Seite ein

Wenn Sie Shortcodes einfügen möchten, prüfen Sie zunächst, welchen Editor Sie verwenden.

Sofern Sie eine WordPress-Version vor WordPress 5.0 oder WordPress 5 mit dem Classic Editor Plugin nutzen, loggen Sie sich in Ihr WordPress Backend ein. Klicken Sie nun in der Menüleiste links auf Beiträge oder Seiten – je nachdem, ob Sie eine neue Seite oder einen neuen Blogbeitrag erstellen möchten. In unserem Beispiel entscheiden wir uns dafür, einen alten Blogbeitrag zu bearbeiten.

Sie können nun zwischen zwei Ansichten wählen: der visuellen und der Textansicht. Entscheiden Sie sich hier für die Textansicht. Ihnen wird der HTML-Code angezeigt. Fügen Sie hier einfach den entsprechenden Shortcode ein.

WPShortcode02

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

Wenn Sie den Gutenberg-Editor verwenden, gehen Sie anders vor. Legen Sie für den Shortcode einen neuen Block an. Dafür klicken Sie links neben dem leeren Feld für den Block auf das Plus-Zeichen.

WPShortcode03

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

Sie können nun Elemente aus verschiedenen Kategorien auswählen. Rufen Sie die Kategorie Widgets auf.

WPShortcode04

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

Klicken Sie nun auf das Shortcode-Symbol.

WPShortcode05

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

WordPress legt nun einen Shortcode-Block für Sie an.

WPShortcode06

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

Geben Sie den Shortcode Ihrer Wahl in diesen Block ein. Achtung: Auch wenn WordPress bereits weiß, dass Sie in diesem Block einen Shortcode einbinden möchten, müssen Sie trotzdem die eckigen Klammern für die Eingabe verwenden.

WPShortcode07

Zum Ansehen des gesamten Bildes klicken Sie bitte auf das Bild

5. Shortcode-Plugins

Wenn Sie WordPress Shortcodes selbst programmieren, sind Sie – das verrät ja bereits das Verb „programmieren“ – auf Programmiererebene unterwegs. Mit anderen Worten: Sie arbeiten nicht mehr mit den Funktionen von WordPress selbst, sondern basteln direkt am PHP-Code herum.

Wenn Sie das vermeiden möchten, aber auf die Nutzung spezifischer Shortcodes nicht verzichten möchten, empfehlen wir Ihnen die Verwendung eines Shortcode-Plugins. Diese betten eine Vielzahl an Shortcodes in Ihre Seite ein, ohne dass Sie selbst etwas programmieren müssten.

Auf dem Markt gibt es eine Vielzahl derartiger Plugins, von denen wir Ihnen an dieser Stelle drei präsentieren:

5. 1 WordPress Shortcodes

Mit diesem Plugin können Sie mehr als zwei Dutzend Shortcodes verschiedenster Art in Ihre Seite einbetten: Listen, Säulen, Boxen und viele mehr. Jeder Shortcode hält dabei einen Beispielcontent bereit, den Sie einfach mit Ihren eigenen Inhalten ersetzen.

5. 2 Shortcodes Ultimate

Buttons, Boxen, Slider, Karussells, responsive Videos – all diese Funktionen können Sie mit Shortcodes Ultimate in Ihre Website einbauen. Das Plugin umfasst mehr als 50 Shortcodes, die laut Beschreibung mit jedem Theme kompatibel sind.

5. 3 Arconix Shortcodes

Dieses Plugin ist ideal, um verschieden designte Boxen, Buttons, Listen, Säulen und Akkordeons (damit ist nicht das Instrument gemeint, sondern einzelne Teile einer Seite, die der Nutzer per Klick auf- und zuklappen kann) per Shortcode in Ihre Seite einzubetten. Unsere Empfehlung vor allem für Seiten mit viel User Interaction.

Shortcodes sind eine wunderbare Möglichkeit, komplexe Elemente mühelos in Ihre WordPress-Seite einzubinden. Mit den Ratschlägen in diesem Beitrag sollte Ihnen das bereits mit nur wenig Herumprobieren gelingen.

Übrigens: Shortcodes kann man auch selbst programmieren und entsprechend ganz an seine Bedürfnisse anpassen. Wenn Ihr Unternehmen individuelle Shortcodes mit spezifischen Funktionen benötigt, übernehmen wir von Rashedi-Consulting die Entwicklung gerne für Sie – sprechen Sie uns einfach an!

JONAS RASHEDI

Umsetzungsstarker Senior Consultant und Interim Manager mit umfangreicher Erfahrung in der Implementierung digitalisierter Prozesse und Produkte zur Optimierung von Vermarktung und Mediastrukturen sowie agilen Methoden.