Comment inclure correctement les effets jquery-ui sur wordpress

25

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!

dabito
la source
5
Une remarque: vous ne devriez pas avoir besoin de mettre en file d'attente jquery, car il est déjà répertorié comme une dépendance de jquery-ui-core.
goldenapples

Réponses:

36

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");
Otto
la source
1
Sachez que pour un effet réel (aveugle, rebond, fondu, ..), vous devez mettre cet effet en file d'attente de manière explicite. Comme pour 'fondu':wp_enqueue_script( 'jquery-effects-fade' );
SunnyRed
L'utilisateur doit placer son propre Javascript dans un fichier séparé, puis mettre ce fichier en file d'attente et répertorier les dépendances dont il a besoin. De cette façon, WordPress (et les plugins de performances) connaissent l'ordre requis pour charger ces scripts et les placent dans le bon ordre sur la page.
Dave Hilditch
8

@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 à .

EAMann
la source
1
Pas exactement vrai. Tant qu'il les appelle avant l'appel à wp_head (), cela devrait fonctionner correctement. Ils n'ont pas besoin d'être accrochés, et ils ne devraient pas l'être de toute façon. Si vous allez les accrocher quelque part, accrochez-les au crochet d'action 'wp_enqueue_scripts'. C'est pour ça qu'il est là.
Otto
1
@Otto Ce que vous avez dit semble logique. Mais avez-vous une explication pourquoi, dans le codex, il est écrit ce que @EAMann a écrit - "Utilisez l'action init pour appeler cette fonction."? Et son exemple est tiré de là ... codex.wordpress.org/Function_Reference/wp_enqueue_script
Lea Cohen
Le codex est aléatoire par endroits. La meilleure action à utiliser pour cela est «wp_enqueue_scripts» pour le front-end, ou «admin_enqueue_scripts» sur le back-end. Accrocher à init fonctionnera, mais il mettra inutilement le script en file d'attente sur l'ensemble du site.
Otto
J'ai mis à jour mon extrait de code en conséquence. C'était à l'origine une réaction rapide et instinctive basée sur la référence Codex ... l'utilisation wp_enqueue_scriptsest certainement la meilleure façon de procéder et évite d'exiger une is_admin()vérification supplémentaire .
EAMann
C'est également la mauvaise façon - les plugins de performances doivent connaître les dépendances. L'auteur doit écrire son propre fichier .js et le mettre en file d'attente et nommer les dépendances - WordPress s'occupera du reste.
Dave Hilditch
7

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.

Rodrigo Sieiro
la source
3
Vous pouvez même charger toutes les bibliothèques jQuery à partir du CDN Google au lieu de votre propre site.
Jan Fabry
Je déconseillerais fortement de charger des scripts à partir de sources étrangères. Je l'ai fait assez longtemps et il est (rarement) arrivé que l'hôte soit en panne, donc plusieurs clients ont eu des problèmes avec leurs pages à la fois.
Julian F. Weinert
1
@ JulianF.Weinert c'est une épée à double tranchant, avec un bon cdn signifie une latence plus faible mais un manque de contrôle en cas d'échec. Cela dit, si le cdn de Google tombe en panne, la moitié d'Internet échouera et le vôtre ne sera pas le seul. Les chances qu'il soit en panne et non mis en cache sur le navigateur d'un utilisateur sont cependant minces. Pour la plupart des situations, l'utilisation d'un cdn est un avantage.
Alex
Vrai. Je ne parlais pas d'un CDN complet, ce qui, bien sûr, serait tout à fait correct ici, car il est conçu exactement pour cette utilisation. Le chargement de scripts à partir de n'importe quel john-doe.com est un peu risqué cependant, je pense
Julian F. Weinert
3

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.

éditeur
la source
1
Je pensais que vous aviez raison (parfois les noms sous lesquels WP enregistre les scripts sont différents des noms standard utilisés) mais dans ce cas, l'enregistrement de 'jquery-ui-core' devrait fonctionner. Son répertorié dans core.trac.wordpress.org/browser/branches/3.0/wp-includes/…
goldenapples
Bon point! J'ai supposé qu'il voulait charger uniquement cette bibliothèque jQuery, auquel cas charger le reste serait un peu lourd.
éditeur
3

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');
Tareq
la source
4
Vous ne devez pas utiliser le hook init pour effectuer la mise en file d'attente. Utilisez le hook wp_enqueue_scripts pour le frontal uniquement ou le hook admin_enqueue_scripts pour le backend.
Otto
Je ne savais pas que l' wp_enqueue_scriptsaction est uniquement pour le front-end. Merci :)
Tareq
0

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/

Dave Hilditch
la source
1
Vous avez raison. L'utilisation de dépendances dans vos propres appels wp_enqueue_script est une manière correcte d'inclure jquery / jquery-ui / etc. Il n'est pas nécessaire de les mettre en file d'attente séparément.
Michae Pavlos Michael
Et si vous les mettez en file d'attente séparément lorsque votre script en dépend, votre script peut / se cassera sur des sites qui optimisent les performances - par exemple, si les scripts sont combinés en un seul script pour accélérer le chargement, ou s'ils sont différés ou minimisés (dépend de la minifcation mais l'ordre peut changer). Si vous n'avez pas dit à WordPress que votre script dépend d'autres scripts, vous ne pouvez pas garantir l'ordre dans lequel ils se chargeront.
Dave Hilditch