javascript - WordPress 自定义主题 : mixing php and javaScript?

Question

我正在构建一个自定义 wordpress 主题，我正在尝试添加一些 JavaScript 函数。 我要添加的主要功能是一个随时间改变颜色的 div。它更改为的颜色由自定义寄存器中的主题颜色设置定义。我已经通过我的 functions.php 添加了这些颜色设置框，如下所示:

 $wp_customize->add_setting('color1', array('default' => '#000000', 'transport'=>'refresh',));    
 $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'color1_CNTL', array(
        'label'     => __('Color 1', 'myTheme'), 
        'section'   => 'colors', 
        'settings'  => 'color1',)));

所有这些都工作正常，我可以在我的管理页面上的自定义注册中使用它。现在，我唯一想知道的是，如何在我的 javaScript 代码中使用颜色 1 的值？我知道如果我想在 css 中使用它，我只需要使用

<?php echo get_theme_mod('color1'); ?>

但这在 JavaScript 中不起作用。有任何想法吗？

Answer 1

“WordPress 方式”是本地化脚本。

利用wp_localize_script

概述:

1. 在您的主题中注册一个脚本(通常在您的 functions.php 中 文件)。看这里: wp_enqueue_script
2. 本地化脚本
3. 然后，通过您的 javascript 访问该值。

最小的完整示例(从 WP 文档编译):

PHP:

add_action('wp_enqueue_scripts', 'my_theme_scripts');

function my_theme_scripts() {
    // Register the script first.
    wp_register_script( 'some_handle', 'path/to/myscript.js' );

    // Now we can localize the script with our data.
    $color_array = array( 'color1' => get_theme_mod('color1'), 'color2' => '#000099' );
    wp_localize_script( 'some_handle', 'object_name', $color_array );

    // The script can be enqueued now or later.
    wp_enqueue_script( 'some_handle' );
}

Javascript(在您的“myscript.js”文件中)；

// Access the color via the object name defined in localize_script
var color = object_name.color1;