Façon correcte de mettre en file d'attente jquery-ui

8

J'ai du mal à inclure des scripts et des styles jquery-ui dans mon plugin. Il semble que mes wp_enqueue_scriptappels soient tout simplement ignorés.

Il y a déjà beaucoup de questions similaires à celle-ci, mais toutes les réponses que j'ai trouvées jusqu'à présent se résument à appeler wp_enqueue_scriptà l'intérieur du wp_enqueue_scriptscrochet d'action, ce que je fais déjà.

Dans le constructeur de ma classe j'appelle:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

puis, ci-dessous:

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

J'ai vérifié que le code est effectivement exécuté à chaque chargement de page. Cependant, les pages n'ont pas les <link>balises de la bibliothèque jquery-ui. J'ai déjà essayé avec et sans la jquerydépendance explicitement spécifiée dans le troisième argument des wp_enqueue_scriptappels.

J'ai également essayé avec une installation standard de WP 4.8 sans aucun plugin installé autre que le mien, et avec le thème par défaut de vingt-dix-sept uniquement. Pas de dé.

Qu'est ce qui ne va pas avec mon code?

Lucio Crusca
la source

Réponses:

20

Tout d'abord, WordPress enregistre l'interface utilisateur jQuery via wp_default_scripts(). Les dépendances sont déjà définies, vous n'avez donc qu'à mettre en file d'attente le script dont vous avez vraiment besoin (et non le noyau). Puisque vous ne modifiez pas le numéro de version ou quoi que ce soit, il est correct d'utiliser uniquement la poignée.

// no need to enqueue -core, because dependancies are set
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

Quant aux feuilles de style: WordPress n'enregistre pas les styles d'interface jQuery par défaut!

Dans les commentaires, butlerblog a souligné que selon les directives sur les plugins

L'exécution de code extérieur dans un plugin sans agir en tant que service n'est pas autorisée, par exemple:

  • Appeler des CDN tiers pour des raisons autres que l'inclusion de polices; tous les JavaScript et CSS non liés au service doivent être inclus localement

Cela signifie que le chargement des styles via CDN n'est pas autorisé et doit toujours être effectué localement. Vous pouvez le faire en utilisant wp_enqueue_style().

kero
la source
1
ps: le constructeur est. pas un endroit optimal . pour l'ajout de crochets,
birgire
1
Si vous allez soumettre votre plugin au dépôt wordpress.org, vous devez alors charger le CSS localement (voir: developer.wordpress.org/plugins/wordpress-org/… ).
butlerblog
1
@butlerblog Merci pour la contribution, j'ai mis à jour la réponse.
kero
3

Si vous mettez votre propre script en file d'attente, vous pouvez simplement ajouter 'jquery-ui-accordion', par exemple, à la liste des dépendances. Toutes les dépendances requises seront ajoutées automatiquement. Exemple:

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

Générera ce code:

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>
Greg Perham
la source
1

J'ai modifié votre script. essayez avec ça, ça marche.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}
umesh.nevase
la source
Malheureusement, dans mon cas, cela ne fonctionne pas.
Lucio Crusca
@LucioCrusca Veuillez voir ma réponse. Bien que WordPress enregistre les scripts d' interface utilisateur jQuery , il ne le fait pas pour les styles , vous devez le faire vous-même comme je l'ai montré
kero