Ich frage mich, ob es möglich ist, die Methoden des anonymen apiObjekts in zu erweitern wp-admin/js/customize-control.js. Ich muss eine dieser Methoden mit meiner eigenen benutzerdefinierten Logik überschreiben, aber ich vermute, dass dies nicht möglich ist, da sie in einen sofort aufgerufenen Funktionsausdruck eingeschlossen ist:

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

Soweit ich sehen kann, kann ich den Prototyp nicht aus dem Fensterobjekt erweitern, da er anonym ausgeführt wird und nicht über verfügbar ist window.wp.customize. Irgendeine Idee, ob so etwas möglich ist? In der Dokumentation / Beschreibung der .toggle () -Methoden wird sogar erwähnt, dass dies überschrieben wird: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , aber ich Ich bin mir nicht sicher, ob sie bedeuten, dass einfach die gesamte JS-Datei gegabelt, die WP-Version aus der Warteschlange entfernt und die eigene in die Warteschlange gestellt wird oder ob sie etwas anderes bedeuten.

Beachten Sie, dass dies anscheinend möglich sein sollte, dies wp.customize.{method}.extend({ foo: // replace method foo here })gilt jedoch nur für die öffentlichen Basisklassen / -objekte, nicht für die inwp-admin/js/customize-control.js

Ich werde meinen kleinen Kommentar zu Ihrer Frage verbessern. Aber nochmal der Hinweis; Ich bin kein JS-Experte. Die folgenden Quellenhinweise wurden nur beim Spielen mit dem Customizer für verschiedene Überprüfungen verwendet, z. B. für meine Sandbox .

wp.customize

Das Verständnis der Benutzeroberfläche des WP-Theme-Customizers konzentriert sich auf das Verständnis des Javascript-Objekts wp.customize. Das wp.customizeObjekt ist wichtig und sollte beim Start festgelegt werden.

Live-Beispiel

Das folgende kleine Beispiel zeigt dies. Zuerst habe ich die Variable apiauf das Objekt des Customizers gesetzt. Danach setze ich meine benutzerdefinierten Felder auf apiund erweitere diese mit einer kleinen jQuery-Quelle, um das Ergebnis für die Live-Vorschau zu aktualisieren.

( 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 );

Einstellungen und Steuerelemente

Steuerobjekte werden in wp.customize.controlund Einstellungsobjekte in gespeichert wp.customize. Die Werteklasse hat viele Funktionen, die Ihnen helfen können.

• Instanz (ID) - Ruft ein Objekt aus der Sammlung mit der angegebenen ID ab.
• has (id) - Gibt true zurück, wenn die Auflistung ein Objekt mit der angegebenen ID enthält und andernfalls false.
• add (id, value) - Fügt der Sammlung ein Objekt mit einer angegebenen ID und einem angegebenen Wert hinzu.
• remove (id) - Entfernt das Objekt aus der Sammlung.
• create (id) - Erstellen Sie ein neues Objekt mit dem Standardkonstruktor und fügen Sie es der Auflistung hinzu.
• each (Rückruf, Kontext) - Durchlaufen Sie die Elemente in der Sammlung.

Benutzerdefinierte Einstellungen

Mit diesen Funktionen können wir unsere benutzerdefinierten Einstellungen verbessern.

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

auch für ein Array verwendbar

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

Bekommen

Sehen Sie das Ergebnis in der Konsole.

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

einstellen

Sie können die Einstellwerte auch über die Funktion ändern set.

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

Holen Sie sich mit dem Steuerelement als Objekt

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

Hilfreiche Quelle

• wp-admin / js / customize-controls.js
• wp-enthält / js / customize-Preview.js
• wp-include / js / customize-base.js