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 dans 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
) );
(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 fonction nouvellement créée ci-dessus:
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' );
Pendant l'actualisation du partiel, la classe customize-partial-refreshing
est ajoutée à l'élément affecté. Vous pouvez le styler comme suit:
.cta-wrap.customize-partial-refreshing {
// styles...
}