Come includere correttamente gli effetti jquery-ui su wordpress

Question

Come includere correttamente gli effetti jquery-ui su wordpress

26

65973 2011-01-18

Ho cercato diincludereglieffetti dell'interfaccia utentejquery (più specificamente l'effetto shake)nelmiotema wordpress.Finora,sono statoin grado diincludere solo lo scriptjQuery,manon ho davveroidea di doveposizionaregli script dell'interfaccia utentee come accodarli.

Questo èil codice che ho.Ovviamentenonfunziona:

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

Grazieperiltuo aiuto!

I've been trying to include the jquery ui effects (more specifically the shake effect) on my wordpress theme. So far, I've only been able to include the jQuery script, but I really have no clue where to place the ui scripts and how to enqueue them.

This is the code I have. It obviously doesnt work:

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

Thanks for your help!

fonte
dabito

- Unanota:non dovresti averbisogno di accodarejquery,perché ègiàelencato come una dipendenza dijquery-ui-core.
  
  One note: you shouldn't need to enqueue jquery, because its already listed as a dependency of jquery-ui-core.
  - 5
  - 2011-01-19
  - goldenapples

6 risposta

voti

- 8
- 2011-01-18
@dabito,

Non stai caricando correttamentei tuoi script ... Non chiamare wp_enqueue_script() all'interno delfile delmodello deltema (sembra che sia header.php).Devi chiamare questafunzione da un hook separato.

Nelfile functions.php deltuotema,inserisciil seguente codice:

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

Seentrambigli script sono registrati correttamente,questo dovrebbe caricarli correttamente (aggiungendoi tag <script /> appropriatinell'intestazione. L'altro codice JavaScript dovrebbefunzionare.

Se desideri aggiungere script al lato admin delle cose,aggiungiinvece latua azione a admin_enqueue_scripts.
@dabito,

You're not loading your scripts right ... Don't call wp_enqueue_script() inside your theme template file (this looks like it's header.php). You need to call this function from a separate hook.

In your theme's functions.php file, place the following code:

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

If both scripts are properly registered, this should load them just fine (by adding the appropriate <script /> tags in the header. Then your other JavaScript code should work.

If you want to add scripts to the admin side of things, add your action to admin_enqueue_scripts instead.
- fonte
- EAMann
- Nonesattamente vero.Finché li chiamaprima della chiamata wp_head (),dovrebbefunzionarebene.Non devonoessere agganciati,e non dovrebbero comunqueessere agganciati ainit.Se haiintenzione di collegarli da qualcheparte,collegali all'action hook 'wp_enqueue_scripts'.Ecco a cosa serve.
  
  Not exactly true. As long as he's calling them before the wp_head() call, that should work fine. They don't have to be hooked, and they shouldn't be hooked to init anyway. If you're going to hook them somewhere, hook them to the 'wp_enqueue_scripts' action hook. That's what it's there for.
  - 1
  - 2011-01-19
  - Otto
- @Otto Quello che hai detto sembra logico.Ma hai una spiegazione delperchénel codice c'è scritto quello che ha scritto @EAMann - "Usa l'azioneinit per chiamare questafunzione"?Eil suoesempio èpreso da lì ... http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  
  @Otto What you said sounds logical. But do you have an explanation why in the codex it says what @EAMann wrote - "Use the init action to call this function."? And his example is taken from there... http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  - 1
  - 2011-02-14
  - Lea Cohen
- Il codice è casualein alcunipunti.L'azionemigliore da utilizzareper questo è "wp_enqueue_scripts"perilfront-end o "admin_enqueue_scripts"perilback-end.L'aggancio ainit funzionerà,ma accoderàinutilmente lo script sull'intero sito.
  
  The codex is haphazard in places. The best action to use for this is 'wp_enqueue_scripts' for the front end, or 'admin_enqueue_scripts' on the back end. Hooking to init will work, but it will needlessly enqueue the script over the entire site.
  - 0
  - 2011-02-14
  - Otto
- Ho aggiornato di conseguenzailmioframmento di codice.In origineera una reazione rapidae visceralebasata sul riferimento al Codex ... usare `wp_enqueue_scripts` è sicuramenteilmodomiglioreperprocedereedevita di richiedere un controllo aggiuntivo di`is_admin () `.
  
  I've updated my code snippet accordingly. It was originally a quick, gut reaction based on the Codex reference ... using `wp_enqueue_scripts` is definitely the better way to go and avoids requiring an extra `is_admin()` check.
  - 0
  - 2011-02-14
  - EAMann
- Questo è ancheilmodo sbagliato:i plug-in delleprestazioni devono conoscere le dipendenze.L'autore dovrebbe scrivereilpropriofile .jse accodarloe nominare le dipendenze: WordPressgestiràil resto.
  
  This is also the wrong way - performance plugins need to know the dependencies. Author should write their own .js file and enqueue that and name the dependencies - WordPress will handle the rest.
  - 0
  - 2017-04-27
  - Dave Hilditch
- 8
- 2011-01-19
Puoi anche accodare l'interainterfaccia utente dijQuery direttamente da Google.Ecco come lofaccio:

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

EpoichéjQuery èelencato come dipendenzaperjQuery UI,non ènecessario accodarlomanualmente.WordPress lofarà automaticamenteperte.
You can also enqueue the whole jQuery UI directly from Google. This is how I do it:

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

And since jQuery is listed as a dependency for jQuery UI, you don't need to manually enqueue it. WordPress will do it automatically for you.
- Puoipersino [caricaretutte le libreriejQuery dal CDN di Google] (http://wordpress.stackexchange.com/questions/441/how-to-link-external-jquery-javascript-files-with-wordpress/447#447)invece deltuo sito.
  
  You can even [load all jQuery libs from the Google CDN](http://wordpress.stackexchange.com/questions/441/how-to-link-external-jquery-javascript-files-with-wordpress/447#447) instead of your own site.
  - 3
  - 2011-01-21
  - Jan Fabry
- Sconsiglio vivamente di caricare script dafontiesterne.L'hofattoper unbelpo 'ditempoe (raramente) è successo che l'hostfosseinattivo,quindipiù clienti hanno avutoproblemi con le loropagine contemporaneamente.
  
  I would highly discourage from loading scripts from foreign sources. I did that quite a long time and it (rarely) happened that the host was down, so multiple customers had problems with their pages at once.
  - 0
  - 2014-05-24
  - Julian F. Weinert
- @ JulianF.Weinert è un'arma a doppiotaglio,con unbuon cdn significaminore latenzamamancanza di controllo sefallisce.Detto questo,seil cdn di Google siinterrompemetà di Internetfallirà,quindiiltuonon sarà l'unico.Leprobabilità che siainattivoe nonmemorizzatonella cache sulbrowser di un utente sonotuttavia scarse.Per lamaggiorparte delle situazioni l'utilizzo di un cdn è un vantaggio.
  
  @JulianF.Weinert it's a double edged sword, with a good cdn means lower latency but lack of control if it fails. That said, if the Google cdn goes down half the Internet will fail so yours will not be the only one. The chances it will be down and not cached on a users browser is slim though. For most situations using a cdn is a benefit.
  - 1
  - 2016-07-10
  - Alex
- Vero.Non stavoparlando di un CDNin piena regola,il che,ovviamente,andrebbe assolutamentebene qui,poiché èprogettatoesattamenteper quell'uso.Il caricamento di script da qualsiasijohn-doe.com è unpo 'rischioso,penso
  
  True. I wasn't talking about a full blown CDN, which, of course, would be absolutely fine here, since it's designed for exactly that usage. Loading scripts from any john-doe.com ist a bit risky though, I think
  - 0
  - 2016-07-10
  - Julian F. Weinert
- 3
- 2011-01-18
Non sembraesserci un caricamentopredefinitoper questa libreriajQuery (elenco completo qui ) quindiprobabilmente dovrai registrare lo scriptprima di accodarlo.

There doesn't appear to be a default load for this jQuery library (full list here) so you'll likely have to register the script before you enqueue it.
- fonte
- editor
- Pensavo avessi ragione (a voltei nomi con cui WP registragli script sono diversi dainomi standard usati)main questo caso la registrazione di "jquery-ui-core" dovrebbefunzionare.Èelencatoin http://core.trac.wordpress.org/browser/branches/3.0/wp-includes/script-loader.php#L121
  
  I thought you might be right (sometimes the names WP registers scripts under are different than the standard names used) but in this case registering 'jquery-ui-core' should work. Its listed in http://core.trac.wordpress.org/browser/branches/3.0/wp-includes/script-loader.php#L121
  - 1
  - 2011-01-19
  - goldenapples
- Buonpunto!Hopensato che volesse caricare * solo * quella libreriajQuery,nel qual caso caricareil resto sarebbe stato unpo 'gonfio.
  
  Good point! I assumed he wanted to load *only* that jQuery library, in which case loading the rest would be a bit bloaty.
  - 0
  - 2011-01-19
  - editor
- 3
- 2011-08-24
Solo alcuni suggerimenti.Quandometti in codailtuo script,viene accodatoper l'intero sitoinclusoilpannello di amministrazione.Senon vuoi lo scriptnelpannello di amministrazione,puoiincluderli soloperil sitonelfrontend.

function my_add_frontend_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); } add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
Just a little tips. When you enqueue your script, it enqueues for the whole site including admin panel. If you don't want the script in the admin panel, you can only include them for the site in 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');
- fonte
- Tareq
- Non dovresti usare l'hookinit perfare l'accodamento.Utilizza l'hook wp_enqueue_scripts soloperilfront-end o l'hook admin_enqueue_scriptsperilback-end.
  
  You shouldn't use the init hook to do enqueueing. Use the wp_enqueue_scripts hook for the front end only or the admin_enqueue_scripts hook for the back end.
  - 4
  - 2011-08-24
  - Otto
- Non sapevo che l'azione `wp_enqueue_scripts` è soloperilfront-end.Grazie :)
  
  Didn't know that `wp_enqueue_scripts` action is only for front end. Thanks :)
  - 0
  - 2011-08-24
  - Tareq
- 0
- 2017-04-27
Tutte le risposte qui,mentrefunzionano,sonotecnicamente sbagliate.

Ilmodo correttoperincluderejquery-uie altre librerie èincluderle come dipendenze deltuo script.

Questo èimportante,perchégli strumentiper leprestazionipossono controllare queste dipendenzeper alterare l'ordine di caricamento degli scripte ottimizzareil sito.

Quindi,se vuoi usarejquerye jquery-ui,creailtuofile di script .jse accodaloin questomodo,con le dipendenzeelencate -non c'èbisogno di un comando di accodamento separatoper ogni libreria che stai usando:

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

Puoitrovare unelenco dituttigli script disponibili da aggiungere come dipendenze qui: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
All the answers here, whilst they work, are technically wrong.

The correct way to include jquery-ui and other libraries is to include them as dependencies of your own script.

This is important, because performance tools may check these dependencies to alter the loading order of your scripts to optimise the site.

So, if you want to use jquery and jquery-ui, create your own .js script file and enqueue it like this, with dependencies listed - no need for a separate enqueue command for each library you're using:

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

You can find a list of all the available scripts to add as dependencies here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
- Hai ragione.L'uso delle dipendenzenelleproprie chiamate wp_enqueue_script èilmodo correttoperincluderejquery/jquery-ui/ecc.Non c'èbisogno di accodarli separatamente.
  
  You have it right. Using dependencies in your own wp_enqueue_script calls is correct way to include jquery/jquery-ui/etc. Theres no need to enqueue them separately.
  - 1
  - 2017-05-08
  - Michae Pavlos Michael
- E se limetti in coda separatamente quandoiltuo script dipende da loro,iltuo scriptpotrebbe/nonfunzionerà su siti che ottimizzano leprestazioni,ades.segli script sono combinatiin uno scriptper velocizzareil caricamento,o se sono differiti o ridotti aicona (dipende dallaminifcationma l'ordinepuò cambiare).Senon hai detto a WordPress cheiltuo script dipende da altri script,nonpuoigarantire l'ordinein cui verranno caricati.
  
  And if you enqueue them separately when your script depends on them, your script may/will break on sites that optimise performance - e.g. if scripts are combined into one script to speed up loading, or if they are deferred or minimized (depends on minifcation but the order can change). If you haven't told WordPress that your script depends on other scripts, you cannot guarantee the order in which they will load.
  - 0
  - 2017-05-10
  - Dave Hilditch

Otto · Accepted Answer · 2011-01-19

37

2011-01-19

Sebbene WordPressincluda le libreriejQuery UI,noninclude la libreria UI/Effetti.Quella libreria è separatae autonoma.Dovraiincludere una copia delfileeffects.core.jse accodarlo separatamente.

Nota che dovresti chiamarlojquery-effects-core quando lometti in coda,per la coerenza deinomi.

Puoiincluderloin questomodo:

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

Modifica : questa risposta è stata scrittaprima di WordPress 3.3,che orainclude le varie librerie dieffetti comeparte del core.Puoi semplicemente accodarei pezzi della libreria deglieffetti che devi usare ora.

L'elenco degli slugper questifilepuòesseretrovatoin wp-includes/script-loader.php,ma lo slug del core èjquery-effects-core.

 wp_enqueue_script("jquery-effects-core");

While WordPress does include the jQuery UI libraries, it does not include the UI/Effects library. That library is separate and standalone. You'll need to include a copy of the effects.core.js file and enqueue it separately.

Note that you should name it jquery-effects-core when en-queuing it, for naming consistency.

You can include it like this:

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

Edit: This answer was written before WordPress 3.3, which now includes the various effects libraries as part of core. You can simply enqueue the pieces of the effects library that you need to use now.

The list of slugs for these files can be found in wp-includes/script-loader.php, but the core's slug is jquery-effects-core.

wp_enqueue_script("jquery-effects-core");

fonte
Otto

Tienipresente cheper uneffetto reale (cieco,rimbalzo,dissolvenza,..) devi accodare quell'effettoesplicitamente.Comeper 'fade': `wp_enqueue_script ('jquery-effects-fade');`

Be aware that for an actual effect (blind, bounce, fade, ..) you have to enqueue that effect explicitly. Like for 'fade': `wp_enqueue_script( 'jquery-effects-fade' );`
- 1
- 2017-02-10
- SunnyRed
L'utente dovrebbeposizionareilproprio Javascriptin unfile separatoe quindi accodare quelfileedelencare le dipendenze di cui habisogno.In questomodo,WordPress (ei plug-inper leprestazioni) conoscono l'ordine richiestoper caricare questi scripte liposizionerannonell'ordine corretto sullapagina.

The user should be placing their own Javascript into a separate file and then enqueueing that file and listing the dependencies it needs. That way, WordPress (and performance plugins) know the order required to load these scripts and will place them in the correct order on the page.
- 0
- 2017-04-27
- Dave Hilditch