如何基于Customizer控件的类将类添加到Customizer预览？(定制器Java脚本API)

时间：2018-02-15 作者：Alison

我对定制器javascript API的理解很弱，但我正在尝试。我已经做了一些事情，但现在我需要根据单击自定义程序中的控件将数据发送到自定义程序预览。

在自定义程序中单击控件时，类“.invisible”将应用于该控件。基于此，我想隐藏<section class="about_me"></section> 在网站上。控件的值为此类。我该怎么做？以下是我尝试过的：

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或将类添加到预览中的部分（然后实际更新网站以保存此主题\\u mod\\u）。

1 个回复
SO网友:Joy Reynolds

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

听起来您需要一个复选框来指示该节是显示还是隐藏。在PHP中的“customize\\u register”操作中，定义指示器的持有者。他们把这个命名为setting, 默认值为“theme\\u 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将在输出About部分的地方使用theme\\u 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 );
无需将类名发送到预览，但如果需要一个控件来处理多个类名，则可以对其进行不同的编码。自定义程序已将控件的值发送到预览，但在此代码示例中，这是一个布尔值，而不是类名。保存theme\\u mod不需要额外的代码。这是为你做的。

结束
标签： javascript   theme-customizer   api   小码农  

相关推荐

编辑网站中奇怪的乱七八糟的JavaScript被黑客入侵了？

客户网站以“enfold”主题运行，该主题具有“enfold Advanced Layout Editor”。目前该编辑器已损坏-可能是由于旧版本与php或其他原因。无论如何，为了解决这个问题，我查看了实际的数据库表和页面内容下方的大约20行空行，我发现了这个看起来非常奇怪的JavaScript代码：<script> </script> <script> </script> <script> </script> <scr