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

10

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
) );
jetyet47
quelle

Antworten:

10

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

Dave Romsey
quelle
Anscheinend wissen Sie zu viel;) Wenn Sie also glauben, eine Antwort zu haben, besteht die nächste Stufe darin, gemischte Einstellungen vorzunehmen, wobei einige Attributänderungen eine teilweise Aktualisierung auslösen, während andere eine vollständige Aktualisierung auslösen (in diesem Fall ist eine vollständige Aktualisierung erforderlich, um globale JS-Optionen festzulegen). . Soll ich eine formelle Frage stellen? ;))
Mark Kaplun
@ MarkKaplun, wenn du wüsstest, wie lange diese Antwort gedauert hat, würde es überhaupt nicht so aussehen :-) In meinem Test-Setup habe ich zusätzlich zu der obigen selektiven Aktualisierung eine Mischung aus Optionen für die vollständige Seitenaktualisierung. Scheint sofort gut zu funktionieren. Wenn es Ihnen nichts ausmacht, würde ich eine neue Frage mit Ihren spezifischen Details bevorzugen, und wenn es die Zeit erlaubt, würde ich gerne einen Blick darauf werfen.
Dave Romsey
1
In Bezug auf den fallback_refreshKommentar: „verhindert konstante Refresh wenn Dokument .cta-wrap enthält keine Wähler“. Der Fehler beim unendlichen Nachladen sollte in 4.7-RC1 behoben sein.
Weston Ruter
1
@ dave-romsey Was ist der Sinn des JS in customize-preview.js? Es sieht so aus, als würde der Inhalt des Elements auf die Seiten-ID gesetzt. Sollte die selektive Aktualisierung nicht stattdessen alles für Sie erledigen, sodass diese JS-Datei überhaupt nicht benötigt wird?
Weston Ruter
@WestonRuter danke für den Hinweis zum Fix für die unendliche Aktualisierung in 4.7-RC1. Sie haben Recht (natürlich :-p), customize-preview.jsdass es auch unnötig ist, also habe ich es aus der Antwort entfernt.
Dave Romsey