Share
Hoy reanudaremos nuestra discusión sobre la API de JavaScript en el Personalizador de WordPress. En el último tutorial, preparamos y cargamos dos archivos JavaScript, customizer-control.js y personalizador-preview.js, eso nos permitirá interactuar con la API de JavaScript desde el back-end de Customizer y el front-end o la interfaz de Previewer. Así que asegúrate de seguir el último tutorial antes de continuar.
En este tutorial, nos centraremos en la interfaz que compone el back-end, los paneles, la configuración y los controles del personalizador. Nuevamente, si estas tres cosas son algo nuevo para usted, le recomiendo que siga nuestra serie completa anterior: Una guía para el personalizador de temas de WordPress.
Aparte de la API de PHP, con la que estoy seguro de que algunos de ustedes están familiarizados, los paneles, las secciones y los controles también son accesibles a través de la API de JavaScript. Igualmente, podemos modificarlos luego. Aquí hay unos ejemplos.
Seleccione un control, sección o panel en particular:
Accentsconagua
// Seleccionar un control. wp.customize.control ('blogname'); // Seleccionar una sección. wp.customize.section ('title_tagline'); // Seleccionar un panel. wp.customize.panel ('nav_menus'); Reorganizar su orden de vista.
// Cambiar una prioridad de control wp.customize.control ('blogname') .priority (30); // Cambiar la prioridad de una sección wp.customize.section ('title_tagline') .priority (100); // Cambiar una prioridad del Panel wp.customize.panel ('nav_menus') .priority (200); Mueva el control "Título del sitio" a, por ejemplo, el color sección.
wp.customize.control ('blogname') .section ('colors'); Cambiar su visibilidad.
// Desactivar / ocultar el control 'Título del sitio' wp.customize.control ('blogname') .toggle (); Incluso puede analizar el árbol de control de DOM, que es una cosa que de otra manera sería complicada de hacer en PHP.
wp.customize.control ('blogname') .container.find ('.customize-control-title'); Estas son algunas de las cosas que puede hacer con los paneles, secciones y controles en la API de JavaScript del personalizador. Ahora pongámoslos juntos en una experiencia de usuario más significativa..
En este punto, deberíamos tener cuatro controles en total. Dos controles, la entrada "Título del sitio" y la casilla de verificación "Mostrar título del sitio", se encuentran en la sección "Identidad del sitio". Los otros dos son un selector de color. Residen en la sección "Colores", y establecerán el color del texto "Título del sitio" y el color del estado de su hover respectivamente.
Nuestros cuatro controles en el Customizer.Nuestro plan aquí es mostrar los controles de Color solo cuando la casilla de verificación "Mostrar título del sitio" está marcada ya que no hay razón para mostrar estos controles de color del Título del sitio cuando el Título del sitio está realmente deshabilitado.
Además, este enfoque podría ayudarnos a eliminar el personalizador eliminando los controles, secciones y paneles irrelevantes de la barra lateral del personalizador. Si esto suena como algo que quieres lograr, solo comencemos.
Para empezar, abre nuestro archivo JavaScript, customizer-control.js. Luego, agregue las líneas de código dentro del Personalizador. Listo evento:
wp.customize.bind ('listo', función () // Listo? var personalizar = esto; // Personalizar alias de objeto. personalizar ('nombre_de_objeto' ', función (configuración) );); Aquí hemos establecido un alias para el esta palabra clave, que se refiere a la API de JavaScript del personalizador. Luego, enganchamos una función anónima en el display_blogname configuración ya que todas las personalizaciones que vamos a realizar en el Personalizador serán relativas al valor de esta configuración particular.
A continuación, seleccionamos la entrada campo de la configuración 'Título del sitio'.
wp.customize.bind ('ready', function () // Ready? var customize = this; // WordPress personaliza el alias del objeto. personaliza ('display_blogname', función (configuración) var siteTitleInput = personaliza.control ('blogname ') .container.find (' input '); // Site Title input.);); Podemos deshabilitar la entrada cuando el display_blogname casilla de verificación es sin marcar.
wp.customize.bind ('ready', function () // Ready? var personaliza = esto; // Personaliza el alias de objeto. personaliza ('display_blogname', función (valor) var siteTitleInput = personaliza.control ('blogname' ) .container.find ('input'); // Site Title input. / ** * Deshabilitar el elemento de entrada * / // 1. Al cargar. siteTitleInput.prop ('disabled',! value.get ()); // .get () value // 2. Enlace a value change. value.bind (function (to) siteTitleInput.prop ('disabled',! to);););); Como puedes ver arriba, usamos jQuery. .apuntalar() método para configurar el HTML discapacitado Propiedad al elemento de entrada. Usamos el .obtener() Método para recuperar el valor actual. Por último, utilizando el .enlazar() Método, escuchamos el cambio de valor y configuramos el discapacitado propiedad en consecuencia.
Izquierda: campo de entrada "Título del sitio" habilitado. Derecha: campo de entrada "Título del sitio" desactivado. Observe la casilla de verificación.Ahora continuamos con el código para alternar la visibilidad de los selectores de color que configuran los colores del "Título del sitio". Como hemos planeado, eliminaremos los selectores de color cuando la casilla de verificación esté sin marcar y mostrarlos de nuevo cuando sea marcado.
Para empezar, agrupamos los identificadores de configuración del selector de color en una matriz.
wp.customize.bind ('ready', function () // Ready? var customize = this; // Personalizar alias de objetos. customizar ('display_blogname', function (value) // ... códigos anteriores ... var colorControls = [ 'header_textcolor', 'header_textcolor_hover'];);); Luego, iteramos una función sobre estas ID de control que cambiarán su visibilidad usando jQuery .palanca() método.
wp.customize.bind ('ready', function () // Ready? var customize = this; // Personalizar alias de objetos. customizar ('display_blogname', function (value) // ... códigos anteriores ... var colorControls = [ 'header_textcolor', 'header_textcolor_hover']; $ .each (colorControls, function (index, id) personaliza.control (id, function (control) / ** * Función de alternar * / var toggle = function (to) control .toggle (to);; // 1. Al cargar. toggle (value.get ()); // 2. En el cambio de valor. value.bind (toggle););););) ; La estructura del código anterior es similar a nuestro código anterior, que deshabilita el elemento de entrada. Aquí hemos seleccionado cada control en la matriz usando el .controlar() Método como ya hemos mostrado anteriormente en este tutorial. A continuación, tenemos una función para alternar cada control usando jQuery .palanca() y ejecútelo en el inicio de la página del personalizador, así como cuando se cambie el valor.
La casilla de verificación "Mostrar título del sitio" sin marcar, la entrada Título del sitio aparece atenuada (desactivada) y los selectores de color correspondientes en la sección Color ahora están ocultos.En este tutorial, he mostrado un ejemplo simple de cómo utilizar la API de JavaScript del personalizador para mejorar la experiencia del usuario en el personalizador. Y hay algunas cosas que podemos hacer para mejorarlo aún más, como eliminar la sección "Colores" si no hay control para mostrar dentro de la sección, y ajustar el tono de color de la configuración de "Color del texto del encabezado: Hover" después de Valor en la configuración "Color del texto del encabezado".
En el siguiente tutorial de esta serie, vamos a desafiarnos con un ejemplo un poco más complejo. Vamos a construir un "puente" que permitirá que la ventana de vista previa del personalizador interactúe con el panel de control en el back-end. Por lo tanto, cuando un usuario hace clic en, por ejemplo, el Título del sitio en la ventana de Vista previa, el Personalizador deslizará la entrada correspondiente al usuario.
Manténganse al tanto!
