WordPressでPHP変数をJavaScriptに渡す方法

インターネット 2021-09-29 20:25:54 3 3,196

WordPressのテーマやプラグインを作成しているときに、PHPのデータ/値を使用する必要のあるJavaScriptコードがある場合があります。たとえば、JavaScriptコードには次の値が必要です。

    Homepage URL
    Theme option values
    WordPress posts data
    etc

これを行う最も簡単な方法は、header.phpテーマファイルまたはwp_headフックでこれらの値をJavaScriptオブジェクトに初期化することです。例えば ​​:

<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>

それは機能しますが、WordPressにはそのようなことをするための機能が提供されています。これはwp_add_inline_scriptと呼ばれます。

wp_add_inline_script( $handle, $data, $position = 'after' )
    $ handle:インラインスクリプトを追加するスクリプトの名前。

    $ data:追加するJavaScriptを含む文字列。

    $ position:ハンドルの前または後にインラインスクリプトを追加するかどうか。

この関数は、JavaScriptコードの前後にインラインスクリプトを追加します。実際には、PHP変数をJavaScriptに渡す以外にも多くのことができます。ここで別のユースケースを見ることができます。

したがって、PHPからJavaScriptに変数を渡すためにwp_add_inline_scriptを使用するには、JSファイルの前にインラインスクリプトを追加するように、positionプロパティをbeforeに設定する必要があります。次に、JavaScriptオブジェクトを初期化し、PHPからのデータで値を設定します。

$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );

JavaScriptでは、次のようにアクセスできます。

console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );

#WordPress#


あなたのコメント

すでに 3 記事の回答
  • forex 1楼
    Hi would you mind letting me know which hosting company you're working with? I've loaded your blog in 3 completely different web browsers and I must say this blog loads a lot faster then most. Can you recommend a good web hosting provider at a fair price? Thank you, I appreciate it!
    发布于 2022/03/17 09:11
  • free freaky porno 2楼
    Hi, all is going fine here and ofcourse every one is sharing data, that's in fact good, keep up writing.
    发布于 2022/03/11 07:16
  • cara buat robot forex sederhana 3楼
    Hello, all is going well here and ofcourse every one is sharing facts, that's in fact good, keep up writing.
    发布于 2022/02/03 21:59
  • 暑さランキング
    最新の回答