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

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>