Tout savoir sur WordPress
Tutoriel WordPress

Ajouter un fichier JavaScript en fonction d’un shortcode

Cette astuce vous montre la démarche à suivre pour ajouter un fichier JavaScript de façon optimiser et propre en fonction d’un shortcode WordPress.

Le but de cette astuce est d’optimiser l’insertion d’un script JavaScript en fonction d’un shortcode. Au lieu d’ajouter notre fichier dans tous les articles, nous allons voir s’il est possible de détecter que le shortcode qui a besoin de ce script a été inséré ou non. Cela évitera d’alourdir la page avec du code inutile.

Jusqu’à présent, nous ajoutons le script soit dans un shortcode, soit dans le header de la page :

  • si je n’utilise pas de shortcode, le javascript sera quand même chargé, dommage …
  • si j’insère 100 shortcodes, le script sera inclus 100 fois, ouille !

Alors j’ai ma solution : charger le fichier monscript.js que si j’utilise le shortcode dans mon article. Pour cela, on utilise la regex du shortcode WordPress. Vous trouverez ci-dessous le code qui va vérifier que le shortcode [ gallery ] a été utilisé :

function baw_enqueue_my_script() {
   
 global $post;
    if( !$post ) return;
    $matches = array();
    $pattern = get_shortcode_regex();
    preg_match_all( '/' . $pattern . '/s', $post->post_content, $matches );
    foreach( $matches[2] as $value ) {
        if( $value == 'gallery' ) {
            wp_enqueue_script( 'gallery', 'http://cdn.truc.fr/monscript.js', null, '1.0', true );
            break;
        }
    }

}
add_action( 'wp_print_scripts', 'baw_enqueue_my_script' );

Vous n’avez plus qu’à utiliser le shortcode [ gallery ] où vous voulez dans un post/page et le script sera ajouté quand il faut de façon optimisé.

Cet article a été mis à jour il y a 2359 jours - Il n'est peut être plus à jour !

Article écrit par Julio P.

Co-fondateur de WP Media, la startup Lyonnaise qui a créé WP Rocket et Imagify, Julio Potier est un Expert WordPress, un Formateur Expérimenté et un Consultant en Sécurité Web.

Il aime partager ses compétences et ses réflexions sur WordPress, donnant des conférences partout dans le monde.

9 Commentaires

  1. « Mon livre de chevet ? Le codex WordPress bien sur ! »

    on le trouve ou ce fameux livre à part sur le net??

    Merci pour le tuto

  2. Effectivement pas con comme technique ! J’utilisai un truc similaire mais moins propre. J’appelais un add_action(‘wp_footer’, ‘your_function’); dans la fonction du shortcode. ça fonctionnait bien mais évidement on ne pouvait pas passer par la méthode « wp_enqueue_script ».

    Bref, je met de coté ;)

  3. « on ajoute X fois le code pour X shortcodes »

    Ah ? De mon coté ça n’a toujours embarqué qu’une seule fois la fonction. Étant donné que l’action wp_footer est « liée » à ma fonction. Et quand bien même ça l’embarquerait plusieurs fois, il suffirait de placer placer un remove_action juste avant l’appel du add_action …. non ?

    Bon de toute manière le but c’est bien de pouvoir utiliser wp_enqueue_script, ce qui permet d’utiliser derrière des plugins de compression JS ou de vérifier/embarquer automatiquement les librairies dont il dépend :)

  4. Salut Kenny
    Même chose, je faisais ça aussi, mais comme on enqueue pas, on ajoute X fois le code pour X shortcodes, là ça fait mal …
    Donc je me suis dit « c’est le moment de détecter les shortcodes » !

  5. Oui je mélange avec mon astuce suivante sur le tweet embarqué (qui était à la base liée à celle ci).
    Si tu la lis, tu verras que tweeter insère un , logique, c’est pas du WordPress. Donc dans ce cas on ajoute le code X fois.

Praesent neque. felis nec accumsan vel, consectetur ipsum