javascript – ¿Es posible extender los métodos de WP Customize JS?

Pregunta:

Me pregunto si es posible extender los métodos del objeto api anónimo en wp-admin/js/customize-control.js . Necesito sobrescribir uno de estos métodos con mi propia lógica personalizada, pero sospecho que no es posible ya que está envuelto en una expresión de función invocada inmediatamente:

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

Por lo que puedo ver, no puedo extender el prototipo del objeto de ventana porque se ejecuta de forma anónima y no está disponible en window.wp.customize . ¿Alguna idea de si tal cosa es posible? Incluso se menciona la posibilidad de anular esto en la documentación / descripción de los métodos .toggle ():https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 , pero yo No estoy seguro si se refieren a simplemente bifurcar todo el archivo JS, quitar la cola de la versión WP y poner la suya propia o si significan algo diferente.

Tenga en cuenta que parece que debería ser posible con wp.customize.{method}.extend({ foo: // replace method foo here }) pero eso solo se aplica a las clases / objetos base públicos, no a los de wp-admin/js/customize-control.js

Respuesta:

Mejoraré mi pequeño comentario sobre su pregunta. Pero de nuevo la indirecta; No soy un experto en JS. La siguiente fuente, sugerencias solo se usó al jugar con el Personalizador para diferentes comprobaciones, ejemplos, como mi caja de arena .

wp.customize

Comprender la interfaz del personalizador de temas de WP se centra en comprender el objeto wp.customize javascript. El objeto wp.customize es importante y debe configurarlo al inicio.

Ejemplo en vivo

El siguiente pequeño ejemplo demuestra esto. Al principio configuré la var api en el objeto del personalizador. Después de esto, configuré mis campos personalizados en la api y mejoré esto con una pequeña fuente de jQuery para actualizar el resultado para la vista previa en 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 );

Configuraciones y controles

Los objetos de control se almacenan en wp.customize.control y los objetos de configuración se almacenan en wp.customize . La clase de valor tiene muchas funciones que pueden ayudarlo.

  • instancia (id): obtiene un objeto de la colección con el id especificado.
  • has (id): devuelve verdadero, si la colección contiene un objeto con la identificación especificada y es falso en caso contrario.
  • add (id, value): añade un objeto a la colección con un id y un valor especificados.
  • remove (id): elimina el objeto de la colección.
  • create (id): crea un nuevo objeto, usando el constructor predeterminado y agrégalo a la colección.
  • each (devolución de llamada, contexto): itera sobre los elementos dentro de la colección.

Ajustes personalizados

Con estas funciones podemos mejorar nuestra configuración personalizada.

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

también utilizable para una matriz

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

Obtener

Vea el resultado en la consola.

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

Colocar

También puede cambiar los valores de configuración mediante el set funciones.

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

Obtener con el control, como objeto

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

Fuente útil

  • wp-admin / js / personalizar-controles.js
  • wp-includes / js / personalizar-vista previa.js
  • wp-includes / js / personalizar-base.js

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım