WordPress-Tutorial: add_shortcode() inklusive Übergabeparametern erklärt

By | 12. Juli 2018

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.

Anzeige:
Ein T-Shirt auf dem steht "Programmer - an oranism that turns caffeine and pizza into software"
Dieser und weitere Artikel für Programmierer auf getdigital.de

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.

Anzeige: – Datenschutz

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', 'individueller_shortcode' );

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.

Ich würde mich freuen, wenn du meinen Newsletter abonnieren würdest. Dann verpasst du auch keinen interessanten Beitrag mehr.

Mein Newsletter informiert dich über Themen der Selbständigkeit, Bloggen, Marketing und Programmierung. Informationen zum Anmeldeverfahren, Versanddienstleister, statistischer Auswertung und Widerruf findest du in meinen Datenschutzbestimmungen



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“.

Die Shortcode-Beispiele noch einmal im WordPress Editor

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.
Robert von Plötzlich-Selbständig.de Schwarz/Weiß Bild

Ich freue mich von dir zu hören!

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!

4 thoughts on “WordPress-Tutorial: add_shortcode() inklusive Übergabeparametern erklärt

  1. Martina Roters

    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?”

    Reply
    1. Robert Post author

      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.

      Reply
  2. Stephanie

    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.

    Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Im Rahmen der Kommentarfunktion auf dieser Website werden neben Ihrem Kommentar auch Angaben zum Zeitpunkt der Erstellung des Kommentars und der von Ihnen gewählte Kommentatorenname gespeichert und auf der Website veröffentlicht. Ferner wird Ihre IP-Adresse mitprotokolliert und gespeichert. Diese Speicherung der IP-Adresse erfolgt aus Sicherheitsgründen und für den Fall, dass die betroffene Person durch einen abgegebenen Kommentar die Rechte Dritter verletzt oder rechtswidrige Inhalte postet.
Mehr Informationen zur Datenverarbeitung, der Rechtsgrundlage und Ihren Widerrufsrechten erhalten Sie in unserer Datenschutzerklärung