JS und CSS im WordPress Theme verwenden

In letzter Zeit habe ich öfter WordPress Themes für kleinere Aufträge nebenbei umgesetzt, daher habe ich mich entschlossen ein paar der wichtigsten Grundlagen dazu hier in einigen Artikeln zusammenzufassen wo man sie schnell wieder findet. Den Anfang mache ich hier mit der richtigen Einbindung von JavaScript– und CSS Dateien bei der Erstellung eines eigenen WordPress Themes. WordPress bietet hier nämlich eine sehr praktische, aber auch etwas ungewöhnliche Art und Weise, diese einzubauen.

Warum nicht einfach <script>?

Es hat mehrere Gründe, dass man externe Dateien bei einem WordPress Theme nicht einfach mit einem <script> Tag (beispielsweise) einbindet. Einer davon ist die Verzeichnisstruktur von WordPress, wo das Theme in einem Unterordner liegt und die passende URL dazu nicht so einfach rauszufinden ist, schließlich kann eine Installation im Hauptverzeichnis liegen, jemand anderes kann sein WordPress aber irgendwo in einem tiefer gelegenen Verzeichnis einrichten.

Außerdem spielen oft viele Plugins und Einstellungen von WordPress noch in die korrekte Zusammenarbeit mit rein, weswegen eine korrekte Verwendung wichtig ist damit dieses fragile Zusammenspiel auch problemlos funktioniert. Ein Beispiel dafür wäre ein Caching Plugin, welches alle verwendeten Styles und JavaScripts in eine Datei zusammenfasst und so die Ladezeit verringert. Dieses Plugin muss natürlich erstmal wissen, welche Dateien eigentlich verwendet werden sollen.

Neben diesen Einschränkungen bietet WordPress uns allerdings auch noch ein paar praktische Funktionen, die uns Arbeit abnehmen. Kommen wir also dazu wie man es richtig macht.

 

 

Verwendung von wp_register_script und wp_enqueue_script

Fangen wir mit JavaScript an. Für die Einbindung unserer Scriptdateien stellt WordPress uns die Funktionen wp_register_script() und wp_enqueue_script() zur Verfügung. Beide nehmen diverse Parameter, doch bevor wir uns diese ansehen noch eine kurze Erklärung was der Unterschied ist:

  • wp_register_script() teilt WordPress das Vorhandensein einer Scriptdatei mit, dadurch wird die Datei aber noch nicht im HTML eingebunden. Das ist quasi die Vorbereitung, mit der wir sagen Achtung, diese Datei existiert und vielleicht benötigen wir sie später irgendwann noch! Vor allem wenn wir eine Datei nicht auf jeder Seite unseres Themes benötigen – sondern vielleicht nur in speziellen Beiträgen oder auf einzelnen Seiten – können wir diese Datei einmal hier registrieren und dann mit der nächsten Funktion einfach an den benötigten Stellen ausgeben.
  • wp_enqueue_script() sorgt dafür, dass eine Scriptdatei wirklich in die „Queue“ geschoben wird, das heißt dass sie auch wirklich ausgegeben wird. Wichtig hierbei zu beachten ist, wenn die Datei bereits in der Queue ist wird der Aufruf ignoriert, das bedeutet wir fügen Dateien trotz mehrfachem Aufruf nicht doppelt hinzu. Das ist eine der Arten, wie WordPress uns Arbeit mit diesem System erspart. wp_enqueue_script() nimmt außerdem dieselben Parameter wie wp_register_script(). Wenn wir bereits ein Script registriert haben können wir dieses direkt mit dem ersten Parameter (dazu kommen wir gleich) in die Queue schieben, sollten wir das Script aber nur einmal benötigen können wir uns den zusätzlichen Aufruf von wp_register_script() aber auch sparen und alle Informationen direkt hier übergeben.

Sehen wir uns jetzt noch die Parameter für die Funktionen an. wp_register_script() sieht so aus:

  • $handle stellt einfach einen Namen für das Script dar. Nennen wir unser Script zum Beispiel jqueryScroller könnten wir es an verschiedenen Stellen innerhalb unseres Themes einfach mit dem Aufruf von wp_enqueue_script(‚jqueryScroller‘) in die Queue schieben.
  • $src ist der Pfad zur Scriptdatei. Um den korrekten Pfad zu erhalten können wir hierfür die Funktion get_template_directory_uri() verwenden, um das Wurzelverzeichnis unseres Themes zu bekommen, z.B. get_template_directory_uri() . ‚/js/my-script.js‘
  • $deps ist die Abkürzung für dependancies. Hier können wir in einem Array die Abhängigkeiten dieses Scripts angeben um dafür zu sorgen, dass die Scripte in der richtigen Reihenfolge geladen werden. Um auf das Beispiel vom jqueryScroller von oben zurückzukommen könnten wir hier beispielsweise array(‚jquery‘) angeben, wodurch sichergestellt wird, dass jQuery geladen wird BEVOR dieses Script geladen wird.
  • $ver ist die Version des Scripts. Diese wird als Queryparameter einfach an den Pfad angehängt (z.B. script.js?ver=1.0.0). Sollte sich das Script ändern weil wir zum Beispiel neue Funktionalität hinzufügen können wir die Version hier erhöhen und sorgen dafür, dass Browser diese Änderung erkennen und nicht die Datei aus dem Cache benutzen wo die neue Funktionalität noch nicht enthalten ist.
  • $in_footer ist ein boolescher Wert, der aussagt, wo die Datei geladen werden soll. Wird der Wert auf true gesetzt wird das Script beim Aufruf der Funktion wp_footer() ausgegeben (welcher direkt vor dem </body> Tag erfolgen sollte). Das hat den Vorteil, dass die Seite bereits geladen und angezeigt werden kann, bevor der Browser dann die JavaScript Dateien lädt was die Wartezeit für den User mit einer weißen Seite verringert und so die Usability erhöht. Wird $in_footer auf false gesetzt wird das Script bei Aufruf von wp_head() ausgegeben, was kurz vor </head> gehört.

Wie gesagt, wp_enqueue_script hat dieselben Parameter und funktioniert gleich. Haben wir ein Script aber schon registriert können wir wp_enqueue_script auch einfach nur mit einem Handle aufrufen und wenn das Script sich noch nicht in der Queue befindet wird es hinzugefügt.

 

 

Styles mit wp_register_style und wp_enqueue_style einbinden

Für CSS Dateien gibt es noch gesonderte Funktionen in WordPress, da an diese natürlich andere Anforderungen gestellt werden – beispielsweise können diese nicht im Footer ausgegeben werden. Außerdem ist es für ein Third Party Plugin, welches unsere Stylesheets verarbeitet, natürlich ein wichtiger Unterschied ob wir eine CSS oder eine JavaScript Datei einbinden. Aus diesem Grund gibt es auch zwei eigene Funktionen für die Verwendung von Stylesheets – wp_register_style() und wp_enqueue_style().

Die Funktionalität ist hier dieselbe wie bei den Pendants für JavaScript mit einem kleinen Unterschied: der letzte Parameter stellt nicht die Position im Header oder Footer dar sondern das media-Attribut des Stylesheets, also z.B. print oder screen. Standardmäßig ist hier all vergeben.

Es gibt aber noch eine kleine Besonderheit, die man für die Einbindung von Scripts wissen sollte, die wir uns im letzten Abschnitt des Artikels ansehen.

 

Die wp_enqueue_scripts Action

Vieles in WordPress ist quasi eventbasiert. Das bedeutet ganz einfach wenn das CMS eine bestimmte Aktion ausführt können wir unsere eigenen Funktionen einhängen und in diesem Moment mit ausführen lassen. Ein Beispiel dafür ist die Aktion wp_enqueue_scripts, welche ausgeführt wird sobald Stylesheets und Scripts geladen werden. Wie verwenden wir diese Aktion nun? Das ist eigentlich ganz einfach. Dafür fügen wir in unserer functions.php folgenden Code hinzu:

Die Funktion add_action() kommt von WordPress selbst und nimmt zwei Parameter:

  1. Den Namen der Aktion, an die wir unsere Funktion anhängen wollen (also hier jetzt wp_enqueue_scripts)
  2. Den Namen der Funktion, die wir aufrufen möchten, sobald die Aktion ausgeführt wird (hier sollten wir dafür sorgen, dass der Name auch eindeutig ist. Eine Möglichkeit wäre, den Namen des Templates irgendwo im Funktionsnamen unterzubringen)

 

Und schon werden Scriptdateien und Stylesheets in unserem eigenen Theme geladen. Hast du noch Fragen oder Probleme mit deinem eigenen WordPress Theme? Schreib mir einfach einen Kommentar unter den Artikel.

Ein Kommentar zu “JS und CSS im WordPress Theme verwenden

Schreibe einen Kommentar

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

*