web-dev-qa-db-ja.com

テーマカスタマイザが初期化を完了した後にJSを実行する

選択項目の値に応じてshow/hideカスタマイザコントロールグループを使用するJSコードがあります。

最近のwpの更新まで、コードは問題なく動作していました（どのバージョンが最初にこれを壊したのかわからない）。

これがjsファイルをエンキューするためのコードです。

add_action('customize_controls_print_scripts', 'ppl_customize_controls_scripts');
function ppl_customize_controls_scripts(){
    wp_register_script( 'ppl-customize-control', get_template_directory_uri().'/js/customizer-control.js', array('jquery'), 1, true);
    wp_enqueue_script( 'ppl-customize-control' );
}

JSファイル

jQuery(document).ready(function($){
    var skin_select = $('#customize-control-ppl-ninja-theme-options-skin').find('select');

    //alert(skin_select.attr('class'));
    var selected_val = skin_select.children('option:selected').val();
    var custom_group = [
        '#accordion-section-custom_header_styles',
        '#accordion-section-custom_slider_styles',
        '#accordion-section-custom_footer_styles',
        '#accordion-section-custom_general_colors'
    ];

    if(selected_val != 4){
        hide_custom_controls(custom_group);
    }

    skin_select.change(function(){
       var val = $(this).val();

        if(val != 4){
            hide_custom_controls(custom_group);
        }else{
            show_custom_controls(custom_group);
        }

    });

    function hide_custom_controls(custom_group){
        var selector = custom_group.join(',');
        $(selector).hide();
    }

    function show_custom_controls(custom_group){
        var selector = custom_group.join(',');
        $(selector).show();
    }

});

問題はです、JSはインラインCSS display:noneでカスタマイザ制御セクションをロードして隠します。その後、cusomizerのjsスクリプトがそれを修正し、インラインcssをdisplay:list-itemに更新します。そのため、カスタマイザが完全に読み込まれた後に、後でJSコードを実行する必要があります。

Wp-includesディレクトリのカスタマイザスクリプトを調べましたが、使用できるものが見つかりませんでした。おそらく私は何かを逃した。

さらに詳しい情報

  1. CSSを修正するコードは /wp-admin/js/customize-controls.js にあります。

  2. このスクリプトはreadyイベントを使用してクラスを追加し、パネル、セクション、およびコントロールの可視性を修正しています。しかし、そのイベントにリスナーを追加することはできません。

  3. プロパティactivePanels、activeSections、activeControlsは、ファイルのPHPから設定されます /wp-admin/customize.php 私はあなたのようにその変数を上書きする方法を見つけませんでしたbodyタグが終了する直前に表示されます。

それで、可能な解決策はおそらくreadyイベントにフックする方法を見つけることです。

javascripttheme-customizer
1
Sisir

したがって、これまでのところ問題はJSファイルの初期ロードにありました。私はJSを使用して解決策を見つけることができなかったように。問題はスクリプトのロードではなく実行のタイミングではありませんでした。

とにかく、テーマカスタマイザは、ロード時にどのPanel/Section/Controlがアクティブであるかを表示するグローバル変数を調べます。

セクション/コントロール/パネルを初期ロード時にアクティブ/非アクティブにする方法

コアファイルに何時間も費やした後、私は解決策を見つけました。

  1. パネルの場合はcustomize_panel_activeフィルタを使用してください。 2つのパラメータ$active booleanと$panelオブジェクトを渡します。
  2. セクションにはcustomize_section_activeフィルタを使用してください。 2つのパラメータ$active booleanと$sectionオブジェクトを渡します。
  3. コントロールにはcustomize_control_activeフィルタを使用してください。 2つのパラメータ$active booleanと$controlオブジェクトを渡します。

例：パネルがあり、そのidがmy_panelであると仮定した場合。また、特定のテーマオプションが設定されていない場合は非表示にします。

add_filter('customize_panel_active', 'maybe_panel_active', 10, 2);

function maybe_panel_active($active, $panel){

    if($panel->id == 'my_panel' && !theme_option('certain_theme_option') ){
        $active = false;
    }

    return $active;
}

それはそれについてです！かなり簡単:)

注：解決策は純粋にphpです。カスタマイザのJSイベントを聞くことによってそれを機能させることができるなら誰でも。質問は当初JSソリューションを対象としていたので、私はそれに非常に興味があるでしょう。

2
Sisir

あまり良い解決策ではありませんが、window.setInterval（）を使ってサンプリングして、一度表示されたら間隔を止めて、やりたいことをすべて実行できます。

0
nadavy

依存問題のようですね。あなたはjQueryをチェックしているだけなので、あなたのスクリプトは横取りされるかもしれません。 'customize-preview-widgets'を使用すると、他のすべてのカスタマイザスクリプトの後にスクリプトを確実にロードできます。これを試して…

add_action('customize_preview_init', 'ppl_customize_controls_scripts');
function ppl_customize_controls_scripts(){
    wp_enqueue_script(
          'ppl-customize-control',
          get_template_directory_uri().'/js/customizer-control.js',
          array( 'jquery','customize-preview-widgets' ),
          '',
          true
    );
}
0
Matt van Andel

私にはタイミングの問題のようですが、多分/おそらくこれを単純化しすぎていますが、$debsパラメータwp_register_scriptとwp_enqueue_scriptを使用すると、ロード順序を制御するために提供されますが、それらの1つはscript-loader.phpで追加された順に- customize-base、customize-loader、customize-preview、customize-models、customize-views、customize-controls、customize-widgets、またはcustomize-preview-widgetsは依存関係である必要があります。

0
Nicolai

カスタマイザのjavascript初期化の謎を解明するのではなく、明確ではありませんが、 カスタムコントロール を使用してJavaScriptを挿入することができます。 render_content()をオーバーライドすることによって、例えば

add_action( 'customize_register', function ( $wp_customize ) {
    // Custom control.
    class PPL_Ninja_Skin_Select_Customize_Control extends WP_Customize_Control {
        public $type = 'select';

        // Override to inject our javascript.
        public function render_content() {
            parent::render_content();
            ?>
<script type="text/javascript">
(function () {
    var skin_select = $('#customize-control-ppl-ninja-theme-options-skin').find('select');
    var custom_group = [
        '#accordion-section-custom_header_styles',
        '#accordion-section-custom_slider_styles',
        '#accordion-section-custom_footer_styles',
        '#accordion-section-custom_general_colors'
    ];

    skin_select.change(function () {
        if ($(this).val() == 4) {
            $(custom_group.join(',')).hide();
        } else {
            $(custom_group.join(',')).show();
        }
    });
    skin_select.change();
}());
</script>
            <?php
        }
    }

    $wp_customize->add_setting( 'ppl-ninja-theme-options-skin' );
    $wp_customize->add_section( 'ppl-ninja-theme-options', array(
        'title' => __( 'Ninja Options', 'ppl' ),
    ) );

    // Add custom control.
    $wp_customize->add_control( new PPL_Ninja_Skin_Select_Customize_Control(
        $wp_customize, 'ppl-ninja-theme-options-skin', array(
            'label' => __( 'Skin', 'ppl' ),
            'section' => 'ppl-ninja-theme-options',
            'choices' => array(
                '' => __( 'Select', 'ppl' ),
                1 => __( 'One', 'ppl' ),
                2 => __( 'Two', 'ppl' ),
                3 => __( 'Three', 'ppl' ),
                4 => __( 'Four', 'ppl' ),
            ),
        )
    ) );

    // Test data.
    foreach ( array( 'header_styles', 'slider_styles', 'footer_styles', 'general_colors' ) as $setting ) {
        $wp_customize->add_setting( 'custom_' . $setting . '-setting' );
        $wp_customize->add_section( 'custom_' . $setting, array(
            'title' => sprintf( __( 'Ninja %s', 'ppl' ), $setting ),
        ) );
        $wp_customize->add_control( 'custom_' . $setting . '-setting', array (
            'label' => __( 'Setting', 'td' ),
            'section' => 'custom_' . $setting,
        ) );
    }
} );

（CSSも気にしないでください）。

0
bonger