如何根据Customizer控件类向Customizer预览添加类？(定制Javascript API)

Question

我对的理解非常薄弱，但我正在尝试。我已经做了一些事情，但是现在我需要根据Customizer中控件的单击将数据发送到Customizer预览。

当在定制器中单击控件时，类".invisible“将应用于该控件。基于此，我想在网站上隐藏

。控件的值是这个类。我该怎么做？以下是我尝试过的：

api('gm_sortable_sections', function(setting) {
    var section = setting.get(); // aka section.about_me
    setting.bind(function onChange(){
api.control('gm_sortable_sections', function(control) {
    control.sectionToHide = api.previewer.preview.container.find('.' + section);

    control.sortableContainer = $(control.container).find('ul.sortable' ).first();
    control.sortableContainer.find( 'li' ).each( function() {
                if ( $( this ).is( '.invisible' ) ) {
                    console.log(control.sectionToHide);
                    control.sectionToHide.addClass('.invisible');
                  //  api.previewer.send( 'sortable-visible');
                     //   $('section.'+ section).addClass('.invisible');

                }


    });
    });
});
});

我已经找到了如何从控件中获取".invisible“值，但是如何发送该值并更新CSS或将类添加到预览部分(然后实际更新网站以保存theme_mod_)。

Answer 1

再次考虑您希望控件如何工作。如果您隐藏控件，您将如何解除它？

听起来您需要一个复选框，以指示该部分是显示的还是隐藏的。在PHP 'customize_register‘动作中，您定义了指示器的持有者。他们将其命名为setting，默认值为“theme_mod”类型。然后为用户定义要与之交互的control。对于布尔选项，最好将它们命名为“on”状态，因此逻辑是合理的，它们匹配核心选项。

$wp_customize->add_setting( 'show_about_section', array(
        'default'   => true,
        'transport' => 'postMessage',
        'sanitize_callback' => 'wp_validate_boolean',
) );

$wp_customize->add_control( 'show_about_section', array(
        'label'    => __( 'Display the About section', 'myprefix' ),
        'section'  => 'myprefix_theme_section',
        'type'     => 'checkbox',
) );

假设该节始终是输出的，我们只需在其上放置一个类来隐藏它。您的PHP将使用输出关于部分的theme_mod：

$class = 'about_me';
if ( ! get_theme_mod( 'show_about_section', true ) ) {
    $class .= ' invisible';
}
// code to output section using $class on it

在加载到'customize_preview_init‘操作中的javascript中，使用如下所示。

( function( $ ) {
    wp.customize( 'show_about_section', function( value ) {
        value.bind( function( show ) {
            $( '.about_me' ).toggleClass( 'invisible', show );
        } );
    } );
} )( jQuery );

不需要将类名发送到预览，但如果需要一个控件来处理多个类名，则可以对其进行不同的编码。Customizer已经将控件的值发送到预览，但在此代码示例中，这是一个布尔值，而不是一个类名。不需要额外的代码来保存theme_mod。这是为你做的。