Introducción a las variaciones de estilo con theme.json
Como desarrollador de WordPress, es probable que hayas abordado proyectos que requieren crear varias versiones de un sitio web con diferencias menores en el diseño. En estos casos, el archivo theme.json emerge como una herramienta valiosa, ya que facilita la gestión de variaciones de estilo sin la necesidad de generar temas hijos o modificar el código CSS directamente.
Con la introducción de theme.json en WordPress 5.8, esta herramienta ha transformado cómo los desarrolladores manejan los estilos globales y las personalizaciones de diseño. Mediante el uso de variaciones de estilo, es posible crear distintas versiones de un tema, modificando colores, tipografías y otros elementos visuales. Este artículo proporcionará una guía detallada para implementar y aplicar efectivamente estas variaciones.
Estructura de theme.json y las variaciones de estilo
Antes de generar variaciones de estilo, es esencial comprender la estructura básica del archivo theme.json y su organización dentro del tema. Inicialmente, debes crear una carpeta llamada styles/ en el directorio raíz de tu tema, donde almacenarás los archivos JSON que determinarán los estilos personalizados.
Estructura de carpetas:
/wp-content/themes/tu-tema/
├── styles/
│ └── dark.json
├── theme.json
├── functions.php
El archivo dark.json en este caso es una variante que define, por ejemplo, una paleta de colores oscuros para tu tema. Cada archivo dentro de la carpeta styles/ debe tener una estructura definida para que WordPress pueda interpretar y aplicar las variaciones de manera adecuada.
Ejemplo práctico: Creación de un archivo de variación de estilo
Para ilustrar mejor cómo se crea una variación de estilo, aquí tienes un ejemplo básico de un archivo dark.json. En este caso, modificamos la paleta de colores y la tipografía:
{
"version": 2,
"title": "Dark Mode",
"styles": {
"color": {
"background": "#000000",
"text": "#ffffff"
},
"typography": {
"fontSize": "18px"
}
}
}
Este archivo indica que la variación de estilo «Dark Mode» utiliza un fondo negro con texto blanco, además de ajustar el tamaño de la tipografía a 18px. Puedes añadir tantas modificaciones como necesites en cada archivo de variación, lo que te permite personalizar prácticamente cualquier aspecto del diseño.
Aplicación de las variaciones de estilo en el panel de WordPress
Después de crear las variaciones de estilo y ubicarlas en la carpeta styles/, es sencillo aplicarlas desde el panel de WordPress. Solo tienes que ir a Apariencia > Editor > Estilos, donde encontrarás las distintas opciones de estilo que previamente configuraste en los archivos JSON.
Este sistema permite no solo cambiar la paleta de colores, sino también ajustar otros elementos visuales como la tipografía y los estilos de los bloques de contenido. Por ejemplo, si se han creado múltiples paletas de colores en los archivos de variaciones, el cliente podrá seleccionar cualquiera de ellas fácilmente con un solo clic desde el editor.
Compatibilidad con temas clásicos
Aunque theme.json fue creado para temas con base en bloques, es factible activar variaciones de estilo en temas tradicionales. Para lograrlo, es necesario realizar ciertas modificaciones en el archivo functions.php del tema y verificar que WordPress identifique al tema como apto para el uso de plantillas de bloques.
Primero, añade el siguiente código al archivo functions.php para activar el soporte de bloques:
function prefix_theme_support_blocks() {
// Habilitar el uso de plantillas de bloques
add_theme_support( 'block-templates' );
// Estilos en el editor de bloques
add_theme_support( 'wp-block-styles' );
// Estilos personalizados en el editor
add_theme_support( 'editor-styles' );
// Soporte para theme.json y variaciones de estilo
add_theme_support( 'global-styles' );
// Soporte para alineación completa
add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'prefix_theme_support_blocks' );
Este código activa múltiples funciones esenciales para que el tema admita las variaciones de estilo especificadas en theme.json. No obstante, para que WordPress identifique tu tema como compatible, necesitas crear un directorio denominado block-templates/ o templates/ y agregar un archivo HTML básico que contenga, como mínimo, un bloque. Este procedimiento es obligatorio aunque no tengas intención de utilizar plantillas de bloques inmediatamente.
Estructura del tema clásico:
/wp-content/themes/tu-tema/
├── block-templates/
├── styles/
├── theme.json
└── functions.php
En la carpeta block-templates/, crea un archivo index.html con contenido básico como el siguiente:
<!-- wp:paragraph -->
<p>Esta es una plantilla básica de bloques.</p>
<!-- /wp:paragraph -->Esto permitirá que WordPress identifique que tu tema es compatible con plantillas de bloques, lo cual posibilitará el uso de variaciones de estilo en temas que inicialmente no fueron concebidos para bloques.
Conclusión: Crea múltiples sitios web diferentes con las variaciones de estilo de theme.json
La implementación de theme.json facilita la personalización ágil y efectiva de los temas en WordPress. Con las variaciones de estilo, es posible brindar diversas opciones de diseño a los clientes sin duplicar código ni desarrollar temas adicionales. Esto representa un ahorro de tiempo significativo y simplifica la gestión, al tener centralizadas todas las variaciones en un solo archivo JSON.
Mediante la aplicación correcta de variaciones de estilo, es posible generar diversas versiones de un sitio web, cada una con ajustes específicos en colores, tipografías y otros elementos de diseño. Esto resulta particularmente beneficioso para proyectos como micrositios o landing pages, donde aunque los cambios de estilo son sutiles, son significativos para la experiencia del usuario.
En conclusión, theme.json es una herramienta esencial para los desarrolladores que desean aumentar la flexibilidad y simplificar la complejidad al crear sitios web con WordPress. La implementación de variaciones de estilo no solo incrementa la eficiencia, sino que también proporciona una experiencia de usuario más intuitiva, permitiendo la personalización del sitio con apenas unos pocos clics.
