Shortcodes bei WordPress – hilfreiche kleine Werkzeuge

Wer regelmäßig mit dem “CMS” von WordPress unterwegs ist, dem sind das ein oder andere Mal sicherlich die Shortcodes über den Weg gelaufen.

Ich persönliche finde diese kleinen Werkzeuge als perfekte kleine Helfer. Gerade bei Funktionen und Aufgaben, die regelmäßig anfallen, erleichtern die Shortcodes regelmäßig die Arbeit mit WordPress. Die kleinen Werkzeuge können neben kleineren Standardtexten, Bilder etc. auch komplexe Funktionen und Skripte selbstständig in Beiträge, Seiten und in die Sidebar einbauen.

Was sind Shortcodes?

Die Kurzbefehle in WordPress werden als Shortcodes bezeichnet. Diese Befehle haben immer eine bestimmte Schreibweise innerhalb des Editors und werden überwiegend im Contentbereich verwendet. Erkennen kann man die Shortcodes im Backend ((also dem öffentlich nicht sichtbaren Bereich der WordPress Installation)) an den eckigen Klammern.

In ihrer einfachsten Form besteht ein Shortcode nur aus dem Namen des Shortcodes, z.B. [name_des_shortcodes]. Bei komplexeren Anwendungen und Befehlen kann auch die Ausgabe/ das Ergebnis des Shortcodes mit Hilfe von verschiedenen Parametern noch weiter beeinflusst werden. [name_des_shortcodes id=111] wäre so ein Beispiel.

Eine weitere Variante besteht darin, dass der Shortcode einen bestimmten Bereich des Contents beeinflussen soll. Dann verwendet man in der Regel einen öffnen und einen schließenden Teil um der dahinter liegenden Funktion mitzuteilen auf welchen Bereich der Shortcode angewendet werden soll. Dies sieht dann so aus: [name_des_shortcode] Hier könnte ein Text stehen! [/name_des_shortcode].

WordPress und Shortcodes

Die gezeigten Formen eines Shortcodes werden einfach bei der Eingabe des Inhaltes im Editor verwendet und in der Ausgabe des Contents auf der Webseite durch die hinter dem Shortcode liegenden Funktion entsprechend verändert/ angepasst.

In WordPress selber sind einige Shortcodes bereits vordefiniert, so funktionieren Bildunterschriften mit dem Shortcode caption ((hier verwende ich keine eckigen Klammern, weil sonst könntet ihr den Shortcode nicht sehen sondern würdet eine Bildunterschrift angezeigt bekommen 🙂 )). Weitere bereits von WordPress mitgebrachte Möglichkeiten sind gallery oder emded.

Interessant sind Shortcodes aber gerade für Pluginentwickler die mehr oder weniger große Teile ihrer Funktionen als Shortcode zur Verfügung stehen. Dadurch wird dem Nutzer eine große Gestaltungsfreiheit ermöglicht, da die Ausgabe der Funktionen nicht fest innerhalb des Templates vorgegebenen wird, sondern individuell bei der Eingabe des Inhaltes eingebaut werden kann.

Wie kann ich selber einen Shortcode erstellen?

Nicht nur fertige Shortcodes aus den verwendeten Plugins können verwendet werden. Besonders praktisch ist es, dass auch eigene benötigte Skripte an beliebiger Stelle im Content eingebaut werden können ohne jedes Mal das ganze Skript aufschreiben zu müssen. Der Vorgang dabei ist sogar relativ einfach.

Dazu braucht es nur einen kurzen Eintrag in der functions.php deines verwendeten Templates. ((Bei Anpassungen in Templates, wenn sie nicht direkt von euch sind ist es immer zu empfehlen ein Child Theme zu erstellen. Mehr dazu gibt es hier und demnächst auch auf meinem Blog. ))

Bei WordPress wird ein Shortcode mit der Funktion add_shortcode (shortcode, funktion) registriert. Es werden zwei Parameter benötigt. Zum einen der Name des Shortcodes der verwendet werden soll und zum anderen die Funktion, die ausgeführt werden soll, wenn der Shortcode in der Anzeige ausgelesen wird.

Ich habe vor Kurzem einen Shortcode für die Einbindung des Adsense Skriptes für Werbeanzeigen innerhalb von Artikeln geschrieben ((ich wollte selber entscheiden, an welcher Stelle und bei welchem Artikel ich welche Werbung angezeigt bekommen möchte)). An diesem will ich euch zeigen wie es genau geht.

Also wollen wir jetzt den Shortcode Adsense hinzufügen. Wir nehmen uns dazu die functions.php unseres Child-/ Themes vor. Dort fügen wir am Ende den Namen und die Funktion des Shortcodes hinzu:

add_shortcode(‘adsense’, ‘adsense_function’ );

Mit diesem Befehl wird grundsätzlich ein Shortcode zu eurer WordPress Funktion hinzugefügt. Noch hat dieser Shortcode aber keine Funktion. Deshalb definieren wir jetzt noch die dazugehörige Funktion, die in der Ausgabe ausgeführt werden soll. In unserem Fall das hinzufügen einen Skriptes für Adsense.

Der Befehl für die Funktion lautet:

function adsense_function() {
return ‘ Hier kommt eine HTML Funktion, ein Skript oder aber bei einfachen Texten, die ausgegeben werden sollen, der Text rein. ‘;
}

Das Einbinden des Skriptes von Adsense habe ich folgender Maßen gelöst:

function adsense_function() {
return ‘
<ins class=”adsbygoogle”
style=”display:block; text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> <amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”>
</amp-ad> ‘;
}

Bei den XX kommen natürlich eure Daten der Anzeigeblöcke für Adsense rein. Wir ihr sehen könnt, binde ich mit dem Shortcode Adsense gleich zwei Skripte von Adsense ein. Einmal das Skript für die normalen Anzeigeblöcke sowie die speziellen Anzeigeblöcke für AMP ((mehr zu AMP auf diesem Blog gibt es hier)).

Durch diesen Shortcode kann ich beide Werbearten direkt dort platzieren, wo ich es im jeweiligen Artikel für passend finde. In unserem kurzen Tutorial entsprechend jetzt 🙂 .

[adsense]

Ich hoffe ich konnte euch einen kurzen Überblick zu Shortcodes in WordPress geben und ihr könnt an Hand des Beispiels eure eigenen kleinen Helferlein erstellen. Über eine kurze Bewertung in den Kommentaren würde ich mich sehr freuen. Gerne könnt Ihr auch eure Fragen stellen und ich versuche euch gerne bei der Umsetzung zu unterstützen.