web-dev-qa-db-ja.com

アクセスカスタマイザのDOM - jQuery

DOMからカスタマイザにアクセスするにはどうすればよいですか？
明確にするために自分自身を説明します。
最近、プラグインに取り組んでいる間にjQueryの基本を学びました。
わかりました、カスタマイザプレビューでDOMを聞いていると、
私はカスタマイザのパネルの外側にある要素に答えを得ることができます、
しかし、私はDOMによってカスタマイザにアクセスすることができません、答えは常に0です！
たとえば、カスタマイザプレビュー中は、次のようになります。

alert($('#sidebar').length);

サイドバーがidになっているウィジェット領域があるので、1の答えを返します。
しかし、カスタマイザ・プレビューで、パネル、セクション、コントロール、あるいはカスタマイザ自体に到達しようとしても、何も起こらず、答えは常に0です。
例えば ：

alert($('.wp-customize').length);

0を返します。 .wp-customizeはカスタマイザの「最高」クラスです。

私の質問が明確で、誰かがその理由を私に説明し、jQueryを使ってカスタマイザにアクセスできるように手助けできることを願っています。

ご協力ありがとうございます。

jquerytheme-customizer
2
LebCit

カスタマイザプレビューは、カスタマイザコントロールを含むウィンドウとは別のウィンドウにあります。具体的には、カスタマイザプレビューはiframeの中に含まれています。そのため、要素の選択にjQueryを直接使用することはできません。これを回避する1つの方法は、プレビューからparent.jQueryを使用することですが、カスタマイザプレビューは実際には完全に別のドメイン上にあり、そのような呼び出しはブラウザのsame-Originポリシーに違反するため、お勧めできません。したがって、プレビューからコントロールを操作したい場合は、プレビューからペインにメッセージを渡す必要があります。この例は、実際にはcoreで、特にcustomize-selective-refresh.jsメッセージを送信するfocus-control-for-settingで、次にこのメッセージを受信するcustomize-controls.jsで見ることができます。これはスタンドアロンの例で、サイトのタイトルの上にマウスを置いたときに特定のコントロールのルートjQueryコンテナを取得する方法です。

is_customize_preview()の場合は、wp_enqueue_scriptsアクションでこのスクリプトをエンキューし、customize-previewスクリプトをその依存関係として持つようにします。

// customize-preview-example.js
(function( api, $ ) {
    api.bind( 'preview-ready', function() {

        $( '.site-title' ).on( 'mouseover', function() {
            api.preview.send( 'site-title-mousedover', 'some optional message value' );
        } );

    } );
}) ( wp.customize, jQuery );

そして、このスクリプトはcustomize-controlsに依存し、customize_controls_enqueue_scriptsアクションでエンキューされるコントロール（parent）ウィンドウで実行されます。

// customize-controls-example.js
(function( api ) {
    api.bind( 'ready', function() {

        // Wait for the site title control to be added.
        api.control( 'blogname', function( siteTitleControl ) {
            api.previewer.bind( 'site-title-mousedover', function( message ) {
                console.info( 'Message sent from preview:', message );
                console.info( 'The jQuery container element for the site title control:', siteTitleControl.container );
            } );
        } );
    } );
}) ( wp.customize );

そうは言っても、jQueryを使用してコントロールを操作することには注意が必要です。カスタマイザコントロールは、関連付けられているカスタマイザ設定に関連付けられています。特定のコントロールの入力に表示されている値を変更する場合は、コントロールの入力を直接変更するのではなく、それに関連付けられている設定を変更する必要があります。また、コントロールを非表示にしたい場合は、追加したコントロールのactive_callbackを探します。

2
Weston Ruter