Es gibt immer wieder die Notwendigkeit eine eigene Javascript Datei in ein WordPress Themen einzubinden. Z.B. wenn man eigene Javascript Befehle nutzen möchte oder ein Javascript Framework wie jQuery einbinden will.
Das Javascript was man gerne einbinden möchte, muss in der „fertigen“ WordPress Seite im Header-Bereich erscheinen. Um eigene Javascripte in WordPress einzubinden gibt es generell mehrere Möglichkeiten. Man kann das Javascript über eine Funktion in WordPress einbinden, oder man kann es (kurz und bündig) direkt in die header.php integrieren. In dieser Anleitung nehmen wir eine Javascript Datei die wir in einem Unterordner innerhalb des WordPress Theme ablegen wollen.
Hierfür sollte man im ersten Schritt im Theme Ordner einen Unterordner (z.B. /js) anlegen. In diesem Beispeil nehmen wir die Datei custom.js und speichern diese in den Unterordner /js. Danach muss man die header.php des Templates öffenen und die folgende Zeile in zwischen <header> und </header> einfügen:
<script src="<?php echo get_template_directory_uri(); ?>/js/custom.js" type="text/javascript"></script> |
Beim Einbinden muss man auf die Reihenfolge achten. D.h. wenn in der eigenen Javascript Datei z.B. ein jquery Befehl nutzt, muss man darauf achten, dass jQuery vor der eigenen Javascript Datei eingebunden wird.
Der Befehl get_template_directory_uri() bedeutet, dass der Pfad zum Unterodner innerhalb des Theme von WordPress ausgegeben wird. Da beim Browsen auf der Website immer wieder unterschiedliche URL generiert werden, hilft uns dieser Befehl die URL so zu bilden, dass es immer auf das richtige Theme verwiesen wird.