---
title: "Uso de Propiedades Personalizadas de CSS con theme.json en WordPress"
description: "El archivo theme.json en WordPress ha revolucionado el desarrollo de temas al permitir una configuración centralizada del diseño sin depender de PHP y CSS tradicionales. Una de las grandes ventajas de..."
url: https://wpdirecto.com/uso-de-propiedades-personalizadas-de-css-con-theme-json-en-wordpress/
date: 2025-02-18
modified: 2025-02-08
author: "MyR"
image: https://wpdirecto.com/wp-content/uploads/2017/02/consejos-themes.jpg
categories: ["Actualidad"]
tags: ["css", "themes"]
type: post
lang: es
---

# Uso de Propiedades Personalizadas de CSS con theme.json en WordPress

El archivo `theme.json` en WordPress ha revolucionado el desarrollo de temas al permitir una configuración centralizada del diseño sin depender de PHP y CSS tradicionales. Una de las grandes ventajas de `theme.json` es la posibilidad de utilizar **propiedades personalizadas de CSS**, lo que facilita la creación de temas más flexibles y personalizables.

---

## **¿Cómo funciona theme.json en WordPress?**

Introducido en WordPress 5.8, `theme.json` es un archivo de configuración en formato JSON que permite definir estilos globales y configuraciones del tema sin necesidad de editar archivos CSS o PHP. WordPress lo interpreta y aplica los estilos y configuraciones de manera dinámica, integrándolos con el **Editor de Sitios (FSE – Full Site Editing)**.

Beneficios clave:

- **Configuración centralizada**: Define estilos en un solo lugar.
- **Menos dependencia de CSS personalizado**: Reduce la necesidad de escribir código manualmente.
- **Compatibilidad con el futuro de WordPress**: Facilita la adaptación a nuevas versiones y tendencias.
- **Mayor control sobre el diseño global**: Facilita la creación de paletas de colores, tipografía y diseño sin código adicional.

---

## **Comprendiendo las Propiedades Personalizadas de CSS**

Las **propiedades personalizadas de CSS** (tambien llamadas **CSS Variables**) son valores reutilizables dentro de una hoja de estilos. Permiten modificar estilos de forma dinámica y mantener una mayor consistencia en el diseño.

Ejemplo de una propiedad personalizada en CSS tradicional:

:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
}

En WordPress, estas propiedades pueden definirse directamente en `theme.json`, permitiendo una administración centralizada de los estilos sin modificar archivos CSS.

---

## **Definiendo Propiedades Personalizadas en theme.json**

Dentro de `theme.json`, las propiedades personalizadas pueden declararse dentro de la sección `settings.custom` y luego utilizarse en los estilos del tema.

Ejemplo de configuración en `theme.json`:

{
"settings": {
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}

En este caso, estamos definiendo variables de espaciado reutilizables dentro del tema. WordPress las convertirá en:

--wp--custom--spacing--small: 1rem;
--wp--custom--spacing--medium: 2rem;
--wp--custom--spacing--large: 3rem;

Y posteriormente podrán aplicarse a diferentes elementos del diseño.

---

## **Diferencias entre Presets y Propiedades Personalizadas**

### **Presets en theme.json**

Los presets en `theme.json` son valores predefinidos que WordPress ofrece para elementos como colores y tamaños de fuente. Se almacenan en `settings.color.palette` o `settings.typography.fontSizes`.

Ejemplo de preset de colores:

{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
}
}
}

Esto genera la variable:

--wp--preset--color--primary: #007bff;

### **Propiedades personalizadas**

En contraste, las propiedades personalizadas permiten definir cualquier tipo de valor, no solo los que WordPress maneja por defecto.

Ejemplo:

{
"settings": {
"custom": {
"fontFamily": {
"body": "Arial, sans-serif",
"heading": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}

Esto se traduce en CSS:

--wp--custom--font-family--body: Arial, sans-serif;
--wp--custom--font-family--heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;

---

## **Ventajas de Utilizar Propiedades Personalizadas en WordPress**

- **Mejora la modularidad**: Permite reutilizar estilos en todo el sitio sin duplicar código.
- **Facilita la actualización**: Un solo cambio en `theme.json` afecta a todo el diseño.
- **Mayor compatibilidad con FSE**: Permite gestionar estilos directamente desde el Editor de Sitios.
- **Mejor rendimiento**: Reduce la cantidad de código CSS necesario.
- **Facilita la personalización**: Los usuarios pueden modificar variables desde el panel de edición de WordPress.

---

## **Uso Avanzado: Aplicando CSS Personalizado con theme.json**

Además de definir propiedades personalizadas, `theme.json` permite aplicar reglas CSS específicas para bloques individuales. Esto se hace dentro de `styles.blocks`.

Ejemplo de aplicación de estilos personalizados a un bloque de título:

{
"styles": {
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}

---

## **Conclusión**

El uso de propiedades personalizadas en `theme.json` marca una evolución en la creación de temas para WordPress, permitiendo un control total sobre el diseño sin necesidad de archivos CSS adicionales. Gracias a esta integración, los desarrolladores pueden mejorar su flujo de trabajo y los usuarios pueden personalizar sus temas con mayor facilidad.

Al implementar propiedades personalizadas, los desarrolladores pueden hacer que sus temas sean más dinámicos, flexibles y eficientes, alineándose con el futuro del desarrollo en WordPress.