Bagaimana cara menerapkan penyegaran selektif dengan pengaturan penyesuai?

Saya memiliki bagian dalam templat halaman dalam tema yang saya buat yang menampilkan konten berdasarkan halaman yang dipilih pengguna di penyesuai menggunakan kontrol dropdown-halaman. Saat ini hanya menggunakan transportasi refresh standar standar, tetapi karena itu agak kikuk memuat ulang seluruh iframe, saya bertanya-tanya apakah mungkin untuk menggunakan fitur refresh selektif baru. Tapi saya tidak yakin bagaimana cara mengimplementasikannya. Adakah yang tahu apakah ini mungkin dan jika demikian bagaimana melakukannya?

Berikut adalah kode di templat halaman saya yang menampilkan konten:

<?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>';
}
} ?>

Berikut adalah kode untuk pengaturan di penyesuai:

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

Buat fungsi untuk menampilkan kode templat yang disegarkan secara selektif

(Saya membungkus HTML di <div class="cta-wrap">dalamnya untuk memudahkan menargetkan blok markup khusus ini.)

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

Perbarui template Anda dengan panggilan ke fungsi yang baru dibuat di atas:

wpse247234_cta_block();

Siapkan Penyesuai

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

Mendesain item saat disegarkan

Saat parsial me-refresh, elemen yang terpengaruh akan memiliki kelas yang customize-partial-refreshingditambahkan ke dalamnya. Anda bisa bergaya seperti ini:

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

Tautan yang bermanfaat

• Refresh Selektif dalam Customizer
• Opsi Tema - API Penyesuai
• Melihat bagaimana Twenty Sixteen v1.3 menangani refresh selektif sangat membantu dalam membuat contoh ini aktif dan berjalan.