web-dev-qa-db-ja.com

ショートコードの中にインラインcss/jsを追加する方法

私は状況に基づいてそのショートコードのcssとjsを動的に変更することを意図したショートコードの作成に取り組んでいます。今問題は私はadd_action()の中でadd_shortcode()を使用する方法についての手がかりを得ていないということです。皆さんが私をよりよく理解できるように、スニペットコードの例を挙げましょう。

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>';
    });

});

今は明らかにそれは機能していないので、あなたのうちの誰かが私に正しい方法で同様のことをどのように私に導くことができるか私は願っていました。

可能であれば、質問に否定的に投票する代わりに助けてください。

pluginsplugin-developmentshortcodeactionswp-head
2
iSaumya

いいえ、それはうまくいきません。 WordPressがあなたのコンテンツのショートコードの評価を開始する頃には、サイトのヘッドはすでに組み立てられているので、もうそれにアクションを追加することはできません。

フックの実行順序 を見ると、その方法がわかります。

まず、スクリプトのエコーを避ける必要があります。そうではなく、 wp_enqueue_script （wp_enqueue_styleと同じ）は、スクリプト間の競合を避けたい場合に使用する方法です。スクリプトは頭の中に入っているので、wp_headが呼び出される前にあなたのアクションが宣言されることを望みます。投稿から情報を抽出する必要があることを考えると、WPがこの投稿がどの投稿であるかがわかった後にフックする必要があります。そのフックは wp です。ここでは、 regex を使用して関連するショートコードを抽出するために投稿コンテンツを事前評価する必要があります。大体あなたの関数は次のようになります。

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...);
}

ショートコードがcss/jsファイルの追加を示す場合に必要なものは上記のとおりです。あなたの例では、おそらくメインのcss/jsファイルの振る舞いを変えるスニペットを追加するだけです。つまり、 wp_add_inline_script および wp_add_inline_style を使用する必要があります。コードの後半部分は次のようになります。

  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

あなたがそれについて考えるならば、あなたのショートコードが解析される時にwp_headは既に発火しています（投稿内容はページの<head>よりずっと後に来ます）。だからそれはうまくいきません。

（ この質問 WordPressの読み込み処理については/を参照）

そこにJSとCSSを直接​​印刷することもできますし（HTMLの仕様では許可されていませんが、ブラウザはそれを問題なく理解しています）、すべてをフッターに移動することができます。

1
swissspidy