Eigene Shortcodes in WordPress

Eigene Shortcodes in WordPress

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!

20 Kommentare

  1. Heike sagt:

    Super hilfreich – Dankeschön!

  2. Tatiana sagt:

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

  3. Torsten sagt:

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

  4. Tabea sagt:

    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

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

  6. Alessia sagt:

    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. Ein sehr guter Beitrag, Sie haben mir als Umsteiger gut geholfen, danke.

  8. Ina sagt:

    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 sagt:

    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! […]

  12. […] ich Annes Beitrag zu Shortcodes (auf Blog Tutorials) gelesen habe, schwirrten in meinem Kopf ständig Ideen herum, wofür ich das alles nutzen könnte. […]

  13. Marco sagt:

    Antwort an Ina:
    Wer es noch besser machen möchte, installiert nicht extra ein Plugin (Plugin-Diät tut der Webseite gut!) sondern nutzt einfach eine weiter Codezeile in der functions.php:

    require_once( get_stylesheet_directory() . ‚meinecodes.php‘);

    damit wird eine separate php geladen, die man beliebig mit Shortcodes füllen kann. Also meinecodes.php erstellen und sich dort austoben! Viel Spaß!

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

  15. […] 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.

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.