WordPress Shortcodes: Nützliche Helfer im Alltag

Mit Hilfe von Shortcodes können Artikel, Seiten und Sidebars in WordPress ohne großen Aufwand aufgepeppt werden. Einige Funktionen bringt WordPress schon von Haus aus mit, andere können nachträglich erstellt werden. Im Artikel zeige ich dir einige Beispiele.

Shortcodes sind ein fester Bestandteil von den unterschiedlichsten Plugins. So werden zum Beispiel die mit Contact Form 7 (hier erfährst du, wie du das Plugin ressourcenschonend installierst) erzeugten Formulare über Shortcodes an entsprechender Stelle in Artikeln oder der Sidebar ausgegeben.

WordPress bringt aber auch schon von Haus aus einige Shortcodes mit und erlaubt es dir außerdem ohne großen Aufwand eigene Shortcodes zu definieren. Neugierig? Dann solltest du weiterlesen!

Standard WordPress Shortcodes

Von Haus aus bringt WordPress „nur“ vier Shortcodes mit:

• Audio Shortcode
• Caption Shortcode
• Gallery Shortcode
• Video Shortcode

Am häufigsten im Einsatz sind dabei vermutlich der Caption- sowie der Gallery-Shortcode. Die Caption wird beim Einfügen eines Bildes automatisch als Bildunterschrift angezeigt (vorausgesetzt, du hast in der Mediathek beim Upload eine „Beschriftung“ angegeben). Zum Einsatz des Gallery-Shortcodes hat Ellen einen tollen Artikel geschrieben. Möchtest du dir die weiteren Standard-Shortcodes und die Möglichkeiten, die du damit hast, näher anschauen, solltest du einen Blick in den WordPress-Codex werfen.

Wie schon geschrieben gibt es aber vielseitige weitere Möglichkeiten, Shortcodes einzusetzen. Die folgenden Snippets sind Toolbox-Module, können aber auch direkt in die functions.php deines Themes kopiert werden.

Google AdSense über Shortcodes einfügen

Im ersten Beispiel für individuelle Shortcodes möchte ich dir zeigen, wie du Google AdSense Anzeigen links, mittig oder rechts ausgerichtet im Artikel ausgeben kannst. Werfen wir zunächst einen Blick auf den Code für eine links ausgerichtete AdSense-Anzeige:
[php]
function adsense_article_left_func(){
return ‚<div class="alignleft" style="width: 300px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– AdSense Anzeigen-Name –>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-1234567890"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>‘;
}
add_shortcode(‚adsense_article_left‘,’adsense_article_left_func‘);
[/php]
Zeile 1: adsense_article_left() ist der Name der Funktion, die wir im Folgenden definieren und später über den Shortcode aufrufen
Zeile 2: Das div dient dazu, den die AdSense-Anzeige zu positionieren. Die Klassen alignleft, aligncenter und alignright sind in WordPress schon definiert. Eine CSS-Anpassung ist nicht nötig. Je nach gewählter Anzeigengröße musst du „width: 300px;“ noch anpassen.
Zeile 3 – 11: Dein AdSense-Code, den du über Google AdSense erstellt hast.
Zeile 14:: Die Shortcode-API registriert den Shortcode „adsense_article_left“, über den nun AdSense-Anzeigen im Artikel ausgegeben werden können.

Die Anzeige rechts neben diesem Text ist die Ausgabe des Shortcodes [ adsense_article_right ], den ich an entsprechender Stelle im Artikel eingefügt habe. Damit du die Shortcodes ebenfalls nutzen kannst, erstellst du aus dem folgenden Code einfach ein neues Toolbox-Modul oder kopierst die Funktionen in deine functions.php.

[php]
<?php
/*
Module Name: AdSense Shortcodes
Module URI: https://www.media-affin.de/wordpress-shortcodes-nuetzliche-helfer-im-alltag
Description: Definiert Shortcodes für links, mittig oder rechts ausgerichtete AdSense-Anzeigen.
Author: Dominik Horn
Author URI: https://www.media-affin.de
*/

/* Sicherheitsabfrage */
if ( !class_exists(‚Toolbox‘) ) {
die();
}

/* Ausrichtung links */
function adsense_article_left(){
return ‚<div class="alignleft" style="width: 300px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– AdSense Anzeigen-Name –>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-1234567890"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>‘;
}
add_shortcode(‚adsense_article_left‘,’adsense_article_left‘);

/* Ausrichtung zentriert */
function adsense_article_center(){
return ‚<div class="aligncenter" style="width: 300px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– AdSense Anzeigen-Name –>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-1234567890"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>‘;
}
add_shortcode(‚adsense_article_center‘,’adsense_article_center‘);

/* Ausrichtung rechts */
function adsense_article_right(){
return ‚<div class="alignright" style="width: 300px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– AdSense Anzeigen-Name –>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-1234567890"
data-ad-slot="0987654321"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>‘;
}
add_shortcode(‚adsense_article_right‘,’adsense_article_right‘);
[/php]

Die folgenden Shortcodes kannst du nun in deinen Artikeln einfügen (ohne Leerzeichen!):

• [ adsense_article_left ] –> linksbündige Anzeige
• [ adsense_article_center ] –> zentrierte Anzeige
• [ adsense_article_right ] –> rechtsbündige Anzeige

Shortcode für rotierende Werbung

Eine weitere Einsatzmöglichkeiten für Shortcodes ist eine (Banner)Rotation. Bei jedem Aufruf der Seite wird ein anderer Banner per Zufallsfunktion bestimmt und angezeigt. Beispiel:

Der benötigte Code sieht wie folgt aus:
[php]
<?php
/*
Module Name: Bannerrotation
Module URI: https://www.media-affin.de/wordpress-shortcodes-nuetzliche-helfer-im-alltag
Description: Gibt einen zufälligen Banner aus einer beliebigen Anzahl an Bannern aus.
Author: Dominik Horn
Author URI: https://www.media-affin.de
*/

/* Sicherheitsabfrage */
if ( !class_exists(‚Toolbox‘) ) {
die();
}

/* Ausrichtung links */
function bannerrotation_bsp(){
/* Wieviele Banner sind in der Rotation? */
$anzahl = ‚3‘;

/* Bannerlinks angeben */
$banner = array(
1 => ‚https://www.media-affin.de/dev/artikel-wordpress-shortcodes/banner1.png‘,
2 => ‚https://www.media-affin.de/dev/artikel-wordpress-shortcodes/banner2.png‘,
3 => ‚https://www.media-affin.de/dev/artikel-wordpress-shortcodes/banner3.png‘,
);

/* Ermittelt Zufallsbanner */
$zufallszahl = mt_rand(1,$anzahl);
$banner = $banner["$zufallszahl"];

return ‚<div class="aligncenter" style="width: 100px;">
<img src=‘.$banner.‘ width="100" height="50" />
</div>‘;
}
add_shortcode(‚bannerrotation‘,’bannerrotation_bsp‘);
[/php]
Zeile 20: Anzahl der vorhandenen Banner angeben.
Zeile 24 – 26: Hier werden alle Bannergrafiken aufgelistet.
Zeile 34: Die Werte für width und height müssen angepasst werden.
Den Rest macht die Funktion automatisch.

Der Code ist etwas umfangreicher als beim AdSense-Beispiel weiter oben, die zugrunde liegende Shortcode-API ist aber natürlich identisch. Du kannst ihn ebenfalls als neues Toolbox-Modul anlegen oder in deine functions.php einfügen.

Weitere Einsatzmöglichkeiten von Shortcodes

Natürlich decken diese Beispiele bei weitem nicht alle Möglichkeiten ab, die mit Shortcodes möglich sind. René Dasbeck zeigt dir in einem einfachen Beispiel, wie du das WordPress-Suchfeld in einem Shortcode nutzen kannst. Ist dir das alles zu langweilig und du möchtest sehen, was so alles möglich ist, dann empfehle ich dir den Artikel „WordPress Shortcodes: A complete guide“ auf smashingmagazine.com.

Fazit

Wie du siehst sind Shortcodes eine vielseitige und nützliche Möglichkeit, dir (oder deinen Kunden) die Arbeit mit WordPress zu erleichtern. War der Artikel hilfreich? Dann würde ich mich freuen, wenn du ihn mit deinen Kontakten auf Facbeook, Google+, Twitter und Co. teilst!