Comment inclure correctement les effets jquery-ui sur wordpress

22

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 pour votre aide!

    
posée dabito 18.01.2011 - 23:49
la source

6 réponses

32

Alors que WordPress inclut 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 devez 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');

Modifier : 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 coeur est jquery-effects-core.

wp_enqueue_script("jquery-effects-core");
    
réponse donnée Otto 19.01.2011 - 02:52
la source
7

@dabito,

Vous ne chargez pas vos scripts correctement ... N'appelez pas wp_enqueue_script() à l'intérieur de votre fichier de modèle de thème (cela ressemble à 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 plutôt votre action à admin_enqueue_scripts .

    
réponse donnée EAMann 19.01.2011 - 00:06
la source
6

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 de l'interface utilisateur de jQuery, vous n'avez pas besoin de le mettre en file d'attente manuellement. WordPress le fera automatiquement pour vous.

    
réponse donnée Rodrigo Sieiro 19.01.2011 - 13:00
la source
3

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

    
réponse donnée editor 18.01.2011 - 23:51
la source
3

Juste un petit conseil. Lorsque vous mettez votre script en file d'attente, il le met en file d'attente pour l'ensemble du site, y compris le panneau d'administration. Si vous ne souhaitez pas que le script apparaisse 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');
    
réponse donnée Tareq 24.08.2011 - 17:45
la source
0

Toutes les réponses données ici, même si 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 dépendances de votre propre script.

Cela 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 distincte de mise en file d'attente n'est utilisée 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 trouverez une liste de tous les scripts disponibles à ajouter comme dépendances ici: enlace

    
réponse donnée Dave Hilditch 27.04.2017 - 09:24
la source

Lire d'autres questions sur les étiquettes