Welcher WordPress Entwickler kennt das nicht: für den Kunden soll ein Shortcode erstellt werden, der vergleichsweise komplexe Vorgänge in einem einfach zu bedienenden Konstrukt zusammenpackt.
So weit so gut – Shortcodes zu erstellen ist vergleichsweise einfach, jedoch benötigen beispielsweise die Accordeon-Ausklapppunkte zusätzliche Javascripts, um korrekt funktionieren zu können.

Jeder gute Entwickler sollte sich nun die Frage stellen:

• Lade ich die Javascripts auf jeder Seite, damit der Kunde dann einfach nur noch den Shortcode erstellen muss?
• Oder entwickle ich einen kleinen Automatismus, der das Javascript bei Bedarf, sprich also sobald der Shortcode auf der Website eingesetzt wurde, mit einbindet?

Richtig, wir entscheiden uns (natürlich) für die zweite Variante. Um die Ladezeit der Website so gering wie möglich zu halten, sollten jegliche Scripts die nicht benötigt werden auch nicht geladen werden.

Anhand des folgenden kleinen Beispiels möchte ich euch kurz zeigen, wie ihr mit einem Shortcode nun einzelne Javascripts (das gilt natürlich auch für CSS Dateien!) für eine Seite registriert.

Die Vorbereitung

Erstellen wir unseren Shortcode:

add_shortcode('px_lade_script', 'px_lade_script_handler');

function px_lade_script_handler($atts, $content="") {

    global $px_load_script;

    $px_load_script = true;

    return $content;

}

Somit hätten wir schonmal den umschliessenden Shortcode [px_lade_script]. Dieser setzt in diesem Fall (da ich euch wirklich nur die Funktionsweise zeigen möchte) einfach eine globale Variable und setzt diese auf true. Des weiteren gibt der Shortcode einfach das aus, was in ihm reingeschrieben wird – komplett unbearbeitet.

[px_lade_script]Lade das Script![/px_lade_script]

Erzeugt nun einfach „Lade das Script!„.

Das einbinden der Scripts / CSS Dateien

Für den Benutzer soweit recht unspektakulär. Was sich nun „unter der Haube“ abspielt ist aber umso interessanter. Fügt dazu folgenden Code mit hinzu:

Oberhalb der Zeile „add_shortcode(‚px_lade_script‘, ‚px_lade_script_handler‘);“

add_action('init', 'px_register_script');

add_action('wp_footer', 'px_add_script');

Unterhalb der Shortcode-Funktion

function px_register_script() {

wp_register_script( 'dein-javascript', 'pfad-zum-javascript.js');

}

function px_add_script() {

    global $px_load_script;

    if ( ! $px_load_script )

    return;

    wp_print_scripts('dein-javascript');

}

Was wurde nun gemacht?

Über die beiden add_action() Funktionen, haben wir einmal die Funktion px_register_script() in den ‚init‘ Hook und ein mal die Funktion px_add_script() in den ‚wp_footer‘ Hook eingehakt.

Die Funktion px_register_script() registriert das gewünschte Javascript direkt beim Initialisieren der Seite und px_add_script() fügt das registrierte Javascript in den Footer der Website ein.

px_add_script() hat aber eine besonderheit. In Ihr wird die globale Variable $px_load_script aufgerufen und geprüft, ob sie wahr (true) oder falsch (false) ist. Ist der oben erstellte Shortcode nicht auf der Seite eingebunden, ist die Variable falsch und die Funktion wird vorzeitig beendet. Ist er jedoch eingebunden wurde die Variable ja auf wahr gesetzt. Somit wird das Javascript nun in den Footer geladen.

Das gesamte Codeschnippsel sieht also wie folgt aus:

add_action('init', 'px_register_script');

add_action('wp_footer', 'px_add_script');

add_shortcode('px_lade_script', 'px_lade_script_handler');

function px_lade_script_handler($atts, $content="") {

    global $px_load_script;

    $px_load_script = true;
    return $content;

}

function px_register_script() {

wp_register_script( 'dein-javascript', 'pfad-zum-javascript.js');

}

function px_add_script() {

    global $px_load_script;

    if ( ! $px_load_script )

        return;

    wp_print_scripts('dein-javascript');

}

Fazit

Mit dieser Methode ist es relativ unkompliziert möglich, Javascripts oder CSS Dateien über einen Shortcode auf der Seite einzubetten. In dem hier genannten Beispiel würde es einfach nur ein JAvascript registrieren ohne einen gewissen Effekt zu haben. Diese Methode ist aber perfekt nutzbar, um z.B. eine angepasste Google Map über dessen JS-API mit einem Shortcode oder um z.B. Accordeon Aufklappmenus inkl. JS zu laden.

Das ganze ist natürlich auch mit CSS Datein nutzbar: nutze hier einfach wp_register_style und wp_print_styles.