WordPress : script de mise en file d’attente pour un code court spécifique

J’ai créé des shortcodes et pour certains d’entre eux, j’ai besoin de charger des scripts particuliers à la demande.

J’ai inclus par défaut dans mon fichier function.php

vendor.js
myscript.js

Lorsque je charge le shortcode, je dois inclure un script séparé entre les deux ci-dessus (ce qui signifie que myscript.js nécessite que le nouveau script soit inclus avant qu’il ne fonctionne).

J’ai créé le shortcode comme ceci:

function callbackService()
{
    ob_start();    
    get_template_part('hg_custom_shortcodes/callback');
    return ob_get_clean();   
}
add_shortcode('callbackService', 'callbackService');

le modèle charge une application angulaire.

J’ai ensuite essayé de charger mon script (celui qui doit être inclus uniquement lorsque le shortcode est chargé) en remplaçant l’extrait ci-dessus par ceci :

function callbackService()
{
    ob_start();    
    wp_enqueue_script('angular-bundle', get_template_directory_uri() . '/scripts/angular-bundle.js', array(), false, true);
    get_template_part('hg_custom_shortcodes/callback');
    return ob_get_clean();   
}
add_shortcode('callbackService', 'callbackServhowever

Le script est inclus, mais je pense qu’il est inclus après myscript.jset tout le shortcode (application angulaire) ne fonctionne pas car « Angular n’est pas défini ».

Comment puis-je dire à la file d’attente de charger le script après ? Je sais que d’habitude je changerais la add_action()priorité, mais dans ce cas particulier, il n’y a rien add_actionà faire et je ne sais pas quoi essayer d’autre.

Aucune suggestion? Merci

Solution n°1 trouvée

Cela has_shortcodevous aiderait-il à résoudre votre problème ?

Sur le codex il y a un exemple,

Mettre en file d’attente un script lorsqu’un article utilise un shortcode

function custom_shortcode_scripts() {
    global $post;
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) {
        wp_enqueue_script( 'custom-script');
    }
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');

Solution n°2 trouvée

wp_enqueue_scriptne fonctionnera pas dans un shortcode, c’est à cause de l’ordre de chargement.

Vous pourriez utiliser wp_register_scriptet ensuite vous pourriez wp_enqueue_scriptdans votre fonction shortcode comme cet exemple :

// Front-end
function front_end_scripts() {
    wp_register_script( 'example-js', '//example.com/shared-web/js/example.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'front_end_scripts' );

Ensuite, vous utilisez ceci dans votre shortcode :

function example_shortcode() {

   wp_enqueue_script( 'example-js' );
   return; // dont forget to return something

}
add_shortcode( 'example-shortcode', 'example_shortcode' );

De plus, vous pouvez utiliser has_shortcodepour vérifier si un shortcode est chargé :

function custom_shortcode_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) {
    wp_enqueue_script( 'custom-script');
}
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');

Solution n°3 trouvée

On peut en effet charger conditionnellement des fichiers CSS et JS via un shortcode sans utiliser de fonctions trop élaborées :

Tout d’abord, supposons que nous ayons déjà enregistré tous nos fichiers CSS/JS (peut-être lors de leur wp_enqueue_scriptsexécution)

function prep_css_and_js() {
     wp_register_style('my-css', $_css_url);
     wp_register_script('my-js', $_js_url);
}
add_action( 'wp_enqueue_scripts', 'prep_css_and_js', 5 );

Ensuite, examinons notre fonction shortcode :

function my_shortcode_func( $atts, $content = null ) {
  if( ! wp_style_is( "my-css", $list = 'enqueued' ) ) { wp_enqueue_style('my-css'); }
  if( ! wp_script_is( "my-js", $list = 'enqueued' ) ) { wp_enqueue_script('my-js'); }
  ...
}

Simple. Fait.
Ergo : nous pouvons « charger conditionnellement » les fichiers css/js (uniquement lorsque [shortcode] s’exécute).

Considérons l’idéologie suivante :

• Nous voulons charger certains fichiers CSS/JS (mais uniquement lorsque le shortcode est déclenché)
• Peut-être que nous ne voulons pas que ces fichiers se chargent sur chaque page, ou pas du tout si le shortcode n’est pas utilisé sur une page/publication. (poids léger)
• Nous pouvons accomplir cela en nous assurant que WP enregistre TOUS les fichiers css/js avant d’appeler le shortcode et avant la mise en file d’attente.
• IE : Peut-être que pendant ma prep_css_and_js()fonction, je charge TOUS les fichiers .css/.js qui se trouvent dans certains dossiers…

Maintenant que WP les considère comme des scripts enregistrés, nous pouvons en effet les appeler, conditionnellement, en fonction d’une vérité de situations, y compris mais sans s’y limitermy_shortcode_func()

Avantages : (pas de MySQL, pas de fonctions avancées et pas de filtres nécessaires)

• c’est « WP orthodix », élégant, chargement rapide, facile et simple
• permet aux compilateurs/minificateurs de détecter de tels scripts
• utilise les fonctions WP (wp_register_style/wp_register_script)
• compatible avec plus de thèmes/plugins qui pourraient vouloir désenregistrer ces scripts pour une multitude de raisons.
• ne se déclenchera pas plusieurs fois
• très peu de traitement ou de code est impliqué

Références:

• https://codex.wordpress.org/Function_Reference/wp_script_is
• https://codex.wordpress.org/Function_Reference/wp_register_style
• https://codex.wordpress.org/Function_Reference/wp_register_script
• https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/