WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

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

MyR by MyR
18 febrero 2025
in Plantillas, Código fuente, wordpress.org
Reading Time: 5 mins read
0

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:

Artículos relacionados

Las mejores plantillas de WordPress para un blog de viajes

17 diciembre 2015

Las mejores plantillas de WordPress para un estudio de tatuajes

30 mayo 2017

Las mejores plantillas de WordPress para una web de anuncios clasificados

24 octubre 2019

Las mejores plantillas de WordPress para un estudio de arquitectura

29 junio 2017
  • 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.

Tags: cssthemes
ShareTweetSendSharePin
MyR

MyR

Te puede interesar...

Plantillas

Selección y uso óptimo de plantillas responsive para distintos nichos

4 julio 2025

La elección de una plantilla responsive se ha convertido en una decisión estratégica clave...

Plantillas

Implementación de WordPress sin código personalizado usando Gutenberg y patrones

28 junio 2025

Crear un sitio web profesional hoy es más accesible que nunca. Gracias al ecosistema...

Noticias

Elementor celebra su noveno aniversario con descuentos de hasta el 75 % en toda su plataforma

22 junio 2025

La popular herramienta de creación web para WordPress lanza una campaña especial con importantes...

Código fuente

¿Por qué actualizar a PHP 8.4 en tu WordPress? Ventajas y comparativa con PHP 7.4

10 junio 2025

WordPress y la importancia del motor PHP WordPress depende directamente de PHP para funcionar....

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

WP Rocket optimiza la caché para dispositivos móviles

18 diciembre 2024

Consejos útiles a la hora de crear un blog en WordPress

13 marzo 2018

Cómo proteger una página o un post con una contraseña

11 enero 2016

Redirigir tu feed RSS a Feedburner

4 agosto 2015

FlyingPress lanza oficialmente su versión 5 con un motor en la nube que ya ha optimizado más de 10 millones de páginas

28 mayo 2025
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.