如何在不使用选择性刷新的情况下在WordPress定制器中添加编辑快捷方式图标？

下面是我在customizer预览中添加颜色部分的代码

$wp_customize->add_section( \'cd_colors\' , array(
        \'title\'      => \'Colors\',
        \'priority\'   => 30,
    ) );

这是控制和设置

$wp_customize->add_setting( \'background_color\' , array(
        \'default\'     => \'#43C6E4\',
        \'transport\'   => \'postMessage\',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, \'background_color\', array(
        \'label\'        => \'Background Color\',
        \'section\'    => \'cd_colors\',
        \'settings\'   => \'background_color\',
    ) ) );

现在，我需要的只是在我应用此主题模式的元素旁边的一个编辑快捷方式图标

<div id="bg-color">
    <?php echo get_theme_mod( \'background_color\' ); ?>
</div>

现在，我能够添加该图标的唯一方法是使用选择性刷新，请参见下文

$wp_customize->selective_refresh->add_partial( \'background_color\', array(
        \'selector\' => \'#bg-color\',
        \'container_inclusive\' => false,
      \'render_callback\' => \'dummy_function\'
    ) );

但是，由于我使用的是自己的javascript，所以我不需要选择性刷新功能，我只需要一个图标，当单击该图标时，应该会进入所需的设置。这是我的javascript代码

( function( $ ) {

    // Update the site title in real time...
    wp.customize( \'background_color\', function( value ) {
        value.bind( function( newval ) {
            $( \'#bg-color\' ).css( \'background-color\', newval );
        } );
    } );

} )( jQuery );

wp.customize.selectiveRefresh.partialConstructor.background_color = (function( api, $ ) { \'use strict\'; return api.selectiveRefresh.Partial.extend( { /** * Refresh. * * Override refresh behavior to apply changes with JS instead of doing * a selective refresh request for PHP rendering (since unnecessary). * * @returns {jQuery.promise} Resolved promise. */ refresh: function() { var partial = this, backgroundColorSetting; backgroundColorSetting = api( partial.params.primarySetting ); _.each( partial.placements(), function( placement ) { placement.container.css( \'background-color\', backgroundColorSetting.get() ); } ); // Return resolved promise since no server-side selective refresh will be requested. return $.Deferred().resolve().promise(); } } ); })( wp.customize, jQuery );

$wp_customize->selective_refresh->add_partial( \'wpse_282425_background_color\', array( \'type\' => \'background_color\', // Key addition. \'selector\' => \'#bg-color\', \'container_inclusive\' => false, \'render_callback\' => \'dummy_function\', ) );

相关推荐