Как реализовать выборочное обновление с настройкой настройщика?

У меня есть раздел в шаблоне страницы в созданной мной теме, который отображает содержимое на основе страницы, которую пользователь выбирает в настройщике с помощью элемента управления dropdown-pages. Прямо сейчас он просто использует стандартный транспорт обновления по умолчанию, но, поскольку это немного неуклюже перезагружает весь 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();

Настройте настройщик

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...
}

Полезные ссылки

• Выборочное обновление в настройщике
• Параметры темы - API настройщика
• Взглянув на то, как Twenty Sixteen v1.3 обрабатывает выборочное обновление, было полезно получить и запустить этот пример.