Sidebar
ein-/ausblenden

JavaScript-Bibliotheken in und aus WordPress nutzen

Plugin für WordPress SEO

Anzeige

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.

  • prototype
  • scriptaculous-root
  • scriptaculous-builder
  • scriptaculous-dragdrop
  • scriptaculous-effects
  • scriptaculous-slider
  • scriptaculous-sound
  • scriptaculous-controls
  • jquery
  • jquery-form
  • jquery-color
  • interface
  • suggest
  • schedule
  • jquery-hotkeys
  • thickbox
  • swfupload
  • swfupload-degrade
  • swfupload-swfobject
  • jquery-ui-core
  • jquery-ui-tabs
  • jquery-ui-sortable
  • jquery-ui-draggable
  • jquery-ui-resizable
  • jquery-ui-dialog
  • wp-gears
  • farbtastic

Ü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.

Weitere Lesetipps

29 Kommentare zu „JavaScript-Bibliotheken in und aus WordPress nutzen“

  1. 1
    Kommentar von Hartmut

    Vielen Dank für diesen Beitrag.
    Genau mit diesem Thema beschäftige ich mich auch schon einige Zeit.
    Ich hatte festgestellt, dass mein Blog immer langsamer wurde. Das lag u.a. einfach daran, dass sowohl Prototype/Scriptaculous und JQuery aufgerufen wurden.
    Da ja im Prinzip beide Frameworks die gleichen Funktionen beinhalten, sollte man sich auf JQuery konzentrieren und zusehen, dass die beiden anderen nicht mehr mitgeladen werden.

  2. 2
    Kommentar von fym

    Zwei, drei Tage früher gepostet und der Eintrag hätte mir einiges an Sucherei & Trial & Error erspart. Tja ;) Dass das Einbinden von css- und js-Dateien von Plugin-Autoren häufig nur über wp_head und direkt link-Tag realisiert wird, ist schon übel. Neben der Tatsache, dass sich viele Autoren einen Dreck um die komplette Deinstallation ihrer Plugins/von diesem erstellten Daten scheren (wenn das Blog schon länger besteht, einfach mal testeshalber z.B. in die *_options schauen und raten, zu welchem Plugin wohl die zahllos verwaisten Eintragungen gehören), ist das ein ziemliches Ärgernis.

  3. 3
    Kommentar von Frank Bültge

    @fym: Das Einbinden von JS udn CSS ist aber auch erst seit 2.5 so komfortabel gelöst und man muss den AUtoren auch ab und dann verzeihen. Die Doku bei WP ist nicht sonderlich toll, es ist quasi eine Suche oder man wühlt wie ich im Quellcode oder hat, wie ich ;-) , nette Kontakte, die gern Wissen tauschen.
    Aber ich sehe es an meinen Plugins - es ist nicht immer einfach auf dem aktuellen Stand von WP zu bleiben. Die Pflege kann aufwendig sein. So habe ich noch einige Plugins, die jede Option in der DB einzeln speichern, obwohl ich es lieber und besser als Array ablege. Aber das macht Mühe und kostet Zeit. Ebenso habe ich die Deinstall-Routinen erst nach und nach in den Plugins nachgerüstet, beim Start macht man sich damit nicht so vertraut, aber die Arbeit in den unterschiedlichsten Blogs und die verschiedenen Sichten dadurch zeigen mir die Probleme.

  4. 4
    Kommentar von Micha

    Hehe, dass du aber auch ausgerechnet die Thickbox als Beispiel genommen hast, dafür gibts add_thickbox(). Die Funktion läd Script und CSS.
    Was mir aber letztens aufgefallen ist, als in in meinem Themebackend die ui.tabs einbinden wollte: die haben das ui.tabs.css dazu nicht drin, oder ich bin blind.

  5. 5
    Kommentar von Frank Bültge

    @Micha: das sollte im Text auch hervor gehen, die Möglichkeit ist zwar für das Verständnis JS laden nicht relevant aber die Alternative, wenn man die Box nutzen möchte. Sie ist aber mit der Funktion nicht sauber im Frontend nutzbar, die Icons werden im JS definiert, die muss man nach laden.

  6. 6
    Kommentar von Tobias

    Danke für den Artikel! Keine Ahnung warum, aber "enqueue_script" funktioniert bei mir nicht mit allen im codex genannten Skripts. Am Rande mal eine Frage zur Thickbox in WP - ich verwende im admin Bereich zur Notifikation und irgendwie scheint sie in WP modifiziert zu sein, denn die WP thickbox reagiert (bei mir) nicht auf die Größenangaben im URL oder in der Funktion tb_show().

  7. 7
    Kommentar von Frank Bültge

    @Tobias: ja, die Größe im Admin wird direkt von WP definiert. Dazu muss der Aufruf geändert werden. Schau dir mal als Beispiel das Script media-upload an. Im Plugin Adminimize habe ich die Option drin, um die Größe zu ändern.

  8. 8
    Kommentar von backseatsurfer

    Die Doku bei WP ist nicht sonderlich toll, es ist quasi eine Suche oder man wühlt wie ich im Quellcode

    Das finde ich immer sehr schade. Die besten Tutorials, die ich gefunden habe (außer hier natürlich! ;-) ) war der Quellcode von bestehenden Plugins. WPEngineer.com ist ja immerhin ein Anfang, aber es dauert natürlich bis dort "alles" abgedeckt ist.

  9. 9
    Kommentar von Thomas Stachl

    Danke für diese Info, das wollte ich schon mal machen hab aber keine Möglichkeit gefunden das so umzusetzen.

  10. 10
    Kommentar von Fabian Künzel

    Hallo Frank,

    wie immer erfreut es mich deine Beiträge zu WordPress zu lesen. Oft sind sie für mich sogar sehr nützlich. Doch bei dem Thema "jQuery aus WordPress verwenden" stoße ich auf ein Problem.

    Für meinen neuen Theme verwende ich unter anderem aus dem "UserInterface (UI)" das "Tab" Widget.

    Leider bekomme ich es nicht hin, über wp_enqueue_script( ' jquery-ui-tabs' ); die Tab-Navigation am laufen zu bekommen.
    WordPress fügt zwar alle notwendigen "Script" einbindungen in den head bereich ein (neben der jQuery Core Datei auch die ui-core und ui-tab Datei) aber damit funktioniert es nicht.

    Wenn ich die notwendigen JS-Dateien von jQuery Manuell einfüge, klappt es jedoch wunderbar mit Tab-Funktion.

    Hast du vielleicht nen Tip worrans liegen könnt?

  11. 11
    Kommentar von Frank Bültge

    @Fabian: dazu müsste ich mal den Code sehen, so ist das schwer. Die Libraries sind korrekt drin, dann kann es doch nur an deinem Script liegen. Eventuell einen Fehler im Aufruf?

  12. 12
    Kommentar von Thomas Stachl

    Hallo Fabian,

    das habe ich letztens gerade gemacht, ich schreib dir mal schnell ein bisschen Code hier rein ;-)

    Also in die functions.php in deinem Theme Ordner kommen folgende Anweisungen:

    
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
    

    Dann musst du eine JS-Datei anlegen mit folgendem Inhalt, die du in den Header lädst:

    
    jQuery(document).ready(function(){
         jQuery("#TabsWrap > ul").tabs();
    }
    

    Und zum Schluss noch das Theme anpassen und an der Stelle an der du die Tabs haben willst kommt folgendes:

    
                <a href="#Tab1">Überschrift 1</a>
                <a href="#Tab2">Überschrift 2</a>
                <a href="#Tab3">Überschrift 3</a>
    
    			Inhalt von Tab 1.
    
    			Inhalt von Tab 2.
    
    			Inhalt von Tab 3.
    

    Das sollte es dann auch schon gewesen sein.

    Gruß Thomas

  13. 13
    Kommentar von Frank Bültge

    Wobei man die eigene JS-Datei auch via wp_enqueue_script oder wp_print_scripts laden kann. Der erste Fall ist besser, da man da die Abhängigkeit zu jQuery def. kann.

  14. 14
    Kommentar von Fabian Künzel

    Die Libraries sind korrekt drin, dann kann es doch nur an deinem Script liegen. Eventuell einen Fehler im Aufruf?

    Hallo Frank,

    also am Code kann es ja nicht direkt liegen. Wenn ich die endsprechenden jQuery JS-Dateien, von der jQuery Seite herrunter lade und in den Theme Ordner packe und sie dann Manuell per xHTML in die header.php einbinde, Funktioniert der Tab-Widget aus der UI.

    Habe aber anhand des Code-Beispiel's von Thomas den Fehler gefunden.

    ich hatte folgende javascript schnipsel in die header.php gepackt:

    $(document).ready(function(){
        $(".uitabs > ul").tabs();
      });

    Der Code-Schnipsel funktioniert mit dem übrigen Code auch, vorraus gesetzt ich nehme nicht die jQuery Dateien aus dem WordPress Core.

    Jetzt wo Thomas mir diesen Code Präsentiert, fällt mir auf, das ich irgendwo in den vergangen 3-4 Tagen auch sowas gelesen hab, das jQuery für WordPress angepasst wurde um einen "Framework Konflikt" zu vermeiden.

    Während ich normalerweise in jQuery mit dem $ beginne, so wie in meinen code-snippet, muss in WordPress "jQuery" anstelle des $ gesetzt werden, zumindens hab ich das irgendwo gelesen. Habe es wohl nur verdrängt :D

  15. 15
    Kommentar von Fabian Künzel

    Hab die stelle nochmal Ausfindig machen können, wo ich das mit "jQuery" gelsen hab. Es war im WPD-Forum.

  16. 16
    Kommentar von Thomas Stachl

    Wobei man die eigene JS-Datei auch via wp_enqueue_script oder wp_print_scripts laden kann. Der erste Fall ist besser, da man da die Abhängigkeit zu jQuery def. kann.

    Damit hast du vollkommen recht :-)

  17. 17
    Kommentar von Frank Bültge

    @Fabian: also doch ein Script-Fehler. Die Variante ist schonb länger so und sollte unbedingt auch so genutzt werden, auch ohne WP:
    jQuery(function($) { anstatt $(document).ready(function(){.
    Die ist auch in der Doku von jQuery nachzulesen: LINK

  18. 18
    Kommentar von Thomas Stachl

    @Frank: Meiner Meinung nach ist es trotzdem besser jQuery(document).... zu nutzen oder wenn man jQuery einer anderen Variable übergibt var $j = jQuery;, da man sich so nicht die Möglichkeit verbaut auch Prototype innerhalb von jQuery-Funktionen zu nutzen.

  19. 19
    Kommentar von Fabian Künzel

    Hallo Frank,

    danke für den Hinweis mit der Variante. beschäftige mich erst seit Anfang der Woche richtig mit jQuery und hab den Punkt der "Doku" überlesen/übersprunge.

    Für weitere jQuery Scripte werd ich in Zukunft die Variante mit dem "jQuery" statt dem $ nehmen.

    Lg Fabian

  20. 20
    Kommentar von Jared

    Hallo Frank,

    ich wollte die Ladezeit meines Portfolios mit diesem tollen Artikel verkleinern, aber leider funktioniert der Code bei mir nicht :(
    Ich benutze eine kleine Datei "login.js" in der der nötige Code steht und in Verbindung mit jQuery schiebt sich dann mein "Loginformular" nach unten.

    Folgenden Code habe ich benutzt:

    wp_enqueue_script('loginscript', '/wp-content/themes/portfolio/js/login.js', array('jquery'), '1.0' ); 

    Weißt du wo ich eventuell einen Fehler gemacht habe? Kommt mein Script nicht mit der Dateibezeichnung klar?

    lg
    Jared

  21. 21
    Kommentar von Frank Bültge

    @Jared: der Aufruf ist in der header.php des Themes? Was wird denn an Code in den head geschrieben im Frontend?

  22. 22
    Kommentar von Jared

    An Code kommt das hier raus:

    
    <script type='text/javascript' src='http://domain.de/wp-includes/js/jquery/jquery.js?ver=1.2.6' &lt:>/ script>
    script type='text/javascript' src='http://domain.de/wp-content/themes/portfolio/js/login.js?ver=1.0' &lt:>/ script>
    

    Ich hab mir damals das neueste jQuery Paket heruntergeladen und eingebunden, glaube aber nicht das meine kleine login.js ein so aktuelles Paket benötigt. Die "slidedown" Funktion gibts ja schon ewig. Von daher kann ich mir keinen Reim draus machen...

  23. 23
    Kommentar von jez

    tipp: man sollte, falls mein eine neue functions.php erstellt, auf jedenfall auch am ende nicht vergessen sonst gibt es schoene encoding errors.

  24. 24
    Kommentar von Daniel

    Hallo Frank, ich habe Deinen Tipp mit großer Aufmerksamkeit gelesen. Es funktioniert prima, nur die Bildbeschriftung wird nicht im Thickbox-Frame unter dem Bild angezeigt. Habe ich etwas übersehen? LG aus dem endlich herrlich-sommerlichen Berlin!

  25. 25
    Kommentar von Jenny

    Hallo Frank, ich habe jetzt sämtliche Tutorials durgeackert und Dokus gelesen und bin schier am verzeifeln. Ich versuche eine simple Tab UI in meiner Sidebar einzubauen (mit jQuery und jQuery UI) und es funktioniert überhaupt nicht. Firebug meldet dazu nur "jQuery("#tabvanilla").tabs is not a function". Ich konnte bisher ermitteln, dass dieses Problem bei Pfadfehlern auftritt, aber langsam weiß ich nicht mehr wie ich die jQuery Bibliotheken einbinden soll. Kannst du mir hier weiterhelfen? Darüber würde ich mich wirklich sehr freuen.

  26. 26
    Kommentar von Frank Bültge

    @Jenny: wp_enqueue_script( 'jquery-ui-tabs' ); in der functions.php sorgt dafür, dass das JS für die jQuery Tabs zur Verfügung steht, Hinzu kommt, dass du das CSS einbinden musst. Dazu musst du eigene Styles laden, die sind nicht im Core von WordPress enthalten.

  27. 27
    Kommentar von Buntköchin

    Ich habe mir ein Java-Script mit dem Plugin inline-js für wordpress auf einigen Seiten eingebaut. Hat super funktioniert. Ist genial für Leute, die keine Codes schreiben können.

  28. 28
    Kommentar von fredellini

    hallo frank,

    weißt du wie man die thickbox dazu bringen kann einen hintergrundsound abzuspielen, wenn sie geöffnet wird?
    ich habe es mit

    aber die stelle nicht gefunden, wo man das einsetzen kann.
    die idee ist eine slideshow, welche als iframe mit thickbox angezeigt wird, mit hintergrundmusik zu versehen.
    bester gruß
    fred

  29. 29
    Kommentar von fredellini

    der codeschnippsel ist:
    embed src="url.mp3" autostart="true" loop="true" hidden="true" volume="100">

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

E-Mail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.