Shortcodes für WordPress erstellen

Shortcodes bieten in WordPress die Möglichkeit, wiederkehrende Inhalte durch einfache Makros in Beiträge einzubinden. So könnt ihr eure Beiträge übersichtlicher gestalten und Flüchtigkeitsfehler vermeiden. In diesem Artikel erfahrt ihr, wie ihr eigene Shortcodes für WordPress definiert.

WordPress-Shortcodes sind nützliche Makros, mit denen ihr ganz einfach Programmcode an einer beliebigen Stelle in eure WordPress-Artikel einfügen könnt. Der Shortcode wird dann durch den entsprechenden HTML- oder PHP-Code ersetzt, der für ihn hinterlegt ist. So macht ihr eure Artikel im Backend lesbarer, minimiert die Fehlergefahr durch Vertippen und könnt zudem globale Veränderungen leichter durchführen.

Viele Plugins stellen Shortcodes bereit, mit deren Hilfe ihr den entsprechenden Inhalt in eurem Beitrag platzieren könnt. Außerdem stellt WordPress einige Standard-Shortcodes zur Verfügung, diese findet ihr hier.

Eigene Shortcodes sind vor allem dann praktisch, wenn ihr bestimmte Inhalte immer wieder in euren Beiträgen verwendet, beispielsweise Textbausteine wie Grußformeln oder auch bestimmte Bilder. Außerdem könnt ihr eigene Shortcodes auch für wiederkehrende HTML-Bausteine verwenden. Das bietet sich speziell dann an, wenn nicht alle eure Redakteure fließend HTML schreiben und daher schnell mal kleine Fehler in einen Beitrag einbauen. Die eigenen Shortcodes könnt ihr auch als Buttons in den WordPress Editor einfügen.

Welche Arten von Shortcodes gibt es?

Ein WordPress-Shortcode steht immer in eckigen Klammern []. Grundsätzlich gibt es drei verschiedene Varianten von Shortcodes:

• Einfache Shortcodes:

  [shortcode]

• Umschließende Shortcodes:

  [shortcode]Ein schöner Text[/shortcode]

• Shortcodes mit Attributen:

  [shortcode width=300]

Eigene WordPress Shortcodes definieren

Die Vorgehensweise, um einen eigenen Shortcode anzulegen, ist prinzipiell immer gleich, egal um welche Art von Shortcode es sich handelt:

1. Eine Funktion definieren, die an der Stelle des Shortcodes ausgeführt werden soll
2. Einen neuen Shortcode zu WordPress hinzufügen und mit der Funktion verknüpfen

Diese beiden Schritte führt ihr in der functions.php durch und könnt euren Shortcode dann verwenden. Im Folgenden erfahrt ihr, wie ihr welche Art von Shortcode definiert und verwendet.

Einfache Shortcodes erstellen

Um einen einfachen, sich selbst schließenden WordPress-Shortcode zu erstellen, müsst ihr also erstmal in der functions.php einen neuen Shortcode hinzufügen und dessen Funktionalität definieren. Dafür erstellt ihr eine Funktion, die später ausgeführt werden soll, und verknüpft diese dann mittels der Funktion add_shortcode mit einem Namen.

// Mein erster Shortcode: [whoop]

function whoop_function(){
   return "whoop whoop!";
}

add_shortcode('whoop', 'whoop_function' );

Der erste Parameter von add_shortcode ist der Name des Shortcodes, der zweite die Funktion, die ausgeführt werden soll. Dieser Shortcode wird also durch [whoop] aufgerufen und führt dann die Funktion whoop_function aus.

Natürlich könnt ihr in eurer Funktion auch HTML verwenden und den Text beispielsweise zu einer H2-Überschrift machen:

// whoop whoop! als H2-Überschrift: [whoop_h2]

function whoop_h2_function(){
   return "<h2>whoop whoop!</h2>";
}

add_shortcode('whoop_h2', 'whoop_h2_function' );

Fügt ihr den Shortcode [whoop_h2] in einen Beitrag ein, erscheint folgendes:

Umschließende Shortcodes erstellen

Neben den Shortcodes der Form [whoop], die einfach etwas vorher Festgelegtes auf dem Bildschirm ausgeben, gibt es auch sogenannte umschließende Shortcodes. Damit könnt ihr den Text zwischen öffnendem und schließendem Tag bearbeiten. Beispielsweise könntet ihr einen Shortcode definieren, der Text fett und kursiv schreibt:

// Dieser Shortcode druckt Text fett und kursiv:

function text_fett_kursiv( $atts , $content = null ) {
   return '<strong><em>' . $content . '</em></strong>';
}

add_shortcode( 'fett_kursiv', 'text_fett_kursiv' );

Umschließende Shortcodes verwendet ihr folgendermaßen:

[fett_kursiv]Hurra! Ein toller Shortcode, der diesen Text fett und kursiv druckt![/fett_kursiv]

Shortcodes mit Attributen

Unabhängig davon, ob euer Shortcode umschließend ist oder nicht, könnt ihr zu diesem Attribute hinzufügen. Häufig kann man bei existierenden Shortcodes beispielsweise Werte wie die Höhe oder Breite des einzubettenden Inhaltes als Attribut angeben.

// Dieser Shortcode druckt seine beiden Attribute aus
function print_attr( $atts ) {
    $a = shortcode_atts( array (
        'das_erste' => 'Nummer_Eins',
        'das_zweite' => 'Nummer_Zwei',
    ), $atts );

   return "<strong>" . $a['das_erste'] . "</strong>" . " und " . "<em>" . $a['das_zweite'] . "</em>";
}

add_shortcode( 'attribute_ausgeben', 'print_attr' );

Der Shortcode attribute_ausgeben hat also die möglichen Attribute das_erste sowie das_zweite. Nach dem Pfeil (=>) wird der Default-Wert für das jeweilige Attribut angegeben – gebt ihr für das_erste also keinen Wert an, wird Nummer Eins ausgegeben, für das_zweite Nummer Zwei. Auf dem Bildschirm ausgegeben wird das erste Attribut in Fettschrift, das zweite Attribut in kursiv, verknüpft mit einem „und“.

Gebt ihr keine Attributwerte an, benutzt also einfach [attribute_ausgeben], erscheint folgende Ausgabe:

Als nächstes gebt ihr beide Attribute an, beispielsweise so:

[attribute_ausgeben das_erste=Ernie das_zweite=Bert]

Hurra! Ihr habt einen Shortcode gebastelt, der zwei Attribute verarbeitet!

Fazit

WordPress-Shortcodes sind ein nützliches Werkzeug, um Beiträge übersichtlicher zu machen und das Gestalten zu vereinfachen. Ihr könnt mithilfe der Funktion

add_shortcode ('shortcode_name', 'shortcode_function')

in der Datei functions.php einen neuen Shortcode zu WordPress hinzufügen und diesen dann in euren Beiträgen verwenden. Dabei solltet ihr darauf achten, eurem Shortcode einen aussagekräftigen und einzigartigen Namen zu geben.

Benutzt ihr gerne Shortcodes auf eurer WordPress-Seite?