Eigene Shortcodes in WordPress

Eigene Shortcodes in WordPress

- zuletzt aktualisiert am 5. Januar 2019

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.
"Shortcodes in #WordPress rocken! #bloggen Klick um zu Tweeten

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! 🙂

    Kommentare

  1. Heike am 30. Mai 2016 um 7:51:

    Super hilfreich – Dankeschön!

  2. Tatiana am 31. Mai 2016 um 6:20:

    Hab ich mir direkt gemerkt, deinen Post! Da lässt sich ja einiges an Zeit sparen!
    Liebe Grüße
    Tatiana

  3. Torsten am 1. Juni 2016 um 10:47:

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

  4. Tabea am 4. Juni 2016 um 20:09:

    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

    • Anne am 6. Juni 2016 um 7:22:

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

      Gib Bescheid, wenn du irgendwo Hilfe brauchst!

  5. […] Blogging & Organisation Bullet Journaling ~ Shortcodes in WordPress erstellen […]

  6. Alessia am 21. Juli 2016 um 3:22:

    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

  7. Markus Schmid am 1. Februar 2017 um 16:40:

    Ein sehr guter Beitrag, Sie haben mir als Umsteiger gut geholfen, danke.

  8. Ina am 11. November 2017 um 12:43:

    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.

  9. Ina am 11. November 2017 um 12:45:

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

  10. […] jedesmal den HTML-Code für die Box einzutippen, kannst du dir das Leben mit einem entsprechenden Shortcode leichter […]

  11. […] Sofern du keinen WordPress-Blog nutzt, kannst du die drei oben genannten Parameter einfach manuell eintragen. In WordPress geht es noch einen Schritt eleganter: wir bauen uns einen entsprechenden Shortcode! […]

Schreibe einen Kommentar

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