Eigene Shortcodes erstellen – Einsteiger-Guide

Kurz­be­fun­den, Short­codes sind ein mäch­ti­ges Werk­zeug in Word­Press, das dir hilft, benut­zer­de­fi­nier­te Inhal­te ein­fach und effi­zi­ent ein­zu­fü­gen. In die­sem Ein­s­tei­­ger-Gui­­de wirst du Schritt für Schritt ler­nen, wie man eige­ne Short­codes erstellt, wel­che typi­schen Anwen­dun­gen es gibt und wie du sie cle­ver ein­set­zen kannst.

Was sind Shortcodes? #

Short­codes sind eine leis­tungs­star­ke Funk­ti­on in Word­Press, die es Nut­zern ermög­licht, kom­ple­xe Ele­men­te ein­fach in ihre Inhal­te ein­zu­fü­gen, ohne tie­fe­re Pro­gram­mier­kennt­nis­se zu benö­ti­gen. Ein Short­code ist in der Regel ein Text-Tag, das von Word­Press inter­pre­tiert und in die ent­spre­chen­de Funk­ti­on umge­setzt wird, wenn eine Sei­te oder ein Bei­trag ange­zeigt wird. Short­codes kön­nen in Klam­mern ver­wen­det wer­den, bei­spiels­wei­se oder , und sie bie­ten eine ein­fa­che Mög­lich­keit, mul­ti­me­dia­le Inhal­te und ande­re Plug­ins in den Edi­tor zu inte­grie­ren.

Die Funk­ti­ons­wei­se von Short­codes ist sim­pel: Bei der Ver­ar­bei­tung eines Bei­trags erkennt Word­Press das Shor­t­­code-Tag und ersetzt es durch den ent­spre­chen­den HTML-Code oder das gewünsch­te Ergeb­nis. Die­se Fle­xi­bi­li­tät wird in vie­len Anwen­dun­gen geschätzt. So kannst du bei­spiels­wei­se mit dem Short­code in weni­gen Sekun­den eine Bil­der­ga­le­rie erzeu­gen, ohne sepa­ra­te HTML-Tags manu­ell ein­ge­ben zu müs­sen. Ein wei­te­res nütz­li­ches Bei­spiel ist der ‑Short­code, der es dir ermög­licht, Audio­da­tei­en schnell ein­zu­bin­den und abzu­spie­len.

Typi­sche Anwen­dungs­sze­na­ri­en für Short­codes sind das Ein­fü­gen von For­mu­lar­ele­men­ten, das Erstel­len von Call-to-Action-But­­tons oder das Dar­stel­len von Wid­gets an ver­schie­de­nen Stel­len inner­halb von Bei­trä­gen. Mit Short­codes wird die Nut­zer­er­fah­rung auf dei­ner Web­site erheb­lich opti­miert, da sie dir ermög­li­chen, dyna­mi­sche Inhal­te ohne gro­ßen Auf­wand zu inte­grie­ren.

Vorbereitung der Entwicklungsumgebung #

Um mit der Erstel­lung eige­ner Short­codes in Word­Press zu begin­nen, ist es wich­tig, zunächst die Ent­wick­lungs­um­ge­bung rich­tig vor­zu­be­rei­ten. Du benö­tigst eine funk­tio­nie­ren­de Word­­Press-Instal­la­­ti­on, die auf dei­nem loka­len oder Web-Ser­­ver läuft. Zuerst lade dir die neu­es­te Ver­si­on von Word­Press von wordpress.org her­un­ter und fol­ge den Instal­la­ti­ons­an­wei­sun­gen. Du kannst auch ein Tool wie XAMPP oder Local by Fly­wheel ver­wen­den, um Word­Press lokal zu instal­lie­ren.

Sobald Word­Press instal­liert ist, soll­test du sicher­stel­len, dass alle not­wen­di­gen Plug­ins, wie z.B. ein Sicher­heits-Plu­g­in und ein Code-Edi­­tor für die Arbeit mit PHP, instal­liert sind. Emp­foh­le­ne Plug­ins sind „Code Snip­pets“, das es dir ermög­licht, PHP-Code sicher und ein­fach hin­zu­zu­fü­gen, ohne die Datei­en dei­nes The­mes direkt zu bear­bei­ten.

Um den WP-The­­me-Edi­­tor zu nut­zen, gehe in dei­nem Word­­Press-Dash­­board zu „Design“ und dann auf „The­­me-Edi­­tor“. Hier siehst du eine Lis­te der The­­me-Datei­en. Um den Code für dei­nen Short­code ein­zu­fü­gen, wäh­le die functions.php Datei aus. Es ist wich­tig, vor­her ein Back­up die­ser Datei zu erstel­len, falls etwas schief­geht.

Prak­ti­sche Tipps: Tes­te beim Ein­fü­gen von Code immer erst in einer siche­ren Umge­bung, z.B. auf einer Sta­­ging-Site, um sicher­zu­stel­len, dass kei­ne Feh­ler auf­tre­ten. Das Tes­ten von Ände­run­gen ist ent­schei­dend, um die Funk­tio­na­li­tät der Web­sei­te zu bewah­ren.

Basis Shortcode erstellen #

Um dei­nen eige­nen Short­code zu erstel­len, befol­ge die­se Schritt-für-Schritt-Anlei­­tung. Zuerst öff­nest du den The­­me-Edi­­tor in Word­Press und navi­gierst zur Datei “functions.php” dei­nes akti­ven The­mes. Hier kannst du den PHP-Code für dei­nen Short­code hin­zu­fü­gen.

Wir erstel­len einen ein­fa­chen Short­code, der benut­zer­de­fi­nier­ten Text zurück­gibt. Füge den fol­gen­den Code in die “functions.php” ein:

function custom_text_shortcode() {
    return "Dies ist mein benutzerdefinierter Text!";
}
add_shortcode('mein_shortcode', 'custom_text_shortcode');

Die­ser Code defi­niert eine Funk­ti­on, die den Text zurück­gibt. Der Short­code wird mit add_shortcode regis­triert. Du kannst die­sen Short­code nun über­all in dei­nen Bei­trä­gen ver­wen­den, indem du ein­fach [mein_shortcode] ein­gibst.

Ein wei­te­res Bei­spiel könn­te ein Short­code sein, der ein Bild anzeigt. Ände­re den Code wie folgt:

function custom_image_shortcode() {
    return '<img src="URL_DEINES_BILDES" alt="Mein benutzerdefiniertes Bild" />';
}
add_shortcode('mein_bild_shortcode', 'custom_image_shortcode');

Ver­wen­de [mein_bild_shortcode], um das Bild in dei­nen Inhal­ten dar­zu­stel­len.

Häu­fi­ge Feh­ler umfas­sen feh­len­de Semi­ko­lons oder fal­sche Funk­ti­ons­na­men. Über­prü­fe auch, ob die Short­codes nach dem Spei­chern der Datei kor­rekt ange­zeigt wer­den. Stel­le sicher, dass du den Bro­w­­ser-Cache leerst oder das Plug­in für die Cache-Ver­­­wal­­tung deak­ti­vierst, wenn Ände­run­gen nicht sofort sicht­bar sind.

Erweiterte Shortcode-Funktionalität #

Um die Funk­tio­na­li­tät dei­ner Short­codes wei­ter zu erwei­tern, kannst du ihnen Attri­bu­te hin­zu­fü­gen. Dies bie­tet dir die Mög­lich­keit, zusätz­li­che Anpas­sungs­op­tio­nen bereit­zu­stel­len, die der Benut­zer bei der Ver­wen­dung des Short­codes ange­ben kann. Ein prak­ti­sches Bei­spiel für einen sol­chen Short­code könn­te einer sein, der die Anzahl der ange­zeig­ten Bei­trä­ge als Attri­but akzep­tiert.

Begin­nen wir mit der Erstel­lung eines Short­codes, der die neu­es­ten Bei­trä­ge aus einer bestimm­ten Kate­go­rie anzeigt. Dabei akzep­tie­ren wir ein Attri­but, das angibt, wie vie­le Bei­trä­ge ange­zeigt wer­den sol­len. Hier ist ein ein­fa­ches Bei­spiel:

function custom_latest_posts($atts) {
    $atts = shortcode_atts(
        array(
            'number' => '5', // Standardwert auf 5 gesetzt
            'category' => ''
        ), 
        $atts, 
        'latest_posts'
    );

    $query_args = array(
        'posts_per_page' => intval($atts['number']),
        'category_name' => sanitize_text_field($atts['category'])
    );

    $query = new WP_Query($query_args);
    $output = '';

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<h2>' . get_the_title() . '</h2>';
            $output .= '<p>' . get_the_excerpt() . '</p>';
        }
        wp_reset_postdata();
    }

    return $output;
}
add_shortcode('latest_posts', 'custom_latest_posts');

In die­ser Funk­ti­on defi­nierst du die Stan­dardat­tri­bu­te und ver­wal­test die Abfra­ge, um die neu­es­ten Bei­trä­ge basie­rend auf den ange­ge­be­nen Attri­bu­ten abzu­ru­fen. Du kannst den Short­code dann ver­wen­den, indem du etwas wie [latest_posts number="3" category="news"] in dei­nen Bei­trä­gen ein­fügst, um die drei neu­es­ten Bei­trä­ge aus der Kate­go­rie “News” anzu­zei­gen. Mit die­ser Tech­nik erhältst du einen fle­xi­blen und anpass­ba­ren Short­code, der viel mehr für dei­ne Web­site bie­ten kann.

Shortcodes in Widgets und Beiträgen verwenden #

In Word­Press kannst du Short­codes nicht nur in Bei­trä­gen, son­dern auch in Wid­gets und ande­ren Berei­chen dei­ner Web­site ver­wen­den, um die Funk­tio­na­li­tät zu erwei­tern. Mit der rich­ti­gen Imple­men­tie­rung kannst du so den Inhalt dyna­misch gestal­ten und Benut­zer­er­fah­run­gen ver­bes­sern.

Um einen Short­code in einem Bei­trag zu nut­zen, füge ein­fach den Code in den visu­el­len oder den Text-Edi­­tor ein. Zum Bei­spiel könn­te ein Short­code, der zuletzt ver­öf­fent­lich­te Bei­trä­ge anzeigt, fol­gen­der­ma­ßen aus­se­hen:

[letzte_beiträge]

Wenn du die Short­codes in Wid­gets ver­wen­den möch­test, kannst du das Stan­­dard-Text-Wid­­get ver­wen­den, das HTML- oder Shor­t­­code-Ver­­ar­­bei­­tung unter­stützt. In der Wid­­get-Ansicht wählst du “Text” aus und fügst dei­nen Short­code ein, um spe­zi­fi­sche Inhal­te direkt in dei­ner Side­bar oder Fuß­zei­le anzu­zei­gen.

Bei­spie­le für nütz­li­che Short­codes sind Wert­schöp­fung, wie der fol­gen­de, der eine Kon­takt­in­for­ma­ti­on anzeigt:

[kontakte name="Max Mustermann" email="[email protected]"]

Wenn Short­codes nicht funk­tio­nie­ren, kann dies oft an ver­schie­de­nen Fak­to­ren lie­gen, wie z.B. Fehl­kon­fi­gu­ra­tio­nen in dei­nem The­me oder dem ver­wen­de­ten Edi­tor. Über­prü­fe, ob der Short­code kor­rekt regis­triert ist und ob der rich­ti­ge PHP-Code gela­den wird. Es ist rat­sam, die Shor­t­­code-Doku­­men­­ta­­ti­on dei­nes The­mes oder Plug­ins zu kon­sul­tie­ren und sicher­zu­stel­len, dass du das Stan­­dard-Wid­­get zur Ver­wen­dung von Short­codes ein­ge­rich­tet hast.

Fehlerbehebung bei Shortcodes #

Feh­ler bei der Arbeit mit Short­codes sind häu­fig und kön­nen frus­trie­rend sein. Ein typi­sches Pro­blem ist die Feh­ler­mel­dung “Der Short­code ist ungül­tig.” Dies pas­siert oft, wenn du den Short­code nicht kor­rekt in dei­nem Bei­trag oder Wid­get ein­fügst. Ach­te dar­auf, dass der Short­code in ecki­gen Klam­mern geschrie­ben ist, z.B. [mein_shortcode], und kei­ne zusätz­li­chen Leer­zei­chen oder Tipp­feh­ler ent­hält.

Ein wei­te­res häu­fi­ges Pro­blem ist, dass Short­codes nicht ger­en­dert wer­den, wenn dein The­me oder Plug­in inkom­pa­ti­bel ist. Um dies zu dia­gnos­ti­zie­ren, deak­ti­vie­re vor­über­ge­hend ande­re Plug­ins oder wechs­le zu einem Stan­­dard-The­­me, um zu sehen, ob das Pro­blem wei­ter­hin besteht. Wenn der Short­code wie­der funk­tio­niert, kommt das Pro­blem von der Inkom­pa­ti­bi­li­tät.

Wenn dein Short­code Ergeb­nis­se lie­fert, die nicht wie erwar­tet sind, über­prü­fe die Para­me­ter, die du über­gibst. Ein Bei­spiel könn­te sein, dass du ver­gisst, die rich­ti­gen Attri­bu­te zu set­zen, wie z.B. [mein_shortcode attribut=“wert”]. Fal­sche oder feh­len­de Attri­bu­te kön­nen dazu füh­ren, dass der Short­code nicht die erwar­te­ten Inhal­te anzeigt.

Ein prak­ti­sches Bei­spiel: Wenn du einen Short­code für eine Gale­rie erstellt hast und kei­ne Bil­der ange­zeigt wer­den, ver­ge­wis­se­re dich, dass die IDs der Bil­der kor­rekt und die Bil­der hoch­ge­la­den sind.

Für eine effek­ti­ve Feh­ler­su­che kannst du auch die Debu­g­­­ging-Fun­k­­ti­on von Word­Press akti­vie­ren, um wei­te­re Infor­ma­tio­nen zu den Feh­lern zu erhal­ten.

Best Practices für die Verwendung von Shortcodes #

Um das Bes­te aus dei­nen Short­codes her­aus­zu­ho­len und ihre Leis­tung sowie die Benut­zer­er­fah­rung zu opti­mie­ren, ist es wich­tig, bewähr­te Metho­den zu befol­gen. Ein zen­tra­ler Aspekt ist die Namens­ge­bung dei­ner Short­codes. Ver­wen­de erkenn­ba­re und prä­gnan­te Namen, die ihre Funk­ti­on klar wider­spie­geln. Zum Bei­spiel könn­te ein Short­code für ein Kon­takt­for­mu­lar contact_form hei­ßen. Ver­mei­de all­ge­mei­ne Namen wie form oder button, um Ver­wechs­lun­gen zu ver­hin­dern.

Die Doku­men­ta­ti­on dei­nes Codes ist eben­falls uner­läss­lich. Schrei­be Kom­men­ta­re zu jeder Funk­ti­on, um ihre Ver­wen­dung zu erklä­ren. Dies erleich­tert nicht nur die War­tung, son­dern hilft auch ande­ren Ent­wick­lern (oder dir selbst in der Zukunft), schnel­ler zu ver­ste­hen, was dein Short­code tut.

Ein wei­te­rer wich­ti­ger Punkt ist die Orga­ni­sa­ti­on dei­nes Codes. Hal­te dei­ne Short­codes in einer spe­zi­el­len Datei oder inner­halb einer bestimm­ten Funk­tio­na­li­tät zusam­men. Bei­spiels­wei­se könn­test du alle Short­codes in einer Datei namens shortcodes.php able­gen und sie in dei­ner functions.php ein­bin­den:

include_once('shortcodes.php');

Für eine effi­zi­en­te Imple­men­tie­rung könn­test du auch eine Para­me­ter­funk­ti­on für Funk­ti­ons­auf­ru­fe nut­zen:

function my_custom_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'title' => 'Standard Titel',
        ),
        $atts,
        'my_shortcode'
    );
    return '<h2>' . esc_html($atts['title']) . '</h2>';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

Die­se Vor­ge­hens­wei­sen hel­fen dir, dei­ne Short­codes sau­ber und effek­tiv zu ver­wal­ten und gleich­zei­tig die Benut­zer­er­fah­rung auf dei­ner Web­site zu ver­bes­sern.

Fazit #

Zusam­men­fas­send lässt sich sagen, dass das Erstel­len eige­ner Short­codes eine wert­vol­le Fähig­keit für Word­­Press-Nut­­zer ist, um die Funk­tio­na­li­tät ihrer Sei­ten zu erwei­tern. Mit den in die­sem Gui­de gelern­ten Tech­ni­ken bist du nun in der Lage, Short­codes effek­tiv zu nut­zen und dei­nen indi­vi­du­el­len Bedürf­nis­sen anzu­pas­sen.