主题定制器初始化完成后运行JS

时间：2015-07-08 作者：Sisir

我有一段JS代码，根据选择项的值使用显示/隐藏定制器控制组。

在最近的wp更新之前，代码运行良好（不确定是哪个版本首先破坏了这一点）。

下面是让js文件排队的代码。

add_action(\'customize_controls_print_scripts\', \'ppl_customize_controls_scripts\');
function ppl_customize_controls_scripts(){
    wp_register_script( \'ppl-customize-control\', get_template_directory_uri().\'/js/customizer-control.js\', array(\'jquery\'), 1, true);
    wp_enqueue_script( \'ppl-customize-control\' );
}

The JS file

jQuery(document).ready(function($){
    var skin_select = $(\'#customize-control-ppl-ninja-theme-options-skin\').find(\'select\');

    //alert(skin_select.attr(\'class\'));
    var selected_val = skin_select.children(\'option:selected\').val();
    var custom_group = [
        \'#accordion-section-custom_header_styles\',
        \'#accordion-section-custom_slider_styles\',
        \'#accordion-section-custom_footer_styles\',
        \'#accordion-section-custom_general_colors\'
    ];

    if(selected_val != 4){
        hide_custom_controls(custom_group);
    }

    skin_select.change(function(){
       var val = $(this).val();

        if(val != 4){
            hide_custom_controls(custom_group);
        }else{
            show_custom_controls(custom_group);
        }

    });

    function hide_custom_controls(custom_group){
        var selector = custom_group.join(\',\');
        $(selector).hide();
    }

    function show_custom_controls(custom_group){
        var selector = custom_group.join(\',\');
        $(selector).show();
    }

});

The problem is, JS加载和隐藏customizer控件部分与内联css配合得很好display:none. 然后cusomizer js脚本将其修改并将内联css更新为display:list-item 这使它们可见。因此，我需要在定制程序完全加载之后运行JS代码。

我查看了wp includes目录中的定制器脚本，但没有找到任何可以使用的内容。也许我错过了什么。

有关修订css的更多信息，请参见`/wp-admin/js/customize-controls.js`.
脚本正在使用`ready` 事件以添加类并修改面板、截面和控件的可见性。但我无法将侦听器添加到该事件中。
属性activePanels、activeSections、activeControls是从文件的PHP中设置的`/wp-admin/customize.php` 我找不到覆盖该变量的方法，因为您可以看到它是在body标记结束之前打印的。
因此，可能的解决方案可能是找到一种方法`ready` 事件

5 个回复

最合适的回答,由SO网友:Sisir 整理而成

到目前为止，问题是JS文件的初始加载。因为我找不到任何使用JS的解决方案。问题不在于脚本加载，而在于执行时间。

无论如何，主题定制器会查看全局变量，在加载时，它会将哪个面板/节/控件显示为活动的。

如何使节/控件/面板在初始加载时处于活动/非活动状态，在花了几个小时的时间输入核心文件后，我找到了解决方案。

面板使用customize_panel_active 滤器传递两个参数$active 布尔and$panel 对象

用于截面customize_section_active 滤器传递两个参数$active 布尔and$section 对象customize_control_active 滤器传递两个参数$active 布尔and$control 对象

Example: 如果我假设我有一个面板，它的id是my_panel. 如果没有设置某个主题选项，我想将其隐藏。

add_filter(\'customize_panel_active\', \'maybe_panel_active\', 10, 2);

function maybe_panel_active($active, $panel){

    if($panel->id == \'my_panel\' && !theme_option(\'certain_theme_option\') ){
        $active = false;
    }

    return $active;
}

就是这样！非常直接：）

Note: 解决方案纯粹是php。如果有人能够通过监听customizers JS事件使其正常工作。我对此非常感兴趣，因为这个问题最初是针对JS解决方案的。

SO网友:Nicolai Grossherr

对我来说，这似乎是一个时间问题，也许/可能我过于简单化了，但如何利用$debs 参数wp_register_script 和wp_enqueue_script 提供控制加载顺序，其中一个-按其添加的顺序script-loader.php - customize-base, customize-loader, customize-preview, customize-models, customize-views, customize-controls, customize-widgets 或customize-preview-widgets 应该是依赖项。

SO网友:Matt van Andel

听起来像是一个依赖性问题。您只检查jQuery，因此您的脚本可能会被抢占。您可以确保在使用\'customize-preview-widgets\'. 试试这个…

add_action(\'customize_preview_init\', \'ppl_customize_controls_scripts\');
function ppl_customize_controls_scripts(){
    wp_enqueue_script(
          \'ppl-customize-control\',
          get_template_directory_uri().\'/js/customizer-control.js\',
          array( \'jquery\',\'customize-preview-widgets\' ),
          \'\',
          true
    );
}

SO网友:bonger

您可以使用custom control 通过重写render_content(), eg公司

add_action( \'customize_register\', function ( $wp_customize ) {
    // Custom control.
    class PPL_Ninja_Skin_Select_Customize_Control extends WP_Customize_Control {
        public $type = \'select\';

        // Override to inject our javascript.
        public function render_content() {
            parent::render_content();
            ?>
<script type="text/javascript">
(function () {
    var skin_select = $(\'#customize-control-ppl-ninja-theme-options-skin\').find(\'select\');
    var custom_group = [
        \'#accordion-section-custom_header_styles\',
        \'#accordion-section-custom_slider_styles\',
        \'#accordion-section-custom_footer_styles\',
        \'#accordion-section-custom_general_colors\'
    ];

    skin_select.change(function () {
        if ($(this).val() == 4) {
            $(custom_group.join(\',\')).hide();
        } else {
            $(custom_group.join(\',\')).show();
        }
    });
    skin_select.change();
}());
</script>
            <?php
        }
    }

    $wp_customize->add_setting( \'ppl-ninja-theme-options-skin\' );
    $wp_customize->add_section( \'ppl-ninja-theme-options\', array(
        \'title\' => __( \'Ninja Options\', \'ppl\' ),
    ) );

    // Add custom control.
    $wp_customize->add_control( new PPL_Ninja_Skin_Select_Customize_Control(
        $wp_customize, \'ppl-ninja-theme-options-skin\', array(
            \'label\' => __( \'Skin\', \'ppl\' ),
            \'section\' => \'ppl-ninja-theme-options\',
            \'choices\' => array(
                \'\' => __( \'Select\', \'ppl\' ),
                1 => __( \'One\', \'ppl\' ),
                2 => __( \'Two\', \'ppl\' ),
                3 => __( \'Three\', \'ppl\' ),
                4 => __( \'Four\', \'ppl\' ),
            ),
        )
    ) );

    // Test data.
    foreach ( array( \'header_styles\', \'slider_styles\', \'footer_styles\', \'general_colors\' ) as $setting ) {
        $wp_customize->add_setting( \'custom_\' . $setting . \'-setting\' );
        $wp_customize->add_section( \'custom_\' . $setting, array(
            \'title\' => sprintf( __( \'Ninja %s\', \'ppl\' ), $setting ),
        ) );
        $wp_customize->add_control( \'custom_\' . $setting . \'-setting\', array (
            \'label\' => __( \'Setting\', \'td\' ),
            \'section\' => \'custom_\' . $setting,
        ) );
    }
} );

（也不用担心任何CSS）。

SO网友:nadavy

虽然不是一个很好的解决方案，但也许您可以使用window对其进行采样。setInterval（），一旦出现，请停止间隔并执行任何您想执行的操作。

结束

小码农CODE

主题定制器初始化完成后运行JS

相关推荐

Javascript代码中的PHP变量