Da jQuery bereits in WordPress enthalten ist, wird es einfach durch folgenden Code in das Theme integriert. Diesen setzt man am besten in die functions.php seines Themes ein.

add_action(‘wp_print_scripts’,’meintheme_add_javascript’ );

function meintheme_add_javascript() {
wp_enqueue_script( ‘jquery’);
}

Um weitere Plugins zu laden, die auf jQuery basieren zu laden (wie zum Beispiel Fancybox), ergänzt man in der Funktion meintheme_add_javascript() nach der Zeile wp_enqueue_script(‘jquery’) einfach folgende Zeile:

wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).”/js/fancybox.js”, array(‘jquery’));

Nun wird das auf jQuery basierende Fancybox-Script ebenfalls auf den Seiten des Themes verknüpft. Da Fancybox nicht standardmäßig in WordPress enthalten ist, liegt die Datei im Ordner js des Themes ab und muss mit einer Pfadangabe aufgerufen werden.

Diese Methode erspart das Verknüpfen der Dateien im HTML-Text des WordPress Themes.

Aus Gründen der Ladegeschwindigkeit einer Webseite, sollten externe Javascript- und damit auch jQuery-Dateien, wenn möglich, am Ende des Quelltexts einer Seite geladen werden, vor dem schließenden </body> Tags. Das erreicht man mit unserer Methode, wenn man am Ende von

wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).’/js/jquery.fancybox-1.3.0.pack.js’, array(‘jquery’));

ein ,”,true); anhängt:

wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).’/js/jquery.fancybox-1.3.0.pack.js’, array(‘jquery’),”,true);

Alles zusammen sieht dann so aus:

add_action(‘wp_print_scripts’,’meintheme_add_javascript’ ); function meintheme_add_javascript() {
wp_enqueue_script( ‘jquery’);
wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).’/js/jquery.fancybox-1.3.0.pack.js’, array(‘jquery’),”,true); }

Um Animationen und hübsche Effekte einzubinden sollte man sich eines Javascript-Frameworks bedienen, welches vorgefertigte Funktionen anbietet, die man dann ohne viel Arbeit schnell einbauen kann. Zu erwähnen wären Scriptaculous und jQuery. Zu Beginn meiner Karriere habe ich mich hauptsächlich mit Scriptaculous und Prototype beschäftigt, welche eine Vielzahl von Animationsmöglichkeiten und Plugins für die unterschiedlichsten Dinge bietet. Einziger, aber schwergewichtiger Nachteil daran war und ist die enorme Größe der Dateien. Deshalb empfehle ich jQuery. Es ist schlank, durch eine Unzahl an Plugins erweiterbar und mittlerweile das beliebteste und bestdokumentierte Javascript Framework im Internet. Zusätzlich bietet es einen sehr einfachen Syntax, der fast schon selbsterklärend ist. Weitere Informationen zu jQuery sind unter www.jquery.com zu finden.

Um jQuery im eigenen WordPress Theme einzubinden bedarf es ein paar kurzen Schritten. Zuerst die gute Nachricht: WordPress verfügt bereits über eine Kopie von jQuery. Viele Effekte des Admin-Bereichs wurden mit jQuery realisiert, weshalb man sich die Arbeit eines manuellen Down- und Uploads sparen kann. Hier nun die einzelnen Schritte, um jQuery im eigenen WordPress Theme nutzen zu können:

jQuery in WordPress aktivieren

Dazu öffnet man die functions.php des eignenen Themes, wenn nicht vorhanden, sollte man sie jetzt erstellen, und gibt folgenden Code ein:

if(!is_admin)
{
add_action(‘wp_print_scripts’,'meintheme_add_javascript’ );

function meintheme_add_javascript() {
wp_enqueue_script( ‘jquery’);
}
}

Was macht dieser Code? Die Anweisung if(!is_admin()) sagt, dass dieser Code nicht im Dashboard abgearbeitet werden soll. Die Anweisung add_action(‘wp_print_scripts’, ‘meintheme_add_javascript’); sagt aus, dass WordPress bei der Generierung des HTML-Codes des Head-Bereichs die Funktion meintheme_add_javascript() ausführen soll.

Die Funktion meintheme_add_javascript() wiederum erzeugt mit dem Befehl das Einbinden der WordPress-eigenen jQuery-Bibliothek.

Die functions.php abspeichern, die Seite neu laden und nun sollte ein

<script type=’text/javascript’ src=’http://meinedomain.de/wp-includes/js/jquery/jquery.js?ver=1.4.2′></script>

stehen. Vorteil dieser Methode ist, dass WordPress bei jedem Update automatisch die neuste Version von jQuery bietet und man nicht selbst für ein Update sorgen muss.

<?php wp_enqueue_script(); ?>

Möchte man zum Beispiel jquery in seinem WordPress Webdesign nutzen ruft man folgenden Code auf:

<?php
wp_enqueue_script(‘jquery’);
?>

Normalerweise erzeugen die beiden Javascript Bibliotheken jquery und Prototype bei gleichzeitiger Nutzung einen Konflikt bei der Variablendeklarierung. Daher lädt WordPress Jquery im sogenannten “No Conflict” Modus. Soll dieser ausgeschaltet werden, muss diese Anweisung ausgeführt werden:

jQuery(document).ready(function($) {
//innerhalb dieser Funktion wird $() als Platzhalter für jQuery genutzt
});

Folgende Javascript Bibliotheken sind standardmäßig in WordPress verfügbar:

• Scriptaculous » <?php wp_enqueue_script(‘scriptaculous’); ?>
• SWFUpload » <?php wp_enqueue_script(‘swfupload’); ?>
• jQuery » <?php wp_enqueue_script(‘jquery’); ?>
• Thickbox » <?php wp_enqueue_script(‘thickbox’); ?>
• Tiny MCE » <?php wp_enqueue_script(‘tiny_mce’); ?>
• Prototype » <?php wp_enqueue_script(‘prototype’); ?>

Eine ausführliche Liste und eine englische Beschreibung über wp_enqueue_script() ist hier erhältlich