WordPress的自定义主题：混合PHP和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代码中使用color 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 docs编译）：

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;

Answer 2

概率

var myvariable='<?php echo get_theme_mod("color1");?>';  //note the surrounding ''!

如果您在访问变量时遇到问题，请将其声明为全局变量。