Shortcodes in der Praxis

Dynamik auf die Site bringen

In WordPress werden Shortcodes in erster Linie verwendet, um erweiterte Funktionen oder dynamische Inhalte einzufügen, während Patterns vorgefertigte Layouts oder Blockstrukturen bereitstellen, um Seiten oder Beiträge zu gestalten. Shortcodes sind jedoch nicht nur rein technischer Struktur, sondern können ebenfalls gezielt ein Layout mitliefern.

Shortcode vs. Vorlagen

Shortcodes ermöglichen es Benutzer:innen in Beiträgen, Seiten oder Widgets, komplexe Funktionalitäten zu implementieren. Hierzu gehört beispielsweise das Hinzufügen von Formularen oder das Anzeigen von dynamischen Inhalten durch einfaches Einfügen eines kurzen Codes bzw. Platzhalters in den Editor. Shortcodes werden normalerweise in eckigen Klammern angegeben, z. B. [mein_shortcode]. Patterns bzw. Vorlagen sind vordefinierte Blockstrukturen oder Layouts, die bereits konfiguriert und stilisiert sind. Mit diesen wiederkehrenden Designelementen lassen sich komplette Abschnitte mit verschiedenen Blöcken zügig erstellen.

Diese wurden mit dem Gutenberg-Block-Editor in WordPress 5.5 eingeführt. Sie dienen dazu, den Design- und Bearbeitungsprozess zu beschleunigen und eine konsistente Gestaltung zu gewährleisten. Wiederkehrende Elemente oder Bausteine, die sich öfter einmal ändern wie Öffnungszeiten und ähnliches ließen sich davor nur als Shortcode sinnvoll einbinden, jetzt kann man diese als wiederkehrende Blöcke ablegen. Shortcodes werden heute einfach als Block an gewünschter Stelle integriert und können neben den Funktionalitäten auch gleich das gewünschte Design mit beinhalten.

Zu den herausragenden Merkmalen eines Shortcode in WordPress gehören Flexibilität, Funktionalitätserweiterung, Benutzerfreundlichkeit und Wiederverwendbarkeit. Erweiterte maßgeschneiderte Funktionen, die sich je nach Kontext oder Benutzerinteraktion ändern, können durch Anwender:innen ohne Programmierkenntnisse eingefügt werden. Statt ggf. den Code der Website weiterzubearbeiten, reicht es den Shortcode als Block an gewünschter Stelle einzufügen.

Ist ein Shortcode abhängig von einem Plugin, z. B. für Formulare, benötigter dieser das spezifische Plugin, um ordnungsgemäß zu funktionieren. Wird dieses deaktiviert wird, kann der zugehörige Code möglicherweise nicht mehr korrekt angezeigt werden.

Es gibt frei verfügbare Plugins für Shortcodes, die ich in der Regel meide. Zum einen verwirren die zahlreichen nicht genutzten Funktionen meine Kund:innen oft mehr als dass diese weiter helfen und zum anderen programmiere ich für Ihr Projekt individuell genau die Shortcodes, die Sie auch wirklich brauchen. So schleppen wir keinen nicht Ballast mit uns herum. Auch verschwenden wir keine Zeit für deren Anpassung, wenn das fix selbst an Ihre Bedürfnisse ausgerichtete programmieren sowieso schneller geht.

Mit Shortcodes arbeiten

Komplexe Aufgaben mit minimalem Aufwand erledigen! Das Arbeiten mit Shortcodes in WordPress ist recht einfach. Stellen Sie sicher, dass Sie den gewünschten Shortcode kennen. Dies kann entweder ein Standard-Shortcode sein, der bereits in WordPress integriert ist, oder ein benutzerdefinierter Shortcode, der von einem Plugin oder von mir für Ihr Theme bereitgestellt wird. Selbstverständlich erhalten Sie entsprechende Informationen über für Sie programmierte Shortcodes zusammen mit der Dokumentation zu Ihrem Projekt.

Öffnen Sie den Editor für den gewünschten Beitrag oder die gewünschte Seite in WordPress. Fügen Sie den Shortcode als Block über das Plus-Zeichen an der Stelle ein, an der Sie ihn einfügen möchten. Der Shortcode wird in eckigen Klammern eingeschlossen, z. B. [shortcode]. Auf der Website, wie diese Besucher:innen sehen, erkennt WordPress den Shortcode und ersetzt ihn durch die entsprechenden Inhalte bzw. Funktionen.

Fallbeispiel

1. Aufgabe

Automatische Ausgabe der letzten drei Newsletter aus einem separaten Blog im Hauptblog als responsive Bootstrap Cards innerhalb einer umfangreichen WordPress Multisite.

Jetzt Kontaktieren

Fallbeispiel

2. Einbindung

Im Dashboard wählt die Kundin einfach an den gewünschten Stellen ihrer Beiträge den Block für Shortcodes und setzt diesen in eckigen Klammern ein.

Jetzt Kontaktieren

Fallbeispiel

3. Ergebnis

Dynamik erzielen, im Fallbeispiel mit Präsentation der letzten drei Newsletterausgaben, ohne dass sich jemand künftig darum kümmern muss, da sich die Boxen automatisch aktualisieren.

Jetzt Kontaktieren

Eigene Shortcodes erstellen

Das Erstellen eines benutzerdefinierten Shortcodes in WordPress erfordert grundlegende Kenntnisse in der Entwicklung von Themes oder Plugins. Der wichtigste Schritt ist jedoch als erstes gemeinsam Funktionen zu definieren und das gewünschte Layout festzulegen. Grundsätzlich ist der Aufbau, egal wie komplex das Thema ist, immer gleich:

function custom_shortcode_function( $atts ) {
  // Hier kommt der Code für den Inhalt des Shortcode
} add_shortcode( 'shortcode_name', 'custom_shortcode_function' );

Innerhalb der Funktion liegt der eigentliche Code. Das kann alles Mögliche sein von Textbausteinen, HTML bis zu komplexem PHP. Die fertige Datei wird z. B. als custom-shortcodes.php innerhalb des Themes gespeichert und über functions.php eingebunden. Alternativ als Plugin in einem neuen Unterordner in wp-content/plugins. Mit Aktivierung des Plugin ist der Shortcode einsatzbereit.

17th May 2023: WordPress 6.2.1 Update Breaks Shortcode Support in Block Templates reports wptavern.com. Those who need to roll back to WordPress 6.2.0 can try a plugin like for example Core Rollback wordpress.org. With latest update from v 6.2.1 to 6.2.2 Shortcodes under WordPress are back on track.

Es gibt noch viele weitere fortgeschrittene Möglichkeiten bei der Erstellung von Shortcodes, wie das Hinzufügen von Attributen oder das Verarbeiten von Parametern in der Funktion. Diese können verwendet werden, um diese noch flexibler zu gestalten.

Shortcodes in der Praxis

Shortcode vs. Vorlagen

Mit Shortcodes arbeiten

Eigene Shortcodes erstellen

Beratung