Die Zeiten ändern sich.
Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.
Entwickelt man explizit in und für WordPress, dann empfiehlt sich die Verwendung einer Library aus dem Core und einem Plugin für die jeweilige Library mit dem gewünschtem Effekt.
Gleiches gilt für Theme- und Plugin-Autoren. Realisiert man mit den Funktionen von WordPress die Implementierung von JavaScript, dann werden Komplikationen verringert und die Kompatibilität unter den Plugins ist wesentlicher höher.
Wie man JavaScript aus dem Core nutzt – dies möchte ich am Beispiel der Thickbox zeigen.
In der einen oder anderen Website möchte man den „Lightbox“-Effekt einbinden und sucht nach einer Möglichkeit. Dabei wird man auf sehr viele unterschiedliche Umsetzungen stoßen. Schauen wir uns eine an, die ohne Plugin auskommt.
WordPress bringt Thickbox im Standard schon mit und kann daher ohne großen Aufwand genutzt werden.
wp_enqueue_script()
Seit Version 2.1 von WordPress ist die Funktion wp_enqueue_script() enthalten, welche das einbinden von JavaScript-Bibliotheken sehr vereinfacht und ein Prüfung vornimmt. Damit muss also das Theme nicht mit den nötigen JavaScripts versorgt werden. Die Integration ist einfach und sauber.
wp_enqueue_style()
Als weitere Funktion in diesem Zusammenhang sollte man sich wp_enqueue_style() merken. Damit werden entsprechende CSS-Dateien eingebunden.
Beiden Funktion verstehen eine Reihe von Parametern, wobei der Pflichtparameter die Übergabe des Schlüssels darstellt. Für das genannte Beispiel benötigt man Thickbox, was als Plugin für jQuery erschienen ist. Daher müsste man also beiden Dateien laden, oder?
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'thickbox' );
WordPress verwaltet aber die Abhängigkeiten, so dass es reicht, wenn man die Erweiterung angibt und WordPress erkennt, dass jQuery notwendig ist. Es genügt also der Aufruf wp_enqueue_script( 'thickbox' );. Damit wird jQuery mit geladen und in der richtigen Reihenfolge im Code eingefügt. Gleiches gilt, wenn andere Aufrufe jQuery benötigen. WordPress achtet darauf und läßt nur einen Aufruf zu, so dass die Bibliothek oder diverse Erweiterungen für die Libraray nicht mehrfach geladen werden.
Damit haben wir im Beispiel nun die nötigen JavaScript-Dateien eingebunden, zusätzlich benötigen wir aber ein Style, um den Effekt der Thickbox auch entsprechend in Scene zu setzen.
Um das Standard-Design von WordPress einzubinden genügt der Aufruf des Schlüssels Thickbox für den CSS-Aufruf wp_enqueue_style( 'thickbox' ).
Das Design kann natürlich an die eigenen Bedürfnisse angepasst werden. Dazu greift klassisch via CSS ein und erweitert das bestehende Standard-Style aus dem Core von WordPress oder schreibt ein komplett neues Style.
Hier mal ein kleines einfaches Beispiel um das Schließen-Icon dem Core mit hinzu zunehmen.
#TB_window a:link {
color: transparent !important;
background: url('http:/examble.com/wp-includes/js/thickbox/tb-close.png') no-repeat;
padding: 0 4px !important;
}
#TB_window a:hover {
background: red;
}
Will man sich um nichts kümmern, was aber nur sauber im Backend von WordPress funktioniert (ansonsten sind die Icons nicht verfügbar, da die im JS definiert wurden), dann reicht der Aufruf add_thickbox(). Damit wird alles zum „Leben“ von Thickbox eingebunden.
Um nun aber auch diverse Links mit dem Effekt zu verknüpfen muss man dem Link noch die Klasse thickbox hinzufügen. Damit wird der Effekt dann auch genutzt.
Im einfachsten Fall könnte das wie folgt aussehen.
<a href="http://examble.com/image.png" class="thickbox">
<img src="http://examble.com/image-thumb.png" alt="Image" />
</a>
Klasse automatisch setzen
Alternativ kann man auch die Klasse automatisch setzen. Die folgende kleine Funktion in der functions.php des Themes hinterlegt tut dies, ist aber keine Garantie auf Richtigkeit in allen Fällen.
/*
* Thickbox scan, add class for a
*/
function fb_add_thickbox($content){
$content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content);
return $content;
}
add_filter('the_content', 'fb_add_thickbox', 2);
Andere JavaScripte
WordPress bietet dem Entwickler eine ganze Reihe weiterer Bibliotheken und Erweiterungen zum Nutzen an. Man ist nicht auf jQuery beschränkt. Ebenso sind viele bekannte Erweiterungen der einzelnen Bibliotheken im Core. Die Einbindung durch die gezeigte Funktion sorgt für wenig Schwierigkeiten und die einzelnen Bibliotheken behaken sich nicht gegenseitig. Ebenso werden nicht unnötig diverse Bibliotheken mehrfach geladen, wie das nicht selten bei einigen Plugins so ist.
Eine ganze Reihe von Schlüsseln findet man in der /wp-includes/script-loader.php. Das Umschauen lohnt sich. Im folgenden nur eine Auswahl von Schlüsseln.
prototypescriptaculous-rootscriptaculous-builderscriptaculous-dragdropscriptaculous-effectsscriptaculous-sliderscriptaculous-soundscriptaculous-controlsjqueryjquery-formjquery-colorinterfacesuggestschedulejquery-hotkeysthickboxswfuploadswfupload-degradeswfupload-swfobjectjquery-ui-corejquery-ui-tabsjquery-ui-sortablejquery-ui-draggablejquery-ui-resizablejquery-ui-dialogwp-gearsfarbtastic
Übergibt man einen der Schlüssel, so kann man auch in einem Array übergeben, welche Erweiterungen man benötigt.
wp_enqueue_script( 'scriptaculous', '', array('scriptaculous-dragdrop', 'scriptaculous-slider', 'scriptaculous-controls'), '1.8.0')
Eigene Scripte
Alternativ kann man mit Hilfe der genannten Funktion auch eigene Scripte einbinden. Ein Beispiel soll es aufzeigen.
wp_enqueue_script( 'my_script', plugins_url($path = 'my_plugin_folder/js/my_script.js'), array('jquery') );
Dabei ist man nicht auf die Verwendung von js-Dateien festgelegt. So kann man auch mit PHP arbeiten, wenn man diverse Variablen etc. aus PHP nutzen möchte.
wp_enqueue_script( 'my_script', plugins_url($path = 'my_plugin_folder/js/my_script.php'), array('jquery') );
Wird eine bestimmte Version einer Library voraus gesetzt, so kann man die Version mit übergeben.
wp_enqueue_script( 'my_script', plugins_url($path = 'my_plugin_folder/js/my_script.php'), array( 'jquery'), '1.2.1.3' );
wp_deregister_script()
Ab und dann will man aber eventuell ein Script deaktivieren – auch dafür gibt es eine Funktion: wp_deregister_script( 'jquery' );.
Das Beispiel deaktiviert jQuery aus dem Core. Damit könnte man nun beispielsweise jQuery von einer anderen externen Quelle laden.
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js', array(), '1.2.6' );
Fazit
Der kleine Einblick soll zeigen, wie man Komplikationen mit anderen Bibliotheken durch die Verwendung von Plugins verhindern kann. Die Verwendung der Funktion ist nicht auf Plugins beschränkt und kann ebenfalls im Theme von WordPress eingesetzt werden.
