jQuery und WordPress

Was ist eigentlich jQuery? Und warum möchte man es mit WordPress in Verbindung bringen wollen? jQuery ist eine Javascript-Bibliothek mit vorgefertigten Funktionen, die es uns erlauben, durchaus ansehnliche Dinge zu tun. Irgendwann mit dem Versionsupgrade auf 2.2 hat WordPress jQuery selbst in den Kern der Anwendung integriert. Man könnte also die Bibliothek zu seinen Gunsten nutzen. Es gibt allerdings ein Problem: WordPress-Updates sind wahrscheinlich weniger häufig als Versionssprünge der jQuery-Bibliothek. Sprich: die in WordPress integrierte Version wird aller Voraussicht nach nie die aktuellste sein. Stand der Dinge ist, wenn ich richtig informiert bin: jQuery in Version 1.1.4 ist seit Version 2.3 in WordPress integriert, aktuell ist jedoch die Version 1.2.3 von jQuery.

Die jQuery-Bibliothek liegt übrigens im „/wp-includes/js/“-Verzeichnis einer WordPress-Installation. Da die Bibliothek jedoch in den Kern der Anwendung integriert ist, können wir sie auf eher einfache Weise in unsere Webseiten integrieren. Wenn schon mal jemand an einem WordPress-Thema gebastelt hat – und ich spreche/schreibe hier eher die Hobbyköche und nicht den Chef du cuisine an -, wird er sich mit HTML und Co. zumindest ein wenig auskennen. Wir haben also gewisse Voraussetzungen gemeinsam, die ich an dieser Stelle nicht extra erläutern muss. Wollten wir nun von jQuery Gebrauch machen, müssten wir in der Header-Datei unseres WordPress-Themes eine Zeile “php”-Code hinzufügen, die wie folgt ausschaut:

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

In der Folge wären wir in der Lage, jQuery-Funktionen in den Quellcode einer Datei einzufügen, respektive auch in unsere WordPressbeiträge zu integrieren. Wie das ausschaut, darüber informiert man sich besser in den Tutorials auf der jQuery-Seite. Mir geht es hier nämlich um ein sehr spezielles Anliegen.

Facebox als Stein des Anstoßes

Wie bin ich überhaupt dazu gekommen, diesen Artikel hier zu schreiben? Nun, ich war auf eine nette Applikation gestoßen, die es ermöglichen sollte, Inhalte in “AJAX”igen Fenstern anzuzeigen. Nun war die Frage – wie integrieren? Ein erster Versuch mit einer Anleitung auf den Seiten von Facebox scheiterte. Also durchforstete ich zunächst die Suchmaschine meines Vertrauens mit den Stichworten “jQuery” und “WordPress”, merkte jedoch schnell, dass ich sehr lange brauchen würde, bis ich irgendeinen hilfreichen Ratschlag erhalten könnte.

Facebox benötigt mindestens jQuery 1.2.1 – was tun? Wir können den php-Aufruf auch variieren und ihm einen Parameter hinzufügen, der den Ort der Bibliothek angibt. So könn(t)en wir die aktuelle Version einbinden. In den Foren auf WordPress.Org herrscht nämlich einhellig die Meinung, dass man nicht hingehen sollte, und die Bibliotheks-Datei im /wp-includes/-Ordner durch eine neuere Version zu ersetzen. Man könnte WordPress “under the hood” beschädigen oder zur Aufgabe zwingen, und das möchten wir ja nicht bezwecken. Das Einbinden einer eigenen Version von jQuery funktioniert wie folgt:

<?php wp_enqueue_script( ‘jquery’, ‘/pfad/zu/deiner/jquery.js’, false, ’1.2.3′); ?>

So sollte es funktionieren, tut es aber leider nicht. Ergo musste ich eine „<script>“-Anweisung in den Kopf der HTML-Datei einfügen.

Man merke außerdem schon an der vorherigen Anmerkung: Ich habe die Datei in jquery.js umbenannt, denn so, wie man sie vom Server herunterlädt, trägt sie einen anderen Dateinamen. Das ist jedoch Jedermann selbst überlassen.

facebox.js und facebox.css justieren

Die Grafikverweise auf die entsprechenden Grafiken (in der Stildatei fünf an der Zahl, in der js-Datei drei Stück), müssen ebenfalls angepasst werden. Der Document-Root ist durch die verschachtelte Dateistruktur von WordPress leider ein anderer als er das bei einer herkömmlichen Webseite wäre, so dass die relativen Grafikverweise in der Stildatei und im js-File leider ins Leere laufen. Hier muss der geneigte Blogverbesserer selbst Hand anlegen. Ich habe profilaktisch erst ein Mal alle Verweise in der js-Datei durch absolute Angaben ersetzt. Später könnte man immer noch mit entsprechenden WordPressabkürzungen Verweise erstellen, die mit jeder WordPressinstallation laufen sollten. In der Stildatei reicht es aus, nur den Unterordner “facebox”aus der Verzeichnisstruktur zu entfernen. Andernfalls müsste man die Stildatei in das übergeordnete Verzeichnis, in dem Fall das des WordPress-Themas kopieren, damit es funktioniert. Hier wird aber entsprechend jeder selbst, den eigenen Umständen entsprechend eingreifen müssen.

Aus Zwei mach Eins

Facebox selbst verfügt, wie bereits angemerkt, über eine eigene Stildatei. Warum aber im Header zwei Stildateien laden, wenn ich die Angaben aus der Facebox-Stildatei (facebox.css) einfach in die meines WordPress-Themes (in diesem Fall 2813.css) übertragen kann. Gesagt, getan – immerhin ist das einfach nur Kopieren und Einfügen (copy & paste). Das klappt ohne Schwierigkeiten – Angaben zu den verwendeten Grafiken anpassen.

Das Wichtigste zum Schluss

Man könnten nun jedes Mal, wenn man auf einen Link klickt, den HTML-Tag mit einer Auszeichnung “onClick” oder “mouseOver” versehen und darin die “facebox()”-Funktion aufrufen und ausführen. Insgesamt ist das jedoch ein wenig umständlich. Deshalb kriegt man von den Machern noch den Tipp, eine weitere Script-Anweisung in den Kopf der HTML-Datei zu laden, die den Browser anweist, ein “rel”-Angabe (“rel=facebox”) im Anchor-Tag zu interpretieren als Funktionsaufruf. Eigentlich weist einen ja niemand darauf hin, dass die Anweisungen strikt in den Kopf der HTML-Datei gehören, es ist aber vor allem bei WordPress notwendig, da nicht jede Datei gleichermaßen geladen wird. Wenn man facebox global nutzen möchten, muss man dafür Sorge tragen, dass die Funktion auch so integriert wird, dass sie immer im Hintergrund mitgeladen wird. Der zusätzliche Quellcode im Kopf der header.php sieht abschließend wie folgt aus:

<script src=”http://www.deinedomain.de/dein-wordpressthema/facebox/jquery.js” type=”text/javascript”></script>
<script src=”http://www.deinedomain.de/dein-wordpressthema/facebox/facebox.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘a[rel*=facebox]‘).facebox()
})
</script>

Die Stilvorlage war ja bereits zusammenkopiert; und was kann man nun damit anstellen? Nun, man kann versteckte DIV-Container erstellen, die beim Klick auf einen Begriff aufgehen, und zum Beispiel erläutern helfen, was eigentlich AJAX bedeutet, wahlweise aber auch einen <p>-container.

Man kann außerdem Grafiken mithilfe von facebox einbinden. Eine nette Lösung, wenn man im Text verkleinerte Abbildungen anbringt und auf eine Grafik mit entsprechend höherer Auflösung verweist.

Zu guter letzt kann man sogar ganze HTML-Dateien integrieren (und eben nur HTML-Dateien, aber keine Webseiten-URLs oder PHP-Dateien, und andere mehr). Die einzelnen Aufrufe könnte ihr euch auf den Seiten von Facebox genauer ansehen.

Ähnliche Nachrichten