如何使用定制器设置实施选择性刷新？

我正在制作的主题中的页面模板中有一个部分，该部分根据用户使用下拉页面控件在自定义程序中选择的页面显示内容。现在它只是使用标准的默认刷新传输，但由于重新加载整个iframe有点笨拙，我想知道是否可以使用新的选择性刷新功能。但我不知道如何实现它。有人知道这是否可行，如果可行，怎么做？

以下是“我的页面”模板中显示内容的代码：

<?php if ((get_theme_mod( \'intro_page\' )) != \'\') {

$intro_id = get_theme_mod( \'intro_page\' );

$intro_header = get_the_title( $intro_id );

$intro_excerpt = get_the_excerpt( $intro_id );

$intro_link = get_the_permalink( $intro_id );

$intro_linktext = get_post_meta( $intro_id, \'emm_cta_text\', true );

echo \'<h1>\' . esc_html($intro_header) . \'</h1>\' . \'<p>\' . esc_html($intro_excerpt) . \'</p>\';

if( ! get_post_meta( $intro_id, \'emm_cta_text\', true ) ) {
echo \'<p><a class="cta" href="\' . esc_url($intro_link) . \'">Learn More</a></p>\';
}else{
echo \'<p><a class="cta" href="\' . esc_url($intro_link) . \'">\' . esc_html($intro_linktext) . \'</a></p>\';
}
} ?>

以下是customizer中设置的代码：

$wp_customize->add_setting( \'intro_page\' , array(
\'sanitize_callback\' => \'absint\',
) );

$wp_customize->add_control( \'intro_page\', array(
\'label\'    => __( \'Page to use for intro section\', \'veritas\' ), 
\'section\'  => \'intro\',
\'settings\' => \'intro_page\',
\'type\'     => \'dropdown-pages\',
\'priority\' => 1
) );

创建一个函数来输出选择性刷新的模板代码（我将HTML包装在<div class="cta-wrap"> 以便更容易地定位此特定标记块。）

function wpse247234_cta_block() {
    if ( ( get_theme_mod( \'intro_page\' ) ) != \'\' ) {
        $intro_id       = get_theme_mod( \'intro_page\' );
        $intro_header   = get_the_title( $intro_id );
        $intro_excerpt  = get_the_excerpt( $intro_id );
        $intro_link     = get_the_permalink( $intro_id );
        $intro_linktext = get_post_meta( $intro_id, \'emm_cta_text\', true );

        echo \'<div class="cta-wrap">\';
            echo \'<h1>\' . esc_html( $intro_header ) . \'</h1>\' . \'<p>\' . esc_html( $intro_excerpt ) . \'</p>\';

            if ( ! get_post_meta( $intro_id, \'emm_cta_text\', true ) ) {
                echo \'<p><a class="cta" href="\' . esc_url( $intro_link ) . \'">Learn More</a></p>\';
            } else {
                echo \'<p><a class="cta" href="\' . esc_url( $intro_link ) . \'">\' . esc_html( $intro_linktext ) . \'</a></p>\';
            }
        echo \'</div>\';
    }
}

通过调用上述新创建的函数更新模板：

wpse247234_cta_block();

设置自定义程序

function wpse247234_customize_register( $wp_customize ) { $wp_customize->add_section( \'intro\', array ( \'title\' => __( \'intro\', \'text-domain\' ), \'priority\' => 999, ) ); $wp_customize->add_setting( \'intro_page\' , array( \'sanitize_callback\' => \'absint\', \'transport\' => \'postMessage\' ) ); $wp_customize->add_control( \'intro_page\', array( \'label\' => __( \'Page to use for intro section\', \'text-domain\' ), \'section\' => \'intro\', \'settings\' => \'intro_page\', \'type\' => \'dropdown-pages\', \'priority\' => 1 ) ); $wp_customize->selective_refresh->add_partial( \'intro_page\', array( \'selector\' => \'.cta-wrap\', \'container_inclusive\' => true, \'render_callback\' => \'wpse247234_cta_block\', \'fallback_refresh\' => false, // Prevents refresh loop when document does not contain .cta-wrap selector. This should be fixed in WP 4.7. ) ); } add_action( \'customize_register\', \'wpse247234_customize_register\' );

小码农CODE

在刷新项时设置其样式

相关推荐