Eigene Shortcodes in WordPress

13 Kommentare

Gibt es bestimmte Inhalte, die sich auf deinem Blog an verschiedenen Stellen wiederholen? Beispielsweise eine Box mit deinen Kontaktdaten, oder der Erklärungstext für gesponserte Beiträge? – Es ist ja potentiell mühselig, diesen Kram wieder und wieder kopieren und einfügen zu müssen… und wenn sich dann am Inhalt etwas ändert, musst du das x-mal machen. Böh. Das geht einfacher! 🙂

In diesem Tutorial erfährst du, wie du dir das Leben leichter machst, indem du hierfür die Shortcode-Funktion von WordPress nutzt. 🙂

Was können Shortcodes?

Wie der Name schon andeutet, fungieren diese kleinen Dingerchen als Platzhalter für verschiedene Inhalte. Im Beitragseditor tippst du beispielsweise einfach das hier ein:

[adresse]

… und daraus wird im Artikel deine komplette Anschrift:

Maria Mustermann
Musterstr. 12
12345 Musterstadt

In dem Fall würde einfach nur Text eingefügt. Shortcodes können aber auch HTML beinhalten, also beispielsweise ein umgebendes p-Tag mit der Klasse .adresse, was du dann entsprechend mit CSS stylen kannst:

<p class="adresse">
Maria Mustermann<br>
Musterstr. 12<br>
12345 Musterstadt</p>

Und noch mehr ist möglich: du kannst mit Shortcodes dynamische Inhalte ausgeben lassen, etwa deine letzten 3 Beiträge.

Magic, oder? 😀

Welche Vorteile bieten Shortcodes?

Eine ganze Menge! 🙂

  • Sie sparen dir Zeit: du musst die immer gleichen Inhalte nicht wieder und wieder tippen bzw. aus einem anderen Beitrag herauskopieren. Stattdessen notierst du einfach nur den Shortcode.
  • Sie helfen dir, Fehler zu vermeiden: Tippfehler schleichen sich ja liebend gerne ein. Durch die Verwendung von Shortcodes minimierst du dieses Risiko, weil du den Inhalt an nur einer einzigen Stelle pflegen musst.
  • Sie erleichtern dir das Aktualisieren: wenn du den betreffenden Inhalt überarbeiten möchtest, brauchst du das an nur einer einzigen zentralen Stelle zu tun.

Wie sehen Shortcodes aus?

Grundsätzlich werden Shortcodes immer mit eckigen Klammern [ ] notiert.

Es gibt zwei verschiedene Sorten von Shortcodes:

  1. Standalone-Shortcodes
    [adresse]
  2. Umschließende Shortcodes
    [hinweis]Hier steht ein Hinweistext...[/hinweis]

Außerdem können Shortcodes Attribute beinhalten:

[box typ="fehler"]Möp, geht so nicht.[/box]

Wie funktionieren Shortcodes?

Das Geheimnis ist ein entsprechender Eintrag in der Datei functions.php deines Themes.
Hier rufen wir den Shortcode als erstes ins Leben und sagen ihm, was er ausgeben soll. Anschließend verknüpfen wir diese Funktionalität mit dem entsprechenden Platzhalter-Tag.

Beispiel 1: Standalone-Shortcode

Hier ist mal ein ganz einfaches Beispiel für einen Standalone-Shortcode, das du dir so ans Ende deiner functions.php kopieren kannst:

function adresse_shortcode(){
   return '<p class="adresse">
      Maria Mustermann<br>
      Musterstr. 12<br>
      12345 Musterstadt</p>';
}

add_shortcode("adresse","adresse_shortcode");

Unsere Funktion nennen wir adresse_shortcode. Der Teil nach dem return beinhaltet das, was der Shortcut ausgeben soll. In der Zeile mit dem add_shortcode brauchen wir zwei Werte – als erstes den gewünschten Platzhalter-Namen, als zweites den Namen der Funktion.

Im Beitragseditor gibst du einfach nur [adresse] ein – et voilà, der Adressblock taucht auf. 🙂

Beispiel 2: umschließender Shortcode

Lass uns als nächstes einen umschließenden Shortcode bauen, wie du ihn beispielsweise für eine Hinweisbox brauchen kannst:

function box_shortcode($attr, $content=null){
   return '<div class="box">'. $content .'</div>';
}

add_shortcode("box","box_shortcode");

Im Beitragseditor:

[box]Hallo Welt![/box]

Das ist die einfache Version: die Variable $content spuckt das aus, was du im Beitragseditor zwischen den beiden Tags notierst.
Heraus kommt also:

<div class="box">Hallo Welt!</div>

Sooo… aber jetzt wollen wir noch verschiedene Varianten von Boxen bauen! Sinnvollerweise bekommen alle die Klasse .box, die du im CSS nett stylst. Hinzu kommt dann jeweils eine weitere Klasse, die den Typ der Box definiert: Fehler-Boxen könnten dann einen roten Rahmen bekommen, Hinweise einen orangen, Tipps einen grünen und so weiter.

Beispiel 3: umschließender Shortcode mit Attributen

Im Beitragseditor notierst du also:

[box typ="fehler"]Ich bin ein Fehler.[/box]

oder

[box typ="tipp"]Ich bin ein Tipp![/box]

Je nachdem, was du als Typ einträgst, soll sich auch die HTML-Klasse deiner Box ändern.

Voilà:

function box_shortcode($atts, $content=null) {
extract(shortcode_atts(array(
'typ' => hinweis
), $atts));
return '<div class="box '. $typ . '">'. $content .'</div>';
}

add_shortcode( 'box', 'box_shortcode' );

Hier führen wir jetzt einfach noch die zweite Variable $typ ein – defaultmäßig setzen wir die Box auf die Klasse .hinweis, du kannst aber jeden beliebigen Namen übergeben.

Shortcodes im Template ausgeben

Natürlich kannst du Shortcodes nicht nur innerhalb von Beiträgen und Seiten nutzen, sondern auch direkt im Template – beispielsweise in der footer.php, um etwas im Fußbereich deiner Seite anzeigen zu lassen.

Hier ist die Funktion do_shortcode(); dein Freund und Helfer:

<?php
   echo do_shortcode('[adresse]');
?>

Das war jetzt mal ein kleiner Einstieg in die Möglichkeiten, die Shortcodes dir bieten. Wenn du mehr wissen magst, wirf mal einen Blick in die Dokumentation der Shortcode-API. 🙂

Verwendest du schon Shortcodes? Fällt dir eine Einsatzmöglichkeit auf deinem Blog ein?

Ich hoffe, dieser Beitrag war hilfreich für dich!

Hat dir dieser Beitrag gefallen? Dann nimm ihn doch mit auf Pinterest und speichere ihn, damit du ihn später wiederfindest und auch andere Leute ihn entdecken! 🙂

Eigene Shortcodes in WordPress erstellen – Tutorial

Dieser Beitrag wurde bereits 13mal kommentiert - was denkst du? Hau in die Tasten! 🙂

Anne Schwarz

Geschrieben von Anne Schwarz

Merry meet! Ich bin 31 Jahre alt und wohne mit meinem Mann, Hund und Katze in einem kleinen Dorf im Bergischen Land. Das ♥ schlägt für die Natur, die Fotografie & das Schreiben. Ich bin viel draußen unterwegs, baue unser eigenes Obst und Gemüse an und tobe mich gern kreativ aus - egal ob mit Papier oder Quellcode. » Magst du mehr erfahren?

13 Kommentare

  1. Saucool. Hab es gerade umgesetzt. Ist ja ganz einfach. Wenn man es weiß. Besten Dank dafür! 😀

    Antworten

  2. Bisher wusste ich noch gar nicht, dass sowas geht! Aber das ist ja einfach nur genial!!!!

    Dein Blog ist übrigens gerade noch mal ein Stückchen wichtiger für mich geworden, denn ich plane gerade, zu WordPress umzuziehen und hier findet man ja wirklich viel hilfreiches zu WordPress 🙂 Aktuell arbeite ich in einer Testinstallation am Theme – und bin jetzt schon fasziniert von diesem CMS 😉

    Liebe Grüße

    Antworten

    • Ui, dann mal ganz viel Spaß mit WordPress, es ist so toll! 🙂

      Gib Bescheid, wenn du irgendwo Hilfe brauchst!

      Antworten

  3. Pingback: Die Bloggerszene – Blick über den Tellerrand #3/2016 - Reisen-Fotografie.de

  4. Pingback: Meine Highlights im Juni 2016 - Himmelsblau.org

  5. Hallo Anne,
    Wow! Danke für die super Erklärung! Ich wußte gar nicht, dass man die Shortcodes in WordPress selbst so einfach definieren kann. Auf meiner Seite nutze ich die Shortcodes für die Farb-Boxen (wird von meinem Theme angeboten). Die Idee bestimmte Texte, wie Impressum, als Shortcode zu erstellen finde ich ganz praktisch. Aus SEO-Sicht muss man vielleicht noch drauf achten, dass man die Shortcodes mit dem gleichen Text nur nicht zu oft auf der Webseite verwendet.
    Liebe Grüße,
    Alessia

    Antworten

  6. Ich LIEBE Shortcodes, sie nehmen einem so viel Geschreibsel und Getippe ab und ich kann gewissen Dinge damit dann auf einen Schlag global auf der ganzen Site ändern. Danke für die ausführliche Erklärung.
    Und als kleine Ergänzung:
    wer nicht in der functions.php seines Themes oder Childthemes rumpfriemeln möchte, der kann genau diese Shortcodeschnipsel einfach in das Plugin https://de.wordpress.org/plugins/code-snippets/ einfügen. Dort kann man alles reinpacken, was normalerweise in die functions.php gehen soll. Diese ganzen Codeschnipsel kann man dann dort im Plugin schön nach Kategorien ordnen/filtern und sogar exportieren (alle oder einzelne), um sie auf anderen Blogs dann später vielleicht auch verwenden zu wollen.

    Antworten

  7. P.S. Anne, ich bin superglücklich über deine Blogtipps hier … niemand kann so gut und so praxisnah erklären wie du ♥

    Antworten

Schreibe einen Kommentar

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, alle Kommentare zeitnah zu beantworten!
Ein Hinweis an die Spam-Fraktion: Ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig fragt, ob wir einen Malerbetrieb empfehlen können, nur um selber einen ebensolchen als Link anzugeben - der kann sich seine Mühe sparen.