web-dev-qa-db-fra.com

Comment ajouter inline css/js dans un shortcode

Je travaille sur la création d'un shortcode qui est censé changer le css et le js dynamiquement pour ce shortcode en fonction de la situation. Maintenant, le problème est que je ne comprends pas comment utiliser add_action() dans une add_shortcode(). Permettez-moi de vous donner un exemple de code d'extrait afin que vous puissiez mieux me comprendre:

add_shortcode('example', function( $atts ) {
    //extracting the shortcode attributes
    extract( shortcode_atts( array(
        'value1' => null,
        'value2' => null, 
        'value3' => null
    ), $atts ) );

    //Now here I wll do my code for the shortcode
    // But the shortcode needs some js and css to work
    // so, I'm trying like this

    //For the CSS
    add_action('wp_head', function() {
        echo '<style type="text/css">
            .class {
                background-color: '. $value2 .';
            }
        </style>';
    });

    //For the JS
    add_action('wp_footer', function() {
        echo '<script type="text/javascript">
            var a = '. $value3 .'
        </script>';
    });

});

Évidemment, cela ne fonctionne pas, donc j'espérais que l'un d'entre vous pourrait me guider de manière appropriée.

Si vous le pouvez, aidez plutôt que de voter négativement.

pluginsplugin-developmentshortcodeactionswp-head
2
iSaumya

Non, ça ne marchera pas. Au moment où WordPress commence à évaluer le shortcode dans votre contenu, la tête du site a déjà été assemblée, vous ne pouvez donc plus y ajouter d'action.

En regardant le ordre d'exécution des hooks , vous apprendrez comment faire cela.

Tout d'abord, vous devez éviter de faire écho aux scripts. Au lieu de cela, wp_enqueue_script (identique à wp_enqueue_style) est la méthode à utiliser si vous souhaitez éviter les conflits entre les scripts. Comme les scripts vont dans la tête, vous voulez que votre action soit déclarée avant que wp_head soit appelé. Étant donné que vous devez extraire des informations d'un message, vous devez vous connecter après que WP sache quel message se trouve sur cette page. Ce hook est wp . Ici, vous devez pré-évaluer le contenu de la publication pour extraire le shortcode pertinent à l'aide de regex ​​_. En gros, votre fonction ressemblera à:

add_action ('wp', 'add_shortcode_script');

function add_shortcode_script () {
  global $post;
  ... use regex to scan $post->$post_content for your shortcode
  ... and extract $value2 and $value3
  wp_enqueue_script (...vars based on $value2...);
  wp_enqueue_style (...vars based on $value3...);
}

Ci-dessus est ce dont vous avez besoin si le shortcode indique l’ajout d’un fichier css/js. Dans votre exemple, vous n’ajoutez qu’un extrait de code qui modifierait le comportement d’un fichier css/js principal. Cela signifie que vous devez utiliser wp_add_inline_script et wp_add_inline_style . La dernière partie du code devient alors:

  wp_enqueue_script ('my_script','http:/.../main.js');
  wp_enqueue_style ('my_style','http:/.../main.css');
  wp_add_inline_script ('my_script', $string_based_on_value2);
  wp_add_inline_style ('my_style', $string_based_on_value3);
1
cjbj

Si vous y réfléchissez, wp_head est déjà déclenché au moment où votre shortcode est analysé (le contenu du message arrive beaucoup plus tard que le <head> de la page). Donc ça ne marchera pas.

(Voir cette question pour le processus de chargement de WordPress)

Vous pouvez soit directement imprimer le fichier JS & CSS à cet endroit (non autorisé par la spécification HTML, mais le navigateur le comprend très bien) ou tout déplacer vers le pied de page.

1
swissspidy