jQuery im WordPress-Theme nutzen

27.07.2007 12:02 Uhr | Kommentare: 6 | Kommentar hinterlassen
Einsortiert in Software

Wordpress LogoWordPress nutzt seit Version 2.2 für Ajax-Funktionen des Admin-Bereiches das JavaScript-Toolkit jQuery. Wer die mitgelieferte jQuery-Bibliothek in seinem Theme nutzen möchte, hat zur Einbindung diverse Möglichkeiten.

Ich persönlich empfehle die letzte der nachfolgend vorgestellten Varianten, da sie die größtmögliche Kompatibilität zu WordPress besitzt. Aber der Reihe nach …

jQuery über Templatetags einbinden

Der einfachste Weg jQuery einzubinden besteht in der Nutzung von Templatetags in der Datei header.php des benutzten Themes. Dazu reicht die folgende Zeile innerhalb des head-Bereiches:

<script type="text/javascript" src="<?php  bloginfo('siteurl'); ?>/wp-includes/js/jquery/jquery.js"></script>

Nachteil dieser Variante: Wenn jQuery innerhalb der WordPress-Entwicklung an einen anderen Ort wandern sollte, muß man den neuen Pfad manuell anpassen. Der größere Nachteil ist allerdings, daß keine Abhängigkeiten aufgelöst werden. Ein Beispiel: WordPress liefert ebenfalls das interface-Plugin für jQuery mit aus. Wer es ebenfalls mit einbinden möchte, muß zwei fast identische Zeilen schreiben und dabei auf die Reihenfolge der Aufrufe achten (zuerst jquery dann interface).

jQuery über ein Plugin in alle benutzten Themes integrieren

alldev hat mit “activate jquery” ein PlugIn für WordPress geschrieben, daß jQuery über den zuvor gezeigten Weg in alle Themes integriert. Vorteil: Die Bearbeitung der Datei header.php entfällt und allen benutzen Themes stehen jQuery-Funktionen zur Verfügung.

Nachteile dieser Lösung: Pfadänderungen durch die WordPress-Entwickler werden nicht erkannt und abgefangen und die Einbindung von interface muß manuell erfolgen.

Kurz und gut: jQuery so einbinden, wie WordPress es tut

jQuery LogoIch empfehle grundsätzlich diese Variante, da sie jQuery und dessen Plugins so integriert, wie WordPress es tut. Man braucht sich dabei weder um Pfadänderungen noch Abhängigkeiten kümmern. Allerdings muß man bei diesem Weg wieder die Datei header.php des benutzen Themes ändern. Und so geht es:

Wer jQuery und interface benutzen möchte, dem reicht die folgende Zeile vor dem Aufruf der Funktion wp_head():

<?php wp_enqueue_script('interface');?>

Wer hingegen nur jQuery einbinden will, benutzt diese Zeile:

<?php wp_enqueue_script('jquery');?>

Das wars! Ja, das ist wirklich alles was man benötigt, um das mitgelieferte jQuery und dessen Plugins kompatibel und zukunftssicher einzubinden.

Wichtig dabei ist nur, daß der Aufruf von wp_enqueue_script vor dem Aufruf von wp_head() erfolgen muß. Daher hier noch mal die Einbindung von interface und das Ergebnis, das der Browser zu sehen bekommt, komplett:

Auszug aus header.php:

<?php wp_enqueue_script('interface');?>
<?php wp_head(); ?>
</head>

Und so sieht der daraus entstandene Quelltext bei WordPress 2.2.1. für den Browser aus:

<script type='text/javascript' src='http://local.deine-domain.de/wp-includes/js/jquery/jquery.js?ver=1.1.2'></script>
<script type='text/javascript' src='http://local.deine-domain.de/wp-includes/js/jquery/interface.js?ver=1.2'></script>
</head>

6 Kommentare zu “jQuery im WordPress-Theme nutzen”

Hinterlasse einen Kommentar

Bitte beachten: Mit der Abgabe eines Kommentares oder dem Senden eines Trackbacks erklärst Du Dich mit den Kommentar- und Trackbackrichtlinien einverstanden!

XHTML: Diese Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Du kannst Deinen Kommentar nach dem Abspeichern noch 30 Minuten bearbeiten.

Kurznavigation

Featured Story

WordPress-Plugins

Tags

Kategorien

Empfehlungen

Hilfen und mehr ...

Kommerzielle Angebote

Anderes