Cum de a include corect efectele jquery-ui pe wordpress (WordPress, Jquery, Wp Enqueue Script)

dabito a intrebat.

Am încercat să includ efectele jquery ui (mai exact efectul de scuturare) pe tema mea wordpress. Până acum, am reușit să includ doar scriptul jQuery, dar chiar nu am nici o idee unde să plasez scripturile ui și cum să le pun în coadă.

Acesta este codul pe care îl am. Evident că nu funcționează:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

Mulțumesc pentru ajutor!

Comentarii

  • O notă: nu ar trebui să fie nevoie să pui în coadă jquery, deoarece este deja listat ca dependență de jquery-ui-core. –  > Por goldenapples.
6 răspunsuri
Otto

Deși WordPress include bibliotecile jQuery UI, nu include biblioteca UI/Effects. Acea bibliotecă este separată și de sine stătătoare. Va trebui să includeți o copie a fișierului effects.core.js și să o puneți în coadă separat.

Rețineți că ar trebui să îl numiți jquery-effects-core atunci când îl puneți în coadă, pentru consecvența denumirii.

Îl puteți include astfel:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

Editați: Acest răspuns a fost scris înainte de WordPress 3.3, care acum include diferitele biblioteci de efecte ca parte a nucleului. Puteți pur și simplu să puneți în coadă piesele din biblioteca de efecte pe care trebuie să le utilizați acum.

Lista de slug-uri pentru aceste fișiere poate fi găsită în wp-includes/script-loader.php, dar slug-ul nucleului este jquery-effects-core.

wp_enqueue_script("jquery-effects-core");

Comentarii

  • Rețineți că, pentru un efect real (blind, bounce, fade, ..), trebuie să puneți în coadă acest efect în mod explicit. Cum ar fi pentru „fade”: wp_enqueue_script( 'jquery-effects-fade' ); –  > Por SunnyRed.
  • Utilizatorul ar trebui să își plaseze propriul Javascript într-un fișier separat și apoi să pună în coadă acel fișier și să listeze dependențele de care are nevoie. În acest fel, WordPress (și pluginurile de performanță) cunosc ordinea necesară pentru a încărca aceste scripturi și le vor plasa în ordinea corectă pe pagină. –  > Por Dave Hilditch.
Rodrigo Sieiro

Puteți, de asemenea, să puneți în coadă întreaga interfață jQuery UI direct de la Google. Iată cum fac eu acest lucru:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

Și din moment ce jQuery este listat ca o dependență pentru jQuery UI, nu trebuie să îl puneți manual în coadă. WordPress o va face automat pentru dvs.

Comentarii

  • Puteți chiar să încărcați toate librăriile jQuery de pe Google CDN în loc de propriul site. –  > Por Jan Fabry.
  • Aș descuraja foarte mult să încărcați scripturi din surse străine. Am făcut asta destul de mult timp și (rar) s-a întâmplat ca gazda să nu funcționeze, astfel încât mai mulți clienți au avut probleme cu paginile lor deodată. –  > Por Julian F. Weinert.
  • @JulianF.Weinert este o sabie cu două tăișuri, cu un cdn bun înseamnă latență mai mică, dar lipsă de control dacă acesta dă greș. Acestea fiind spuse, dacă cdn-ul Google pică jumătate din Internet va pica, așa că al tău nu va fi singurul. Șansele ca acesta să nu funcționeze și să nu fie stocat în memoria cache în browserul unui utilizator sunt totuși mici. Pentru majoritatea situațiilor, utilizarea unui cdn este un avantaj. –  > Por Alex.
  • Adevărat. Nu mă refeream la un CDN complet, care, desigur, ar fi absolut în regulă în acest caz, deoarece este conceput exact pentru această utilizare. Încărcarea scripturilor de pe orice john-doe.com este totuși puțin riscantă, cred eu –  > Por Julian F. Weinert.
EAMann

@dabito,

Nu îți încarci scripturile corect … Nu apelați wp_enqueue_script() în interiorul fișierului de șablon al temei tale (se pare că acest lucru este header.php). Trebuie să apelați această funcție dintr-un cârlig separat.

În fișierul temei dvs. functions.php plasați următorul cod:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

Dacă ambele scripturi sunt înregistrate corect, acest lucru ar trebui să le încarce foarte bine (adăugând codul corespunzător <script /> în antet. Apoi, celălalt cod JavaScript al dvs. ar trebui să funcționeze.

Dacă doriți să adăugați scripturi la admin , adăugați acțiunea dvs. la admin_enqueue_scripts în locul acesteia.

Comentarii

  • Nu este chiar adevărat. Atâta timp cât le apelează înainte de apelul wp_head(), ar trebui să funcționeze bine. Nu trebuie să fie agățate și oricum nu ar trebui să fie agățate la init. Dacă aveți de gând să le agățați undeva, agățați-le la cârligul de acțiune ‘wp_enqueue_scripts’. Pentru asta este acolo. –  > Por Otto.
  • @Otto Ceea ce ai spus sună logic. Dar ai o explicație de ce în codex scrie ceea ce a scris @EAMann – „Folosiți acțiunea init pentru a apela această funcție.”? Și exemplul lui este luat de acolo… codex.wordpress.org/Function_Reference/wp_enqueue_script –  > Por Lea Cohen.
  • Codexul este dezordonat pe alocuri. Cea mai bună acțiune de utilizat pentru acest lucru este „wp_enqueue_scripts” pentru front-end, sau „admin_enqueue_scripts” pentru back-end. Conectarea la init va funcționa, dar va pune în coadă inutil scriptul pe întregul site. –  > Por Otto.
  • Mi-am actualizat fragmentul de cod în consecință. Inițial, a fost o reacție rapidă, instinctivă, bazată pe referința Codex … folosind wp_enqueue_scripts este, cu siguranță, cea mai bună cale de urmat și evită să necesite un element suplimentar is_admin() verificare. –  > Por EAMann.
  • Aceasta este, de asemenea, calea greșită – pluginurile de performanță trebuie să cunoască dependențele. Autorul ar trebui să scrie propriul fișier .js și să îl pună în așteptare și să numească dependențele – WordPress se va ocupa de restul. –  > Por Dave Hilditch.
editor

Nu pare să existe o încărcare implicită pentru această bibliotecă jQuery (lista completă aici), așa că va trebui probabil să înregistrați scriptul înainte de a-l pune în așteptare.

Comentarii

  • M-am gândit că s-ar putea să aveți dreptate (uneori, numele sub care WP înregistrează scripturile sunt diferite de numele standard utilizate), dar în acest caz, înregistrarea „jquery-ui-core” ar trebui să funcționeze. Este listat în core.trac.wordpress.org/browser/branches/3.0/wp-includes/… –  > Por goldenapples.
  • Bună observație! Am presupus că a vrut să încarce doar acea bibliotecă jQuery, caz în care încărcarea restului ar fi un pic cam stufoasă. –  > Por editor.
Tareq

Doar un mic sfat. Atunci când vă puneți scriptul în coadă, acesta se pune în coadă pentru întregul site, inclusiv pentru panoul de administrare. Dacă nu doriți scriptul în panoul de administrare, puteți să le includeți doar pentru site-ul din frontend.

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Comentarii

  • Nu ar trebui să folosiți cârligul init pentru a face enqueueing. Folosiți cârligul wp_enqueue_scripts doar pentru front-end sau cârligul admin_enqueue_scripts pentru back-end. –  > Por Otto.
  • Nu am știut că wp_enqueue_scripts acțiunea este doar pentru front end. Mulțumesc 🙂 –  > Por Tareq.
Dave Hilditch

Toate răspunsurile de aici, deși funcționează, sunt greșite din punct de vedere tehnic.

Modul corect de a include jquery-ui și alte biblioteci este de a le include ca dependencies ale propriului tău script.

Acest lucru este important, deoarece instrumentele de performanță pot verifica aceste dependențe pentru a modifica ordinea de încărcare a scripturilor dvs. pentru a optimiza site-ul.

Așadar, dacă doriți să utilizați jquery și jquery-ui, creați-vă propriul fișier de script .js și puneți-l în așteptare astfel, cu dependențele listate – nu este nevoie de o comandă enqueue separată pentru fiecare bibliotecă pe care o utilizați:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

Puteți găsi o listă cu toate scripturile disponibile pentru a le adăuga ca dependențe aici: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Comentarii

  • Ați înțeles bine. Utilizarea dependențelor în propriile apeluri wp_enqueue_script este modalitatea corectă de a include jquery/jquery-ui/etc. Nu este nevoie să le puneți în coadă separat. –  > Por Michae Pavlos Michael.
  • Și dacă le enqueuezi separat atunci când scriptul tău depinde de ele, scriptul tău se poate/se va strica pe site-urile care optimizează performanța – de exemplu, dacă scripturile sunt combinate într-un singur script pentru a accelera încărcarea sau dacă sunt amânate sau minimizate (depinde de minifiere, dar ordinea se poate schimba). Dacă nu i-ați spus lui WordPress că scriptul dvs. depinde de alte scripturi, nu puteți garanta ordinea în care acestea se vor încărca. –  > Por Dave Hilditch.