Mettre en file d'attente les scripts / styles lorsque le shortcode est présent

Question

Mettre en file d'attente les scripts / styles lorsque le shortcode est présent

69

44983 2014-10-18

Quelest lemoyenidéalpourenregistrer/mettreen file d'attente des scriptset/ou des styles à utiliser dans lesplugins?

J'ai récemment créé unplugin simpleplugin pour ajouter l'avatar/gravatar de l'utilisateur avec un shortcode. J'ai différentes options de stylepour afficher l'avatar (carré,rond,etc.)et j'ai décidé demettre le css directement dans le shortcode lui-même.

Cependant,je me rends comptemaintenant que cen'estpas unebonne approche carelle répétera le css chaquefois que le shortcodeest utilisé sur unepage. J'ai vuplusieurs autres approches sur ce siteet le codex wp amême deuxexemples qui lui sontpropres,ilest donc difficile de savoir quelle approcheest laplus cohérenteet laplus rapide.

Voici lesméthodes dontje connais actuellement:

Méthode 1:inclure directement dans le shortcode - C'est ce queje fais actuellement dans leplugin,mais celane semblepasbon caril répète le code.

 class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* simply enqueue or print the scripts/styles in the shortcode itself */
?>
<style type="text/css">

</style>
<?php
    return "$content";
     }
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );

Méthode 2: utilisez la classepourmettreen file d'attente des scripts ou des styles demanière conditionnelle

 class My_Shortcode {
    static $add_script;
    static function init() {
        add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));
        add_action('init', array(__CLASS__, 'register_script'));
        add_action('wp_footer', array(__CLASS__, 'print_script'));
    }
    static function handle_shortcode($atts) {
        self::$add_script = true;
        // shortcode handling here
    }
    static function register_script() {
        wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
    }
    static function print_script() {
        if ( ! self::$add_script )
            return;
        wp_print_scripts('my-script');
    }
}
My_Shortcode::init();

Méthode 3: Utilisation de get_shortcode_regex();

 function your_prefix_detect_shortcode() {

    global $wp_query;   
    $posts = $wp_query->posts;
    $pattern = get_shortcode_regex();

    foreach ($posts as $post){
        if (   preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
            && array_key_exists( 2, $matches )
            && in_array( 'myshortcode', $matches[2] ) )
        {
            // css/js 
            break;  
        }    
    }
}
add_action( 'wp', 'your_prefix_detect_shortcode' );

Méthode 4: Utiliser has_shortcode();
function custom_shortcode_scripts() { global $post; if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'myshortcode') ) { wp_enqueue_script( 'my-script'); } } add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');

What is the idea way to register/enqueue scripts and/or styles for use in plugins?

I recently made a plugin simple plugin to add the user avatar/gravatar with a shortcode. I have different style options for displaying the avatar (square, round, etc.) and decided to put the css directly in the shortcode itself.

However, I realize now this isn't a good approach since it will repeat the css every time the shortcode is used on a page. I've seen several other approaches on this site and the wp codex even has two examples of their own so it's hard to know what approach is most consistent and fastest.

Here are the methods I currently am aware of:

Method 1: Include directly in shortcode - This is what I'm currently doing in the plugin, but doesn't seem good since it repeats code.

class My_Shortcode { function handle_shortcode( $atts, $content="" ) { /* simply enqueue or print the scripts/styles in the shortcode itself */ ?> <style type="text/css"> </style> <?php return "$content"; } } add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );

Method 2: Use class for enqueueing scripts or styles conditionally

class My_Shortcode { static $add_script; static function init() { add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode')); add_action('init', array(__CLASS__, 'register_script')); add_action('wp_footer', array(__CLASS__, 'print_script')); } static function handle_shortcode($atts) { self::$add_script = true; // shortcode handling here } static function register_script() { wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true); } static function print_script() { if ( ! self::$add_script ) return; wp_print_scripts('my-script'); } } My_Shortcode::init();

Method 3: Using get_shortcode_regex();

function your_prefix_detect_shortcode() { global $wp_query; $posts = $wp_query->posts; $pattern = get_shortcode_regex(); foreach ($posts as $post){ if ( preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches ) && array_key_exists( 2, $matches ) && in_array( 'myshortcode', $matches[2] ) ) { // css/js break; } } } add_action( 'wp', 'your_prefix_detect_shortcode' );

Method 4: Using has_shortcode();

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

shortcode wp-enqueue-script conditional-content wp-register-script wp-register-style

la source

Bryan Willis

Jepense que laméthode 4: Utilisation de has_shortcode ();est lameilleure carellegarantira que les scriptset les styles se chargeront unefois si le contenu de lapublication a un code court,quelles que soient les utilisationsmultiples du code court.Bien que celapuissene pasfonctionnerpour les utilisations de shortcode dans les widgets ou dans labarre latérale,pas sûr.Si c'estpour unplugin,je ne vous recommanderaispas de lier des scripts avec un shortcode car certainspourraient appeler votrefonction au lieu du shortcodepour obtenir la sortie souhaitée.

I think `Method 4: Using has_shortcode();` is best because it will ensure that scripts and styles will load once if post content has shortcode regardless of multiple uses of shortcode. Although it might not work for shortcode uses in widgets or in sidebar, not sure though. If it's for a plugin then I would not recommend you to tie scripts with shortcode because some might call your function instead of shortcode to get desired output.

0

2014-10-18

Robert hue

Doublepossible de [Comment ajouter desfeuilles de style uniquement auxpages avec un shortcode spécifique?] (Https://wordpress.stackexchange.com/questions/108444/how-to-add-stylesheets-only-to-pages-with-specific-shortcode)

Possible duplicate of [How to add stylesheets only to pages with specific shortcode?](https://wordpress.stackexchange.com/questions/108444/how-to-add-stylesheets-only-to-pages-with-specific-shortcode)

1

2018-03-30

kontur

9 réponses

votes

61

2015-06-15

J'aitrouvé une autreméthode quifonctionnebien pourmoi:

Lors de l'initialisation duplugin,ne mettezpas vos scriptset stylesen file d'attente,maisenregistrez-les avec wp_register_style et wp_register_script .

Ensuite,vouspouvez charger le script/style à la demande. Parexemple,lorsque vous affichez un shortcode avec wp_enqueue_style (& quot; your_style & quot;) et wp_enqueue_script (& quot; votre_script & quot;) .

Voici unexemple deplugin utilisant cetteméthode qui vouspermet d'utiliserget_avatar dans un shortcode. Lafeuille de stylen'estmiseen file d'attente que lorsque le shortcodeestprésent.

Utilisation (l'identifiantpar défautest l'utilisateur actuel):

[get_avatarid=& quot; & quot;taille=& quot; 32 & quot; default=& quot;mystère & quot; alt=& quot; Photo deprofil & quot; class=& quot; round & quot;]

fonction wpse_165754_avatar_shortcode_wp_enqueue_scripts () { wp_register_style ('get-avatar-style',plugins_url ('/css/style.css',__FILE__),array (),'1.0.0','all'); } add_action ('wp_enqueue_scripts','wpse_165754_avatar_shortcode_wp_enqueue_scripts'); if (function_exists ('get_avatar')) { function wpse_165754_user_avatar_shortcode ($ attributes) { global $ utilisateur_actuel; get_currentuserinfo (); extrait (shortcode_atts ( tableau ( & quot;id & quot;=> $ utilisateur_actuel- > ID, & quot;taille & quot;=> 32, & quot;par défaut & quot;=> 'mystère', & quot; alt & quot;=> '', & quot; classe & quot;=> '', ),$ attributs,'get_avatar')); $get_avatar=get_avatar ($id,$taille,$ default,$ alt); wp_enqueue_style ('get-avatar-style'); renvoie '& lt; span class=& quot;get_avatar'. $ classe. '& quot; >' . $get_avatar. '& lt;/span >'; } add_shortcode ('get_avatar',wpse_165754_user_avatar_shortcode '); }

I found an other way that works well for me:

When initializing the plugin, do not enqueue your scripts and styles, but register them with wp_register_style and wp_register_script.

Next you can load the script/style on demand. For example when you render a shortcode with wp_enqueue_style("your_style") and wp_enqueue_script("your_script").

Here is an example plugin using this method that lets you use get_avatar in a shortcode. The stylesheet is only enqueued when the shortcode is present.

Usage (id defaults to current user):

[get_avatar id="" size="32" default="mystery" alt="Profile Photo" class="round"]

function wpse_165754_avatar_shortcode_wp_enqueue_scripts() { wp_register_style( 'get-avatar-style', plugins_url( '/css/style.css', __FILE__ ), array(), '1.0.0', 'all' ); } add_action( 'wp_enqueue_scripts', 'wpse_165754_avatar_shortcode_wp_enqueue_scripts' ); if ( function_exists( 'get_avatar' ) ) { function wpse_165754_user_avatar_shortcode( $attributes ) { global $current_user; get_currentuserinfo(); extract( shortcode_atts( array( "id" => $current_user->ID, "size" => 32, "default" => 'mystery', "alt" => '', "class" => '', ), $attributes, 'get_avatar' ) ); $get_avatar = get_avatar( $id, $size, $default, $alt ); wp_enqueue_style( 'get-avatar-style' ); return '<span class="get_avatar ' . $class . '">' . $get_avatar . '</span>'; } add_shortcode( 'get_avatar', wpse_165754_user_avatar_shortcode' ); }

la source

jblanche

J'ai oublié d'avoirposé cette question l'année dernière,maisj'avaisen fait commencé à lefaire de cettefaçon également dans denombreux cas.C'est unpeu comme combiner lesméthodes 1et 2.

Forgot I asked this question last year, but I had actually started doing it this way as well in a lot of cases. It's kind of like combining method 1 and 2.

0

2015-07-08

Bryan Willis

Cetteméthode charge le CSS dans lepied depage,qui a sûrement des limites?

This method loads the CSS in the footer, which surely has limitations?

4

2017-04-21

Jacob Raccuia

C'est absolument labonnefaçon deprocéder.Utilisez cetteméthode chaquefois que vous avezbesoin de charger conditionnellement un script ou unefeuille de style lorsque le hook `wp_enqueue_scripts` s'est déjàproduit.(Les shortcodes sont analyséspendant `the_content` quifaitpartie du hook`the_post`,ce qui signifie que lamiseen file d'attente lorsqu'elleest analyséeesttroptard sauf si vous avez déjàenregistré le script)

This is absolutely the right way to do this. Use this method any time you need to conditionally load a script or stylesheet when the `wp_enqueue_scripts` hook has already occurred. (Shortcodes are parsed during `the_content` which is a part of the `the_post` hook, meaning enqueueing when it is parsed is too late unless you've already registered the script)

2

2019-04-20

JRad the Bad

28

2014-10-18

Avant de commencer la réponse,je dois dire que sur ce sujet,csset jsne sontpas lesmêmes.

La raisonest simple:bien que l'ajout dejs au corps de lapage (enpied depage) soit unemanière couranteet valide deprocéder,les css doivent êtreplacés dans la section <head> de lapage:même si lamajorité desnavigateurspeuvent afficher correctement le CSS dans le corps de lapage,cen'estpas du code HTML valide.

Lorsqu'un shortcodeest rendu,la section <head> était déjàimprimée,cela signifie quejspeut être ajouté sansproblème sur lepied depage,mais css doit être ajouté avant le shortcodeest rendu.

Scripts

Si votre shortcoden'abesoin que dejs,vous avez de la chanceet pouvez simplement utiliser wp_enqueue_script dans le corps du rappel de shortcode:

add_shortcode( 'myshortcode', 'my_handle_shortcode' ); function my_handle_shortcode() { wp_enqueue_script( 'myshortcodejs', '/path/to/js/file.js' ); // rest of code here... }

Cefaisant,votre scriptest ajouté aupied depageet une seulefois,même si le shortcodeest utiliséplus d'unefois dans lapage.

Styles

Si votre code abesoin de styles,vous devez agir avant que le shortcodene soit réellement rendu.

Ilexiste différentesmanières deprocéder:

regardeztous les articles de la requête actuelleet ajoutez les styles de shortcode sinécessaire. C'est ce que vousfaites dans les deuxméthodesn ° 3et n ° 4 dans OP. Enfait,les deuxméthodesfont lamême chose,mais has_shortcode a été ajouté dans WP 3.6,tandis que get_shortcode_regexest disponible depuis la version 2.5,utilisez donc get_shortcode_regex uniquement si vous souhaitez rendre votreplugin compatible avec les anciennes versions.

toujours ajouter un style de shortcode,danstoutes lespages

Problèmes

Leproblèmen ° 1 concerne lesperformances. Les regex sont des opérations assez lenteset lancer des regex dans uneboucle detous lesmessagespeut ralentir lapage demanière cohérente. Deplus,ilest assez courant dans lesthèmes den'afficher que desextraits demessages dans les archiveset d'afficher le contenu complet avec des codes courts uniquement dans des vues uniques. Si cela seproduit,lorsqu'une archiveest affichée,votreplugin lancera une regex correspondant dans uneboucle dans lebut d'ajouter un style quine serajamais utilisé: un doubleimpactinutile sur lesperformances: ralentir lagénération depage + requête HTTPinutile supplémentaire

Leproblème avec # 2est laperformance,encore unefois. Ajouter du style àtoutes lespages signifie ajouter une requête HTTP supplémentairepourtoutes lespages,même si celan'estpasnécessaire. Même si letemps degénération de lapage côté serveurn'estpas affecté,letempstotal de rendu de lapage le sera,et pourtoutes lespages du site.

Alors,que doitfaire un développeur deplugins?

Jepense que lameilleure chose àfaireest d'ajouter unepage d'options auplugin,où les utilisateurspeuvent choisir si le shortcode doit êtregéréen vue singulière uniquement oumême dans les archives. Dans les deux cas,ilestpréférable defournir une autre optionpour choisir lestypes depublication activant le shortcode.

De cettemanière,ilestpossible de raccorder "template_redirect"pour vérifier si la requête actuelle satisfait lesexigenceset dans ce cas,ajouter le style.

Si l'utilisateur choisit d'utiliser le shortcode uniquement dans les vues depublication singulières,c'est unebonneidée de vérifier si lemessage contient ounon un shortcode: unefois qu'une seuleexpression régulièreest requise,ellene devraitpas ralentir autant lapage.

Si l'utilisateur choisit d'utiliser le shortcodemême dans les archives,j'éviterais d'exécuter regexpourtous lesmessages si lenombre demessagesest élevé et de simplementmettre le styleen file d'attente si la requête répond auxexigences.

Ce qu'ilfaut considérer comme "élevé" à cet égard devrait être obtenuen utilisant destests deperformances ou,comme alternative,ajouter une autre optionet donner le choix aux utilisateurs.

Before starting answer I have to say that regarding this topic css and js are not the same.

The reason is simple: while adding js to the body of the page (in footer) is a common and valid way to go, css need to be placed in the <head> section of the page: even if majority of browsers can proper render css in page body, that's not valid HTML code.

When a shortcode is rendered, <head> section was already printed, it means that js can be added without any problem on footer, but css must be added before the shortcode is rendered.

Scripts

If your shortcode needs only js you are lucky and can just use wp_enqueue_script in the body of shortcode callback:

add_shortcode( 'myshortcode', 'my_handle_shortcode' ); function my_handle_shortcode() { wp_enqueue_script( 'myshortcodejs', '/path/to/js/file.js' ); // rest of code here... }

Doing so your script is added to the footer and only once, even if the shortcode is used more than once in the page.

Styles

If you code needs styles, then you need to act before shortcode is actually rendered.

There are different ways to do this:

look at all the posts in current query and add the shortcode styles if needed. This is what you do in both method #3 and #4 in OP. In fact, both two methods do same thing, but has_shortcode was added in WP 3.6, while get_shortcode_regex is available since version 2.5, so use get_shortcode_regex only if you want make your plugin compatible with older versions.

always add shortcode style, in all pages

Issues

Issue with #1 is performance. Regex are pretty slow operations and launch regex in a loop of all posts may slow down page consistently. Moreover, it's a pretty common task in themes to show only post excerpt in archives and show full content with shortcodes only in singular views. If that happen, when an archive is shown, your plugin will launch a regex matching in a loop with the aim to add a style that will never be used: an unnecessary double performance impact: slow down page generation + additional unnecessary HTTP request

Issue with #2 is performance, again. Adding style to all pages means add an additional HTTP request for all pages, even when not needed. Even if server side page generation time is not affected, total page rendering time will, and for all site pages.

So, what does a plugin developer should do?

I think that best thing to do is adding an option page to plugin, where users can choose if the shortcode should be handled in singular view only or even in archives. In both cases is better to provide another option to choose for which post types enable shortcode.

In that way is possible to hook "template_redirect" to check if current query satisfy requirements and in that case add the style.

If user choose to use shortcode only in singular post views, is a good idea check if post has shortcode or not: once only one regex is required it should not slow down page so much.

If user choose to use shortcode even in archives, then I would avoid to run regex for all posts if number of posts is high and just enqueue the style if query fit requirements.

What to consider "high" on this regard should be get using some performance tests or, as alternative, add another option and give choice to users.

la source

gmazzap

Il convient denoterici que lesbalises `

jblanche · Accepted Answer · 2015-06-15

61

2015-06-15

J'aitrouvé une autreméthode quifonctionnebien pourmoi:

Lors de l'initialisation duplugin,ne mettezpas vos scriptset stylesen file d'attente,maisenregistrez-les avec wp_register_style et wp_register_script .
Ensuite,vouspouvez charger le script/style à la demande. Parexemple,lorsque vous affichez un shortcode avec wp_enqueue_style (& quot; your_style & quot;) et wp_enqueue_script (& quot; votre_script & quot;) .

Voici unexemple deplugin utilisant cetteméthode qui vouspermet d'utiliserget_avatar dans un shortcode. Lafeuille de stylen'estmiseen file d'attente que lorsque le shortcodeestprésent.

Utilisation (l'identifiantpar défautest l'utilisateur actuel):

[get_avatarid=& quot; & quot;taille=& quot; 32 & quot; default=& quot;mystère & quot; alt=& quot; Photo deprofil & quot; class=& quot; round & quot;]

 fonction wpse_165754_avatar_shortcode_wp_enqueue_scripts () {
    wp_register_style ('get-avatar-style',plugins_url ('/css/style.css',__FILE__),array (),'1.0.0','all');
}

add_action ('wp_enqueue_scripts','wpse_165754_avatar_shortcode_wp_enqueue_scripts');
if (function_exists ('get_avatar')) {
 function wpse_165754_user_avatar_shortcode ($ attributes) {

 global $ utilisateur_actuel;
 get_currentuserinfo ();

 extrait (shortcode_atts (
 tableau (
                         & quot;id & quot;=> $ utilisateur_actuel- > ID,
                         & quot;taille & quot;=> 32,
                         & quot;par défaut & quot;=> 'mystère',
                         & quot; alt & quot;=> '',
                         & quot; classe & quot;=> '',
                     ),$ attributs,'get_avatar'));
        
        $get_avatar=get_avatar ($id,$taille,$ default,$ alt);

        wp_enqueue_style ('get-avatar-style');

        renvoie '& lt; span class=& quot;get_avatar'. $ classe. '& quot; >' . $get_avatar. '& lt;/span >';
    }

    add_shortcode ('get_avatar',wpse_165754_user_avatar_shortcode ');
}

I found an other way that works well for me:

When initializing the plugin, do not enqueue your scripts and styles, but register them with wp_register_style and wp_register_script.
Next you can load the script/style on demand. For example when you render a shortcode with wp_enqueue_style("your_style") and wp_enqueue_script("your_script").

Here is an example plugin using this method that lets you use get_avatar in a shortcode. The stylesheet is only enqueued when the shortcode is present.

Usage (id defaults to current user):

[get_avatar id="" size="32" default="mystery" alt="Profile Photo" class="round"]

function wpse_165754_avatar_shortcode_wp_enqueue_scripts() {
    wp_register_style( 'get-avatar-style', plugins_url( '/css/style.css', __FILE__ ), array(), '1.0.0', 'all' );
}

add_action( 'wp_enqueue_scripts', 'wpse_165754_avatar_shortcode_wp_enqueue_scripts' );
if ( function_exists( 'get_avatar' ) ) {
    function wpse_165754_user_avatar_shortcode( $attributes ) {

        global $current_user;
        get_currentuserinfo();

        extract( shortcode_atts(
                     array(
                         "id"      => $current_user->ID,
                         "size"    => 32,
                         "default" => 'mystery',
                         "alt"     => '',
                         "class"   => '',
                     ), $attributes, 'get_avatar' ) );
        
        $get_avatar = get_avatar( $id, $size, $default, $alt );

        wp_enqueue_style( 'get-avatar-style' );

        return '<span class="get_avatar ' . $class . '">' . $get_avatar . '</span>';
    }

    add_shortcode( 'get_avatar', wpse_165754_user_avatar_shortcode' );
}

J'ai oublié d'avoirposé cette question l'année dernière,maisj'avaisen fait commencé à lefaire de cettefaçon également dans denombreux cas.C'est unpeu comme combiner lesméthodes 1et 2.

Forgot I asked this question last year, but I had actually started doing it this way as well in a lot of cases. It's kind of like combining method 1 and 2.
- 0
- 2015-07-08
- Bryan Willis
Cetteméthode charge le CSS dans lepied depage,qui a sûrement des limites?

This method loads the CSS in the footer, which surely has limitations?
- 4
- 2017-04-21
- Jacob Raccuia
C'est absolument labonnefaçon deprocéder.Utilisez cetteméthode chaquefois que vous avezbesoin de charger conditionnellement un script ou unefeuille de style lorsque le hook `wp_enqueue_scripts` s'est déjàproduit.(Les shortcodes sont analyséspendant `the_content` quifaitpartie du hook`the_post`,ce qui signifie que lamiseen file d'attente lorsqu'elleest analyséeesttroptard sauf si vous avez déjàenregistré le script)

This is absolutely the right way to do this. Use this method any time you need to conditionally load a script or stylesheet when the `wp_enqueue_scripts` hook has already occurred. (Shortcodes are parsed during `the_content` which is a part of the `the_post` hook, meaning enqueueing when it is parsed is too late unless you've already registered the script)
- 2
- 2019-04-20
- JRad the Bad