web-dev-qa-db-fra.com

Comment inclure correctement les effets jquery-ui sur wordpress

J'ai essayé d'inclure les effets jquery ui (plus spécifiquement l'effet shake) sur mon thème wordpress. Jusqu'à présent, je n'ai pu inclure que le script jQuery, mais je ne sais vraiment pas où placer les scripts ui ni comment les mettre en file d'attente.

C'est 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!

jquerywp-enqueue-script
24
dabito

Bien que WordPress inclue les bibliothèques de l'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 le mettre en file d'attente séparément.

Notez que vous devez le nommer jquery-effects-core lorsque vous le mettez en file d'attente, pour nommer la cohérence.

Vous pouvez l'inclure comme ceci:

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

Éditer : 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 éléments de la bibliothèque d'effets que vous devez utiliser maintenant.

La liste des slugs pour 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");
35
Otto

@dabito,

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

Dans le fichier functions.php 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 correctement (en ajoutant les balises <script /> appropriées dans l'en-tête. Votre autre code JavaScript devrait alors fonctionner.

Si vous souhaitez ajouter des scripts au côté admin , ajoutez votre action à admin_enqueue_scripts à la place.

8
EAMann

Vous pouvez également mettre en file d'attente toute l'interface utilisateur jQuery directement auprès de 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 comme jQuery est répertorié en tant que dépendance pour l'interface utilisateur de jQuery, vous n'avez pas besoin de le mettre en file d'attente manuellement. WordPress le fera automatiquement pour vous.

7
Rodrigo Sieiro

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.

3
editor

Juste un petit conseil. Lorsque vous mettez votre script en file d'attente, il met en file d'attente l'ensemble du site, y compris le panneau d'administration. Si vous ne voulez pas le script dans le panneau d'administration, vous pouvez uniquement les inclure pour le site dans l'interface.

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

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
3
Tareq

Toutes les réponses ici, pendant qu'elles fonctionnent, sont techniquement fausses.

La bonne façon d'inclure jquery-ui et d'autres bibliothèques est de les inclure en tant que dependencies 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.

Ainsi, 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. Aucune commande de mise en file d'attente séparée n'est requise 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 comme dépendances ici: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

0
Dave Hilditch