Wer in WordPress seine eigenen Plugins entwickeln oder einfach ein bisschen etwas verändern möchte, kommt schnell an den Punkt, an der er die add_shortcode() – Funktion benötigt. Obwohl die Dokumentation von WordPress dazu selbst auch sehr gut ist, denke ich, dass meine Beispiele eine gute Ergänzung und noch ein bisschen einfacher zu verstehen sind.
Mit add_shortcode() flexible Contentinhalte erstellen
Shortcodes ermöglichen es dir, in einem Beitrag ein Platzhalter mittels eckiger Klammern einzubauen, in dem anschließend ein gewünschter Inhalt erscheint. Die Art der Ausgabe und was ausgegeben werden soll richtet sich daran, wie du die add_shortcode() – Funktion angewendet hast.
In jedem der nachfolgenden Fälle, muss die jeweilige Funktion in deinem eigenen Plugin oder in der functions.php Datei deines (Child-)Themes eingebaut werden, damit man sie später im Beitragseditor benutzen kann.
Einfacher Shortcode
Wer ganz einfach nur ein Stück Text oder HTML-Code ausgeben möchte, für den langt ein einfacher Shortcode. Ich habe diesen eine Zeitlang genutzt um zum Beispiel Beitragswerbung zu realisieren.
function mein_einfacher_shortcode() { $ausgabe = "Dieser Text soll im Beitrag erscheinen"; return $ausgabe; } add_shortcode( 'Platzhalter', 'mein_einfacher_shortcode' );
Wie du siehst, habe ich eine Funktion namens mein_einfacher_shortcode(); angelegt. in dieser ist ein Text der Variable $ausgabe zugeordnet. Diese Variable wird anschließend zurückgegeben.
Durch den Befehl add_shortcode(); wird der Shortcode aktiviert. Zwischen die ersten beiden Apostrophen kommt der Name, den du später im Beitrag in deine eckigen Klammern schreiben musst. Zwischen den zweiten Apostrophen der Funktionsname.
Schreibst du jetzt in deinem Beitrag [Platzhalter] erscheint dort der Text “Dieser Text soll im Beitrag erscheinen“.
Fortgeschrittene Programmierer können natürlich in der Funktion allerhand anstellen. Beispielsweise Berechnungen durchführen oder Daten aus der WordPress-Datenbank auslesen und ausgeben.
Shortcode mit Übergabeparametern
Um flexiblere Ausgaben zu ermöglichen, kann man dem Shortcode noch eine beliebige Anzahl an Übergabeparametern mitgeben.
In meinem Beispiel möchte ich eine individuelle Begrüßung basteln.
function individueller_shortcode($atts) { $ausgabe = "Hallo ".$atts['name']; return $ausgabe; } add_shortcode( 'Begruessung', 'individueller_shortcode' );
Durch den Übergabeparameter $atts in der Funktion können hier Daten mittels Array gespeichert werden. Der Schlüsselname des jeweiligen Arrays wird im Platzhalter selbst angegeben.
Wenn du jetzt in einem Beitrag den Shortcode [Begruessung name=”Helga”] einfügst, würde an der Stelle der Text “Hallo Helga” erscheinen. Der Punkt im Text der Variable ist dazu da zwei Texte (Hallo und den Inhalt des Arrays) zu verbinden.
Mehrere Übergabeparameter
Weitere Parameter kannst du im Shortcode mittels Komma getrennt übergeben. Diese musst du dann aber auch dementsprechend im Code verarbeiten.
function mehrere_uebergabeparameter($atts) { $ausgabe = "Hallo ".$atts['vorname']." ".$atts['nachname']; return $ausgabe; } add_shortcode( 'Begruessung', 'mehrere_uebergabeparameter' );
In diesem Fall würde der Shortcode [Begruessung vorname=”Helga”, nachname=”Meier”] “Hallo Helga Meier” ausspucken.
Parameter mit Standardwert
Soll ein Standardwert ausgegeben werden, wenn die Parameter nicht gesetzt sind, muss das Array am Anfang der eigenen Funktion mit shortcode_atts() initialisiert werden.
function shortcode_mit_standardwert($atts) { $atts = shortcode_atts( array( 'vorname' => 'Max', 'nachname' => 'Mustermann' ), $atts, 'Begruessung' ); $ausgabe = "Hallo ".$atts['vorname']." ".$atts['nachname']; return $ausgabe; } add_shortcode( 'Begruessung', 'shortcode_mit_standardwert' );
Wie du siehst, wird die $atts Variable dann mit der Funktion shortcode_atts() ausgestattet. Diese wiederum mit einem array, in dem alle Parameter, die einen Standardwert enthalten sollen aufgeführt werden. In unserem Fall vorname und nachname. Da Max und Mustermann Text ist, müssen Sie in Apostrophen angegeben werden. Wären es Zahlenwerte, können die Apostrophe wegfallen.
Nach dem Arrayinhalt wird mit $atts noch einmal angegeben, für welches Array die Werte gelten. Schlussendlich muss noch der Name des Shortcodes-Übergeben werden. In unserem Fall Begruessung.
Wenn wir in diesem Beispiel also im Beitrag [Begruessung] schreiben würden, käme “Hallo Max Mustermann” heraus.
Würde man [Begruessung nachname=”Fischer”] schreiben, würde “Hallo Max Fischer” erscheinen. Ich denke, das Prinzip ist nun klar.
Umschließender Shortcode
Wenn es nötig ist, den Text aus dem WordPress-Beitrag oder der Seite im Code verarbeiten zu können, kann man die Shortcodes auch umschließend verwenden. In meinem Beispiel möchte ich alles, was zwischen meinem Shortcode steht im fertigen Beitrag fett ausgeben:
[Fett]Dieser Text soll fett ausgegeben werden[/Fett]
Dafür wird in meiner Funktion die Variable $content mit übergeben. Sie ist in diesem Fall standardmäßig mit einem leeren Text initialisiert.
function shortcode_mit_content( $atts, $content = "" ) { $ausgabe = "<b>".$content."</b>"; return $ausgabe; } add_shortcode( 'Fett', 'shortcode_mit_content' );
Der Text, der zwischen [Fett] und [/Fett] steht, befindet sich nun in der Variable $content. Dieser hänge ich mittels dem oben gelernten Punkt den HTML-Code für fett gedruckte Schrift <b> am Anfang und </b> am Ende an.
Nun erscheint an der gewünschten Stelle die Ausgabe “Dieser Text soll fett ausgegeben werden“.
Sonderfall Klassen
Für alle, die nicht sehr gut programmieren können oder denen es einfach egal ist, die können diesen kurzen Absatz getrost überspringen.
Alle Beispiele funktionieren in Klassen genau wie oben beschrieben, nur dass in der add_shortcode() – Funktion der Shortcode-Name, gefolgt von einem Array, in der der Klassenname und der Funktionsname angegeben ist, eingetragen werden muss.
class MeineKlasse { public static function shortcode_begruessung( $atts, $content = "" ) { $ausgabe = "Hallo ".$atts['vorname']." ".$atts['nachname']; return $ausgabe; } } add_shortcode( 'Begruessung', array( 'MeineKlasse', 'shortcode_begruessung' ) );
Weitere Anmerkungen zu Shortcodes
- Jede Shortcode-Bezeichnung kann nur einmal verwendet werden. Das bedeutet auch, dass wenn ein anderes WordPress-Plugin die Bezeichnung schon verwendet, du sie nicht mehr verwenden kannst.
- Attributnamen (in unserem Beispiel nachname und vorname) werden immer in Kleinbuchstaben umgewandelt. Wenn du also im Shortcode “Nachname” eingibst, musst du im Code den Array-Schlüssel trotzdem mit Kleinschreibung benennen. Zahlenwerte bleiben davon unberührt.
- Verwende zur Ausgabe immer die “return”-Anweisung und nicht beispielsweise eine echo-Ausgabe. Das kann zu unvorhersehbaren Komplikationen führen.
Du kommst bei deinem Projekt nicht weiter oder brauchst einen Boost? Dann lass dir von mir helfen zum Beispiel bei: ► Beratung für Selbständige, Gründer & Ideenschmiede Egal, ob du erste Tipps brauchst. Einmal über deine Idee reden möchtest oder mit mir das Konzept für das nächste Facebook ausarbeiten willst. ► Entwicklung von Software, APPs & Webseiten Beispielsweise: WordPress Shops & Plugins, (Gaming-)Apps, Datenbank-Applikationen oder andere smoothe Anwendungen! Mehr Infos, Preise und Kontaktmöglichkeiten findest du hier! |
Als ganz blutiger Anfänger hab ich versucht, es nachzuvollziehen. Ich bin nicht sicher, dass ich es vollständig verstehen (und sowieso noch nicht alle Teile des Artikels.
Folgender Abschnitt:
“Wenn wir in diesem Beispiel also im Beitrag [Begruessung] schreiben würden, käme “Hallo Max Mustermann” heraus.
Würde man [Begruessung nachname=”Fischer”] schreiben, würde “Hallo Max Fischer” erscheinen. Ich denke, das Prinzip ist nun klar.”
Warum steht da nichts mehr von Vorname? Weil Begruessung schon Vor- und Nachname immer enthält und durch das nachname=”Fischer” quasi gesagt wird, aber der Nachname soll dann Fischer sein? Aber woher weiß das System denn dann, welchen Vornamen es nehmen soll?
“Ich hätte erwartet, dass da nur “Hallo Fischer” herauskäme, weil der Vorname fehlt?”
Hi Martina,
weil in dem von dir angesprochenen Beispiel die Variablen schon mit einem Wert vorbelegt wurden. Eben mit vorname=”Max” und nachname=”Mustermann”. Wenn du dann nur einen Parameter übergibst, wird von dem fehlenden Parameter einfach der Standardwert genommen.
Vielen Dank für deine Anleitung, bin auch ein absoluter Anfänger würde mich freuen weitere Beträge über das Thema WordPress Plugin programmieren hier zu lesen.
Hallo Stephanie,
danke für dein Lob. Ich werde mich bemühen 🙂
Hallo Robert,
schönes Tutorial. Vielen Dank dafür. Ich glaube im Codeschnipsel für mehrere Übergabe Parameter gibt es einen Fehler: Der Funktionsaufruf in add_shortcode stimmt nicht mit dem Namen der Funktion überein.
Gruß
Carsten
Hey Robert,
erst einmal super Erklärung! Danke – das hilft mir viel!
Aber ein kleiner Fehler hat sich eingeschlichen:
function mehrere_uebergabeparameter($atts)
{
$ausgabe = “Hallo “.$atts[‘vorname’].” “.$atts[‘nachname’];
return $ausgabe;
}
add_shortcode( ‘Begruessung’, ‘individueller_shortcode’ );
das müsste aus meiner Sicht:
add_shortcode( ‘Begruessung’, ‘mehrere_uebergabeparameter’);
heißen oder??
Hi Markus, danke für dein Lob.
Du hast natürlich recht, ist gefixed
Hi Markus,
danke für dein Lob.
Das stimmt natürlich, ist gefixed
Besten Dank für deinen ausführlichen Beitrag zu Shortcodes in WP5.
Ich muss mich zwischen eigenen Blöcken und Shortcodes entscheiden. Es sollen Inhalte aus einer Json Datei eingebunden / angezeigt werden. Die Json Datei wird alle paar Minuten aktualisiert (sind halt Sensordaten vom wetter). Zudem sollen die Daten auf den Internetseiten relativ frei platzierbar sein. Ich denk ein Block wäre wohl stilistisch schöner als “Shortc.”, jedoch ist Zeit und mühen ein erheblicher Faktor, daher entscheide ich mich nun für Shortc. Besten Dank -> funktioniert(°!°).
Hi Lars,
danke für dein Feedback.
Du kannst ja auch einen Shortcode-Block erstellen und diesen dann als wiederverwendbaren Block speichern.