web-dev-qa-db-ja.com

依存関係のないwp_add_inline_script

ページのフッターに挿入したいJavaScriptスニペットがあります。これはトラッキングコードです。Googleアナリティクスに似ています。依存関係はありません。スタンドアロンのスニペットです。

こんなことができる

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

ちょっとバカらしい（dummy.jsは空のファイルです）が、うまくいきます。依存関係をスキップする方法はありますか？

javascriptwp-enqueue-script
9
jimlongo

wp_add_inline_style() - 依存関係なし

wp_add_inline_style()はソースファイルに依存せずに使用できます。

これが@Flixからの example です。

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

これをwp_enqueue_scriptsアクションにフックします。

wp_add_inline_script() - 依存関係なし

チケットによると ＃43565 、バージョンのwp_add_inline_script()についても同様のことがサポートされる 4.9.9 5.0（コメントの検証について@MarcioDuarte、@ dev101および@DaveRomseyに感謝します）：

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

これは、 header 、つまり<head>...</head>タグの間に次のように表示します。

<script type='text/javascript'>
console.log( "header" );
</script>

フッター に表示するには：

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

wp_add_inline_script()の$position入力引数のデフォルトは'after'です。 'before'値は、それを'after'の上に印刷します。

7
birgire

更新： v5.0では、WordPressは依存関係なしにインラインスクリプトとインラインスタイルを追加するためのサポートを追加した。 @ birgireの回答 _の実装を参照してください。

wp_add_inline_script()を使うとき、WP_Scripts::print_inline_script()は最終的にインラインスクリプトを出力するために使われます。設計上、print_inline_script()には有効な依存関係$handleが必要です。

この場合は依存関係がないため、wp_add_inline_script()はその仕事に適したツールではありません。偽の依存関係ファイル（および望ましくない追加のHTTP要求）を作成する代わりに、wp_headまたはwp_footerを使用してインラインスクリプトを出力します。

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

通常、JavaScriptは.jsファイルに追加し、wp_enqueue_scriptsフックのwp_enqueue_script()を使用してエンキューする必要があります。 wp_localize_script() を使用して、スクリプトでデータを利用できるようにすることができます。スクリプトをインラインで追加する必要がある場合もあります。

5
Dave Romsey

これを行う1つの方法は、スクリプトを<script>タグ内にエコーする関数を作成し、それを wp_print_footer_scripts アクションにフックすることです。あなたが厳密にコントロールしていないものは何もエスケープするように気をつけなければなりませんが、それ以外は一般的に安全で簡単な方法です。

例えば：

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
0
Morgan Estes