JavaScript-Bibliotheken in und aus WordPress nutzen

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Kommentare

  
  1. Hartmut sagt:

    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. fym sagt:

    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.

    • @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.

  3. Micha sagt:

    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.

    • @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.

  4. Tobias sagt:

    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().

    • @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.

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

  6. Thomas Stachl sagt:

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

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

    • @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?

  8. Thomas Stachl sagt:

    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

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

  9. 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 😀

    • @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

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

  11. Thomas Stachl sagt:

    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 🙂

  12. Thomas Stachl sagt:

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

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

  14. Jared sagt:

    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

  15. Jared sagt:

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

  16. jez sagt:

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

  17. Daniel sagt:

    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!

  18. Jenny sagt:

    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.

    • @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.

  19. Buntköchin sagt:

    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.

  20. fredellini sagt:

    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

  21. fredellini sagt:

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

© 2016, since 2005 bueltge.de [by:ltge.de] · Theme is built by ThemeShift