Customizer JS接口获取Customizer字段的值

时间:2019-03-09 作者:user9

我想在我的网站上使用一个javascript插件,该插件应该使用wordpress自定义程序中设置的值进行初始化。

Kirki::add_field( \'artist_theme_config\', array(
  \'type\'        => \'select\',
  \'settings\'    => \'gallery_lightgallery_transition\',
  \'label\'       => __( \'Select the transition type of your lightgalleries\', \'site-name\' ),
  \'section\'     => \'artist_theme_gallery_style\',
  \'default\'     => \'lg-slide\',
  \'priority\'    => 10,
  \'choices\'     => array(
    \'lg-slide\' => esc_attr__( \'Slide\', \'site-name\' ),
    \'lg-fade\' => esc_attr__( \'Fade\', \'site-name\' ),
    \'lg-zoom-in\' => esc_attr__( \'Zoom In\', \'site-name\' ),
  ),
) );
我的目标是使用自定义程序中设置的选项运行初始化逻辑。因此,我需要在自定义javascript中获取设置的值。我发现有一种方法(正确吗?)获取值的步骤是:

wp.customize.instance( \'gallery_lightgallery_transition\' ).get();
但是,如果自定义程序处于打开状态,则该操作才起作用。在javascript中获取定制器字段值的正确方法是什么?是否需要使用正确的依赖项将脚本排队,如

wp_enqueue_script(\'sage/customizer_controls.js\', asset_path(\'scripts/customizer_controls.js\'), [ \'customize-controls\' ], null, true);
?我不想把逻辑放在customizer_controls.js 但是,在一个名为plugins.js. 关于how to pass variables from php to javascript in wordpress, 然而,我想应该有一种新的定制器api的方法,只是找不到任何示例或文档。

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

您需要以将选项、短代码或任何其他WordPress值获取到JavaScript中的相同方式进行操作:您需要使用PHP获取它们,并使用wp_localize_script():

wp_enqueue_script( \'my-script\', asset_path( \'scripts/plugins.js\' ), [], null, true );
wp_localize_script(
    \'my-script\',
    \'myScript\',
    [
        \'galleryTransition\' => get_theme_option( \'gallery_lightgallery_transition\' ),
    ]
);
只要换一下my-scriptmyScript 特定于您的项目。

现在,您可以通过访问脚本中的值myScript.galleryTransition.