Comment mettre en œuvre une actualisation sélective avec un paramètre de personnalisation?

J'ai une section dans un modèle de page dans le thème que je crée qui affiche du contenu basé sur une page que l'utilisateur sélectionne dans le personnalisateur à l'aide du contrôle des pages déroulantes. En ce moment, il utilise simplement le transport de rafraîchissement par défaut standard, mais comme c'est une sorte de rechargement maladroit de l'ensemble de l'iframe, je me demandais s'il était possible d'utiliser la nouvelle fonctionnalité de rafraîchissement sélectif. Mais je ne sais pas comment le mettre en œuvre. Quelqu'un sait si c'est possible et si oui, comment le faire?

Voici le code de mon modèle de page qui affiche le contenu:

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

Voici le code du paramètre dans le personnaliseur:

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

Créer une fonction pour sortir le code de modèle actualisé sélectivement

(J'ai encapsulé le code HTML <div class="cta-wrap">pour faciliter le ciblage de ce bloc de balisage particulier.)

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

Mettez à jour votre modèle avec un appel à la fonction nouvellement créée ci-dessus:

wpse247234_cta_block();

Configurer le personnalisateur

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

Styliser l'élément lors de son rafraîchissement

Pendant que le partiel est rafraîchissant, l'élément affecté aura la classe customize-partial-refreshingajoutée. Vous pouvez le styler comme ceci:

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

Liens utiles

• Actualisation sélective dans le personnalisateur
• Options de thème - L'API de personnalisation
• La façon dont Twenty Sixteen v1.3 gère l'actualisation sélective a été utile pour que cet exemple soit opérationnel.