Comment inclure correctement les effets jquery-ui sur wordpress

Question

Comment inclure correctement les effets jquery-ui sur wordpress

26

65973 2011-01-18

J'aiessayé d'inclure leseffetsjquery ui (plus spécifiquement l'effet shake) surmonthème wordpress.Jusqu'àprésent,je n'aipuinclure que le scriptjQuery,maisje ne sais vraimentpas oùplacer les scripts d'interface utilisateuret comment lesmettreen file d'attente.

Voici le code quej'ai.Celane fonctionne évidemmentpas:

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

Mercipour votre aide!

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!

- Unenote: vousne devriezpas avoirbesoin demettrejqueryen file d'attente,carilest déjà répertorié comme une dépendance dejquery-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 réponses

votes

- 8
- 2011-01-18
@dabito,

Vousne chargezpas vos scripts correctement ... N'appelezpas wp_enqueue_script() à l'intérieur de votrefichier demodèle dethème (cela ressemble à header.php).Vous devez appeler cettefonction àpartir d'un hook séparé.

Dans lefichier functions.php de votrethème,placez le code suivant:

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

Si les deux scripts sont correctementenregistrés,cela devrait les charger correctement (en ajoutant lesbalises <script /> appropriées dans l'en-tête. Ensuite,votre autre code JavaScript devraitfonctionner.

Si vous souhaitez ajouter des scripts du côté admin des choses,ajoutezplutôt votre action à 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.
- Pasexactement vrai.Tant qu'il les appelle avant l'appel wp_head (),cela devraitfonctionner correctement.Ilsn'ontpasbesoin d'être accro,et ilsne devraientpas être accro àinit detoutefaçon.Si vous allez les accrocher quelquepart,accrochez-les au hook d'action 'wp_enqueue_scripts'.C'estpour ça qu'ilest là.
  
  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 Ce que vous avez dit semble logique.Mais avez-vous uneexplicationpourquoi dans le codexilest dit ce que @EAMann a écrit - "Utilisez l'actioninit pour appeler cettefonction."?Et sonexempleestpris àpartir de 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
- Le codexest aléatoireparendroits.Lameilleure action à utiliserpour celaest «wp_enqueue_scripts»pour lefront-end,ou «admin_enqueue_scripts»pour leback-end.L'accrochage àinit fonctionnera,maisilmettrainutilement le scripten file d'attente sur l'ensemble du site.
  
  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
- J'aimis àjourmonextrait de codeen conséquence.C'était à l'origine une réaction rapideet instinctivebasée sur la référence Codex ... utiliser `wp_enqueue_scripts`est certainement lameilleurefaçon deprocéderet évite de demander une vérification supplémentaire de`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
- Cen'estpasnonplus lebonmoyen - lesplugins deperformance doivent connaître les dépendances.L'auteur doit écrire sonproprefichier .jset lemettreen file d'attenteet nommer les dépendances - WordPress se chargera du reste.
  
  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
Vouspouvez égalementmettreen file d'attente l'intégralité de l'interface utilisateurjQuery directement depuis Google.Voici commentje fais:

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

EtpuisquejQueryest répertorié comme une dépendancepour l'interface utilisateurjQuery,vousn'avezpasbesoin de lemettremanuellementen file d'attente.WordPress lefera automatiquementpour vous.
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.
- Vouspouvezmême [chargertoutes lesbibliothèquesjQuery àpartir du CDN Google] (http://wordpress.stackexchange.com/questions/441/how-to-link-external-jquery-javascript-files-with-wordpress/447#447)au lieu de votrepropre site.
  
  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
- Je déconseilleraisfortement de charger des scripts àpartir de sources étrangères.J'aifait ça assez longtempset il arrivait (rarement) que l'hôte soiten panne,doncplusieurs clients onteu desproblèmes avec leurspages à lafois.
  
  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 c'est une épée à doubletranchant,avec unbon cdn signifie une latenceplusfaiblemais unmanque de contrôleen cas d'échec.Cela dit,si le cdn de Googletombeen panne,lamoitié d'Internet échouera,le vôtrene sera doncpas le seul.Les chances qu'il soiten panneet nonmisen cache sur lenavigateur d'un utilisateur sont cependantminces.Pour laplupart des situations,l'utilisation d'un cdnest un avantage.
  
  @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
- Vrai.Jene parlaispas d'un CDN àpartentière,qui,bien sûr,conviendraitparfaitementici,carilest conçuexactementpour cet usage.Le chargement de scripts àpartir den'importe queljohn-doe.comest unpeu risqué,je pense
  
  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
Ilne semblepas y avoir de chargepar défautpour cettebibliothèquejQuery (liste complète ici ) vous devrezprobablement enregistrer le script avant de lemettreen file d'attente.

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.
- Jepensais que vous aviezpeut-être raison (parfois lesnoms des scripts de registres WP sont différents desnoms standards utilisés)mais dans ce cas,l'enregistrement de «jquery-ui-core» devraitfonctionner.Ilest répertorié dans 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
- Bonpoint!J'ai supposé qu'il voulait charger * seulement * cettebibliothèquejQuery,auquel cas le chargement du reste serait unpeugonflé.
  
  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
Juste quelques conseils.Lorsque vousmettez votre scripten file d'attente,ilestmisen file d'attentepour l'ensemble du site,y compris lepanneau d'administration.Si vousne voulezpas du script dans lepanneau d'administration,vousne pouvez lesinclure quepour le siteen 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');
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');
- Vousne devezpas utiliser le hookinit pourfaire lamiseen file d'attente.Utilisez le hook wp_enqueue_scriptspour lefront-end uniquement ou le hook admin_enqueue_scriptspour leback-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
- Jene savaispas que l'action `wp_enqueue_scripts`est uniquement destinée aufront-end.Merci :)
  
  Didn't know that `wp_enqueue_scripts` action is only for front end. Thanks :)
  - 0
  - 2011-08-24
  - Tareq
- 0
- 2017-04-27
Toutes les réponsesici,tant qu'ellesfonctionnent,sonttechniquementfausses.

Labonnefaçon d'inclurejquery-uiet d'autresbibliothèquesest de lesinclureen tant que dépendances de votrepropre script.

Ceciestimportant,car les outils deperformancepeuvent vérifier ces dépendancespourmodifier l'ordre de chargement de vos scripts afin d'optimiser le site.

Donc,si vous voulez utiliserjqueryet jquery-ui,créez votreproprefichier de script .jset mettez-leen file d'attente comme ceci,avec les dépendances répertoriées -pasbesoin d'une commande demiseen file d'attente distinctepour chaquebibliothèque que vous utilisez:

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

Vouspouveztrouver une liste detous les scripts disponibles à ajouteren tant que dépendancesici: 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/
- Vous avez raison.L'utilisation de dépendances dans vospropres appels wp_enqueue_scriptest unemanière correcte d'inclurejquery/jquery-ui/etc.Iln'estpasnécessaire de lesmettreen file d'attente séparément.
  
  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
- Et si vous lesmettezen file d'attente séparément lorsque votre scripten dépend,votre scriptpeut/va s'arrêter sur les sites qui optimisent lesperformances -parex.si les scripts sont combinésen un seul scriptpour accélérer le chargement,ou s'ils sont différés ouminimisés (dépend de laminifcationmais l'ordrepeut changer).Si vousn'avezpas dit à WordPress que votre script dépend d'autres scripts,vousne pouvezpasgarantir l'ordre dans lequelils se chargeront.
  
  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

Bien que WordPressinclut lesbibliothèques d'interface utilisateurjQuery,iln'inclutpas labibliothèque UI/Effects.Cettebibliothèqueest séparéeet autonome.Vous devrezinclure une copie dufichiereffects.core.jset lemettreen file d'attente séparément.

Notez que vous devez lenommerjquery-effects-core lors de samiseen file d'attente,pour la cohérence desnoms.

Vouspouvez l'inclure comme ceci:

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

Modifier : Cette réponse a été écrite avant WordPress 3.3,quiinclut désormais les différentesbibliothèques d'effets dans le cadre du core.Vouspouvez simplementmettreen file d'attente les éléments de labibliothèque d'effets que vous devez utilisermaintenant.

La liste des slugspour cesfichierspeut êtretrouvée dans wp-includes/script-loader.php,mais le slug dunoyauestjquery-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");

Sachez quepour uneffet réel (aveugle,rebond,fondu,..) vous devezexplicitementmettre ceteffet enfile d'attente.Commepour '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'utilisateur doitplacer sonpropre Javascript dans unfichier séparé,puismettre cefichieren file d'attenteet lister les dépendances dontil abesoin.De cettefaçon,WordPress (et lesplugins deperformance) connaissent l'ordre requispour charger ces scriptset lesplacera dans lebon ordre sur lapage.

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