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. Sie können einfach im Text oder auch über das Text-Widget in Widget-Bereichen wie Sidebar oder Footer eingefügt werden.
Nach dieser knappen Antwort habe ich allerdings noch viel mehr Informationen, viele Screenshots und vor allem einige konkrete Beispiele vorbereitet. 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 des Shortcode-API im WordPress-Codex):
- Das Paar eckiger Klammern ist unverzichtbar und zeigt Beginn und Ende des Shortcode-Befehls an
- funktion bezeichnet jenes Element oder jene Funktionalität, die der Shortcode repräsentiert, z.B. table oder form, etc.. Diese Bezeichnung muss eindeutig sein, d.h. Shortcodes zu verschiedener Funktionalität dürfen nicht die gleiche Funktionsbezeichnung haben (Shortcodes zur gleichen Funktionalität dürfen aber verschiedene Funktionsbezeichnungen haben).
- Variablen, wie z.B. variable1 und variable2 können, müssen aber nicht vorkommen.
- Die Anführungszeichen bei den Variablen können vorhanden sein, müssen aber nicht vorhanden sein (einfach so benutzen, wie das vom Plugin-Autor oder Programmierer des Shortcodes vorgegeben ist).
- 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 der selben 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 vorbereiteten Tabelle eine eindeutige ID. Ist die im Shortcode eingegebene ID falsch oder existiert sie gar nicht, dann wird auch die falsche oder gar keine Tabelle angezeigt – im schlimmsten Fall der Shortcode selbst.
Durch die Verwendung von Buttons direkt im Editor oder durch Kopieren und Einfügen des richtigen Shortcodes direkt aus z.B. der Dokumentation des Plugins hilft 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 neue Standard-Editor. Die Arbeit im Block-Editor unterscheidet sich von der Arbeit im nunmehr Classic Editor genannten vorherigen Standard-Editor zumindest optisch. Daher gehe ich jetzt auf die Verwendung von Shortcodes getrennt für beide Editoren ein. Mehr Unterschiede habe ich in meinem Artikel Schreiben im WordPress Block-Editor, einfach erklärt beschrieben.
Die auffälligste Neuerung im Block-Editor ist die Verwendung von Blöcken für die Inhalte der Website. Dabei gibt es für verschiedene Arten von Inhalten auch verschiedene Arten von Blöcken. Darunter ist auch ein Shortcode-Block, den man beim Hinzufügen eines neuen Blocks durch Klicken auf das Plus-Symbol links oben im Editor in der Block-Gruppe Widgets findet:
Der hinzugefügte Shortcode-Block sieht so aus:
Ich habe in diesem Beispiel bereits den Shortcode und etwas Text drumherum eingefügt, um zu zeigen, dass auch das gut funktioniert. Shortcodes können allerdings auch einfach in einem normalen Text (also Absatz)-Block verwendet werden.
Nicht wundern: Wenn man in einem Absatz-Block als erstes einen gültigen Shortcode einfügt, dann verwandelt sich der Block automatisch in einen Shortcode-Block.
Um zu überprüfen, ob der Shortcode funktioniert, klickt man im Block-Editor einfach rechts oben auf den Button Vorschau. Die Vorschau des geschriebenen Beitrags oder der geschriebenen Seite wird dann in einem neuen Browser-Tab oder Fenster geöffnet und man sieht 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. Hier werden einige Shortcodes aber auch noch als Buttons in der Werkzeugleiste angeboten.
Hier das Beispiel für eine Tabelle (mit dem Plugin TablePress erstellt, siehe weiter unten), deren Shortcode man im visuellen Editor mit diesem Button einfügen kann:
Auch in der Text-Version des Classic-Editors gibt es diese Buttons, sie sehen allerdings etwas anders 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. Dazu kopiert man den gewünschten WordPress-Shortcode in ein Text-Widget, das man im entsprechenden Widget-Bereich platziert hat.
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 z.B. im Text-Editor einfach so da steht 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 deren tatsächlicher live-Version auf der Website. Wenn dort statt des Shortcodes das gewünschte Element erscheint, dann funktioniert er, wenn auch 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.
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 in WordPress können eventuell durch neu-Installation der aktuellen WordPress-Version vorgenommen werden. Diese Möglichkeit finden Sie im WordPress-Dashboard über den Menüpunkt Dashboard – Aktualisierungen im linken Seitenmenü.
- 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, dass 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 ernsthafte 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.
Beispiel für einen Shortcode in WordPress aus dem WordPress-Core
Einige Shortcodes sind bereits im WordPress Core definiert. Diese betreffen hauptsächlich den Umgang mit Mediendateien oder Medien von externen Quellen. Die meisten dieser bereits im WordPress-Core integrierte Shortcodes braucht man allerdings in der Regel nicht.
Der Grund dafür ist, dass dafür bereits eigene Buttons oder Blocks in den Editoren existieren oder die Funktionalität im aktuellen WordPress bereits durch die Benutzeroberfläche automatisch mit-generiert wird, 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.
Katzenaugen
und erhält folgendes:
Das Bild wird also von einer Umgebung eingehüllt, die selbst Optionen zur Verfügung hat, was breite und Alignment 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 z.B. ein Bild in WordPress aus der Medienübersicht mit einer Beschriftung eingefügt, dann wird diese auch als Bildunterschirft verwendet und automatisch eingebaut.
Außerdem stellt WordPress aktuell beim Einfügen von Bildern bereits diese Funktionalität automatisch zur Verfügung. Wenn man also den obigen Code in einem Editor eingibt, wird der Shortcode recht unmittelbar in das entsprechende Element umgewandelt, um eine Vorschau zu generieren.
Davon darf man sich nicht irritieren lassen. Um z.B. im Nachhinein bei einem Bild, das man mit dem obigen Code eingefügt hat, noch etwas zu ändern, klickt man am besten auf das Bild und öffnet die Bearbeitungsansicht. Dort hat man die Caption als Einstellung genau so zur Verfügung wie andere interessante und praktische Möglichkeiten.
Beispiele für Shortcodes in WordPress aus WordPress-Plugins
Diese 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 Blocks 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 auch der Block-Implementierung von Tabellen noch überlegen ist, 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
und erhält:
| Dies ist die erste Spalte | adsfadf | |||
|---|---|---|---|---|
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.
Formulare in WordPress
Formulare auf WordPress Websites sind zwar ein wichtiges Thema, jedoch auch ein fortgeschrittenes. Eine einfach Website kommt durchaus ohne Formulare aus, obwohl einem Website-Betreiber sicher einige Gründe einfallen, ein Formular zu integrieren.
Ich habe beim Einsatz von Formularen auf meinen Websites, aber auch auf den Websites für KundInnen sehr gute Erfahrungen mit dem Plugin Caldera Forms gemacht. Da der Support dafür allerdings anfang 2022 eingestellt wurde, habe ich zum Schwestern-Plugin Ninja Forms gewechselt. Das wird auch durch ein automatisches Konversions-Plugin unterstützt, das aus den Caldera-Formularen vollautomatisch mit einem Klick Ninja-Formulare macht.
Welches Formular-Plugin man letztlich einsetzt, spielt aber für unsere Zwecke hier hiereigentlich keine Rolle, denn im Wesentlich verwenden alle, das gleiche Prinzip, nämlich WordPress Shortcodes.
Um ein Formular einzubinden, das man z.b. über das Plugin Caldera Forms erstellt hat, verwendet man einen Shortcode, der so aussieht:
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.
Google reCaptcha durch das Plugin Google captcha (reCaptcha)
Das Plugin Google Captcha (reCaptcha) ermöglicht das Einbinden von Google Captchas auf der eigenen WordPress Website. Dieses Plugin und diese Art von Sicherheitsmaßnahme für WordPress Websites habe ich in meinem Artikel Welche WordPress-Plugins braucht man? im Detail diskutiert.
In diesem Fall kann man einige Einstellungen setzen, wodurch ein reCaptcha auf den Login-Seiten der WordPress Website und anderen neuralgischen Punkten, z.B. Formularen, eingeblendet werden kann. Man kann das reCaptcha allerdings auch per Shortcode einsetzen.
Dieser Shortcode hat die Form
und erzeugt an der eingefügten Stelle ein Google Captcha, wie es den Einstellungen im Plugin entspricht:
[bws_google_captcha]
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
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.
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.
Ich vermute aber, dass jeder, der ein etwas fortgeschritteneres WordPress Theme benutzt, ähnliche Elemente mit Shortcodes als Resultat unter seinen zur Verfügung stehenden Gestaltungselementen finden wird. Schauen Sie sich z.B. einfach einmal alle Buttons im Classic Editor an, die in der ersten Zeile der Werkzeugleiste rechts neben diesen Standard-Buttons auftauchen.
Im Block-Editor stehen diese Buttons, die hier in der Werkzeugleiste des Classic Editors angebracht sind, allerdings nicht zur Verfügung (auch nicht im Classic-Block, 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 Der ultimative Leitfaden zum richtigen WordPress Theme.
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.
Dieser Button-Button verfügt noch über ein kleines Konfigurationsfenster, das man nutzen kann, um die Optionen anzusehen und einzugeben und das sieht folgendermaßen aus:
Hier sieht man die Einstellungen, die dann im Shortcode konkret zu folgenden Setzungen für die verwendeten Variablen führen:
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 weiter zu leiten. 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
und nach einem Klick auf diesen Button öffnet sich auch wieder ein Konfigurationsfenster:
Ich habe hier wieder ein paar Optionen ausgewählt, die per Variablen übergeben werden. Z.B. sollen die Registerkarten links statt oben angezeigt werden und der Übergangs-Effekt soll slide sein und nicht fade.
Danach kann man die Titel und Inhalte der Registerkarten festlegen, auch mehrere, wenn man möchte. Ich habe hier drei Karten erzeugt, aber nur die erste ist im oberen Screenshot auch zu sehen. Der erzeugte WordPress-Shortcode sieht (bzw. eigentlich die erzeugten Shortcodes sehen) dann so aus:
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 Reihne 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).
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.
Wieder gibt es kein Konfigurationsfenster, das so aussieht:
Der Shortcode, den ich hier als Beispiel generiert habe, sieht so aus:
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:
Das Ergebnis dieses Shortcodes schließlich sieht so aus:
Ihr Feedback zu diesem Artikel
Hier eine kleine Umfrage in eigener Sache. Wie fanden Sie die Informationen in diesem Artikel? Die Teilnahme an dieser Umfrage ist natürlich freiwillig und völlig anonym. Mit Ihrer Teilnahme stimmen Sie unserer Datenschutzerklärung zu. Vielen Dank!
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!
