Los desarrolladores de temas de WordPress pueden utilizar un archivo theme.json para agilizar un proceso que solía depender en gran medida de PHP. Sin embargo, puedes seguir utilizando tus conocimientos de HTML, JavaScript y PHP para crear tus temas, y el CSS no es una excepción. De hecho, puedes utilizar propiedades CSS personalizadas dentro de theme.json. Esto puede mejorar la fase de diseño y ofrecer una mayor flexibilidad.
En esta guía, vamos a tratar de lleno las propiedades personalizadas CSS para explorar cómo funcionan junto con WordPress y theme.json. Pero antes de llegar a eso, resumamos theme.json, la edición completa del sitio (FSE) y cómo encaja CSS en este nuevo enfoque de diseño.
Cómo funciona theme.json con WordPress
El archivo theme.json apareció por primera vez en WordPress 5.8. Es una forma revolucionaria de diseñar temas de WordPress, utilizando sintaxis JSON para construir un archivo de configuración. WordPress lo lee y aplica los resultados sin necesidad de mucho PHP, CSS o JavaScript.
Los ajustes y estilos globales de FSE controlan varios aspectos visuales de tu tema. Pueden incluir las típicas paletas de colores y tipografía, pero también opciones de diseño y estilos individuales de bloques y elementos.
Aunque FSE es intuitivo, potente, adaptable y fácil de usar, theme.json puede ayudar a reducir la distancia entre las funciones del usuario final y del desarrollador. Casi todas las opciones que te ofrece theme.json son también visibles en el Editor de Sitios.
Utilizar theme.json ofrece muchas ventajas a la hora de crear temas para WordPress. Esto se debe a varias razones:
- Tienes una ubicación central para la configuración del diseño de tu tema, lo que facilita su gestión y actualización.
- Hay menos ofuscación entre la experiencia del front-end, el Editor de Sitios, y la base de código de un tema.
- Utilizar
theme.jsonofrece compatibilidad con el futuro desarrollo y diseño de WordPress. - La funcionalidad integrada de WordPress significa que reduces la necesidad de que el usuario aplique CSS personalizado.
Veamos cómo se relaciona theme.json con los ajustes y estilos globales de FSE.
Introducción a los Ajustes Globales y Estilos de FSE
FSE representa una nueva era en el desarrollo de temas para WordPress, y la Configuración Global y los Estilos ocupan un lugar destacado. Esto permite a los usuarios personalizar casi todos los aspectos de la apariencia de un sitio a través de la funcionalidad del Editor de Sitios.
Aquí puedes ajustar aspectos del diseño de tu tema con opciones que antes requerían CSS o un plugin constructor de páginas de terceros. Modificar los márgenes, el padding y los bordes son algunos ejemplos, pero hay muchos más.
Incluso puedes activar o desactivar muchas de estas funciones en theme.json (o en el propio archivo block.json de un bloque). Esto permite personalizar la interfaz de usuario junto con el diseño general del sitio.
Sin embargo, las opciones de las que dispones — aunque amplias — pueden no cubrir todas las necesidades. Esto es especialmente cierto si creas un tema desde cero. Las propiedades personalizadas CSS pueden ayudarte a resolver esta tarea.
Comprender las propiedades personalizadas CSS
En PHP, JavaScript y casi todos los lenguajes de programación, las variables guardan los valores de diversos elementos de tu código. Por ejemplo, puedes almacenar valores como nombres, fechas y números y utilizarlos en todo tu programa.
Las variables CSS3 — o propiedades personalizadas CSS, como las llamaremos a lo largo de este post — son compatibles con la mayoría de los navegadores actuales. Internet Explorer no las soporta, ni tampoco Opera Mini. Sin embargo, los más importantes sí las soportan.
Las propiedades personalizadas CSS te permiten almacenar valores para reutilizarlos en toda tu hoja de estilos. Es una potente forma de crear un CSS más dinámico y flexible. Puedes actualizar varias reglas de estilo cambiando un único valor.
El concepto de variables CSS no es totalmente nuevo. Preprocesadores como Sass utilizan una funcionalidad similar. Por ejemplo, toma el siguiente Sass:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorEsto se procesa en el típico CSS:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Sin embargo, las propiedades personalizadas CSS lo llevan directamente al navegador. Esto ofrece algunas ventajas:
- Actualizaciones dinámicas. A diferencia de la mayoría de las variables de preprocesador, puedes actualizar las propiedades personalizadas CSS «sobre la marcha» utilizando JavaScript.
- Comportamiento en cascada. Las propiedades personalizadas seguirán la cascada CSS, lo que te proporciona una mayor flexibilidad y un estilo más consciente del contexto.
Las propiedades personalizadas también serán más eficaces al reducir la redundancia de código. Hojas de estilo más pequeñas significan tiempos de carga más rápidos.
La sintaxis de las propiedades personalizadas CSS
Como ocurre con las variables típicas del preprocesador, la sintaxis de las propiedades personalizadas CSS es sencilla. Utiliza guiones dobles en lugar de signos de dólar para especificar una propiedad:
:root {
--primary-color: #007bff;
}A partir de ahí, utilizas la función var() para asignar esas propiedades a los elementos:
.button {
background-color: var(--primary-color);
}Ten en cuenta que también puedes asignar propiedades personalizadas utilizando la propiedad @. Sin embargo, como comprenderás en breve, WordPress simplifica todo este proceso.
Dónde puedes utilizar las propiedades personalizadas CSS
La versatilidad está a la orden del día cuando se trata de propiedades personalizadas CSS. Con WordPress y theme.json tienes varias formas de utilizarlas:
- Preconfiguraciones: Puedes definir preajustes de color, fuente e interlineado.
- Estilos de bloque: Los bloques individuales pueden utilizar propiedades personalizadas para conseguir un estilo coherente.
- Estilos globales: Las propiedades personalizadas tienen un valor incalculable para el diseño de todo el sitio.
Puedes crear propiedades completamente personalizadas para cualquier propósito que desees. Veamos un ejemplo práctico de cómo puedes utilizar propiedades personalizadas en tu archivo theme.json:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}Aquí, definimos un color preestablecido y utilizamos la propiedad custom para definir valores line-height para los encabezados y el cuerpo de las páginas. WordPress generará propiedades CSS para los elementos que definas utilizando custom. Más adelante, podemos asignar estas propiedades personalizadas a varios estilos, configuraciones, bloques y más.
Las ventajas de utilizar propiedades CSS personalizadas
Puede que ya tengas ideas sobre cómo las propiedades personalizadas CSS pueden ayudarte a la hora de desarrollar temas. Aun así, hay muchas ventajas que debes tener en cuenta.
Ya hemos hablado de modularidad y reutilización. Todos los valores comunes que definas como propiedades personalizadas promoverán la coherencia y reducirán la redundancia. Esa redundancia se traducirá en un mejor rendimiento potencial para tu tema.
Para el usuario final, las propiedades personalizadas ofrecen varias ventajas:
- Personalización simplificada. Los usuarios y propietarios de sitios pueden personalizar un tema sin necesidad de tener conocimientos complejos de CSS. Una vez que expones las variables a través de
theme.json, los usuarios pueden acceder a la configuración a través del Editor de Sitios. - Mejor compatibilidad con FSE. Las propiedades personalizadas se alinean con los principios de FSE, permitiéndote crear diseños de temas más flexibles y dinámicos.
- Mantenimiento y actualizaciones más fáciles. Si necesitas actualizar valores comunes en todo tu tema, una propiedad personalizada significa cambiarlo en un solo lugar. Agiliza tu mantenimiento y hace que las actualizaciones y retoques sean más manejables.
En general, las propiedades personalizadas pueden mejorar tu flujo de trabajo de desarrollo de temas. Determinarlas también es más sencillo que utilizar las típicas variables CSS.
Cómo definir propiedades CSS personalizadas en theme.json
Entremos en los aspectos prácticos de la definición y el uso de propiedades CSS personalizadas en theme.json. El primer paso es aprender a escribirlas.
Sintaxis y convenciones de nomenclatura
WordPress ofrece la propiedad custom para ayudar con las definiciones. Es algo más fácil de usar que la propiedad @ o las definiciones dentro de pseudoclases, y utiliza el formato estándar clave/valor:
{
"settings": {
"custom": {
"property-name": "value"
}
}
}En segundo plano, WordPress procesará esta definición y generará una propiedad personalizada CSS utilizando guiones dobles:
--wp--custom--<custom-element>--wp--custom-- siempre formará parte de tu propiedad CSS, y no utilizará mayúsculas y minúsculas. Por ejemplo, si defines lineHeight como propiedad personalizada, WordPress la convertirá en «kebab case:»
--wp--custom--line-heightEn lo que respecta a las convenciones de nomenclatura, puedes utilizar camel case si lo deseas, aunque te aconsejamos utilizar kebab case para los nombres de tus propiedades personalizadas. Esto es coherente con las convenciones de nomenclatura de WordPress, mejora la legibilidad y reduce los errores de procesamiento.
Nota: Las propiedades personalizadas CSS utilizan guiones dobles porque el Grupo de Trabajo CSS del W3C también quiere afomentar el uso de Sass (que utiliza signos de dólar para definir las propiedades). De este modo, tienes la opción de utilizar ambos para mejorar tus diseños.
WordPress ya define algunas propiedades personalizadas, o al menos, los temas tienen la opción de hacerlo. Esto significa que verás variables CSS dentro de theme.json sin una declaración explícita:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}En este ejemplo, definimos un color primario utilizando un color preestablecido existente. A continuación, definimos algunas propiedades de espaciado personalizadas y las establecemos utilizando var().
Esto significa que no necesitamos codificar valores en theme.json. Es más, los usuarios pueden actualizar estos valores dentro del Editor de Sitios y hacer que se propaguen por todo el tema.
Preconfiguraciones vs a propiedades personalizadas
Por supuesto, theme.json también te permite definir preajustes para colores, tamaños de fuente y otros elementos comunes del tema. Por otro lado, puedes utilizar propiedades personalizadas para cualquier valor que quieras reutilizar en todo el tema.
La mayor diferencia está en las convenciones de nomenclatura y la accesibilidad. Los usuarios no podrán acceder a las propiedades personalizadas en el Editor de Sitios sin un trabajo adicional por tu parte. Con los preajustes, WordPress generará CSS con un aspecto similar a cómo procesa las propiedades personalizadas:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}Una vez que WordPress procese esto, podrás ver las diferencias inherentes:
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";Observa que el anidamiento posterior de propiedades utilizará guiones dobles, incluso después de convertir camel case a kebab case.
CSS global y específico de Bloque versus propiedades personalizadas CSS
Con el WordPress clásico, utilizarías CSS adicional y personalizado en el front end para diseñar elementos dentro de tu tema. Este sigue siendo el caso con theme.json y FSE, aunque el enfoque es diferente al de las propiedades personalizadas CSS.
Si visitas el Editor de Sitios y te diriges a la pantalla Estilos, verás la sección CSS Adicional. Actúa de forma muy parecida al panel CSS personalizado de las instalaciones clásicas de WordPress:
Esto representa una forma de añadir personalización CSS global a un tema. Sin embargo, en realidad es una forma de dar a los usuarios la posibilidad de añadir CSS. También puedes utilizarlo para realizar pequeños cambios sin importancia que no justifiquen una hoja de estilos completa.
Dentro de theme.json, utilizas la propiedad css para definir cualquier CSS adicional que quieras añadir:
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}Ten en cuenta que no necesitas usar punto y coma para terminar las declaraciones CSS. También puedes definir CSS personalizado para los Bloques:
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}Cada vez que establezcas CSS de este tipo en theme.json, lo verás en cualquier campo CSS adicional del Editor de Sitios. Sin embargo, recuerda que nada de lo que declares utilizando css es una propiedad CSS personalizada.
Uso del selector ampersand (&)
Al igual que Sass, WordPress también soporta el selector ampersand, con algunas diferencias. En este caso, es una excelente forma de apuntar a elementos y propiedades anidados. Esto podría ser relevante si decides declarar propiedades CSS personalizadas para Bloques individuales.
Por ejemplo, piensa en lo siguiente:
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…Esto define un color de texto y un color de fondo para el elemento de cabecera de la tabla. Una vez que WordPress lo procesa, obtienes un CSS limpio y sencillo:
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}Los selectores ampersand son excelentes si deseas ampliar el CSS al que te diriges. Una forma comprensible de pensar en el selector es que ayuda a separar tus elementos CSS. Por ejemplo, lo siguiente:
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}Esto añade un radio de borde a un avatar y genera el CSS como cabría esperar:
.wp-block-image img {
border-radius: 999px;
}Sin embargo, sin el ampersand, WordPress uniría tus declaraciones:
…
.wp-block-imageimg
…Utilizar el selector ampersand para tus propiedades personalizadas CSS será algo que hagas de forma habitual.
El papel de Kinsta en el soporte al desarrollo moderno de WordPress
Tu elección de alojamiento es tan importante como cualquier lenguaje de programación, preprocesador u otro elemento técnico. Sin un proveedor de alojamiento de calidad a tu lado, no podrás beneficiarte del rendimiento y el conjunto de herramientas de theme.json o FSE.
Kinsta puede ser el centro de todo tu flujo de trabajo, gracias a nuestras herramientas de desarrollo. Puedes empezar con DevKinsta, nuestro entorno de desarrollo local que utiliza contenedores Docker para aislar tu instalación de WordPress:
Una funcionalidad útil es la capacidad de DevKinsta para enviar y recibir datos entre tu máquina local y tus entornos staging de Kinsta:
Esto te permite probar tus temas en un entorno similar al de producción antes de empezar a distribuirlos. Cuando trabajes con propiedades CSS personalizadas, puedes asegurarte de que funcionan en diferentes contextos. La API de Kinsta puede ser compatible con tu pipeline CI/CD cuando estés listo para ponerte en marcha.
Otros aspectos de la arquitectura de Kinsta te ayudarán en toda tu configuración de desarrollo. Por ejemplo, Kinsta es compatible con Git, lo que facilita el control de versiones de los archivos de tu tema, incluyendo theme.json. Para iterar propiedades personalizadas, o simplemente experimentar con diferentes configuraciones, deberás saber que tienes una opción de retroceso.
Por último, si decides utilizar tu tema en un servidor Kinsta, nuestro Edge Caching aumenta el rendimiento de theme.json hasta en un 80 por ciento. Tener un sitio web que funcione rápido, independientemente del navegador del usuario, garantizará que esas personalizaciones se muestren rápidamente.
Resumen
Al igual que theme.json es un potente archivo de configuración para crear temas de WordPress flexibles y mantenibles, las propiedades personalizadas CSS son cruciales para el flujo de trabajo. Así es como construirás y declararás CSS para elementos a los que el Editor de Sitios no llega. También será clave si construyes tus propios Bloques o simplemente quieres desarrollar temas de WordPress únicos con la máxima profundidad de personalización. Es más, también tienes la opción de compartir ese CSS con los usuarios a través del Editor de Sitios.
¿Las propiedades CSS personalizadas formarán parte de tu flujo de trabajo de desarrollo de temas? Si es así, ¿cómo las utilizarás? Comparte tu opinión en la sección de comentarios más abajo
Deja una respuesta