web-dev-qa-db-ja.com

JavaScriptでget_option（）を使う

以前は、PHPでオプションを取得するためにget_option()関数を使用していました。

$width = get_option('my_width');

これはショートコード関数の中です。

今、私はJavaScriptのオプションが欲しいです。それは可能ですか？

ショートコード関数から、JSはwp_enqueue_scriptで追加されます。

shortcodejavascriptwp-enqueue-scriptget-option
6
Keelan

スクリプトに注入するパラメータの配列を定義します。

$script_params = array(
    'myWidth' => get_option('my_width')
);

wp_localize_script でスクリプトをローカライズします。

wp_localize_script( 'your-script-handle', 'scriptParams', $script_params );

scriptParamsはスクリプト内からアクセスできるjsオブジェクトです。

alert( scriptParams.myWidth ); // the value from the PHP get_option call in the js
9
Johannes Pille

受け入れられた答えを基にしていくつかの詳細を記入する...

wp_localize scriptの直後にwp_enqueue_scriptを呼び出す必要があります。だから、このようなもの：

function my_enqueue_scripts() {
    wp_enqueue_script(
        'myjs',
        plugins_url( 'js/my.js', __FILE__)
    );

    $options = get_option( 'my_settings' );

    $scriptData = array(
        'width' => $options['my_width'],
    );

    wp_localize_script('myjs', 'my_options', $scriptData);

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

それから、accept answerが示すように、my_optionsはJavaScriptオブジェクトになりました。

alert( my_options.width );

これが機能する方法は、wp_localise_scriptがスクリプトを含める直前に、ページのHTMLにJavaScriptを埋め込むことです。

<script type='text/javascript'>
/* <![CDATA[ */
var my_options = {"width":"42"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/my_plugin/js/myjs.js?ver=1.0'></script>

そのため、WordPressを使用して、サーバー上のPHPからHTML経由でブラウザ内のJavaScriptにデータを送信する方法があります。賢いでしょ？

（余談：$ optionsが定義されていないという問題がありました。$ optionsが定義される前にキューイングが行われていたためであると考えました WPドキュメントに記載のとおり 。 wp_enqueue_scriptのin_footer引数を使用してフッターにロードする（これはローカライゼーションデータも存在することを意味します）その後、それが本当に問題であるかどうかを確認するためにヘッダーに戻し、すべてがまだ機能していたので注意してください。 ）.

wp_localize_scriptと呼ばれるものを使うことがハックのように思えるならば、 WordPress docs は私たちがしていることは完全に許容できると言っていることに注意してください。

ローカライゼーションは主な用途ですが、通常はWordPressのサーバーサイドからしか取得できないデータをスクリプトで利用できるようにするために使用できます。

3
Greg Bell