web-dev-qa-db-ja.com

カスタマイザー-JavaScriptを介して設定とコントロールをインスタンス化する

ドロップダウンの値に基づいて大量のコントロールを動的にロードしようとしていますが、最初のページのロードには15秒以上かかるため、PHPを介してロードしたくありません。たくさんのコントロールがあります。

では、JSを介して設定と（カスタム）コントロールをインスタンス化するための要件は正確には何ですか？

カスタムコントロールクラスを登録し、content_templateメソッドを具体化する必要がありますか？私のクラスには「タイプ」を正しく設定する必要がありますか？ （私はこれらの両方を行いました）

設定をPHP（これは私がやったことです）に登録し、後でJSを介してコントロールをインスタンス化できますか、JSで設定をインスタンス化する必要がありますか？

JSはどうですか？ JSインスタンシエーションでマークアップコードを繰り返す必要がありますか？

これは私がこれまでに持っていたものですが、実際には何も表示されません。

  var api = wp.customize;

  var sectionID = 'site_variables_section'; // section.id.replace( '[', '-' ).replace( ']', '' )
  api.controlConstructor.ColorVariable = api.Control.extend({
    ready: function() {
        var control = this;
        wp.customize.Control.prototype.ready.call( control );
    }
  });

  // The control
  var controlID = 'site_variables_section[' + field.name.replace('$', '') + ']';

  var controlParams = {
      section: sectionID,
      label: 'label',
      settings: {
        'default': controlID
      },
      active: true,
      type: 'ColorVariable',
    };

  var control = new api.controlConstructor.ColorVariable( controlID, controlParams );
  control.active.validate = function() {
    return true;
  };
  api.control.add( control.id, control );

@ weston-ruterは私を正しい軌道に乗せましたが、私はまだいくつかのことに戸惑っています：

1- data-customize-setting-linkがない場合、値はどのようにフィールドに渡される/保存されるのですか？それはJSによって処理されますか content_template

2-単一の設定がコントロールに使用されると、設定パラメータの「デフォルト」キーが使用されることがわかりますが、複数の設定がいつ行われ、各設定の値をどのように取得するかはどうですか： デフォルト

2のために、私はそれを動作させることができました：settings:{ variable : controlId+'[variable]', control: controlId+'[control]', value: controlId+'[value]', percentage: controlId+'[percentage]' }to_json()関数でこのようなことを考えています：

$this->json['percentage_value'] = $this->value('my-settings-id);

javascripttheme-customizer
2
rugbert

サーバーに設定を登録する場合、JSのクライアントに設定を登録する必要はありません。これは自動的に行われます。設定を作成した後にコントロールを作成する例をいくつか示します。

Customize Posts CSSの最初の例では、WordPress 4.9で新しく追加された新しいコードエディターコントロールを実際に使用します。これを参照して、 プルリクエスト で必要なものを確認できます。特に、$wp_customize->register_control_type( 'My_Custom_Control' )を呼び出して、コンテンツテンプレートが実際に出力されるようにしてください。

areクライアントで設定を動的に作成する場合、関連するコントロールをインスタンス化する前に、まずJSで設定をインスタンス化する必要があります。

設定の作成例を次に示します。

設定とコントロールを動的に作成する場合、実装する他の重要なことは、サーバー上の「動的設定」です。サーバーで設定を作成していない場合、認識されません。これが、customize_dynamic_setting_argsおよびcustomize_dynamic_setting_classフィルターの目的です。いくつかの例：

設定とコントロールをインスタンス化するためのAPIは、コアでより良くなることに注意してください。

1- data-customize-setting-linkがない場合、値はどのようにフィールドに渡される/保存されるのですか？それはJS content_templateによって処理されますか？

次に、次のように、手動でElementとSettingの間にinputリンクを作成する必要があります。

element = new wp.customize.Element( input );
element.sync( setting );
element.set( setting() );

from from core を見ることができます。data-customize-setting-linkは、それを自動的に行うためのショートカットにすぎません。

2-単一の設定がコントロールに使用される場合、設定パラメーターの「デフォルト」キーが使用されることがわかりますが、複数の設定がいつ行われ、各設定の値を取得する方法はどうですか：default

はい、他の非defaultキーを定義します。 WordPress 4.9には、これらすべてがどのように機能するかについての重要な改善点がいくつかあり、JSでコントロールをインスタンス化するのがはるかに簡単になります。 data-customize-setting-link属性に加えて、data-customize-setting-key-link属性のサポートが追加されました。これにより、設定IDではなく、テンプレートの実際のキーを使用できます。さらに、渡すsettingsは、設定ID、Settingオブジェクト、または任意のValueインスタンスのいずれかを参照できます。

たとえば、次の方法で追加されたテンプレートを検討します。

add_action( 'customize_controls_print_footer_scripts', function() {
    ?>
    <script id="tmpl-site-identity-control-content" type="text/html">
        <# var elementIdPrefix = _.uniqueId( 'site-identity-' ); #>
        <details>
            <summary class="customize-control-title">{{ data.label }}</summary>
            <ul>
                <li>
                    <label for="{{ elementIdPrefix }}_title">Title:</label>
                    <input id="{{ elementIdPrefix }}_title" type="text" data-customize-setting-key-link="title">
                </li>
                <li>
                    <label for="{{ elementIdPrefix }}_tagline">Tagline:</label>
                    <input id="{{ elementIdPrefix }}_tagline" type="text" data-customize-setting-key-link="tagline">
                </li>
                <li>
                    <label for="{{ elementIdPrefix }}_founded">Year founded:</label>
                    <input for="{{ elementIdPrefix }}_founded" type="number" min="1" max="9999" data-customize-setting-key-link="founded">
                </li>
            </ul>
        </details>
    </script>
    <?php
} );

このテンプレートを使用するコントロールを追加するには、必要なtemplateIdとともにsettingsとしてIDを渡すだけです。

var foundedValue = new api.Value( 2017 );
var control = new api.Control( 'site_identity', {
    templateId: 'site-identity-control-content',
    label: 'Site Identity',
    priority: 5,
    section: sectionId,
    settings: {
        title: 'blogname', // Setting ID which may not be registered yet.
        tagline: api( 'blogdescription' ), // Existing registered Setting object.
        founded: foundedValue // Non-setting Value.
    }
} );
api.control.add( control );
foundedValue.bind( function( newYear ) {
    console.info( 'The year is now', newYear );
} );

そして、次のようになります。

site identity control

設立年はValueであるため、デモンストレーションのみを目的としています。登録済みのValueではなくSettingであることは、データベースに保存されないことを意味します。ただし、このような値は、事前に設定されたカラースキームから選択するなど、特定のテーマのメタコントロールに役立ちます。これは、チェンジセットのステータスと日付がWordPress 4.9に取り込まれる方法でもあります。

WordPress 4.9のJS APIの特定の改善点すべてに潜む開発ノートについては、 make.wordpress.org/core をご覧ください。

4
Weston Ruter