Czy można rozszerzyć metody WP Customize JS?

Zastanawiam się, czy można rozszerzyć metody apiobiektu anonimowego wp-admin/js/customize-control.js. Muszę zastąpić jedną z tych metod moją własną logiką niestandardową, ale podejrzewam, że nie jest to możliwe, ponieważ jest ona zapakowana w natychmiast wywołane wyrażenie funkcji:

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

O ile widzę, nie jestem w stanie rozwinąć prototypu z obiektu okna, ponieważ jest on wykonywany anonimowo i nie jest dostępny z window.wp.customize. Masz pomysł, czy coś takiego jest możliwe? Jest nawet wzmianka o zastąpieniu tego w dokumentacji / opisie metod .toggle (): https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , ale ja nie jestem pewien, czy mają na myśli po prostu rozwidlenie całego pliku JS, usunięcie z kolejki wersji WP i umieszczenie w kolejce własnego pliku, czy też mają na myśli coś innego.

Zauważ, że wydaje się, że powinno być to możliwe, wp.customize.{method}.extend({ foo: // replace method foo here })ale dotyczy to tylko klas / obiektów bazy publicznej, a nie tych wwp-admin/js/customize-control.js

javascript front-end api theme-customizer Brian
źródło

Chociaż apijest anonimowy, jest tylko synonimem wp.customize(patrz wiersz 3), który jest dostępny na całym świecie. Wygląda jednak na to, że Yet Another Object Model używany do sterowania wywołuje tę readyfunkcję, initializewięc może nie być szansa (tj. Zawsze będzie za późno) na zastąpienie metod - co próbujesz rozszerzyć?

bonger

Teoretycznie ma to sens - doceniamy sugestie. W moim przypadku czułem, że takie podejście było dość hackerskie i udało mi się znaleźć inne odpowiednie rozwiązanie dla mojego przypadku użycia. Jednak odpowiedź z działającym kodem może nadal być przydatna dla kogoś, kto nie ma innej opcji dla swojego przypadku użycia. Wydajność z tym, co planowałem, i tak byłaby okropna.

Brian

Nie jestem ekspertem od JS. Ale dodałem w małym motywie skrypt dostosowywania, aby zawsze odświeżał moje rozszerzenia. Pracuję wp.customizei dodam funkcje do tego obiektu. zobacz tutaj przykład źródła - github.com/bueltge/Documentation/blob/master/js/…

bueltge

Odpowiedzi:

Poprawię mój mały komentarz do twojego pytania. Ale znowu podpowiedź; Nie jestem ekspertem od JS. Poniższe źródła, podpowiedzi zostały wykorzystane tylko podczas gry z Customizerem dla różnych czeków, przykładów, takich jak moja piaskownica .

wp.customize

Zrozumienie interfejsu dostosowywania motywu WP koncentruje się wokół zrozumienia obiektu wp.customize javascript. wp.customizePrzedmiot jest ważny i należy go ustawić na początku.

Przykład na żywo

Poniższy mały przykład to pokazuje. Na początku ustawiam var apina obiekt dostosowywania. Następnie ustawiłem niestandardowe pola na apii wzbogaciłem je o małe źródło jQuery, aby odświeżyć wynik do podglądu na żywo.

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

Ustawienia i sterowanie

Obiekty sterujące są przechowywane w, wp.customize.controla obiekty ustawień są przechowywane w wp.customize. Klasa wartości ma wiele funkcji, może ci pomóc.

instance (id) - Pobiera obiekt z kolekcji o podanym id.
has (id) - Zwraca true, jeśli kolekcja zawiera obiekt o określonym identyfikatorze, a false w przeciwnym razie.
add (identyfikator, wartość) - Dodaj obiekt do kolekcji o określonym identyfikatorze i wartości.
remove (id) - Usuń obiekt z kolekcji.
create (id) - Utwórz nowy obiekt, używając domyślnego konstruktora i dodaj go do kolekcji.
each (callback, kontekst) - Iteruj po elementach w kolekcji.

Własne ustawienia

Dzięki tym funkcjom możemy ulepszyć nasze niestandardowe ustawienia.

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

nadaje się również do użycia w tablicy

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

Dostać

Zobacz wynik w konsoli.

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

Zestaw

Można również zmienić wartości ustawień za pomocą funkcji set.

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

Uzyskaj kontrolę, jako obiekt

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

Pomocne źródło

wp-admin / js / customize-controls.js
wp-zawiera / js / customize-preview.js
wp-zawiera / js / customize-base.js

bueltge
źródło