Supongamos que hemos creado un tema con una serie de Configuraciones y controles del personalizador que permiten a los usuarios del tema personalizar varias cosas en el front-end del tema, como el título del sitio web, el eslogan y el color..

Sin embargo, es posible que algunos de nuestros usuarios no sepan de inmediato que pueden personalizar estas partes particulares del tema, especialmente si están enterradas en varios Paneles y Secciones. Entonces, ¿cómo podemos hacer que sea más rápido para ellos personalizar el tema??

WordPress.com ha agregado recientemente los botones Editar en algunas áreas editables, que se notan inmediatamente al iniciar el Personalizador. Cuando el usuario haga clic en estos botones, les mostrará el respectivo Control.

El nuevo botón "Editar" en la ventana de vista previa del personalizador en WordPress.com, 

Esta es una buena mejora de UX que también podemos lograr con la API de JavaScript del personalizador en nuestro tema. Y encontrará que hacerlo no es tan complicado como puede haber imaginado. Entonces, echemos un vistazo rápido a cómo funciona.

Prerrequisitos

En el último tutorial, solo escribimos código en el customizer-control.js archivo, que afecta a las interfaces de back-end del personalizador. En este tutorial, también emplearemos el otro archivo., personalizador-preview.js, que se carga en la ventana de vista previa. Debes tener estos dos archivos creados y cargados. De lo contrario, le sugiero que siga el primer tutorial de esta serie antes de continuar..

Creación de un botón de edición

En primer lugar, añadimos un par de Editar Botones junto al título del sitio.

 "rel =" home ">     

Utilizando is_customize_preview (), este botón solo se mostrará en la ventana de vista previa del personalizador. Cada uno de estos botones tiene asignado un clase nombre, .personalizador-editar, lo que nos permitirá seleccionar estos botones y enlazarlos con un hacer clic Evento mas tarde.

Además, también hemos añadido estos botones con una control de datos atributo que contiene el nombre o el ID de las Configuraciones registradas en el Personalizador. El nombre en este atributo nos ayudará a determinar la configuración y el control correctos para servir al usuario más adelante.

Dos botones de edición para personalizar el Título y el color del Título..

Ya que la presentación no es nuestra principal preocupación por ahora, nuestros dos botones "Editar" en la ventana de Vista previa no se ven tan bien como los de WordPress.com. Puede agregar los estilos de una manera que coincida con el diseño de su tema como un todo.

Definiendo un evento personalizado

A continuación, definimos un Evento personalizado; se hace clic en un evento que le dice a uno de estos botones. Agregue el siguiente código en el personalizador-preview.js expediente.

var personalizar = wp.customize; $ (document.body) .on ('click', '.customizer-edit', function () personaliza.preview.send ('preview-edit', $ (this) .data ('control')); );

El código une cada uno de estos botones con el hacer clic Evento, utilizando el  .preview.send () Método para lanzar un evento. los .preview.send () El método toma dos parámetros, a saber, el nombre del evento personalizado y el argumento. En nuestro caso, hemos definido un nuevo evento llamado vista previa-editar, y pasar un argumento con los datos recuperados de la control de datos atributo del botón.

Escuchando el Evento Personalizado

Podemos escuchar un Evento personalizado emitido desde el .preview.send () Método a través de otro método de personalizador llamado .previewer.bind ()-Observe la vista previa con er. Este método es similar al de jQuery. .en() Método, en el que definimos el nombre del evento para escuchar y una función que se ejecutará cuando se active el evento. Añadir .previewer.bind () en el customizer-control.js, como sigue.

var personalizar = wp.customize; personalizar.previewer.bind ('preview-edit', función (datos) );

A continuación, transformamos los datos pasados ​​en un formato de cumplimiento JSON, seleccionamos un elemento de control basado en el nombre recuperado de los datos y enfoque en el elemento de control utilizando el Personalizador .atención() método.

var personalizar = wp.customize; customize.previewer.bind ('preview-edit', function (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (););

Ahora, como puede ver a continuación, cuando hacemos clic en, por ejemplo, el botón "Editar texto", se mostrará la configuración "Título del sitio" y se enfoca el cursor en la entrada.

El botón Editar en acción.

Además, si nos fijamos en el código fuente, el .atención() método acepta un parámetro llamado completar Recuperación de llamada. Este parámetro se ejecuta consecutivamente después de la .atención() se ejecuta la funcion Podemos utilizar este parámetro, por ejemplo, para agregar un efecto de animación..

customize.previewer.bind ('preview-edit', function (data) var data = JSON.parse (data); var control = customize.control (data.name); control.focus (completeCallback: function ()  setTimeout (function () control.container.addClass ('shake animated');, 300);););

La experiencia general ahora se siente más viva..

Elemento de entrada mejorado con animación CSS

Terminando

Hemos mencionado un número de las API de JavaScript del personalizador:

• .preview.send () método para lanzar un evento personalizado.
• .previewer.bind () Método para enlazar el personalizador con un evento personalizado.
• .atención() método para centrarse en un elemento de entrada de un Control, así como la completar Recuperación de llamada parámetro.

En este tutorial, usamos estos métodos para permitir a nuestros usuarios de temas editar el texto del título del sitio rápidamente haciendo clic en el botón "Editar texto" en la ventana de vista previa.

Todavía nos queda un botón para que aparezcan los controles de color. Pero lo dejaré aquí como un reto; Usa los mismos tres métodos para hacer la función "Editar color". En caso de duda, no dude en echar un vistazo al código fuente..