In diesem Artikel erkläre ich wie man Javascript-Bibliotheken, wie zum Beispiel jQuery oder modernizr.js richtig einbindet. Neben den bekannten Javascript-Frameworks, kann man natürlich auch selbstgeschriebene Scripte einbinden. Die meisten dürften sich fragen, was man beim laden der Scripte falsch machen kann. Über eine Theme-Datei, kann man wie gewohnt ein Script einbinden und verwenden oder direkt in eine Datei zum Beispiel in die header.php reinschreiben. Das Pflegesystem sieht aber einen anderen, intelligenteren Weg vor und bietet dafür passende Funktionen.

 

WordPress Funktionen zum einbinden von Javascript

In WordPress sind spezielle Funktionen zum Steuern von Scripten vorgesehen. Diese Funktionen sollte man auch für die Theme-Erstellung und für Plugins verwenden. Hier eine Liste der vorgegebenen Funktionen zum einbinden und deaktivieren von Javascript-Dateien:

  • wp_register_script
    Mit dieser Funktion registriert man in WordPress Scripte, welche man dann je nach Bedarf verwenden kann.
  • wp_enqueue_script
    Damit aktiviert man benötigte Scripte
  • wp_deregister_script
    Wenn man ein Script aus WordPress rausnehmen will, wird diese Funktion benutzt.
  • wp_dequeue_script
    Sollte ein aktiviertes Script nicht verwenden werden, kann man es mit dem Befehl deaktivieren.

 

In WordPress integrierte Javascript Bibliotheken und Frameworks

WordPress beinhaltet von sich aus  Javascript Bibliotheken. Von daher muss man nicht alle benötigten Scripte über das Theme laden, sondern die benötigten Bibliotheken mit der Funktion wp_enqueue_script aus WordPress verwenden. Hier eine Liste einiger wichtigen Bibliotheken, welche bereits in WordPress integriert sind:

 

Die vollständige Liste der integrierten Javascript Dateien findet ihr auf der entsprechenden WordPress-Doku Seite zur Integrierung von Scripten.

 

Eine Javascript-Datei in WordPress registrieren

Bevor man eine Javascript-Datei verwenden will, muss man diese als erstes registrieren. Das erfolgt durch die Funktion wp_register_script. So hat es auszusehen:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

Die Variablen stehen für folgende Angaben:

  • $handle – Der Alias für das Script. Durch den Alias kann man die Dateien ansprechen.
  • $scr – Der Pfad/Domain unter der die Script-Datei zu finden ist.
  • $deps – Mit dieser Variable kann angeben, welche Scripte zuerst geladen werden müssen bevor dieses folgt. Die Variable wird als Array gesetzt und als Werte werden die Alias-Namen der benötigten Dateien übergeben.
  • $ver – Hier gibt ihr an, welche Version die verwendete Bibliothek hat.
  • $in_footer – Hier könnt ihr angeben ob die Javascript-Datei im Kopf bzw. in „wp_head“ geladen werden soll oder in „wp_footer“. Wenn die Datei im Footer geladen werden soll, muss man als Parameter „true“ übergeben, ansonten „false“. Die Variable muss ein Boolean-Wert sein und kein String.

 

So sieht es dann in der Praxis aus:

wp_register_script('script', bloginfo('template_url').'script.js', array('jquery'), '1.0', true);

 

WordPress sagen welche Scripte geladen werden sollen

Nachdem alle benötigten Scripte in WordPress registriert wurden, kann man die benötigten Dateien mithilfe von wp_enqueue_script laden.

Dazu benutzt man einfach diese Funktion und übergibt als Parameter den Alias der benötigten Datei. Das sieht dann so aus:

wp_enqueue_script('script');

 

Javascript-Dateien deaktivieren und aus WordPress entfernen

Es besteht natürlich auch die Möglichkeit Scripte wieder zu deaktivieren oder komplett aus WordPress rauszunehmen. Dazu gibt WordPress zwei Funktionen vor. wp_dequeue_script zum deaktivieren von Scripten und wp_deregister_script zum Austragen eines Scripts aus WordPress. Bei beiden Funktionen übergibt man als Parameter den Alias des Scripts.

So wird es verwendet:

wp_deregister_script('script');
wp_dequeue_script('script');

 

Prüfen welche Scripte in WordPress aktiviert sind

Wenn man überprüfen möchte, welche Javascript-Dateien von WordPress geladen werden, benutzt man die Funktion wp_print_scripts(). Die gibt ein als Wert ein Array zurück in dem angeben ist, welche Scripte geladen werden. Es werden die $handle also die Alias Namen der Scripte ausgeliefert.

So erfolgt der Aufruf:

var_dump(wp_print_scripts());

 

Javascript Dateien in WordPress richtig laden

Wenn man in seiner WordPress-Seite weitere Scripte benutzen will, ist der richtige Weg mit die „Action Hooks“ zu arbeiten. Man definiert über die functions.php welche Javascript-Dateien in WordPress geladen und benutzt werden sollen. Das macht man, indem man eine Funktion schreibt, in der man auf die WordPress-Befehle wp_register_script und wp_enqueue_script zurückgreift. Die Funktion verknüpft man dann mit dem Befehl add_action an den Befehl wp_enqueue_scripts.

In der Praxis sieht es dann folgendermaßen aus:

add_action('wp_enqueue_scripts','register_custom_scripts');
function register_custom_scripts() {
  wp_register_script('script', bloginfo('template_url').'script.js', array('jquery'), '1.0', true);
  wp_enqueue_script('script');
}

 

Tutorial – jQuery über die Google API laden

Ein häufiger Verwendungszweck der Funktion benutzt man, um jQuery nicht von WordPress aus zu laden, sondern extern z.B. von der Google API. Dazu geht man wie oben beschrieben vor. Man schreibt eine Funktion und verknüpft sie über add_action. Der Code muss in die functions.php des Themes geschrieben werden.

jQuery über die Google API laden – die entsprechende Funktion dafür:

add_action('wp_enquere_scripts','load_jquery_from_google');
function load_jquery_from_google () {
  wp_deregister_script('jquery');
  wp_register_script('jquery','//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',false,'1.9.1',false);
  wp_enqueue_script('jquery');
}

 

Weiterführende Links

Kategorien: Wordpress | Schlagwörter: Action, Framework, Google API, Hook, Javascript, Theme
Der Autor:
Ich bin ein junger Webentwickler aus Fulda. In meinen Blog schreibe ich über Themen wie Wordpress, Zend Framework und Tipps für einen leichteren Arbeitsablauf. Ich möchte meine Erfahrungen teilen und dem einem oder anderen Webentwickler damit das Leben erleichtern. Finde mich auf Google+, auf Xing oder folge mir auf Twitter. Ich freue mich über jeden neuen Kontakt.

Tragen Sie sich für meinen Newsletter ein