Як здійснити вибіркове оновлення за допомогою налаштування налаштування?

У темі, яку я створюю, у мене є розділ у шаблоні сторінки, який відображає вміст на основі сторінки, яку користувач вибирає у налаштуваннях за допомогою керування спадними сторінками. Наразі він просто використовує стандартний транспорт оновлення за замовчуванням, але оскільки це щось незграбне перезавантаження всього 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...
}

Корисні Посилання

• Вибіркове оновлення в "Настроювачі"
• Параметри теми - API налаштування
• Ознайомившись з тим, як Twenty Sixteen v1.3 обробляє вибіркове оновлення, було корисно для приведення цього прикладу до роботи та роботи.