Eigene Shortcodes in WordPress

30. Mai 2016- aktualisiert: 30. Dezember 2019 Bloggen 20 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.
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!

Zu diesen Themen gibt’s noch mehr Artikel:

Eigene Shortcodes in WordPress

30. Mai 2016- aktualisiert: 30. Dezember 2019 Bloggen 20 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.
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!

Zu diesen Themen gibt’s noch mehr Artikel:

Schreib einen Kommentar

  1. Heike 30. Mai 2016 um 07:51- Antworten

    Super hilfreich – Dankeschön!

  2. Tatiana 31. Mai 2016 um 06:20- Antworten

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

  3. Torsten 1. Juni 2016 um 10:47- Antworten

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

  4. Tabea 4. Juni 2016 um 20:09- Antworten

    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 6. Juni 2016 um 07:22- Antworten

      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 21. Juli 2016 um 03:22- Antworten

    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 1. Februar 2017 um 16:40- Antworten

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

  8. Ina 11. November 2017 um 12:43- Antworten

    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.

    • Anne 12. November 2017 um 13:13- Antworten

      Ah, danke für den Hinweis auf das Plugin – das ist ja wirklich praktisch! 🙂

  9. Ina 11. November 2017 um 12:45- Antworten

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

    • Anne 12. November 2017 um 13:16- Antworten

      Aww, vielen Dank für deine lieben Worte! <3

  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. Neuerungen - Magnolienherz 21. April 2019 um 00:25- Antworten

    […] 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 3. Oktober 2019 um 14:02- Antworten

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

    • Anne 5. Oktober 2019 um 09:39- Antworten

      Hallo Marco,

      ah, das ist auch eine gute Idee – das macht’s übersichtlicher. 🙂

      Viele Grüße
      Anne

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, zeitnah zu antworten! Ein Hinweis an die Spam-Fraktion: ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig schreibt, dass er einen guten Malerbetrieb sucht, nur um selber einen ebensolchen als Link anzugeben – der kann sich seine Mühe sparen.

Schreib einen Kommentar

  1. Heike 30. Mai 2016 um 07:51- Antworten

    Super hilfreich – Dankeschön!

  2. Tatiana 31. Mai 2016 um 06:20- Antworten

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

  3. Torsten 1. Juni 2016 um 10:47- Antworten

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

  4. Tabea 4. Juni 2016 um 20:09- Antworten

    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 6. Juni 2016 um 07:22- Antworten

      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 21. Juli 2016 um 03:22- Antworten

    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 1. Februar 2017 um 16:40- Antworten

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

  8. Ina 11. November 2017 um 12:43- Antworten

    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.

    • Anne 12. November 2017 um 13:13- Antworten

      Ah, danke für den Hinweis auf das Plugin – das ist ja wirklich praktisch! 🙂

  9. Ina 11. November 2017 um 12:45- Antworten

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

    • Anne 12. November 2017 um 13:16- Antworten

      Aww, vielen Dank für deine lieben Worte! <3

  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. Neuerungen - Magnolienherz 21. April 2019 um 00:25- Antworten

    […] 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 3. Oktober 2019 um 14:02- Antworten

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

    • Anne 5. Oktober 2019 um 09:39- Antworten

      Hallo Marco,

      ah, das ist auch eine gute Idee – das macht’s übersichtlicher. 🙂

      Viele Grüße
      Anne

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

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, zeitnah zu antworten! Ein Hinweis an die Spam-Fraktion: ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig schreibt, dass er einen guten Malerbetrieb sucht, nur um selber einen ebensolchen als Link anzugeben – der kann sich seine Mühe sparen.