WordPress Shortcodes

WordPress stellt dem Benutzer und auch Entwicklern sogenannte Shortcodes zur Verfügung. Dies sind kleine Bausteine, die man innerhalb eines Artikels oder einer Seite verwenden kann, um bestimmte Dinge anzuzeigen, oder Textpassagen zu formatieren.

Die einfachste Form ist ein Shortcode, der ohne Parameter lediglich ein Element einfügt. Dazu muss man nur eine Funktion, die den gewünschten Inhalt zurück gibt, schreiben und dem WordPress-System über add_shortcode() mitteilen, auf welchen Shortcode die Funktion angewendet werden soll:

1
2
3
4
5
6
7

function weihnachtsbaum_shortcode( $atts, $content = null ) {
 
return '<img src="img/special/weihnachtsbaum.png" title="weihnachtsbaum">';
 
}
 
add_shortcode( 'weihnachtsbaum', 'weihnachtsbaum_shortcode' );

Dieser Shortcode kann nun in einem Aritikel in etwa so benutzt werden: [weihnachtsbaum]

Im Frontend wird nun der Shortcode durch den Inhalt, den wir in der funktions.php angegeben haben ersetzt. Es erscheint also, sofern es existiert und die Pfade stimmen, das angegebene Weinachtsbaum-Bild.

Parameter

Um das ganze noch ein bisschen dynamischer zu halten gibt es die Möglichkeit einem Shortcode Parameter mitzugeben. So könnte man im Beispiel noch eine Anzahl hinzufügen und dadurch mehrere Weinachtsbäume ausgeben lassen:

1
2
3
4
5
6
7
8
9
10
11
12
13

function weihnachtsbaum_shortcode( $atts, $content = null ) {
 
extract(shortcode_atts(array( 'anzahl' => 1), $atts));
 
$ret="";
 
for($i=1,$i<=$anzahl,$i++)
 
{$ret.= '<img src="img/special/weihnachtsbaum.png" title="weihnachtsbaum'.$i.'">';}
 
return $ret;
 
}

Benutzen kann man Parameter wie bei Html-Tags. Um also zwölf mal das Bild auszugeben gibt man den Parameter anzahl wie folgt an: [weihnachtsbaum anzahl=12]

Umschließende Shortcodes

Natürlich kann es sein, dass man auch einen bestimmten Bereich eines Textes mit einem Shortcode behandeln will. Zum Beispiel um einen Spoiler umzusetzen (einen ausgeblendeten Bereich, der nach Klick auf einen Button erst erscheint).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function spoiler_shortcode( $atts, $content = null ) {
 
extract(shortcode_atts(array( 'spoiler_button' => ''), $atts));
$ret="";
$ret.='<a href="#"  onClick="spoiler_toggle();" >';
if($spoiler_button!="")
$ret.=$spoiler_button;
else
$ret.="Spoiler öffnen";
$ret.='</a>';
$ret.='<div class="spoiler">';
$ret.=$content;
$ret.='</div>';
 
return $ret;
 
}

Dieser Shortcode erwartet einen schließenden Shortcode, der Inhalt, den man über die Variable $content bekommt, steht zwischen dem öffnenden und dem schließenden Shortcode. Schließende Shortcodes werden verdeutlicht durch den bei HTML üblichen „/“ .

[spoiler]Das hier ist der Content, der dann in der Variable $content steht.[/spoiler]

Verschachtelung

Damit auch Shortcodes innerhalb eines Shortcodes (wie z.B. innerhalb des oben genannten Spoilers) funktionieren darf man allerdings nicht vergessen die Shortcodes für die $content Variable auszuführen. Dies geschieht über die Funktion „do_shortcode()„.

1
2
3
4
5

function div_red_shortcode( $atts, $content = null ) {
 
return '<div class="red">' . do_shortcode($content) . '</div>';
 
}

In manchen Fällen will man aber explizit keine weiteren Shortcodes innerhalb des Shortcodes erlauben, daher ist es manchmal auch sinnvoll die innenliegenden Shortcodes nicht auszuführen.