web-dev-qa-db-ja.com

拡張することは可能ですか WP JSメソッドをカスタマイズしますか？

匿名のapiオブジェクトのメソッドを wp-admin/js/customize-control.js に拡張することは可能かどうか疑問に思います。これらのメソッドのいずれかを自分のカスタムロジックで上書きする必要がありますが、すぐに呼び出される関数式にラップされているため、不可能だと思います。

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

私の知る限りでは、匿名で実行されwindow.wp.customizeから利用できないので、ウィンドウオブジェクトからプロトタイプを拡張することはできません。そのようなことが可能であるならばどんな考え？ .toggle（）メソッドのドキュメント/説明にこれを上書きすることについての言及さえあります： https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 しかし、JSファイル全体を単純にフォークし、WPバージョンをデキューして自分のものをエンキューすることを意味するのか、それとも別のものを意味するのかはわかりません。

wp.customize.{method}.extend({ foo: // replace method foo here })でそれが可能であるべきであるように思われることに注意してください、しかしそれはwp-admin/js/customize-control.jsのそれらではなく公共の基本クラス/オブジェクトに適用されるだけです

javascriptfront-endapitheme-customizer
9
Brian

あなたの質問に対する私の小さなコメントを強化します。しかしまたヒント。私はJSの専門家ではありません。フォローソース、ヒントは、さまざまなチェック、たとえばmy sandbox のためにカスタマイザで遊ぶときにのみ使用されました。

wp.​​customize

WPテーマカスタマイザインタフェースを理解することは、wp.customize javascriptオブジェクトを理解することを中心としています。 wp.customizeオブジェクトは重要であり、最初にそれを設定するべきです。

実例

次の小さな例はこれを示しています。最初にvar apiをカスタマイザのオブジェクトに設定します。その後、カスタムフィールドをapiに設定し、小さなjQueryソースでこれを拡張してライブプレビューの結果を更新します。

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

設定とコントロール

制御オブジェクトはwp.customize.controlに格納され、設定オブジェクトはwp.customizeに格納されます。値クラスにはたくさんの機能がありますが、役に立ちます。

  • instance（id） - 指定されたidのコレクションからオブジェクトを取得します。
  • has（id） - 指定されたIDを持つオブジェクトがコレクションに含まれている場合はtrue、それ以外の場合はfalseを返します。
  • add（id、value） - 指定されたIDと値を持つオブジェクトをコレクションに追加します。
  • remove（id） - コレクションからオブジェクトを削除します。
  • create（id） - デフォルトのコンストラクタを使って新しいオブジェクトを作成し、それをコレクションに追加します。
  • each（callback、context） - コレクション内の要素を繰り返します。

カスタム設定

この機能により、カスタム設定を強化することができます。

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

配列にも使える

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

Get

コンソールで結果を確認してください。

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

セット

関数setを使って設定値を変更することもできます。

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

オブジェクトとしてコントロールを取得する

console.log( api.control.instance( 'my_custom_setting_field' ) );

役に立つ情報源

  • wp-admin/js/customize-controls.js
  • wp-includes/js/customize-preview.js
  • wp-includes/js/customize-base.js
5
bueltge