ฉันจะใช้การรีเฟรชแบบเลือกด้วยการตั้งค่า Customizer ได้อย่างไร

ฉันมีส่วนในเทมเพลตหน้าในชุดรูปแบบที่ฉันทำซึ่งแสดงเนื้อหาตามหน้าที่ผู้ใช้เลือกในเครื่องมือปรับแต่งโดยใช้ตัวควบคุมหน้าแบบเลื่อนลง ตอนนี้เป็นเพียงการใช้การรีเฟรชเริ่มต้นมาตรฐาน แต่เนื่องจากมันเป็นการโหลด 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>';
}
} ?>

นี่คือรหัสสำหรับการตั้งค่าในเครื่องมือกำหนดเอง:

$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();

ตั้งค่า Customizer

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' );

จัดแต่งทรงผมไอเท็มขณะที่กำลังรีเฟรช

ในขณะที่บางส่วนกำลังรีเฟรชองค์ประกอบที่ได้รับผลกระทบจะมีคลาสที่customize-partial-refreshingเพิ่มเข้าไป คุณสามารถจัดสไตล์ตามที่ต้องการ:

.cta-wrap.customize-partial-refreshing {
    // styles...
}

ลิงก์ที่มีประโยชน์

• Selective Refresh ใน Customizer
• ตัวเลือกชุดรูปแบบ - Customizer API
• การดูว่าTwenty sixteen v1.3จัดการกับการรีเฟรชแบบเลือกมีประโยชน์ในการทำให้ตัวอย่างนี้ทำงานได้อย่างไร