18. August 2015

Übersichtliche Beiträge durch eigene WordPress Shortcodes Shortcodes für WordPress erstellen

   7 Kommentare

Share on Facebook11Tweet about this on Twitter6Share on Google+0Share on LinkedIn0Email this to someone

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.

Eigene Shortcodes in WordPress erstellen und verwenden

Selbst definierte Shortcodes können einfach im Editor verwendet werden

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.

Selbst definierter WordPress Shortcode

Die Funktion hinter dem eingefügten Shortcode wird ausgeführt

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:

Eigener WordPress Shortcode mit HTML formatiert

In Shortcode-Funktionen kann HTML verwendet werden

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]
Ein umschließender WordPress Shortcode, der Text fett und kursiv druckt

Mit umschließenden Shortcodes kann Text formatiert werden

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:

WordPress Shortcode mit Default Attributen

Bei fehlender Angabe von Attributwerten werden die Default-Werte ausgegeben

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

[attribute_ausgeben das_erste=Ernie das_zweite=Bert]
WordPress Shortcode verarbeitet zwei Attribute

Der selbst definierte Shortcode stellt zwei Attribute dar

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?

Share on Facebook11Tweet about this on Twitter6Share on Google+0Share on LinkedIn0Email this to someone
Katharina

Katharina

Beim Webseiten basteln vergesse ich schnell mal die Zeit. An WordPress gefällt mir besonders die vielfältige Welt der Plugins und Themes, die zum Ausprobieren einlädt.
Katharina

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

7 Kommentare

Reaktionen auf diesen Beitrag

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.