WordPress Shortcodes erstellen

Kategorie: Wordpress Tipps

Es gibt in WordPress die Möglichkeit häufig wiederkehrende Elemente in Shortcodes zu programmieren, um sich so den Aufwand der ständigen Eingabe des kompletten Textes beziehungsweise Codes zu ersparen. Die Shortcodes werden mit [Shortcode_Name] aufgerufen und der dahinter stehende Shortcode wird ausgeführt. Anhand eines einfachen Beispiels wird die Funktionsweise von Shortcodes schnell verdeutlicht. Möchte man immer wieder an verschiedenen Textstellen den Hinweis „Alle Angaben ohne Gewähr“ einfügen, kann man einen Shortcode programmieren, der diesen Textbaustein einfügt.

Dazu muss in die functions.php der folgende Code kopiert werden:

function ohne_gewaehr(){
  return'<p>Alle Angaben ohne Gewähr.</p>';
}
add_shortcode('haftungshinweis','ohne_gewaehr');

Zunächst wird eine Funktion definiert, die nichts weiter macht, als den Haftungshinweis in einem HTML-Absatz auszugeben. Anschließend wird mit add_shortcode der Shortcode erzeugt. Diese Zeile sagt aus, dass man mit dem Befehl [haftungshinweis] die Funktion ohne_gewaehr aufruft. Wann immer nun dieser Hinweis angezeigt werden soll, genügt es im Backend den Befehl [haftungshinweis] einzugeben und der Text Alle Angaben ohne Gewähr. wird ausgegeben.

Inhalt

• Shortcodes mit Attributen
• Default Wert für Attribute
• Umschliessende Shortcodes

–

Shortcodes mit Attributen

Shortcodes können durch Attribute erweitert werden, um die Funktionalität dieser kleinen Snippets erheblich zu vergrößern. Durch diese Attribute können komplexere Shortcodes geschrieben werden. Soll beispielsweise die Überschrift immer korrekterweise in der Form <h1>…</h1> formatiert werden kann man einen Shortcode prgrammieren, der den angebenen Text als HTML-Überschrift erster Ordnung ausgibt. Attribute werden in Shortcodes als Array $atts abgespeichert. In diesem simplen Fall mit einem Attribut und nur einem Wert ist text der Wert des Attributs.

Durch diesen Aufruf [ueberschrift text=“Meine Überschrift“] wird nun der Text Meine Überschrift als h1-Überschrift ausgegeben.

function h1_erzeugen( $atts ) {
    $ergebnis = "<h1>$atts[text]</h1>";
    return $ergebnis;
}
add_shortcode( 'ueberschrift', 'h1_erzeugen' );

–

Default Wert für Attribute

Wird der Schortcode nun so [ueberschrift] aufgerufen erfolgt keine Ausgabe, weil kein Wert für das Attribut angegeben wurde. Deshalb muss in der Funktion ein default-Wert festgelegt werden, der angezeigt wird, falls der Shortcode unvollständig aufgerufen wird. Dieser default-Wert muss innerhalb des Array vor den anderen Angaben erfolgen.

Die WordPress shortcode_atts( $defaults_array, $atts ) eigene Funktion muss eingebaut werden, um ein korrektes Funktionieren des Shortcodes bei fehlender Attributangabe zu gewährleisten.

function h1_erzeugen( $atts ) {
$atts = shortcode_atts( array(
      'text' => "<h1>Bitte die Überschrift angeben</h1>",
      ), $atts);
    $ergebnis = "<h1>$atts[text]</h1>";
    return $ergebnis;
}
add_shortcode( 'ueberschrift', 'h1_erzeugen' );

Wird [ueberschrift] ohne den Wert eingegeben erscheint dann Bitte die Überschrift angeben auf der Seite um den WordPress Redakteur auf das Fehlen des Atrributwertes hinzuweisen. Bei korrekter Eingabe von [ueberschrift text=“Überschrift“] wird nun die Überschrift richtigerweise als <h1>Überschrift</h1> angezeigt.

–

Umschliessende Shortcodes

Eine zweite Variante der Shortcodes sind die umschliessenden Shortcodes, hierbei wird der Text, der beispielsweise als Überschrift ausgegeben werden soll, innerhalb der Shortcodes-Tags notiert.
[ueberschrift]Hier steht der als Überschrift auszuzeigende Texte [/ueberschrift]

In der functions.php muss nun dieser Code eingefügt werden:

function h1_erzeugen( $atts , $inhalt = null ) {
   return '<h1>' . $inhalt . '</h1>';
}

add_shortcode( 'ueberschrift', 'h1_erzeugen' );

Der Inhalt, der verarbeitet werden soll, wird innnerhalb der Shortcodes Tags festgelegt und durch die Funktion umgewandelt.
Die Eingabe [ueberschrift] Hier steht meine Überschrift [/ueberschrift] erzeugt im Frontend die Ausgabe Hier steht meine Überschrift korrekterweise innnerhalb der entsprechenden h1-Tags formatiert <h1>Hier steht meine Überschrift</h1>

Verwandte Beiträge