web-dev-qa-db-ja.com

Javascriptオプションを含める

Wordpressのテーマでは、wp_enqueue_scriptにfunctions.phpを使ってjavascriptファイル（末尾が.js）を含める必要があることを私は知っていますが、どうすれば追加のjavascriptコードを含めることができますか？たとえば、これを追加する必要があるとします。

jQuery(function($){
    jQuery.supersized({
        slides:
        [
             'http://google.com',
             'http://google.co.uk'
        ]
    });
});

これをどこに置きますか？ header.phpの<script>タグの中に入れますか？

theme-developmentjqueryjavascriptwp-enqueue-script
1
Ben Jackson

PhpからJavaScriptにデータを渡すには、 wp_localize_script を使用します。

wp_register_script(
    'wpa_script',
    get_template_directory_uri() . '/js/script.js',
    array('jquery'),
    null,
    false
);

wp_localize_script(
    'wpa_script',
    'WPAData',
    array(
        'slides' => array( 'http://google.com', 'http://google.co.uk' )
    )
);
1
Milo

正しいアクションにフックして、コールバックの中に入れるだけです。

add_action( 'wp_print_scripts', 'wpse88383_print_scripts' );

function wpse88383_print_scripts() {
    if ( ! is_admin() ) {
        ?>
            <script type="text/javascript">
                jQuery(function($){
                    jQuery.supersized({
                        slides:
                        [
                        'http://google.com',
                        'http://google.co.uk'
                        ]
                    });
                });
            </script>
        <?php
    }
}
1
Chip Bennett

WP 4.5から正しい方法は wp_add_inline_script を使うことです。この関数は、キューに入れられたスクリプトに自分のスクリプトをプリペンドまたは追加します。たとえば、次のようにスクリプトをjqueryに追加できます。

$script = 'jQuery(function($){
  jQuery.supersized({
    slides:
    [
         "http://google.com",
         "http://google.co.uk"
    ]
  });
  });';
wp_add_inline_script ('jquery', $script);
1
cjbj