Jak wdrożyć selektywne odświeżanie z ustawieniem dostosowania?

Mam sekcję w szablonie strony w utworzonym przeze mnie motywie, która wyświetla zawartość na podstawie strony wybranej przez użytkownika w dostosowywaniu za pomocą kontrolki rozwijanych stron. W tej chwili używa tylko standardowego domyślnego transportu odświeżania, ale ponieważ jest to trochę niezgrabne przeładowywanie całej ramki iframe, zastanawiałem się, czy można użyć nowej funkcji selektywnego odświeżania. Ale nie jestem pewien, jak to zaimplementować. Czy ktoś wie, czy jest to możliwe, a jeśli tak, to jak to zrobić?

Oto kod w moim szablonie strony, który wyświetla treść:

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

Oto kod ustawienia w personalizatorze:

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

Utwórz funkcję, aby wyświetlać selektywnie odświeżony kod szablonu

(Owinąłem kod HTML, <div class="cta-wrap">aby ułatwić celowanie w ten konkretny blok znaczników).

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

Zaktualizuj szablon, wywołując nowo utworzoną funkcję powyżej:

wpse247234_cta_block();

Skonfiguruj konfigurator

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

Stylizowanie przedmiotu w trakcie jego odświeżania

Podczas częściowego odświeżania, zmieniony element będzie miał customize-partial-refreshingdodaną klasę . Możesz nadać temu styl:

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

Przydatne linki

• Selektywne odświeżanie w narzędziu dostosowywania
• Opcje motywu - interfejs API dostosowywania
• Przyglądanie się, jak Twenty Sixteen v1.3 obsługuje selektywne odświeżanie, było pomocne w uruchomieniu tego przykładu.