Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos 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é :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
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' );
[/pastacode]
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é.
Article écrit par Julio P.
Youtube
Twitter
Facebook
9 Commentaires
“Mon livre de chevet ? Le codex WordPress bien sur !”
on le trouve ou ce fameux livre à part sur le net??
Merci pour le tuto
Euh c’est sur le net, mais je dors sur mon clavier moi :]
http://codex.wordpress.org
Je comprends c’est plus facile pour la mémorisation. ?:O)&
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é ;)
“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 :)
Ah oui je viens de voir, effectivement belle optimisation dans ce cas là !
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” !
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.
Génial ! C’est EXACTEMENT ce que je cherchais sur l’appel des js avec les shortcodes. Merci.