Wie implementiere ich eine selektive Aktualisierung mit einer Customizer-Einstellung?

Ich habe einen Abschnitt in einer Seitenvorlage in dem von mir erstellten Thema, in dem Inhalte basierend auf einer Seite angezeigt werden, die der Benutzer im Customizer mithilfe des Dropdown-Seiten-Steuerelements auswählt. Im Moment wird nur der Standard-Standard-Aktualisierungstransport verwendet, aber da dies das Umladen des gesamten Iframes schwierig macht, habe ich mich gefragt, ob es möglich ist, die neue selektive Aktualisierungsfunktion zu verwenden. Aber ich bin mir nicht sicher, wie ich es umsetzen soll. Weiß jemand, ob dies möglich ist und wenn ja, wie es geht?

Hier ist der Code in meiner Seitenvorlage, der den Inhalt anzeigt:

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

Hier ist der Code für die Einstellung im Customizer:

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

Erstellen Sie eine Funktion zur Ausgabe des selektiv aktualisierten Vorlagencodes

(Ich habe den HTML-Code <div class="cta-wrap">darin verpackt , um die Ausrichtung auf diesen bestimmten Markup-Block zu vereinfachen.)

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

Aktualisieren Sie Ihre Vorlage mit einem Aufruf der oben neu erstellten Funktion:

wpse247234_cta_block();

Richten Sie den Customizer ein

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

Stylen des Elements beim Aktualisieren

Während der Teil aktualisiert wird, wird dem betroffenen Element die Klasse customize-partial-refreshinghinzugefügt. Sie können es so stylen:

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

Hilfreiche Links

• Selektive Aktualisierung im Customizer
• Designoptionen - Die Customizer-API
• Ein Blick darauf, wie Twenty Sixteen v1.3 mit selektiver Aktualisierung umgeht, war hilfreich, um dieses Beispiel zum Laufen zu bringen.