Comment inclure correctement les effets jquery-ui sur wordpress

J'ai essayé d'inclure les effets jquery ui (plus précisément l'effet shake) sur mon thème wordpress. Jusqu'à présent, je n'ai pu inclure que le script jQuery, mais je n'ai vraiment aucune idée où placer les scripts d'interface utilisateur et comment les mettre en file d'attente.

Voici le code que j'ai. Cela ne fonctionne évidemment pas:

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

Merci de votre aide!

Bien que WordPress inclut les bibliothèques d'interface utilisateur jQuery, il n'inclut pas la bibliothèque d'interface utilisateur / effets. Cette bibliothèque est séparée et autonome. Vous devrez inclure une copie du fichier effects.core.js et la mettre en file d'attente séparément.

Notez que vous devez le nommer jquery-effects-core lors de la mise en file d'attente, pour une cohérence de dénomination.

Vous pouvez l'inclure comme ceci:

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

Edit : Cette réponse a été écrite avant WordPress 3.3, qui inclut désormais les différentes bibliothèques d'effets dans le noyau. Vous pouvez simplement mettre en file d'attente les morceaux de la bibliothèque d'effets que vous devez utiliser maintenant.

La liste des slugs de ces fichiers se trouve dans wp-includes / script-loader.php, mais le slug du noyau est jquery-effects-core.

wp_enqueue_script("jquery-effects-core");

@dabito,

Vous ne chargez pas vos scripts correctement ... N'appelez pas à l' wp_enqueue_script()intérieur de votre fichier de modèle de thème (cela ressemble à ça header.php). Vous devez appeler cette fonction à partir d'un crochet séparé.

Dans le functions.phpfichier de votre thè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 correctement enregistrés, cela devrait les charger très bien (en ajoutant les <script />balises appropriées dans l'en-tête. Ensuite, votre autre code JavaScript devrait fonctionner.

Si vous souhaitez ajouter des scripts au côté administrateur des choses, ajoutez admin_enqueue_scriptsplutôt votre action à .

Vous pouvez également mettre en file d'attente l'intégralité de l'interface utilisateur jQuery directement depuis Google. Voici comment je le 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');

Et puisque jQuery est répertorié en tant que dépendance pour l'interface utilisateur jQuery, vous n'avez pas besoin de le mettre en file d'attente manuellement. WordPress le fera automatiquement pour vous.

Il ne semble pas y avoir de charge par défaut pour cette bibliothèque jQuery (liste complète ici ), vous devrez donc probablement enregistrer le script avant de le mettre en file d'attente.

Juste quelques petits conseils. Lorsque vous mettez votre script en file d'attente, il se met en file d'attente pour l'ensemble du site, y compris le panneau d'administration. Si vous ne voulez pas du script dans le panneau d'administration, vous ne pouvez les inclure que pour le site en 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');

Toutes les réponses ici, alors qu'elles fonctionnent, sont techniquement erronées.

La bonne façon d'inclure jquery-ui et d'autres bibliothèques est de les inclure comme dépendances de votre propre script.

Ceci est important, car les outils de performance peuvent vérifier ces dépendances pour modifier l'ordre de chargement de vos scripts afin d'optimiser le site.

Donc, si vous souhaitez utiliser jquery et jquery-ui, créez votre propre fichier de script .js et mettez-le en file d'attente comme ceci, avec les dépendances répertoriées - pas besoin d'une commande de mise en file d'attente distincte pour chaque bibliothè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')
);

Vous pouvez trouver une liste de tous les scripts disponibles à ajouter en tant que dépendances ici: https://developer.wordpress.org/reference/functions/wp_enqueue_script/