問題描述

我在主題中的一個頁面模板中有一個部分，主題是根據用户使用 dropdown-pages 控件在自定義程序中選擇的頁面顯示內容。現在它只是使用標準的默認刷新傳輸，但由於這是一種笨重的重載整個 iframe，我想知道是否可以使用新的選擇性刷新功能。但我不知道如何實現它。任何人知道這是否可行，如果是這樣做呢？

以下是我的頁面模板中顯示內容的代碼：

<?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="'%20.%20esc_url($intro_link)%20.%20'">Learn More</a></p>';
}else{
echo '<p><a class="cta" href="'%20.%20esc_url($intro_link)%20.%20'">' . esc_html($intro_linktext) . '</a></p>';
}
} ?>

以下是自定義工具中設置的代碼：

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

最佳解決方案

創建一個函數來輸出有選擇地刷新的模板代碼

(我將<div class="cta-wrap"> 中的 HTML 包裝起來，以便更容易地定位這個特定的標記塊。)

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="'%20.%20esc_url(%20$intro_link%20)%20.%20'">Learn More</a></p>';
            } else {
                echo '<p><a class="cta" href="'%20.%20esc_url(%20$intro_link%20)%20.%20'">' . esc_html( $intro_linktext ) . '</a></p>';
            }
        echo '</div>';
    }
}

通過調用上面新創建的函數更新您的模板：

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

在項目刷新時對樣式進行樣式化

當部分刷新時，受影響的元素將添加類 customize-partial-refreshing 。你可以這樣設計風格：

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

有用的網址

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。