É possível estender o WP Customize JS Methods?

9

Gostaria de saber se é possível estender os métodos do objeto anônimo api em wp-admin/js/customize-control.js . Preciso substituir um desses métodos por minha própria lógica personalizada, mas suspeito que isso não seja possível, já que está envolto em uma expressão de função imediatamente invocada:

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

Até onde eu posso ver, não sou capaz de estender o protótipo do objeto window porque ele é executado anonimamente e não está disponível em window.wp.customize . Alguma ideia se tal coisa é possível? Há até menção de substituir isso na documentação / descrição dos métodos .toggle (): enlace , mas não tenho certeza se eles querem dizer simplesmente bifurcando todo o arquivo JS, desenfileirando a versão do WP e colocando o seu próprio, ou se eles significam ou algo diferente.

Note que parece que deve ser possível com wp.customize.{method}.extend({ foo: // replace method foo here }) , mas isso só se aplica às classes / objetos base públicos, não àquelas em wp-admin/js/customize-control.js

    
por Brian 09.08.2014 / 22:41

1 resposta

5

Vou melhorar meu pequeno comentário sobre sua pergunta. Mas novamente a sugestão; Eu não sou um especialista em JS. A seguir a fonte, dicas só foi usada em jogar com o Customizer para diferentes verificações, exemplos, como o meu sandbox .

wp.customize

Entender a interface do personalizador de temas do WP gira em torno da compreensão do objeto javascript wp.customize. O objeto wp.customize é importante e você deve defini-lo no início.

Exemplo ao vivo

O pequeno exemplo a seguir demonstra isso. No começo eu defino o var api para o objeto do customizador. Depois disso, defino meus campos personalizados como api e aprimoro isso com uma pequena fonte jQuery para atualizar o resultado da visualização ao vivo.

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

Configurações e controles

Os objetos de controle são armazenados em wp.customize.control e os objetos de configuração são armazenados em wp.customize . A classe de valor tem muitas funções, pode ajudá-lo.

  • instance (id) - Obtém um objeto da coleção com o ID especificado.
  • has (id) - Retorna true, se a coleção contiver um objeto com o id especificado e, caso contrário, false.
  • add (id, value) - adiciona um objeto à coleção com um ID e um valor especificados.
  • remove (id) - Remove o objeto da coleção.
  • create (id) - Crie um novo objeto, usando o construtor padrão e adicione-o à coleção.
  • each (retorno de chamada, contexto) - Iterar os elementos da coleção.

Configurações personalizadas

Com essas funções, podemos aprimorar nossas configurações personalizadas.

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

também utilizável para uma matriz

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

Obter

Veja o resultado no console.

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

Definir

Você também pode alterar os valores de configuração através da função set .

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

Obtenha com o controle, como objeto

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

Fonte de ajuda

  • wp-admin / js / personalize-controls.js
  • wp-includes / js / customizar-preview.js
  • wp-includes / js / customize-base.js
por bueltge 09.11.2015 / 22:40