¿Es posible extender WP Personalizar los métodos JS?

Question

¿Es posible extender WP Personalizar los métodos JS?

#1 de bueltge (5 votos)

9

Me pregunto si es posible extender los métodos del objeto anónimo api 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 desde el objeto de la ventana porque se ejecuta de forma anónima y no está disponible desde 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 (): enlace , pero no estoy seguro de si quieren decir simplemente bifurcando todo el archivo JS, eliminando la versión WP y publicando 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 que solo se aplica a las clases / objetos de base pública, no a los de wp-admin/js/customize-control.js

api javascript front-end theme-customizer

pregunta Brian 09.08.2014 - 22:41

1 respuesta

Lea otras preguntas en las etiquetas api javascript front-end theme-customizer

¿Deshacerse de la categoría de WordPress, la etiqueta y los archivos de autor? ¿La mejor forma de controlar la versión de los archivos de plantilla de WordPress?

score 5 · Accepted Answer

Mejoraré mi pequeño comentario sobre tu pregunta. Pero de nuevo la pista; No soy un experto en JS. La fuente de seguimiento, sugerencias solo se usó al jugar con el Personalizador para diferentes verificaciones, ejemplos, como mi sandbox .

wp.customize

La comprensión de 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 desde el principio.

Ejemplo en vivo

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

Ajustes 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, allí puede ayudarte.

instancia (id): obtenga un objeto de la colección con el id especificado.
has (id): devuelve true, si la colección contiene un objeto con el id especificado y, de lo contrario, devuelve false.
agregar (id, valor): agrega un objeto a la colección con un id y un valor especificados.
remove (id): elimina el objeto de la colección.
crear (id): crea un nuevo objeto, utilizando el constructor predeterminado y añádalo a la colección.
cada (devolución de llamada, contexto) - Iterar sobre los elementos dentro de la colección.

Configuración personalizada

Con estas funciones podemos mejorar nuestra configuración personalizada.

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

también se puede utilizar para una matriz

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

Obtener

Ver el resultado en la consola.

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

Establecer

También puede cambiar los valores de configuración a través de la función set .

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-controls.js
wp-includes / js / personaliza-preview.js
wp-includes / js / customize-base.js