定制器`active_allback`未使用`postMessage`传输方法处理控件

时间：2015-12-14 作者：David Gard

我在2个自定义部分中有4个自定义设置，每个部分中的第二个设置依赖于active_callback 显示/隐藏它。

在这两种情况下active_callback 检查该部分中第一个自定义设置的值，直到我开始使用transport => postMessage 对于第一个设置（以下所有设置，因为显示它们比解释它们更容易）。

没有JS错误，所以我假设这一定与激活回调的方式有关（即，可能不是什么时候postMessage 已使用）。

虽然我可以添加一些额外的JS来满足我的需求，但我想知道这是否是预期的行为，如果是，是否有办法解决我的问题。

以下是设置（使用customize_register 动作挂钩）。。。

/**
 * Create the custom \'Archive Pages\' section and register settings
 */
function register_settings_archive_template($wp_customise){

    $wp_customise->add_section(\'section_template_archive\' , array(
        \'title\'             => __(\'Archive Pages\', TEXT_DOMAIN),
        \'priority\'          => 60
    ));

    /**
     * Link tile size (overrides General setting)
     */

    $wp_customise->add_setting(\'archive_link_tile_size\', array(
        \'default\'   => \'default\',
        \'transport\' => \'postMessage\'
    ));

    $wp_customise->add_control(\'archive_link_tile_size\', array(
        \'label\'         => __(\'Link tile size\', TEXT_DOMAIN),
        \'section\'       => \'section_template_archive\',
        \'type\'          => \'radio\',
        \'choices\'       => array(
            \'default\'   => __(\'Default\', TEXT_DOMAIN),
            \'large\'     => __(\'Large\', TEXT_DOMAIN),
            \'small\'     => __(\'Small\', TEXT_DOMAIN)
        ),
        \'description\'   => __(\'The size of link tile that you wish to dsipay on archive pages.\', TEXT_DOMAIN),
    ));

    /**
     * Show \'More...\' link
     */

    $wp_customise->add_setting(\'archive_show_more_link\', array(
        \'default\'   => false,
        \'transport\' => \'postMessage\'
    ));

    $wp_customise->add_control(\'archive_show_more_link\', array(
        \'label\'             => __(\'Show link to Link/Post\', TEXT_DOMAIN),
        \'section\'           => \'section_template_archive\',
        \'type\'              => \'checkbox\',
        \'description\'       => __(\'Whether or not to show the \\\'More...\\\' link underneath a large link tile on archive pages.  Note that links cannot be displayed in conjunction with \\\'Small\\\' Link Tiles.\', TEXT_DOMAIN),
        \'active_callback\'   => \'_check_is_link_tile_size_large\'
    ));

}

/**
 * Create the custom \'Search Results\' section and register settings
 */
function register_settings_search_template($wp_customise){

    $wp_customise->add_section(\'section_template_search\' , array(
        \'title\'             => __(\'Search Results\', TEXT_DOMAIN),
        \'priority\'          => 60
    ));

    /**
     * Link tile size (overrides General setting)
     */

    $wp_customise->add_setting(\'search_link_tile_size\', array(
        \'default\'   => \'default\',
        \'transport\' => \'postMessage\'
    ));

    $wp_customise->add_control(\'search_link_tile_size\', array(
        \'label\'         => __(\'Link tile size\', TEXT_DOMAIN),
        \'section\'       => \'section_template_search\',
        \'type\'          => \'radio\',
        \'choices\'       => array(
            \'default\'   => __(\'Default\', TEXT_DOMAIN),
            \'large\'     => __(\'Large\', TEXT_DOMAIN),
            \'small\'     => __(\'Small\', TEXT_DOMAIN)
        ),
        \'description\'   => __(\'The size of link tile that you wish to dsipay on the search results page.\', TEXT_DOMAIN)
    ));

    /**
     * Show \'More...\' link
     */

    $wp_customise->add_setting(\'search_show_more_link\', array(
        \'default\'   => false,
        \'transport\' => \'postMessage\'
    ));

    $wp_customise->add_control(\'search_show_more_link\', array(
        \'label\'             => __(\'Show link to Link/Post\', TEXT_DOMAIN),
        \'section\'           => \'section_template_search\',
        \'type\'              => \'checkbox\',
        \'description\'       => __(\'Whether or not to show the \\\'More...\\\' link underneath a large link tile on the search results page.  Note that links cannot be displayed in conjunction with \\\'Small\\\' Link Tiles.\', TEXT_DOMAIN),
        \'active_callback\'   => \'_check_is_link_tile_size_large\'
    ));

}
这是活动回调。。。

public function _check_is_link_tile_size_large($control){

    $control_id = $control->id;

    switch($control_id):

        case \'archive_show_more_link\' :
            $validation_setting = \'archive_link_tile_size\';
            break;

        case \'search_show_more_link\' :
            $validation_setting = \'search_link_tile_size\';
            break;

    endswitch;

    return ($control->manager->get_setting($validation_setting)->value() === \'large\');

}
更新我应该首先添加这个，但这里是我用来更新上述设置的JSpostMessage -

(function($){

    var api = wp.customize;

    CustomiseArchivePages();    // Customise settings in the Archive Pages section
    CustomiseSearchResults();   // Customise settings in the Search Results section

    /**
     * Customise settings in the Archive Pages section
     */
    function CustomiseArchivePages(){

        /** Link Tile size */
        api(\'archive_link_tile_size\', function(value){
            value.bind(function(newval){
                PreviewLinkTile(newval, api.get().archive_show_more_link);
            });
        });

        /** Show/hide \'More...\' button  */
        api(\'archive_show_more_link\', function(value){
            value.bind(function(newval){
                PreviewLinkTile(api.get().archive_link_tile_size, newval);
            }); 
        });

    }

    /**
     * Customise settings in the Search Results section
     */
    function CustomiseSearchResults(){

        /** Search box placeholder text */
        api(\'search_box_placeholder\', function(value){
            value.bind(function(newval){
                $(\'input.s\').attr(\'placeholder\', newval);
            });
        });

        /** Link Tile size */
        api(\'search_link_tile_size\', function(value){
            value.bind(function(newval){
                PreviewLinkTile(newval, api.get().search_show_more_link);
            });
        });

        /** Show/hide \'More...\' button  */
        api(\'search_show_more_link\', function(value){
            value.bind(function(newval){
                PreviewLinkTile(api.get().search_link_tile_size, newval);
            });
        });

    }

    /**
     * Set the link tile size and show/hide the \'More...\' button on link tiles
     *
     * @param required string linkTileSize          The size of the link tiles that are being displayed
     * @param required string showMoreInfoButton    Whether or not to show the \'More...\' button
     */
    function PreviewLinkTile(linkTileSize, showMoreInfoButton){

        var linksContainer = $(\'#links-container\'),         // The links container
            linkTiles = $(\'.link-tile\', linksContainer);    // Every individual link tile

        linkTileSize = (linkTileSize !== \'default\') ? linkTileSize : api.get().general_link_tile_size;  // If the new size is default, grab the default size

        /**
         * Set the link tile size
         */
        switch(linkTileSize){

            case \'large\' :

                /** Set the links container classes */
                linksContainer.removeClass(\'uk-grid-width-1-2 uk-grid-width-small-1-3 uk-grid-width-medium-1-4 uk-grid-width-large-1-5\')
                    .addClass(\'uk-grid-width-1-1 uk-grid-width-small-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-3\');

                /** Set the link tile class */
                linkTiles.removeClass(\'link-tile-small\')
                    .addClass(\'link-tile-large\');

                break;

            case \'small\' :

                /** Set the links container classes */
                linksContainer.removeClass(\'uk-grid-width-1-1 uk-grid-width-small-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-3\')
                    .addClass(\'uk-grid-width-1-2 uk-grid-width-small-1-3 uk-grid-width-medium-1-4 uk-grid-width-large-1-5\');

                /** Set the link tile class */
                linkTiles.removeClass(\'link-tile-large\')
                    .addClass(\'link-tile-small\');

                break;

            default :
                console.log(\'An unexpected error occured when customising the Link Tile size: The new size could not be determined.\');
                break;

        }

        /**
         * Show/hide the \'More...\' button
         */
        if(showMoreInfoButton && linkTileSize === \'large\'){
            linkTiles.addClass(\'show-more-button\');
        } else {
            linkTiles.removeClass(\'show-more-button\');
        }

    }

})(jQuery);

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

因为postMessage 完全使用JavaScript，任何PHPactive_callback 除非预览刷新（例如通过wp.customize.previewer.refresh()). 因此，您需要做的是实现active 改为使用JavaScript进行回调，如下所示：

wp.customize.bind( \'ready\', function () {
    wp.customize.control( \'archive_show_more_link\', function( control ) {
        var setting = wp.customize( \'archive_link_tile_size\' );
        control.active.set( \'large\' === setting.get() );
        setting.bind( function( value ) {
            control.active.set( \'large\' === value );
        } );
    } );

    wp.customize.control( \'search_show_more_link\', function( control ) {
        var setting = wp.customize( \'search_link_tile_size\' );
        control.active.set( \'large\' === setting.get() );
        setting.bind( function( value ) {
            control.active.set( \'large\' === value );
        } );
    } );
} );
确保此脚本进入Customizer窗格，而不是Customizer预览。换句话说，在customize_controls_enqueue_scripts 行动

标签： theme-customizer   小码农  

相关推荐