下面是一个快速示例,演示如何将php数据传递给脚本。
首先,我们将函数挂接到wp_enqueue_scripts
行动在内部,我们将包含播放器和初始化代码的脚本排队(这可能是两个单独的文件,但在本例中我将其压缩为一个文件)。接下来,我们打电话wp_localize_script
并在脚本中设置一些我们想要的可用数据。
function wpd_test_localize_script() {
if( is_single() ){
global $post;
wp_enqueue_script(
\'test_script\',
get_template_directory_uri() . \'/script.js\', // or plugins_url() if this is plugin, not theme
array( \'jquery\' ),
null,
true
);
wp_localize_script(
\'test_script\',
\'test_script_data\',
array(
\'title\' => $post->post_title,
\'file\' => \'hello.mp3\'
)
);
}
}
add_action( \'wp_enqueue_scripts\', \'wpd_test_localize_script\' );
接下来,我们看看
script.js
我们在上面排队的文件,我们可以在这里看到如何访问通过
wp_localize_script
:
(function($){
$(window).load(function(){
alert( test_script_data.title );
});
})(jQuery);
test_script_data
是我们创建的对象
wp_localize_script
. 如果加载单个帖子页面,上述代码将弹出一个带有当前帖子标题的警告对话框。
如果我们查看页面源代码,可以看到创建的脚本标记WordPress,其中包含我们的数据:
<script type=\'text/javascript\'>
/* <![CDATA[ */
var test_script_data = {"title":"Some post title","file":"hello.mp3"};
/* ]]> */
</script>
我们可以像上面那样传递一个数据数组,也可以嵌套任意数量的数组来创建多维数据(如多个曲目,每个曲目都有标题、文件等)。