Làm cách nào để triển khai làm mới có chọn lọc với cài đặt tùy biến?

Tôi có một phần trong mẫu trang trong chủ đề tôi đang tạo hiển thị nội dung dựa trên trang mà người dùng chọn trong tùy biến bằng điều khiển trang thả xuống. Ngay bây giờ, nó chỉ sử dụng vận chuyển làm mới mặc định tiêu chuẩn, nhưng vì đó là loại tải lại toàn bộ iframe, tôi đã tự hỏi liệu có thể sử dụng tính năng làm mới chọn lọc mới không. Nhưng tôi không chắc làm thế nào để thực hiện nó. Bất cứ ai cũng biết nếu điều này là có thể và nếu vậy làm thế nào để làm điều đó?

Đây là mã trong mẫu trang của tôi hiển thị nội dung:

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

Đây là mã cho cài đặt trong tùy biến:

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

Tạo một hàm để xuất mã mẫu được chọn làm mới

(Tôi đã bọc HTML bên trong <div class="cta-wrap">để dễ dàng nhắm mục tiêu vào khối đánh dấu cụ thể này.)

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

Cập nhật mẫu của bạn bằng một cuộc gọi đến chức năng mới được tạo ở trên:

wpse247234_cta_block();

Thiết lập Trình tùy biến

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

Tạo kiểu cho món đồ khi nó được làm mới

Trong khi một phần được làm mới, phần tử bị ảnh hưởng sẽ có lớp customize-partial-refreshingđược thêm vào nó. Bạn có thể tạo kiểu như vậy:

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

Liên kết hữu ích

• Làm mới có chọn lọc trong Tùy biến
• Tùy chọn chủ đề - API tùy biến
• Xem xét cách Twenty Sixteen v1.3 xử lý làm mới có chọn lọc rất hữu ích trong việc đưa ví dụ này lên và chạy.