web-dev-qa-db-ja.com

テーマカスタマイザ - 条件付きコントロール

カスタマイザページを完全にリロードすることなく、テーマカスタマイザにコントロールを動的に追加または削除したいと思います。たとえば、ドロップダウンからoption1を選択したときに、コントロールAを表示し、コントロールBを非表示にし、その逆も同様です。

その方法は3つ考えられます。

1.（送信ボタンまたはJavaScriptを介して）カスタマイザを完全にリロードする方法を見つけたら、これを実行できます。

$option1 = get_theme_mod('option1');
if( $option1 === '1' ){
    $wp_customize->add_setting('controlA', array());
    $wp_customize->add_control( 'controlA', array(
    'section' => 'layout_section',
    'type'    => 'text', // text (default), checkbox, radio, select, dropdown-pages ) );
}

2. Ajaxを使用して更新された値を読み込み、カスタマイザコントロールにjavascriptを追加します。

だから私はこのような私自身のスクリプトをエンキューするでしょう：

function custom_customize_enqueue() {
    wp_enqueue_script( 'custom-customize', get_template_directory_uri() . '/custom.customize.js', array( 'jquery', 'customize-controls' ), false, true );
}
add_action( 'customize_controls_enqueue_scripts', 'custom_customize_enqueue'        );

そしてcustom.customize.jsでは、私は自分の制御値を取得するために関数を呼び出すでしょう：

$.ajax({
    url: ajaxurl,
    type: 'POST',
    data: {
        'action':'get_control_values'
    },
    success:function(data) {

        //populate customize controls with the updated values

    }
});

Functions.phpで：

function get_control_values(){

    $option1 = get_theme_mod('option1');
    if( $option1 === '1' ){      
        // echo json_encoded data to populate my conditional customize controls
    }
}

add_action( 'wp_ajax_get_control_values', 'get_control_values' );
add_action( 'wp_ajax_nopriv_get_control_values', 'get_control_values' );

3.条件付きで相互に依存するすべての入力を「ダミー」入力として含み、それらの値を別の非表示入力にJSONとして格納するカスタムコントロールを作成します。そのため、ドロップダウンからオプション1を選択すると、コントロールBがJavaScriptによって非表示になり、JSON文字列が更新されます。

編集：4.Option：おそらくこれは、ここで説明されているようにWordPressテーマカスタマイザJavascriptインタフェースを通しても可能です： インターフェース

誰かが私を正しい方向に向けることができますか？ありがとう。

ajaxtheme-customizer
1
gang

私はあなたに別の方向性を提案することができます：あなたが最初のページをロードしてjavascriptを使用して動的にそれらを隠し/表示することができるのにjavascriptで新しいControlを生成することを邪魔するのはなぜ？

私がよく理解しているならば、これはあなたがオプション3で説明したものでした。

これがあなたを始めるためのサンプルコードです。

class MyCustom_Customize_Control extends WP_Customize_Control {    
    public function render_content() {
        ?>
        <span><?php echo esc_html( $this->label ); ?></span>
        <div>The Custom Control content</div>
        <script>
        jQuery(function($){
            // hide control at first load
            $('#customize-control-mycontrol').hide();

            // bind to the event that will show the Control
            $(document).on('customEvent', function(){
                $('#customize-control-mycontrol').show();
            });
        });
        </script>
        <?php
    }
}

// instantiate the Control
$wp_customize->add_control( new MyCustom_Customize_Control( $wp_customize, 'mycontrol', array(
    'label'      => 'Custom Control Label',
) ) );

これは可能な結果を​​示す小さなスクリーンキャストです。 Interactive Control screencast

1
Fabien Quatravaux