Comment implémenter une actualisation sélective avec un paramètre de personnalisation?

10

Le thème que je crée contient une section dans un modèle de page qui affiche le contenu en fonction d'une page sélectionnée par l'utilisateur dans le personnalisateur à l'aide du contrôle déroulant pages. Pour le moment, il utilise uniquement le transport d'actualisation standard par défaut, mais comme c'est un peu fastidieux de recharger l'intégralité de l'iframe, je me demandais s'il était possible d'utiliser la nouvelle fonctionnalité d'actualisation sélective. Mais je ne sais pas comment le mettre en œuvre. Quelqu'un sait si cela 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 pour le paramétrage 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
) );
    
posée jetyet47 24.11.2016 - 00:00

1 réponse

9

Créer une fonction pour générer le code de modèle actualisé de manière sélective

(J'ai enveloppé le code HTML dans <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 en appelant la nouvelle fonction ci-dessus:

wpse247234_cta_block();

Configurer le personnaliseur

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

Mise en forme de l'élément en cours d'actualisation

Pendant l'actualisation du partiel, la classe customize-partial-refreshing est ajoutée à l'élément affecté. Vous pouvez le personnaliser comme suit:

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

Liens utiles

réponse donnée Dave Romsey 24.11.2016 - 06:07

Lire d'autres questions sur les étiquettes