Özelleştirici ayarıyla seçici yenilemeyi nasıl uygularım?

Yaptığım temanın sayfa şablonunda, kullanıcının açılan sayfalar denetimini kullanarak özelleştiricide seçtiği bir sayfaya göre içerik görüntüleyen bir bölüm var. Şu anda sadece standart varsayılan yenileme aktarımını kullanıyor, ancak bu tüm iframe'i yeniden yükleyen bu kadar hantal bir şey olduğundan, yeni seçici yenileme özelliğini kullanmanın mümkün olup olmadığını merak ediyordum. Ama nasıl uygulanacağından emin değilim. Bunun mümkün olup olmadığını ve nasıl yapılacağını bilen var mı?

İşte sayfa şablonumda içeriği gösteren kod:

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

Özelleştiricideki ayarın kodu:

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

Seçmeli olarak yenilenen şablon kodunu çıktılamak için bir işlev oluşturun

(HTML'yi <div class="cta-wrap">bu özel işaretleme bloğunu hedeflemeyi kolaylaştırmak için içine kaydırdım.)

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

Şablonunuzu yukarıdaki yeni oluşturulan işlev çağrısıyla güncelleyin:

wpse247234_cta_block();

Özelleştiriciyi Ayarlama

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

Öğeyi yenilenirken şekillendirin

Kısmi yenilenirken, etkilenen öğeye sınıf customize-partial-refreshingeklenir. Bu şekilde stil yapabilirsiniz:

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

Yararlı Bağlantılar

• Özelleştiricide Seçmeli Yenileme
• Tema Seçenekleri - Özelleştirici API'sı
• Twenty Sixteen v1.3'ün seçici yenilemeyi nasıl ele aldığına bir göz atmak, bu örneği açıp kapamak için yardımcı oldu.