맞춤 설정 도구 설정으로 선택적 새로 고침을 구현하려면 어떻게해야하나요?

드롭 다운 페이지 컨트롤을 사용하여 사용자 정의 프로그램에서 사용자가 선택한 페이지를 기반으로 콘텐츠를 표시하는 테마로 페이지 템플릿에 섹션이 있습니다. 지금은 표준 기본 새로 고침 전송을 사용하고 있지만 전체 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="' . 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>';
}
} ?>

다음은 맞춤 설정 도구의 설정 코드입니다.

$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="' . 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>';
    }
}

위의 새로 생성 된 함수를 호출하여 템플릿을 업데이트하십시오.

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...
}

유용한 링크

• 커 스터 마이저의 선택적 새로 고침
• 테마 옵션 – Customizer API
• Twenty Sixteen v1.3 이 선택적 새로 고침을 처리 하는 방법을 살펴보면 이 예제를 시작하고 실행하는 데 도움이되었습니다.