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>

Verwandte Beiträge

WordPress Tipps zu Kategorien

In WordPress können die geschriebenen Beiträge in Kategorien eingeteilt werden, um die Übersichtlichkeit für die Leser zu erhöhen. Die Kategorien sollten möglichst eindeutige und aussagekräftige Namen bekommen. Inhalt WordPress Kategorien weiterlesen

Erklärung des WordPress Template Tags wp_list_pages

Mit dem Template Tag wp_list_pages werden grundsätzlich alle statischen Seiten einer WordPress Installation aufgelistet. Durch die zur Verfügung stehenden Parameter können viele verschiedene Veränderungen vorgenommen und der Code an die weiterlesen

WordPress Hooks – eine Einführung

Wird eine WordPress Seite aufgerufen, werden verschiedene Prozesse nacheinander ausgeführt. Durch einen Hook kann man sich über die functions.php in den WordPress-Code einhaken und diese Prozesse verändern. Die Hooks verbleiben weiterlesen

Der WordPress Loop für Anfänger – eine Erklärung

Der WordPress Loop ist der wichtigste Bestandteil jedes WordPress Templates. Durch diese Schleife wird der im Backend eingebene Inhalt ausgeben. Durch while (have_posts()) : the_post(); wird geprüft, ob Inhalt vorhanden weiterlesen