Von einem sogenannten Shortcode in WordPress haben die meisten, die mit WordPress arbeiten oder arbeiten wollen, schon gehört. Ich verwende sie regelmäßig und vielseitig. Hier möchte ich eine detaillierte Einführung zum Thema geben und Fragen beantworten wie:
Was sind eigentlich Shortcodes in WordPress, woher kommen sie und wie werden sie verwendet?
Shortcodes in WordPress sind durch eckige Klammern eingeschlossene Befehle, die von WordPress in Elemente einer Website umgewandelt werden. Shortcodes werden vom WordPress Core, von Plugins oder Themes zur Verfügung gestellt. Man fügt sie im Block-Editor mit dem Block Shortcode ein, im Classic Editor einfach im Text, und in Widget-Bereichen wie Seitenleiste oder Footer ebenfalls über den Block Shortcode.
Nach dieser knappen Antwort habe ich allerdings noch viel mehr Informationen und vor allem einige konkrete Beispiele vorbereitet, die meisten davon live in diesem Artikel. Viel Spaß beim Lesen!
Was ist ein WordPress-Shortcode und wie sieht er aus?
Ein Shortcode in WordPress ist eine Zeichenfolge in eckigen Klammern, die ein bestimmtes Element bzw. eine bestimmte Funktion in WordPress repräsentiert. Sie wird bei der Erzeugung der HTML-Version der vom Website-Besucher angeforderten Seite dann in das entsprechende Element umgewandelt.
Ein typischer WordPress-Shortcode sieht so aus:
[funktion variable1="wert1" variable2="wert2" /]
Zusätzlich zu dieser selbst-schließenden Variante gibt es auch eine Variante mit Inhalt zwischen zwei Shortcode-Befehlen, z.B.:
[funktion]Inhalt[/funktion]
Dabei gilt unter anderem Folgendes zum einfachen Verständnis (für volle Details gibt es die Beschreibung der Shortcodes im WordPress-Entwickler-Handbuch):
- Das Paar eckiger Klammern ist unverzichtbar und zeigt Beginn und Ende des Shortcode-Befehls an.
- funktion ist der Name des Shortcodes und bezeichnet jenes Element oder jene Funktionalität, die der Shortcode repräsentiert, z.B. table oder gallery. Der Name muss auf der Website eindeutig sein: Registrieren zwei Plugins denselben Namen, gilt nur der zuletzt registrierte, und das andere Plugin kann diesen Shortcode nicht mehr bedienen.
- Variablen (Attribute), wie z.B. variable1 und variable2, können, müssen aber nicht vorkommen.
- Die Anführungszeichen bei den Werten der Variablen sind nur nötig, wenn ein Wert Leerzeichen enthält. Am sichersten benutzt man den Shortcode genau so, wie es der Plugin-Autor oder Programmierer vorgibt.
- Der Slash (Schrägstrich) vor der schließenden eckigen Klammer in Beispiel 1 ist optional. Wenn danach kein zweiter, schließender Shortcode-Befehl mehr folgt, schließt der selbst-schließende Befehl in Beispiel 1 auch ohne den Schrägstrich.
- Shortcodes können nur innerhalb von Shortcodes verwendet werden, wenn das vom Programmierer des äußeren Shortcodes so vorgesehen wurde.
Diese Eigenschaften resultieren eigentlich direkt aus der Art und Weise, wie Shortcodes in WordPress in Inhalte umgewandelt werden. Die Programmier-Details würden hier eindeutig zu weit führen, aber zum besseren Verständnis möchte ich ein paar grundlegende Dinge erwähnen.
Woher kommen Shortcodes in WordPress?
Shortcodes in WordPress können direkt vom WordPress Core oder von WordPress-Plugins oder WordPress-Themes bereitgestellt werden. Jeder Shortcode entspricht dabei einer bestimmten Funktion im Programm-Code von WordPress (Core, Plugin, Theme) und ist in einer der entsprechenden Programmdateien definiert.
Jetzt werden Sie vielleicht sagen: Moment, soll ich mir jetzt WordPress-Programmdateien ansehen? Nein, das ist nicht nötig (außer Sie möchten gerne). Aber für das Verständnis der Funktion (und insbesondere des Versagens) von Shortcodes in WordPress ist es wichtig, zu verstehen, dass zu jedem Shortcode eine konkrete Funktion in einer konkreten Datei gehört.
Warum ist nicht alles, was ich im Text zwischen zwei eckige Klammern setze, automatisch ein WordPress-Shortcode?
Ein Shortcode steht Ihnen für Ihre WordPress-Website also erst dadurch zur Verfügung, dass die entsprechenden Dateien als z.B. Teil eines Plugins oder Themes installiert worden sind. Noch dazu muss für jeden Shortcode auch definiert worden sein, zu welcher Funktion er gehört. Das nennt man registrieren, und es erfolgt meist direkt in derselben Datei, wo auch die zum Shortcode gehörende Funktion definiert ist.
Was also nicht als Shortcode registriert ist, das wird von WordPress auch nicht als solcher behandelt. Die WordPress-Maschinerie hat ja bei der Erzeugung der HTML-Seite, auf der z.B. [Plastik] steht, keine Ahnung, dass das durch etwas anderes ersetzt werden soll, außer, Sie haben es vorher als Shortcode registriert.
Wie setze ich einen WordPress-Shortcode ein?
Ein WordPress-Shortcode wird eingesetzt, indem er an der gewünschten Stelle im Text eingefügt wird. Das kann direkt durch Eintippen oder mittels Kopieren und Einfügen oder durch einen speziellen Button im Editor gemacht werden.
Den richtigen WordPress-Shortcode finden
Bevor man einen Shortcode einsetzen kann, muss man ihn allerdings erst finden und den korrekten Code kontrollieren. Das klingt ziemlich übertrieben, ist aber eine häufige Fehlerquelle. Viele Shortcodes in WordPress erlauben oder brauchen Variablen, um korrekt zu funktionieren, wie z.B. eine eindeutige ID. Diese muss korrekt sein, um das gewünschte Resultat zu bringen.
Bei Tabellen, die man im WordPress-Plugin TablePress erzeugt hat, z.B. gibt es zu jeder Tabelle eine eindeutige ID. Ist die im Shortcode eingegebene ID falsch, wird die falsche Tabelle angezeigt. Existiert sie gar nicht, zeigt TablePress statt der Tabelle nur einen Hinweis wie [table “99” not found /] an.
Buttons direkt im Editor oder das Kopieren des richtigen Shortcodes aus der Dokumentation des Plugins (oder, bei TablePress, aus der Bearbeitungsansicht der Tabelle) helfen hier, den richtigen Code zu finden und einzufügen.
Shortcodes im WordPress Block-Editor einsetzen
Seit Version 5.0 von WordPress ist der Block-Editor (früher Gutenberg genannt) der Standard-Editor. Die Arbeit im Block-Editor unterscheidet sich von der Arbeit im nunmehr Classic Editor genannten vorherigen Standard-Editor deutlich. Daher gehe ich jetzt auf die Verwendung von Shortcodes getrennt für beide Editoren ein. Mehr über den Block-Editor habe ich in meinem Artikel Der WordPress Block-Editor (Gutenberg), einfach erklärt beschrieben.
Für Shortcodes gibt es im Block-Editor einen eigenen Block namens Shortcode. Man findet ihn über das Plus-Symbol links oben (den Block-Inserter) in der Kategorie Widgets, oder schneller, indem man in einem leeren Absatz /shortcode tippt und mit der Eingabetaste bestätigt. Der Block zeigt dann ein Eingabefeld mit dem Hinweis Schreibe hier den Shortcode …, in das man den Shortcode tippt oder einfügt.
Shortcodes funktionieren allerdings auch in einem normalen Absatz-Block, mitten im Text. Und wer einen Shortcode per Kopieren und Einfügen in einen leeren Absatz einfügt, bekommt automatisch einen Shortcode-Block. Nicht wundern: Bei manchen Shortcodes, für die es einen passenden Block gibt, macht der Editor beim Einfügen gleich diesen Block daraus, z.B. aus einem Galerie-Shortcode einen Block Galerie und aus einem Bildunterschrift-Shortcode einen Block Bild.
Im Editor selbst sieht man nur den Shortcode als Text, nicht das Ergebnis. Um zu überprüfen, ob der Shortcode funktioniert, klickt man rechts oben auf Vorschau anzeigen und dann auf Vorschau in neuem Tab. Dort sieht man das (hoffentlich korrekte) Ergebnis.
Shortcodes im Classic Editor von WordPress einsetzen
Um einen Shortcode im Classic Editor von WordPress einzusetzen, tippt man ihn einfach an der gewünschten Stelle ein oder fügt den vorher kopierten Shortcode aus der Zwischenablage ein. Manche Plugins und Themes bieten ihre Shortcodes hier aber auch als Buttons in der Werkzeugleiste an. TablePress z.B. fügt eine Schaltfläche TablePress-Tabelle einfügen hinzu, die eine Tabelle aus der Liste auswählen lässt und dann den passenden Shortcode an der Stelle des Cursors einfügt. Auch in der Text-Ansicht des Classic Editors gibt es solche Buttons, sie sehen dort nur etwas schlichter aus.
Auch hier bringt ein Klick auf den Vorschau-Button Klarheit darüber, ob der Shortcode ordnungsgemäß funktioniert oder nicht.
Wo kann ich einen WordPress-Shortcode einsetzen?
Einen WordPress-Shortcode kann man auf Seiten, Beiträgen (und anderen Inhalts-Typen) einfach so im Text einsetzen. Sie funktionieren aber auch in Widget-Bereichen wie Seitenleiste oder Footer. Im Block-Widget-Editor, den WordPress seit Version 5.8 verwendet, nimmt man dafür ebenfalls den Block Shortcode. Mit klassischen Widgets kopiert man den Shortcode in ein Text-Widget.
Mehr zum Thema Widgets, wo und wie man sie in WordPress benutzt, finden Sie in meinem Artikel WordPress-Widgets, einfach erklärt.
Ein WordPress-Shortcode funktioniert nicht. Woran liegt das?
Wenn ein Shortcode in WordPress nicht funktioniert, dann merkt man das vielleicht gar nicht unmittelbar. Das liegt daran, dass der Shortcode im Editor einfach so dasteht wie immer. Aber woher soll man dann einem Shortcode im Editor ansehen, ob er noch oder überhaupt funktioniert oder nicht?
Wie merke ich, dass ein Shortcode in WordPress nicht funktioniert?
Ob ein Shortcode in WordPress funktioniert oder nicht, merkt man entweder in der Vorschau der Seite oder in deren tatsächlicher Live-Version auf der Website. Wenn dort statt des Shortcodes das gewünschte Element erscheint, dann funktioniert er. Wenn dort nur einfach der Shortcode als Text steht, dann funktioniert er nicht.
Welche Gründe gibt es für nicht-funktionierende WordPress-Shortcodes?
Für das Nicht-Funktionieren eines WordPress-Shortcodes gibt es de facto nur einen Grund: Der Shortcode wird nicht von WordPress in das gewünschte Element ersetzt. Das kann aber folgende spezifischere Gründe haben:
- Jener Teil von WordPress, der die Übersetzung von Shortcodes in die dazugehörigen Elemente zu erledigen hat, ist defekt. Das ist unwahrscheinlich, ohne dass auch noch andere Aspekte der WordPress-Website betroffen sind, aber möglich ist es.
- Der betroffene Shortcode ist nicht als solcher registriert. Das kann vorkommen, wenn
- das Plugin, das den Shortcode zur Verfügung stellt, nicht mehr (oder vorübergehend nicht) aktiv ist oder sogar vollständig gelöscht wurde
- das Theme, das den Shortcode zur Verfügung stellt, durch den Wechsel zu einem anderen Theme nicht mehr aktiv ist (oder sogar bereits gelöscht wurde)
- Der betroffene Shortcode enthält einen Fehler. Dabei kann es sich um folgende Arten von Fehlern handeln:
- die Funktionsbezeichnung im Shortcode ist falsch
- zwingend nötige Variablen fehlen bzw. haben keine oder ungeeignete Werte
- Der betroffene Shortcode wird verschachtelt innerhalb eines anderen Shortcodes aufgerufen, wobei der Autor des äußeren Shortcodes das nicht vorgesehen hat.
- Der Shortcode steht in doppelten eckigen Klammern. Das ist kein Fehler, sondern Absicht: So zeigt man einen Shortcode als Text, statt ihn auszuführen (siehe unten).
Was kann ich tun, um einen defekten WordPress-Shortcode (wieder) zum Funktionieren zu bringen?
Um einen WordPress-Shortcode, der nicht (mehr) funktioniert, (wieder) funktionstüchtig zu machen, muss man das bestehende Problem anhand der möglichen Ursachen im vorigen Abschnitt identifizieren und dann entsprechend beheben. Hier ist die korrespondierende Liste von Gegenmaßnahmen:
- Defekte Dateien in WordPress selbst lassen sich durch eine Neuinstallation der aktuellen WordPress-Version beheben, ohne dass Inhalte verloren gehen. Diese Möglichkeit finden Sie im WordPress-Dashboard unter Dashboard → Aktualisierungen, Schaltfläche Version … neu installieren. Machen Sie davor sicherheitshalber ein Backup.
- Die Registrierung des betroffenen Shortcodes muss sichergestellt werden. Dazu
- überprüfen Sie, ob Sie das Plugin, das den Shortcode zur Verfügung stellt, deaktiviert oder gelöscht haben. Wenn dies der Fall ist, installieren oder aktivieren Sie das Plugin wieder
- überprüfen Sie, ob Sie von jenem Theme, das den Shortcode zur Verfügung stellt, zu einem anderen Theme gewechselt sind. Wenn dies der Fall ist, wechseln Sie wieder zurück
- Eliminieren Sie alle Fehler aus dem Shortcode und zwar:
- stellen Sie sicher, dass die Funktionsbezeichnung im Shortcode korrekt ist und korrigieren Sie sie gegebenenfalls
- kontrollieren Sie alle Variablennamen auf Fehler. Stellen Sie außerdem sicher, dass die Werte für die Variablen korrekt oder geeignet gewählt sind
- Falls der betroffene Shortcode verschachtelt innerhalb eines anderen Shortcodes aufgerufen wird, testen Sie den betroffenen Shortcode auch außerhalb des anderen Shortcodes. Funktioniert er außerhalb, aber nicht innerhalb des anderen Shortcodes, dann können Sie versuchen, den Support jenes Plugins oder Themes zu kontaktieren, das den umgebenden Shortcode zur Verfügung stellt. Eventuell gibt es eine Möglichkeit, Shortcodes innerhalb des umgebenden Shortcodes zuzulassen oder diese Funktionalität in einer zukünftigen Version einzubinden.
Ein übliches Problem ist, dass man ein Theme aus gutem Grund gewechselt hat oder ein Plugin aus gutem Grund deaktiviert oder gelöscht hat. Trotzdem möchte man aber die Funktionalität des Shortcodes behalten.
Dies ist jedoch nur dadurch möglich, ein anderes Plugin oder Theme mit der gleichen Funktionalität zu finden. Den Shortcode kann man nicht einfach so in ein anderes Plugin oder Theme übertragen – jedenfalls nicht ohne PHP-Programmierkenntnisse.
Diagnostizieren eines Problems mit einem Shortcode in WordPress
Wenn man nicht genau weiß, warum ein WordPress-Shortcode nicht funktioniert, dann sollte man folgendermaßen vorgehen:
- Stellen Sie sicher, dass der gesamte Shortcode richtig geschrieben wurde und weder die Funktionsbezeichnung noch die Variablen-Namen Fehler enthalten.
- Stellen Sie sicher, dass die Werte für die Variablen akzeptabel sind. Testen Sie gegebenenfalls mit in der Dokumentation des Shortcodes vorgegebenen Beispielen.
- Überprüfen Sie, ob der betroffene Shortcode innerhalb eines anderen Shortcodes verwendet wird. Testen Sie ihn gegebenenfalls außerhalb und für sich.
- Überprüfen Sie, ob der betroffene Shortcode zu einem inzwischen inaktiven Plugin oder Theme gehört.
- Überprüfen Sie, ob alle Plugins, Themes und WordPress selbst auf die jeweils aktuellste Version aktualisiert wurden.
- Wenn alles andere nicht zutrifft, versuchen Sie eine Neuinstallation der aktuellen WordPress-Version.
Einen Shortcode als Text zeigen, statt ihn auszuführen
Manchmal möchte man einen Shortcode nicht ausführen, sondern zeigen, z.B. in einer Anleitung wie dieser. Dafür setzt man ihn in doppelte eckige Klammern: Aus [[gallery]] macht WordPress beim Anzeigen [gallery] als Text, statt eine Galerie einzufügen. Bei einem Shortcode mit Inhalt kommt die zusätzliche Klammer ganz an den Anfang und ganz ans Ende, also z.B. [[box type="warning"]Text[/box]].
Das gilt allerdings nur für Shortcodes, die auf der Website auch registriert sind. Bei einem Namen, den WordPress nicht kennt, bleiben beide Klammern stehen. Ob alles stimmt, zeigt wieder die Vorschau.
Beispiele für Shortcodes in WordPress aus dem WordPress-Core
Einige Shortcodes sind bereits im WordPress Core definiert, nämlich diese sechs: caption (für ein Bild mit Bildunterschrift), gallery, audio, video, playlist und embed. Sie betreffen also alle den Umgang mit Mediendateien oder Medien von externen Quellen. Die meisten dieser Shortcodes braucht man allerdings in der Regel nicht mehr.
Der Grund dafür ist, dass es dafür im Block-Editor eigene Blöcke gibt (Bild, Galerie, Audio, Video, Wiedergabeliste, Einbettung) und dass der Classic Editor die passenden Shortcodes beim Einfügen von Medien selbst erzeugt, so wie bei folgendem Beispiel:
Bildunterschrift mit dem Caption-Shortcode
Eine Bildunterschrift (im Englischen Caption) kann in WordPress mit einem Shortcode um ein Bild herum eingebaut werden. Dazu schreibt man z.B.
[caption id="" align="alignright" width="300"]<img src="https://websiteberater.com/wp-content/uploads/2019/02/google-search-console-einfach-erklaert.jpg" width="300" height="205" /> Katzenaugen[/caption]
und erhält das Bild rechts:
Das Bild wird also von einer Umgebung eingehüllt, die selbst Optionen zur Verfügung hat, was Breite und Ausrichtung angeht. Die Bildunterschrift wird unter dem Bild angeordnet und bewegt sich auch mit diesem mit.
Hier ist noch interessant, anzumerken, dass man über eine gegebenenfalls gesetzte id auch noch CSS-Befehle direkt für dieses Bild und die Bildunterschrift festlegen kann.
Wird im Classic Editor z.B. ein Bild in WordPress aus der Mediathek mit einer Beschriftung eingefügt, dann erzeugt WordPress genau diesen Shortcode selbst. Im Block-Editor schreibt man die Bildunterschrift dagegen direkt unter das Bild im Block Bild, ganz ohne Shortcode. Fügt man dort den obigen Code ein, macht der Editor daraus übrigens gleich einen Bild-Block mit Bildunterschrift.
Beispiele für Shortcodes in WordPress aus WordPress-Plugins
Dieser Fall ist eigentlich der typischste für die Verwendung von Shortcodes in WordPress. Man hat ein Plugin installiert, das zur Verfügung gestellte Elemente per Shortcode zum Einfügen in Inhalte oder Widgets vorbereitet.
Dann bekommt man entweder Anweisungen, welcher Shortcode wie eingesetzt werden kann, oder es gibt für die Elemente Buttons oder Blöcke in den Editoren, oder beides. Im Folgenden nenne ich kurz ein paar typische, aber auch interessante, Beispiele für Plugins mit Shortcodes in WordPress:
Tabellen in WordPress durch das Plugin TablePress
Tabellen in WordPress waren vor der Einführung des Block-Editors ohne Plugin eine Herausforderung für unerfahrene Benutzer. Eines der besten Tabellen-Plugins, das dem Tabellen-Block in einigen Punkten noch immer überlegen ist (zentrale Verwaltung, Sortieren und Suchen für Besucher), ist TablePress.
Ich habe diesem Plugin bereits in meinem Artikel Tabellen in WordPress, einfach erklärt sehr viel Platz gewidmet und dort auch die Funktionalität und Handhabung von TablePress im Detail erklärt. Hier möchte ich ganz kurz nur die Verwendung des zugehörigen Shortcodes erwähnen:
TablePress verwaltet eine Liste von erstellten Tabellen über eindeutig zugewiesene IDs. Um eine Tabelle an einer bestimmten Stelle einzubauen, schreibt man dort z.B. einfach
[table id=1 /]und erhält:
| Shortcode | Wofür | Block im Block-Editor |
|---|---|---|
| caption | Bild mit Bildunterschrift | Bild |
| gallery | Bildergalerie | Galerie |
| audio | Audiodatei mit Player | Audio |
| video | Video mit Player | Video |
| playlist | Wiedergabeliste für Audio oder Video | Wiedergabeliste |
| embed | Inhalt über eine URL einbetten, z. B. ein YouTube-Video | Einbettung |
Wichtig: Wenn die Tabelle mit der ID 1 über TablePress im WordPress-Dashboard verändert wird, dann ändern sich auch alle Instanzen dieser Tabelle, die irgendwo auf der Website eingebunden wurden. Das sollte man also bei der Verwaltung und Platzierung der Tabellen beachten.
Tabellen und Diagramme durch das Plugin wpDataTables
Ein zweites Tabellen-Plugin, das ich hier auf WebsiteBerater.com verwende, ist wpDataTables. Es ist stärker bei großen Datenmengen und kann aus denselben Daten auch Diagramme erzeugen. Auch hier wird jede Tabelle über einen Shortcode mit ihrer ID eingebunden:
[wpdatatable id=8]Genau dieser Shortcode erzeugt z.B. die große Anbieter-Tabelle in meinem Vergleich der Online-Buchungssysteme. Für Diagramme gibt es einen eigenen Shortcode, [wpdatachart id=…].
Werbung (Affiliate-Link): wpDataTables ansehen
Formulare in WordPress
Formulare auf WordPress-Websites sind zwar ein wichtiges Thema, jedoch auch ein fortgeschrittenes. Eine einfache Website kommt durchaus ohne Formulare aus, obwohl einem Website-Betreiber sicher einige Gründe einfallen, ein Formular zu integrieren.
Ich verwende für Formulare auf meinen Websites und auf Websites für Kundinnen und Kunden das Plugin Ninja Forms. Früher war es Caldera Forms, dessen Entwicklung 2022 eingestellt wurde und das seitdem nicht mehr im WordPress-Plugin-Verzeichnis erhältlich ist.
Welches Formular-Plugin man letztlich einsetzt, spielt aber für unsere Zwecke hier eigentlich keine Rolle, denn im Wesentlichen verwenden alle das gleiche Prinzip, nämlich WordPress-Shortcodes (und im Block-Editor meist zusätzlich einen eigenen Block).
Um ein Formular einzubinden, das man über das Plugin Ninja Forms erstellt hat, verwendet man einen Shortcode, der so aussieht:
[ninja_form id=2]und erhält dadurch das Formular, das hier angezeigt wird. Die ID ist wieder eindeutig und wird jedem Formular automatisch zugewiesen. Dieses Test-Formular tut übrigens nichts weiter, als höflich Danke zu sagen.
Eine automatisch erzeugte Bibliografie auf einer WordPress-Website durch das Plugin Zotpress
Das WordPress-Plugin Zotpress ermöglicht die automatische Erzeugung von Bibliografien und Literaturhinweisen (Zitierungen) auf einer WordPress-Website aus einer Zotero-Datenbank. Die Bibliografie z.B. wird in diesem Fall durch den WordPress-Shortcode
[zotpress userid="000000"]erzeugt, der an der gewünschten Stelle eingegeben wird und die korrekte ID enthalten muss. Da ich Zotpress auf WebsiteBerater.com nicht nutze, gibt es dafür hier kein Live-Beispiel.
Einen eigenen Shortcode erstellen: Beispiel aktuelles Jahr
Ein häufiger Wunsch ist ein Shortcode für das aktuelle Jahr, z.B. für den Copyright-Hinweis im Footer, damit dort nicht jedes Jahr von Hand eine neue Zahl eingetragen werden muss. WordPress selbst hat dafür keinen Shortcode, aber einen eigenen anzulegen, ist mit drei Zeilen PHP erledigt:
add_shortcode( 'jahr', function () {
return wp_date( 'Y' );
} );
Danach schreibt man z.B. © [jahr] Musterfirma in den Footer und erhält immer das aktuelle Jahr. Den Code legt man am besten in einem kleinen eigenen Plugin ab, wie ich es für einen eigenen Shortcode für Menüs Schritt für Schritt beschrieben habe, oder in einem Plugin für Code-Schnipsel. In die functions.php eines gekauften oder kostenlosen Themes gehört er nicht: Dort ist er beim nächsten Theme-Update wieder weg.
Beispiele für Shortcodes in WordPress aus WordPress-Themes
Auch Themes können bestimmte Gestaltungselemente per Shortcode zur Verfügung stellen. Das könnte z.B. eine bestimmte Art von Bildergalerie sein, ein besonderes Kästchen mit Rahmen oder ein Button. Da ich ein Fan und Benutzer des Divi-Themes von Elegant Themes bin, kommen die Beispiele aus dieser Rubrik von Divi.
Diese Shortcodes stammen noch aus der Zeit vor dem Divi Builder. Divi bringt sie weiterhin mit, und im Classic Editor gibt es dafür eigene Buttons in der Werkzeugleiste, die jeweils ein kleines Konfigurationsfenster öffnen und daraus den Shortcode erzeugen. Für neue Seiten nimmt man heute eher die Module des Divi Builders, aber als Beispiele für Shortcodes sind sie ideal. Ähnliche Elemente mit Shortcodes finden Sie wahrscheinlich auch in anderen umfangreicheren Themes.
Im Block-Editor stehen diese Buttons allerdings nicht zur Verfügung (auch nicht im Block Klassisch, dessen Werkzeugleiste nur die Standard-Elemente zeigt). Dort muss man den Shortcode-Block benutzen und die richtigen Shortcodes dort einfügen.
Übrigens: Wenn Sie sich noch nicht so intensiv mit dem Thema WordPress-Themes befasst haben oder gerade auf der Suche nach einem neuen Theme sind, interessiert Sie vielleicht auch mein Artikel WordPress-Theme auswählen: Kriterien, Block-Themes und meine Empfehlung.
Buttons in WordPress über das Divi-Theme von Elegant Themes
Buttons können bei installiertem Divi-Theme über einen Button-Button in der Werkzeugleiste des Classic Editors oder per Shortcode im Text eingefügt werden. Die übliche Funktion für so einen einfachen Button ist ein Link, den man per Variable an den Button übergibt. Weitere Variablen legen Größe, Farbe und das Öffnen in einem neuen Fenster fest:
[button link="https://websiteberater.com/19-schritte-zur-fertigen-wordpress-website-alle-details/" type="big" color="green" newwindow="yes"] Zum kompletten Website-Leitfaden[/button]So einen Button habe ich z.B. in meinem Leitfaden zum Erstellen einer kompletten WordPress-Website am Ende jedes Artikels verwendet, um zum nächsten Artikel weiterzuleiten. Wenn Sie gerne die Übersicht dieses Leitfadens sehen wollen, dann klicken Sie einfach auf den Button. Der Link öffnet sich in einem neuen Fenster oder Tab in Ihrem Browser, aber das wissen Sie ja bereits aus der entsprechenden Variable.
Zum kompletten Website-LeitfadenRegisterkarten in WordPress über das Divi-Theme von Elegant Themes
Die Registerkarten, die von Elegant Themes durch das Divi-Theme auch als Shortcode zur Verfügung gestellt werden, sind ein exzellentes Beispiel für verschachtelte Shortcodes. Hier gibt es mehrere Shortcodes, die gemeinsam die Tabs-Struktur aufbauen. Die Erstellung kann also direkt im Editor passieren, es gibt aber auch wieder einen Button dazu in der Werkzeugleiste des Classic Editors, dessen Konfigurationsfenster die Optionen abfragt.
Ich habe hier ein paar Optionen ausgewählt, die per Variablen übergeben werden: Die Registerkarten sollen links statt oben angezeigt werden und der Übergangs-Effekt soll slide sein und nicht fade. Dazu kommen drei Karten mit Titel und Inhalt. Die erzeugten Shortcodes sehen dann so aus:
[tabs slidertype="left tabs" fx="slide"]
[tabcontainer]
[tabtext]Erste Karte[/tabtext]
[tabtext]Zweite Karte[/tabtext]
[tabtext]Dritte Karte[/tabtext]
[/tabcontainer]
[tabcontent]
[tab]Diese erste Karte ist faszinierend![/tab]
[tab]Diese zweite Karte ist ebenfalls faszinierend![/tab]
[tab]Diese dritte Karte ist wahnsinnig faszinierend![/tab]
[/tabcontent]
[/tabs]In diesem Code-Beispiel sieht man schön die Hierarchie dieser Konstruktion. Zunächst wird der Shortcode tabs geöffnet, der auch die Variablen beinhaltet. Danach wird der Shortcode tabcontainer geöffnet, der der Reihe nach die Titel der Tabs in tabtext Shortcodes enthält.
Danach wird tabcontainer geschlossen und tabcontent geöffnet, in dem nun der Reihe nach die tab Shortcodes samt Inhalten der Karten aufgereiht sind. Dann wird tabcontent wieder geschlossen und ebenso der äußerste Shortcode tabs.
Und hier ist das entsprechende Ergebnis. Klicken Sie sich durch, die Inhalte sind allesamt faszinierend!
Ein Umschaltblock in WordPress über das Divi-Theme von Elegant Themes
Ein weiteres Beispiel aus der Divi-Kollektion ist ein Umschaltblock, der ganz simpel einen Text unterhalb eines Titels ausklappt und wieder einklappt (oder umgekehrt). Auch dafür gibt es einen Button im Classic Editor mit Konfigurationsfenster.
Von der Komplexität her ist das wieder ein einfacher Shortcode. Die einzige Variable, die wir hier sehen, ist der Titel, der immer angezeigt wird. Der Inhalt des Shortcodes ist der Text, der zwischenzeitlich verborgen werden kann. Der Shortcode, den ich hier als Beispiel generiert habe, sieht so aus:
[learn_more caption="Öffnen Sie diesen Umschaltblock, um eine ganze Menge Text zu sehen!"] Hier kann man eine ganze Menge an Text verstecken, wirklich![/learn_more]Und hier ist schließlich der davon erzeugte Umschaltblock in Aktion:
Öffnen Sie diesen Umschaltblock, um eine ganze Menge Text zu sehen!
Ein (Informations-)Kasten in WordPress über das Divi-Theme von Elegant Themes
Ein letztes Beispiel aus dem Arsenal von Divi möchte ich hier noch bringen, und damit beschließe ich dann auch den Reigen der Beispiele: Ein Informationskasten mit Hintergrundfarbe und Rand. Auch dieses Element kann man im Classic Editor durch einen Button erzeugen und über ein Konfigurationsfenster die gewünschten Einstellungen setzen.
Der Shortcode enthält in diesem Fall eine Variable, die den Typ des Kastens angibt (davon wird übrigens automatisch die Hintergrundfarbe bestimmt). Der Inhalt wird wieder zwischen dem öffnenden und schließenden Teil des Shortcodes eingegeben:
[box type="warning"] Das könnte eine wichtige Botschaft sein![/box]Das Ergebnis dieses Shortcodes schließlich sieht so aus:
Ihr Feedback zu diesem Artikel
Über Feedback zu diesem Artikel freue ich mich, z.B. mit welchen Shortcodes Sie schon Erfahrungen gesammelt haben. Falls Ihnen der Artikel nicht geholfen hat, kommentieren Sie bitte unbedingt ein paar Zeilen zu Verbesserungsvorschlägen oder ergänzenden Informationen, die ich eventuell nicht erwähnt habe.
Oder lassen Sie unten einen allgemeinen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!
Mehr zum Thema WordPress-Website
In diesem Artikel haben Sie gesehen, wie Shortcodes in WordPress aussehen, was sie alles können, wann sie eventuell nicht funktionieren, und wie Sie gegebenenfalls Probleme beheben können. Ich habe Ihnen auch eine Reihe von Beispielen dafür gezeigt, wie ein Shortcode konkret aussieht und was er tut.
Die meisten dieser Beispiele sind in diesem Artikel auch direkt und live enthalten, sodass Sie sie ansehen und ausprobieren können, wo es eine dynamische Funktion gibt.
Shortcodes sind ein sehr interessanter und mächtiger Teil von WordPress. Wenn Sie über andere Bereiche von WordPress-Websites noch mehr erfahren wollen, dann lade ich Sie ein, die Suchfunktion oben im Menü dieser Website zu benutzen, um nach Ihrem Thema zu suchen.
Als Alternative weise ich Sie hier auch gerne noch einmal auf meinen Leitfaden zum Erstellen einer kompletten WordPress-Website hin. Diese 19 Schritte zur fertigen WordPress-Website: Alle Details beginnen mit dem Kauf von Webspace (inklusive Domain-Auswahl) und behandeln danach alles, was man bis zu einer gut funktionierenden WordPress-Website tun muss und sollte.
Ich wünsche Ihnen beim Weiterlesen viel Vergnügen und für Ihr Website-Projekt alles Gute!
