カスタマイザ設定で選択的リフレッシュを実装するにはどうすればよいですか？

ユーザーがドロップダウンページコントロールを使用してカスタマイザで選択したページに基づいてコンテンツを表示する、テーマのページテンプレートにセクションがあります。現在、標準のデフォルトの更新トランスポートを使用しているだけですが、それは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...
}

便利なリンク

• カスタマイザでの選択的な更新
• テーマオプション–カスタマイザAPI
• この例を稼働させるには、Twenty Sixteen v1.3が選択的な更新をどのように処理するかを確認することが役立ちました。