Creación de opciones de temas de WordPress con la API de personalización de temas

Crear opciones de temas de WordPress con la API de personalización de temas es fácil de hacer. Este artículo te muestra cómo se hace.

La API de personalización de temas de WordPress se lanzó con WordPress 3.4, en 2012. Prometía a los desarrolladores una forma estandarizada de agregar temas de opciones ricas y a los usuarios una forma de modificar su sitio web de una manera fácil de usar.

Para los usuarios, el personalizador de temas frontales les permite cambiar rápidamente el aspecto de su sitio e incluso obtener una vista previa en vivo.

El éxito de este proyecto es discutible, pero se está mejorando y está ganando terreno. Se ha construido sobre una base sólida y no hay razón para no empezar con él.

Entonces, echemos un vistazo a cómo podemos agregar fácilmente configuraciones a los temas usando la API.

Esto es lo que vamos a cubrir hoy:

• Construyendo nuestra base
• Los componentes de la configuración de un tema
• Uso de valores de configuración
• Vistas previas en vivo
• Encapsulando en una clase
• Otras opciones

Construyendo nuestra base

La clave de la API de personalización es la clase WP_Customize_Manager , a la que se puede acceder a través del objeto $wp_customize . Usaremos varios métodos definidos en esta clase para agregar secciones de configuración y controles dentro de ellos.

La forma recomendada de crear configuraciones de tema es encapsularlas en una clase. En nuestros ejemplos iniciales, no seguiré esta recomendación para asegurarme de que quede claro qué es parte de la API de personalización y qué no. Completaré el artículo con una implementación basada en clases.

Comencemos por crear una función en el archivo functions.php de nuestro tema, que nos permitirá incluir nuestras adiciones en el personalizador. Esta función debe vincularse a customize_register.

Los componentes de la configuración de un tema

Como se menciona en el ejemplo, cada elemento que agrega al personalizador consta de tres partes:

• Se debe crear una sección para colocarlo. Esta sección puede ser una de las preexistentes, por supuesto.
• Un ajuste debe estar registrado en la base de datos, y
• Es necesario crear un control que se utilice para manipular la configuración definida

Si la separación entre un control y una configuración parece confusa, piénselo así: cuando crea una configuración, le dice a WordPress que efectivamente hay una configuración para el color de la fuente y que el valor predeterminado para esto es #444444. En sí mismo, esto ya significa que se puede usar esta configuración.

Sin embargo, el personalizador de temas necesita saber cómo manipular esta configuración. Podría crear un campo de texto para él donde el usuario ingrese nuevos colores manualmente como "#ff9900", pero también podría especificar un control de color, que generaría un selector de color. En el nivel de la base de datos, todo se reducirá a un color hexadecimal, pero el lado que mira al usuario es diferente.

Crear una sección

El add_section() se usa para crear secciones. Toma dos parámetros, un slug de sección y una matriz de argumentos. Este es un ejemplo de cómo configuro una sección para opciones de pie de página en un tema.

La mayor parte de esto se explica por sí mismo. Sin embargo, tenga en cuenta la prioridad. Esto determina el orden de la sección en la pantalla. Me gusta incrementar mis opciones en decenas. Si necesito insertar una sección entre dos secciones existentes, no necesitaré volver a indexar todo, solo puedo asignar la nueva 95.

Tenga en cuenta que las secciones no se mostrarán cuando estén vacías. Debe agregarles una configuración y un control antes de que se muestren.

Agregar configuraciones

Los ajustes se crean con el método add_setting() . Ellos también toman un slug como primer parámetro y una serie de argumentos como segundo. Eche un vistazo a continuación para ver un ejemplo de cómo agregar un color de fondo a nuestra sección anterior.

Hay un montón de opciones que podríamos agregar aquí, pero por ahora esto funcionará bien. Tenga en cuenta que la configuración no está vinculada a la sección. Como mencioné, la configuración simplemente se registra con WordPress. Depende de los controles, que están vinculados a las secciones para manipularlos.

Crear un control

Los controles se implementan con el método add_control() . Este método toma un slug y una matriz de argumentos o también puede recibir un objeto de control dedicado. Un objeto de control se utiliza para controles más complejos, como selectores de color o cargadores de archivos.

Así es como creé el control que modifica el color de fondo del pie de página:

He pasado un objeto de control al método add_control() . Este objeto debe construirse pasando el objeto $wp_customize como primer parámetro, una ID única para el control como segundo y una matriz de argumentos como tercero.

Tenga en cuenta que el control es donde todo se une. la section se establece en la identificación de la sección que creamos y la settings se establece en la identificación de la configuración.

Una vez que se hayan configurado los tres, debería poder volver a cargar el personalizador y ver su trabajo.

Uso de valores de configuración

De forma predeterminada, la configuración se guarda en un theme_mod. Los Theme_mods son una alternativa a la API de configuración, proporcionan una manera fácil de manejar la configuración específica del tema. Todo lo que necesita hacer para recuperar el valor de una configuración es usar la función get_theme_mod() con la identificación de la configuración que se le pasó.

Agreguemos algo de CSS dinámico a nuestro sitio web conectándonos a wp_head y usando nuestra configuración guardada:

Vistas previas en vivo

Las vistas previas en vivo para la configuración no están habilitadas de forma predeterminada. Para usarlos debes hacer tres cosas:

• Poner en cola un archivo Javascript que maneja las vistas previas
• Agregue soporte de vista previa en vivo para la configuración, y
• Cree el código Javascript para cuidar cada configuración

Poner en cola el script de vista previa en vivo

Lo único irregular de este paso es que necesitamos usar customize_preview_init y debemos asegurarnos de que 'jquery' y 'customize-preview' estén cargados antes de nuestro script. Aparte de eso, es una cola estándar que apunta a un archivo javascript en nuestro tema:

Agregue soporte de vista previa en vivo para la configuración

Esta es bastante fácil. En los argumentos de nuestra configuración, debemos definir una clave de transport y establecer su valor en postMessage . Revisemos nuestro código de antes:

Cree el código Javascript para cuidar cada configuración

Necesitaremos usar la función wp.customize() en Javascript. A esta función se le debe dar la identificación de la configuración como primer parámetro, el segundo es una función de devolución de llamada. Dentro vinculamos una función al cambio de configuración y escribimos nuestro código que se encargará del cambio.

De todo lo que solo necesitamos escribir una línea, use esta plantilla de copiar y pegar para obtener una vista previa en vivo de la velocidad de escritura:

Encapsulando en una clase

Encapsular en una clase es una buena idea porque le permite escribir mejores nombres de funciones y hacer que su código sea más compatible con varios temas, en caso de que tenga varios temas en proceso. Así es como lo hice para nuestro ejemplo anterior.

Tenga en cuenta que todo es exactamente igual, todo lo que ha cambiado es el nombre de algunas funciones y nos referimos a métodos dentro de la clase en lugar de funciones dispersas en nuestro archivo functions.php .

Otras opciones

Recomiendo encarecidamente leer la documentación sobre la API de personalización de temas en el Codex de WordPress. Contiene muchas configuraciones adicionales y formas de trabajar con la API.

• temas gratis
• temas premium