WordPress und jQuery – einige Tipps

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. Michael Pehl sagt:

    Danke für diese Tipps 🙂

  2. Roman sagt:

    Hallo Frank

    Danke für den Artikel. Eine kleine Ergänzung hätte ich hier noch zum Einbinden von jQuery und anderen Libraries. Anstatt jedes Skript via wp_enqeue_script() zu laden, kann man auch WordPress damit beauftragen. Dies macht man ja, wie du bereits erwähnt hast, über das mitgegebene Abhängigkeits-Array.

    Die beiden Aufrufe kann man sich dann aber getrost schenken:

    
            wp_enqueue_script( 'jquery' );
            wp_enqueue_script( 'styleswitcher', '/path/to/styleswitcher.js', array( 'jquery'), '1.3.2', true );
    

    Wichtig ist einfach nur, dass man die Abhängigkeiten im mitgegebenen Array nicht vergisst und dort auch wirklich die registrierten Skriptnamen einträgt.

    Der neue Code wäre dann wie folgt (Pfad gekürzt, damits in den comment passt):

    
    function fb_greyfoto_init() {
        if ( !is_admin() ) {
    
            wp_deregister_script( 'jquery' );
            wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true );
    
            // js vom Theme laden, Vorraussetzung jQuery
            wp_enqueue_script( 'greyfoto', '/path/to/greyfoto.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); 
    
        }
    }
    
    • @Roman: ja, ich wollte dies auch verdeutlichen, in dem ich das Array unten dran gepackt habe; aber vielleicht zu unverständlich. Danke für die Ergänzung. Wichtig ist in dem Fall ja, dass man die Schlüssel registriert hat.

    • @Roman: habe mal den Post noch ein wenig ergänzt, vielleicht passt es nun besser?

  3. Roman sagt:

    Wunderbar. Nun hab ich nichts mehr dran auszusetzen ;).

  4. Marco sagt:

    Vielen Dank für den Tipp. Haben so einige WordPress Bloggs am laufen, da hat uns dieser Beitrag sehr weitergeholfen 😉

  5. Nicki sagt:

    Oh das liest sich toll. Wie immer bin ich dann wohl mit Mootools wieder ganz allein ^^ ... einige Deiner Beispiele lassen sich aber auch gut in abgewandelter Form auch dafür anwenden. Abfragen zum Script für bestimmte Seiten löse ich "klassisch": if_is_page/archive etc. Klappt auch wunderbar.

    • @Nicki: das inkludieren ist gleich, registriere den Schlüssel mootools und dann kannst du das immer nutzen. Die Verwendung ist gleich; entscheident ist die Referenz darauf, so dass sich WP um das ausliefern kümmert, keine Redundanz da ist und die Reihenfolge stimmt.

  6. Nicki sagt:

    Erledigt ^^. Danke

  7. Simon sagt:

    Hi Frank,

    danke für die coole Einführung. Habe zwar selber auch schon damit gearbeitet, allerdings doch noch die ein oder andere Sache mitgenommen.

    Ach ja: auch in Drupal kann man tolle Sachen mit JQuery machen 😉

    Gruß Simon

  8. Stefan sagt:

    Prima Tipp. JQuery ist ja ohnehin eine feine Sache mit vielen schönen Effekten und z.B. Bildergalerien, aber tatsächlich ist manchmal die Integration in bestehende Systeme (CMS etc.) nicht ganz so trivial. Danke für den Beitrag.

  9. Martin sagt:

    Guten Abend.
    Ich habe mir gerade den Kopf darüber zerbrochen wie ich jquery nur in den Beiträgen im footer laden kann. Leider verstehe ich in diesem sehr guten Beitrag vieles nicht ganz, aber ist es nicht einfacher wenn man direkt in der single.php


    <script type='text/javascript' src='http://www.meineseite.net/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>

    ganz am ende aber noch vor dem <?php get_footer(); ?> einfügt?

    Gruss Martin

    PS. Jetzt ist es richtig.

    • @Martin: sollte man so nicht tun, dafür gibt es die Conditional Tags und mit is_single() wird nur die Beitragsseite angesprochen. Ebenso sollten Scripte via Funktion wp_enqueue_script() bzw. wp_register_script() eingebunden werden; Beiträge dazu gibt es hier im Bog genug.

  10. mrboob sagt:

    Hallo Frank, vielleicht gehört meine frage ja nicht hierhin aber du bist meine zuverlässigste Adresse 🙂

    Folgendes, ich versuche ganzen Tag eine Jquery Accordion menü in WordPress einzubinden. Geschaft habe ich zwar schon aber jedesmal wenn ich Seite wechsele klappt sich die menüs zu. Wie kann ich das schaffen das die Aktuelle Unterseite im menü aufgeklappt ist?

    Hier der Code:

    function initMenus() {
    $('.children', this).hide();
    $('ul.menu ul').hide();
    $.each($('ul.menu'), function(){
    $('.children li').show();
    $('#' + this.id + '.children current_page_parent li').show();
    });

    $('ul.menu li a').click(
    function() {
    var checkElement = $(this).next();
    var parent = this.parentNode.parentNode.id;

    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#' + parent + ' ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
    return false;
    }
    }
    );
    }

    Dazugehörige HTML code.

    ul id="menu" class="menu"
    li class="page_item page-item-91" a href="http://xyz.com/">Home/li
    li class="page_item page-item-116" a href="http://xyz.com/info/">Über uns
    li class="page_item page-item-124" a href="http://xyz.com/strategie/">strategie
    ul class='children'>

    li class="page_item page-item-158" a href="http://xyz.com/strategie/kriterien/"> Kriterien
    li class="page_item page-item-163 current_page_item" a href="http://xyz.com/strategie/branchen/">Branchen Fokus/a /li
    li class="page_item page-item-165"><a href="http://xyz.com/strategie/ansatz/&quot; Ansatz
    /li>
    /ul>

    Vielen dank

  11. mrboob sagt:

    Danke Frank, hier Demo Link http://bit.ly/bdJD21 menü punkte Team und Strategie sind klappbar.Danke

    • @mrboob: du musst die klasse current_page_parent ansprechen und ebenfalls die children davon, also .current_page_parent, .current_page_parent .children. Hier siehst du aktuell gerade ein Beispiel, JS kannst du einsehen, ist ja abrufbar.

  12. mrboob sagt:

    Jaaa, hats geklappt, Danke für deine tip Frank und einen schönen Nacht

  13. A.U. sagt:

    Gute Einleitung.
    Habe aber zu "Die Verwendung des $" noch folgenden Hinweis gefunden, der evtl. machem helfen könnte.

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