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

时间:2017-09-27 作者:Taj Khan

我正在开发一个主题,我想知道是否无论如何我可以添加一个视觉编辑快捷方式而无需选择性刷新?

$wp_customize->get_setting( \'blogname\' )->transport        = \'postMessage\';

$wp_customize->selective_refresh->add_partial( \'blogname\', array(
    \'selector\' => \'.site-title a\',
    \'render_callback\' => \'twentyfifteen_customize_partial_blogname\',
) );
我能喜欢吗

$wp_customize->get_setting( \'blogname\' )->transport        = \'postMessage\';
$wp_customize->get_setting( \'blogdescription\' )->transport = \'postMessage\';

$wp_customize->add_partial( \'blogname\', array(
    \'selector\' => \'.site-title a\',
    \'render_callback\' => \'twentyfifteen_customize_partial_blogname\',
) );
实际上,它起作用了,并给出了预期的结果。。但我使用Kirki作为我的框架,由于某种原因,我无法做到这一点。我只是不想使用默认的选择性刷新,我想在postMessage中使用自己的javascript函数,但我无法在这里实现选择器标记。

这是我的代码:

Kirki::add_field( \'theme_config\', array(
    \'type\'     => \'text\',
    \'settings\' => \'about_us_video_setting\',
    \'label\'    => __( \'Video Link\', \'rst\' ),
    \'section\'  => \'about_us_section\',
    \'default\'  => esc_attr__( \'youtube.com\', \'rst\' ),
    \'transport\' => \'postMessage\',
    \'partial_refresh\' => array( 
    \'about_us_video_setting\' => array( 
        \'selector\' => \'#youtube-video\', 
        \'render_callback\' => \'show_video\', 
    ) ),
    \'active_callback\'    => array(
        array(
            \'setting\'  => \'is_front_page\',
            \'operator\' => \'==\',
            \'value\'    => true,
        ),
    ),

) );
我想要的是

Kirki::add_field( \'theme_config\', array(
    \'type\'     => \'text\',
    \'settings\' => \'about_us_video_setting\',
    \'label\'    => __( \'Video Link\', \'rst\' ),
    \'section\'  => \'about_us_section\',
    \'default\'  => esc_attr__( \'youtube.com\', \'rst\' ),
    \'transport\' => \'postMessage\',
     \'selector\' => \'#youtube-video\',        
    \'active_callback\'    => array(
        array(
            \'setting\'  => \'is_front_page\',
            \'operator\' => \'==\',
            \'value\'    => true,
        ),
    ),

) );
这是。。即使我将传输作为postMessage,is所做的只是默认刷新,而不是使用我自己的javascript

( function( $ ) {
// Change the previewed URL to the selected page when changing the page_for_posts.
wp.customize( \'about_us_video_setting\', function( setting ) {
    setting.bind( function( url ) {
        $(\'.embed-responsive-item\').attr(\'src\',url);
    });
});

} )( jQuery );
我只是想澄清一下,因为我没有找到任何文档。是否有条件使用选择性刷新来显示编辑屏幕?

从编辑shorcuts我是说这个铅笔图标enter image description here这会将您带到所需的编辑位置。

2 个回复
最合适的回答,由SO网友:Alison 整理而成

有一种简单的方法可以通过使用__return_false . 缺点是您会得到双重刷新,因为它会检查部分,然后返回“false”,这将导致完全刷新。如果您只使用javascript来显示“实时”预览,则会出现问题。在这种情况下,你必须采用韦斯顿·鲁特的解决方案。

如果您实际上没有使用postMessage预览,只想显示快捷方式,那么这也没什么大不了的,因为您无论如何都需要完全刷新。

我不知道为什么他们没有为那些只使用javascript的人构建这些部分编辑快捷方式。

在kirki:

\'transport\' => \'postMessage\',    
\'partial_refresh\' => array(
            \'about_us_video_setting\' => array(
                \'selector\' => \'#youtube-video\',
                \'render_callback\' => \'__return_false\'
            )
        )
标准:

$wp_customize->get_setting( \'about_us_video_setting\' )->transport   = \'postMessage\';

$wp_customize->selective_refresh->add_partial( \'about_us_video_setting\', array(
            \'selector\' => \'#youtube-video\',
            \'render_callback\' => \'__return_false\',
        ) );

SO网友:Weston Ruter

您可以做的是扩展wp.customize.selectiveRefresh.Partial 在JavaScript中,创建覆盖refresh 行为来应用基于JS的实时预览,而不是执行Ajax调用来执行部分刷新请求。

您可以参考Customize Widget Sidebar Meta 插件,特别是sidebar_meta_background_color 部分类型。

如果你用这个注册partialssidebar_meta_background_color 然后他们会使用这个JS子类refresh 方法

结束