Ist es möglich, WP Customize JS Methods zu erweitern?


9

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


3
Obwohl apianonym, ist es nur ein Synonym für wp.customize(siehe Zeile 3), auf das global zugegriffen werden kann. Es sieht jedoch so aus, als würde das für Steuerelemente verwendete Noch-Objekt-Modell die readyFunktion aufrufen, initializesodass möglicherweise keine Chance (dh immer zu spät) besteht, Methoden zu überschreiben. Was möchten Sie erweitern?
Bonger

Theoretisch macht das Sinn - Vorschlag geschätzt. In meinem Fall fand ich diesen Ansatz ziemlich hackig und fand eine andere geeignete Lösung für meinen Anwendungsfall. Eine Antwort mit Arbeitscode kann jedoch für jemanden von Nutzen sein, der für seinen Anwendungsfall keine andere Option hat. Die Leistung mit dem, was ich geplant hatte, wäre sowieso schrecklich gewesen.
Brian

1
Ich bin nicht der JS-Experte. Aber ich habe in einem kleinen Thema das Customizer-Skript hinzugefügt, um immer meine Erweiterungen zu aktualisieren. Ich arbeite mit wp.customizediesem Objekt und füge Funktionen hinzu. siehe hier für ein Quellenbeispiel - github.com/bueltge/Documentation/blob/master/js/…
bueltge

Antworten:


5

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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.