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