Share
En este punto de la serie, hemos cubierto todo desde comprender por qué el Personalizador de temas es beneficioso para quienes somos diseñadores y desarrolladores, cómo implementarlo en nuestro tema y cómo entender la relación entre las secciones, las configuraciones y los controles..
También hemos analizado cómo implementar nuestra propia configuración y control en una de las secciones predefinidas de WordPress.
En este artículo, vamos a echar un vistazo a lo que se requiere para presentar nuestra propia sección y una variedad de configuraciones y controles. Este artículo cubrirá una metodología que se puede seguir para implementar nuevas configuraciones y controles, y cómo aplicar esta metodología para introducir una nueva sección, configuración y control..
Ampliaremos este tema en la segunda parte de este artículo introduciendo controles adicionales. Pero, por ahora, echemos un vistazo a la metodología y presentemos una nueva configuración en el Personalizador de temas..
Antes de comenzar a actualizar nuestro tema, primero hablemos sobre lo que se requiere para introducir una nueva sección, una nueva configuración y un nuevo control. Tenga en cuenta que en este punto, estamos asumiendo que siempre vamos a utilizar el mensaje posterior transporte para actualizaciones en vivo, así que vamos a asumir lo mismo en el futuro.
Dicho esto, tener una metodología para introducir nuevas opciones siempre es mucho más útil que hacer algo ciego, así que echemos un vistazo a lo que se necesita para implementar secciones, configuraciones y controles a un alto nivel:
Accentsconagua
get_theme_mod Nada demasiado complicado, ¿verdad? Por supuesto, las acciones hablan más que las palabras, así que empecemos a hacer exactamente esto..
Para seguir la metodología que hemos descrito anteriormente, vamos a trabajar con las mismas funciones, plantillas y archivos de JavaScript que hemos definido en artículos anteriores, por lo que si no se ha puesto al día, ahora es el hora.
Dicho esto, comencemos.
En el tcx_register_theme_customizer función, vamos a implementar una sección llamada Opciones de pantalla, y nos aseguraremos de que se coloque al final de la lista de secciones en el Personalizador de temas. Esto se hace estableciendo la prioridad propiedad de la add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Opciones de visualización', 'prioridad' => 200)); Aviso anterior, hemos definido dos argumentos:
Si guarda su trabajo ahora e intenta volver a cargar el personalizador, no verá el Opciones de pantalla sección. Eso es porque no hay opciones para que se muestre, todavía.
Para mostrar la sección, necesitamos introducir una configuración para que el usuario la modifique. Para hacer esto, presentaremos una opción que permitirá al usuario cambiar la visibilidad de un encabezado.
Lo primero que debemos hacer es hacer una llamada a add_setting que identificará la configuración y que definirá su valor predeterminado y el método de transporte.
Todo esto debería ser relativamente fácil si has estado al día con el artículo anterior. Así que justo debajo de la llamada a add_section, agregar la siguiente llamada:
$ wp_customize-> add_setting ('tcx_display_header', array ('default' => 'true', 'transport' => 'postMessage')); Específicamente, hemos creado una nueva configuración llamada tcx_display_header que usaremos para alternar la visualización del encabezado usando ambos get_theme_mod y usando JavaScript.
Pero esto no es suficiente para dar al usuario la capacidad de modificar la visibilidad del encabezado; ahora necesitamos implementar un control.
Para los fines de esta configuración en particular, vamos a presentar una casilla de verificación que permitirá a los usuarios cambiar la visibilidad de la configuración.
Primero, necesitamos definir el control. Para hacer esto, agregue el siguiente código debajo de la llamada a add_setting que definimos anteriormente:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Display Header?', 'type' => 'checkbox')); En esta convocatoria, estamos vinculando el control a la tcx_display_header Configuración para que sepa qué información se debe hacer. En la matriz, proporcionamos el ID de la sección a la que están vinculados esta configuración y este control. A continuación, le asignamos la etiqueta que aparecerá junto al control y, finalmente, definiremos el tipo de control. Obviamente, estamos definiendo una casilla de verificación..
En este punto, debería poder guardar su trabajo, actualizar el personalizador del tema y luego ver algo como esto:
Esto es bueno: significa que todo se ha conectado correctamente en lo que respecta al Personalizador de temas, pero tenga en cuenta que hacer clic en la casilla de verificación en realidad no funciona. hacer cualquier cosa.
Ahora es el momento de conectar el Personalizador de temas al tema real.
En primer lugar, queremos abrir theme-customizer.js. Si has estado siguiendo a lo largo, entonces esto se encuentra en el js Directorio que definimos anteriormente en la serie..
A continuación, necesitamos agregar el siguiente código:
wp.customize ('tcx_display_header', function (value) value.bind (function (to) false === to? $ ('#header') .hide (): $ ('#header') .show ( ););); Observe que toma el ID de la configuración que creamos y luego ejecuta la siguiente lógica: Si a es igual a falso, luego ocultaremos el elemento de encabezado; De lo contrario, mostramos el elemento de cabecera..
En este punto, actualice la página y notará que el encabezado desaparece (o vuelve a aparecer) a medida que activa la casilla de verificación..
Pero cuando guardas tu trabajo, no pasa nada. Esto se debe a que el valor serializado no se está leyendo. Lo último que tenemos que hacer es aprovechar get_theme_mod para los ajustes.
get_theme_mod Finalmente, la última parte de la metodología que es necesaria para implementar nuestra propia configuración es asegurarnos de que el valor que se almacena a través del transporte se está leyendo cuando se carga la página..
Para ello, localice el tcx_customizer_css función y luego agregar el siguiente código entre el estilo bloquear:
#header mostrar: ninguno;
En resumen, esto lee el valor del tema para el ID del valor de visualización del encabezado que hemos guardado. Si se establece en falso, entonces oculta el elemento del encabezado; de lo contrario, el CSS nunca se renderiza.
En este punto, debe tener una implementación completamente funcional de la casilla de verificación que alterna dinámicamente el encabezado cuando el usuario está trabajando con el personalizador, y que aprovecha el valor serializado cuando se guarda la configuración, y actualiza lo que el usuario ve cada vez que cargar el tema.
Ahora que hemos definido una metodología para implementar secciones, configuraciones y controles, podemos comenzar a trabajar con una variedad de otros controles, también.
En el siguiente artículo, veremos el conjunto restante de controles básicos, y luego veremos algunos de los controles más avanzados que WordPress ofrece en el Personalizador de temas..
Al igual que con las versiones anteriores del tema, puede descargar la versión 0.4.0 de GitHub para revisar el código, jugar con él y prepararse para el siguiente conjunto de controles que presentaremos en el siguiente artículo..
