> Personalizador de temas de WordPress: primeros pasos

Ya he explicado cómo crear una página de opciones de tema rápida y fácilmente. La creación de una página personalizada para las opciones de temas es óptima si desea ofrecer a sus usuarios muchas funciones. Pero hay otra forma de realizar una página para las opciones de temas. Desde hace un tiempo, WordPress ha estado ofreciendo el personalizador de temas. Esto es perfecto si su tema no ofrece demasiadas opciones. La gran ventaja del personalizador es su vista previa en vivo. Cada cambio realizado en el tema se puede verificar antes de transferirlo al sitio web. Este artículo le muestra cómo “alimentar” el Personalizador con sus características.

Crear opciones de temas con el Personalizador de temas es relativamente fácil y ofrece a sus usuarios la gran ventaja de una vista previa en vivo antes de guardar los cambios. El personalizador de temas se introdujo con la versión 3.4 de WordPress.

Importante saber: No más páginas de opciones de temas para temas de WordPress.org

Cuando desee crear un tema para el índice de temas de WordPress.org, debe usar el Personalizador de temas. Las páginas de opciones de temas ya no están permitidas desde el 21 de octubre del año pasado..

Creación de opciones de tema para el personalizador de temas

Nuestro tema de ejemplo es el tema Ari de Elmastudio. Solo proporciona las opciones predefinidas y, por lo tanto, se puede ampliar muy bien en el transcurso de este tutorial. A continuación, crearemos una página de personalizador de temas completamente nueva para el tema.

Importante: Se puede hacer clic en todos los siguientes fragmentos de código para descargar el código directamente desde GitHub.

Los cuatro métodos del objeto $wp_customize

Los ajustes predefinidos

WordPress viene con algunas configuraciones predeterminadas que no necesitan ser definidas.

title_tagline – Título del sitio web y eslogan
colores – Colores
imagen de cabecera – Imagen de cabecera
imagen de fondo – Imagen de fondo
navegación – Navegación
static_front_page – Portada estática

Las versiones de transporte: actualización frente a postMessage

Sin embargo, si desea que algunas de estas funciones estén visibles antes de guardarlas, debe agregarlas a la función Personalizador de temas. Puede asignar dos versiones de «transporte».

Actualizar significa que después de ingresar su configuración dentro del Personalizador de temas, la página de vista previa se actualiza directamente. Después de eso, la nueva configuración es visible.

PublicarMensaje sin embargo, significa cambios en tiempo real. Cuando cambia el nombre del blog en el Personalizador de temas, por ejemplo, las letras ingresadas son visibles inmediatamente. Para el método de transporte postMensajenecesita un pequeño archivo jQuery adicional.

Importante saber: características estándar de WordPress

La captura de pantalla muestra las características estándar del método de transporte »actualizar«. Sin embargo, también puede configurarlos para una vista en tiempo real como se muestra en la imagen.

Creación de opciones de tema con el personalizador de temas

Configure un nuevo archivo llamado personalizador.php en el índice principal de tu tema. Puede crear el archivo en un editor de texto puro como TextEdit o un editor HTML.

Pegue el siguiente código en el personalizador.php:

Primero se distribuye una clase propia y luego se registran las características. Cada código que escribiremos ahora pertenece a esta función.

Permitir que el usuario ajuste los colores

Estamos configurando una sección para los colores que se supone que los usuarios podrán elegir más adelante. El enlace y los colores del texto se pueden editar. El código debe copiarse en la función que acabamos de configurar. En este caso, accederemos al método de transporte »actualizar«, que no necesita definirse ya que es el estándar de WordPress, a modo de ejemplo.

En primer lugar, el código describe las opciones que el usuario puede modificar, como los colores del enlace y del texto. Además, se establece un estándar, que ya está definido en la hoja de estilo CSS del tema, para cada una de las dos opciones. De esta manera, no necesita definir la configuración para cada una de las opciones de color. Las configuraciones que el usuario puede modificar en el Personalizador de temas también se definen de esta manera. Sin esta configuración, no aparecerá una nueva sección en las opciones de configuración en el personalizador.

Finalmente, el código también define las auditorías que permiten estas configuraciones.

Aquí, nuevo WP_Customize_Color_Control activa el selector de color que le permite determinar los colores personalizados.

Por cierto, no tuve que configurar una sección de «colores», ya que esto sucede automáticamente cuando las auditorías se definen dentro de esa sección.

Ahora, nuestro personalizador de temas se ve así:

También puede ajustar los colores con un selector de color, pero todavía no se realizarán cambios en el tema. Para permitir que los cambios se apliquen al tema, debe ajustar el tema encabezado.php. Por lo tanto, copie el siguiente código directamente en la parte superior del acabado. etiqueta en el header.php:

Una vez que haya hecho eso, los ajustes de color son directamente visibles en el personalizador, antes de hacer clic en »Guardar y publicar«. Inmediatamente después de elegir un nuevo color, la página se actualiza y los cambios en la elección del color se vuelven visibles.

Las dos variables toman los cambios del personalizador y transfieren los valores al pequeño CSS en línea, que es responsable de la visualización de los nuevos colores.

Mostrando las opciones en el tema

Aquí, diferenciamos entre las características que proporciona WordPress por defecto y las que nosotros mismos definimos.

Implementación de un bloque de publicidad

En este caso, no será tan fácil como lo fue al editar los colores. Se necesita más código. Para comenzar, se debe configurar una nueva sección para que se pueda mostrar el nuevo elemento del menú. Para hacer eso, estamos usando el $personalizar_objeto->agregar_sección método.

El prioridad determina dónde se muestra el nuevo elemento de menú. Cuanto menor sea el número, más cerca de la parte superior se colocará el elemento del menú.

Definición de la configuración

Aquí es donde el $customizer_object->add_setting entra en juego el método.

Creación de la entrada para la configuración

Para crear el control que es responsable de la visualización de las opciones de configuración en el personalizador, necesitamos el $objeto_personalizador->add_control($objeto_controlador) método.

Hay muchos objetos de controlador diferentes, dependiendo de lo que necesite. Aquí, hemos utilizado WP_Personalizar_Control, que es útil para los cuadros de entrada. Puede usarlo para crear un área de texto, una zona de texto, casillas de verificación, elementos de radio y colores. También hay otros objetos de controlador como WP_Personalizar_Color_Control, WP_Personalizar_Subir_Controly WP_Personalizar_Imagen_Control para ingresar colores o cargar un archivo o imagen.

El resultado provisional en el personalizador

Visualización del bloque de publicidad en el tema

Debe colocar un pequeño fragmento de código donde desee que aparezca el bloque publicitario.

Una vez que haya elegido actualizar como método de transporte, no queda nada por hacer. Cuando eliges el método de transporte postMensajenecesita escribir un poco de JavaScript para que los cambios sean visibles en tiempo real.

El JavaScript para la visualización de cambios en tiempo real

Cree un archivo JavaScript dentro del índice del tema. Nombralo tema-personalizador.js. Introduzca el siguiente código en el archivo:

El Resultado en el Tema – Bloque Publicitario

El bloque publicitario recién definido ahora se puede colocar en cualquier parte del tema, lleno de texto, pancartas o anuncios.

Activando el tema oscuro del tema Ari

Ari también ofrece una versión oscura que se puede activar en la página de opciones del tema. Pero como solo queremos aprender sobre el Personalizador, nos daremos cuenta de la opción de cambio para el Personalizador de WordPress. La vista en tiempo real tiene poco sentido aquí, ya que los cambios son visibles instantáneamente al actualizar la página, incluso antes de guardar. Por lo tanto, usaremos el método estándar »actualizar« para el código.

Elegí una casilla de verificación para la activación del tema Ari oscuro. Al colocar una marca de verificación, activará el tema oscuro.

Por supuesto, los colores de los textos y enlaces deben ajustarse después, como ya hemos hecho anteriormente.

Los ajustes necesarios en el tema – header.php

Un pequeño cambio tiene que ser hecho en el tema encabezado.phppara que se pueda activar el tema oscuro.

El código se asegura de que la hoja de estilo del tema oscuro solo aparezca en el área cuando sea necesario.

La configuración predeterminada de WordPress en tiempo real

Ahora realizaremos dos de las configuraciones predeterminadas de WordPress, siendo el nombre del blog y la descripción, en tiempo real usando el método de transporte »postMensaje«. Para hacerlo, se requieren las siguientes dos líneas de código:

Además, se necesita un poco de jQuery para la visualización en tiempo real.

Cambios en el header.php

Una vez más, el tema es encabezado.php tiene que ser editado. Necesitamos agregar una clase CSS para el título del sitio web y la descripción para acceder a los elementos más fácilmente con jQuery.

El resultado en el personalizador

Crear y hacer referencia a todo el JavaScript

Necesitamos un jQuery, que nombraremos tema-personalizador.js, para nuestras funciones bloque de publicidad, nombre del blog y descripción del blog. Se ve así y pertenece al índice principal del tema:

Tenga en cuenta que el código para los elementos de texto y descripción es diferente del bloque publicitario. El bloque publicitario está vinculado a un elemento HTML, mientras que el texto y la descripción están vinculados a un elemento de texto. Para mí, la visualización en tiempo real de los nombres y descripciones de los blogs solo funcionó de esta manera.

Haciendo referencia al JavaScript

Para que el personalizador de temas pueda usar jQuery, debemos hacer referencia a él. Esto se hace en el personalizador.php archivo dentro de la clase Ari_Personalizadorpero fuera de la función Registrarse().

Últimos retoques

Iniciando las funciones del Personalizador y el JavaScript.

Copie la siguiente línea de código en el tema funciones.php de manera que la personalizador.php se accede.

Al activar el tema Ari, se debe mostrar la siguiente imagen debajo de »Diseño => Editar«:

Los Archivos Completos y el Tema Editado para Descargar

Para comprender mejor cómo encaja y funciona todo, puede encontrar las descargas de los archivos completos aquí.

La descarga del archivo personalizador.php en GitHub
La descarga del archivo theme-customizer.js en GitHub
El archivo header.php optimizado de la descarga del tema Ari en GitHub
Ari-Theme completo, funcional y modificado como archivo .zip

Conclusión

El personalizador de temas seguramente es algo interesante con lo que todo desarrollador tiene que lidiar cuando quiere ofrecer temas en el índice oficial. Esto inevitablemente hará que los temas nuevos y de alta calidad de los grandes proveedores ya no se incluyan allí. Esto se debe a que los grandes proveedores como WooThemes, Krisi and Co. todavía dan prioridad a su propia página de opciones de temas, ya que es la única forma de darse cuenta de la gran cantidad de configuraciones con las que vienen los temas premium de hoy.

Por supuesto, los profesionales que proporcionan temas en WordPress podrán resolver muchas cosas de manera más elegante que yo en este artículo. Sin embargo, este artículo fue principalmente sobre el conocimiento básico del Personalizador; sobre el éxito primero, rápido. Y esto se proporciona.

Otras lecturas

(dpe)

#Personalizador #temas #WordPress #primeros #pasos

Personalizador de temas de WordPress: primeros pasos

Importante saber: No más páginas de opciones de temas para temas de WordPress.org