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 代码中使用颜色 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;

Answer 2

概率

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

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