web-dev-qa-db-ja.com

ショートコード用のJavaScriptを含める

ユーザーがショートコードを使用できるようにするプラグインを作成しています。このショートコードは、ショートコードが読み込まれた後に存在する必要がある多数のJavaScriptに依存します。

JavaScriptをいつ、どこでロードするかを決定しようとすると問題が発生します。ショートコードが吐き出すコードの一部は存在する必要がある要素ですが、jQueryが利用することはできません。

ショートコードが依存するスクリプトをロードして添付する特定の方法はありますか？

function build_total_search_method( $atts ) {

    $shorcode_php_function = include( dirname(__FILE__) . "/includes/total_search.php" );

    return $shorcode_php_function;

}
add_shortcode( 'total_search', 'build_total_search_method' );

これはうまくいくようですが、1もページに表示されます。この方法は大丈夫ですか？

jqueryshortcodejavascriptwp-enqueue-scriptscripts
2
dcolumbus

ショートコードハンドラで wp_enqueue_script を使用します。WordPress> = 3.3では、wp_footerアクションでページに追加されます。 _ -PHPからJavaScriptに必要なデータを wp_localize_script で渡します。

4
Milo

wp_enqueue_script()を含むwp_localize_script()が正しい解決策です。ショートコードの引数を解析するか、常にスクリプトをエンキューしてください。

たくさんのデータがあり、Jsonオブジェクトの中でこれを使うでしょう。問題やJSONを介して直接解決策にリンクしている場合に役立つ、いくつかのヒント。関数wp_localize_script()はHTMLエンティティをデコードします。これは一種の重要ですが、必ずしも完璧な解決策ではありません。この関数はjson_encode()を使用しています。これは、エンティティのデコードに関連して多次元配列で問題を起こす可能性があります。別の解決策は、以下の例のように、データをJSONオブジェクトとして送信することです。

add_action( 'admin_enqueue_scripts', 'fb_print_scripts' );
function fb_print_scripts() {
    global $current_screen;

    if ( isset( $current_screen -> id ) && ! in_array( $current_screen -> id, array( 'post', 'page' ) ) )
        return;

    if ( is_plugin_active_for_network( plugin_basename( __FILE__ ) ) )
        $options = get_site_option( 'my_options_id' );
    else
        $options = get_option( 'my_options_id' );

    if ( ! $options )
        return;
    ?>
    <script type="text/javascript">
        var my_json_object = <?php echo json_encode( $options ); ?>;
    </script>
    <?php
}
0
bueltge