Los desarrolladores de WordPress tienen más control que nunca a medida que el ecosistema de WordPress sigue evolucionando. La edición completa del sitio (FSE) nivela el campo de juego para que todos los usuarios puedan construir un tema desde cero, especialmente cuando se utiliza el archivo theme.json.

Los desarrolladores también pueden aprovechar el archivo theme.json. Este archivo de configuración permite una personalización granular de tu tema de WordPress sin el tedio y la complejidad de lenguajes de programación más complejos.

En esta completa guía, exploraremos lo que ofrece el archivo theme.json, incluida su relación con la edición completa del sitio. Al final, entenderás cómo aprovechar sus capacidades para crear sitios web modernos y eficaces, independientemente de tu capacidad de desarrollo.

Presentación del archivo theme.json

En esencia, theme.json es un archivo de configuración que define los ajustes y estilos de tu tema de WordPress. Utiliza JavaScript Object Notation (JSON), que son datos estructurados que heredan los pares clave-valor de su lenguaje padre para permitirte escribir tu código.

Un fragmento de código JSON que define la estructura de un glosario. Incluye una entrada para SGML (Standard Generalized Markup Language,Lenguaje de Marcado Generalizado Estándar) con detalles como su acrónimo, abreviatura, definición y términos relacionados.
Ejemplo de código JSON.

El archivo theme.json es clave para controlar varios aspectos de tu tema. Esto incluye paletas de colores, ajustes de tipografía, opciones de diseño, estilos por Bloque, propiedades CSS personalizadas y mucho más. Daremos más detalles sobre estos aspectos a lo largo del artículo.

Aunque de momento no parezca demasiado revolucionario, theme.json es importante para el futuro del desarrollo de WordPress. En el próximo apartado te explicamos por qué.

Por qué theme.json es relevante para el desarrollo de temas de WordPress

El enfoque habitual de WordPress para el desarrollo de temas y la creación de plugins solía girar en torno a la edición de archivos de plantilla con PHP, el uso del archivo functions.php y otras tareas técnicas.

El archivo theme.json marca un cambio significativo, especialmente para el desarrollo de temas. Esto se debe a varias razones:

  • El archivo representa una ubicación única y organizada para definir la configuración y los estilos de tu tema. Esto reduce la necesidad de un conjunto disperso de archivos CSS y PHP.
  • Este enfoque centralizado de declarar estilos y ajustes en theme.json significa que WordPress puede generar un CSS más eficiente. En comparación con el uso de un framework como jQuery, existe un potencial de mejora del rendimiento.
  • Tienes más control que nunca sobre el estilo de tu sitio y de los Bloques individuales. Esto democratiza el desarrollo de temas para los usuarios con menos conocimientos técnicos.
  • A medida que FSE siga evolucionando, el archivo theme.json tendrá un papel crucial en cómo interactúan los temas, los Estilos Globales y el Editor de Bloques.

La combinación de todos estos aspectos da como resultado una forma estandarizada de definir ajustes y estilos para tu tema. Para cualquiera que desee entender y trabajar con diferentes temas, adoptar theme.json te permitirá crear temas de WordPress más robustos, flexibles y fáciles de usar. Y lo que es mejor, estas creaciones se alinearán con la dirección de la plataforma en el futuro.

Dónde encontrar el archivo theme.json

En primer lugar, no encontrarás un archivo theme.json en los temas «tradicionales» o «clásicos». Para encontrar y utilizar este archivo, necesitas un Tema de Bloque dedicado. Dicho esto, puedes crear el archivo en cualquier tema siempre que ejecutes WordPress 5.8 o superior.

La ubicación típica del archivo theme.json es dentro de wp-content/themes/[tu-tema]. Si el archivo no está ahí, debes abrir tu editor de código favorito y crear el archivo según sea necesario. Por ahora no te preocupes por el contenido. — ya hablaremos de ello.

Si necesitas crear un nuevo archivo desde cero, pero también quieres ver los entresijos de lo que contiene antes de personalizar el tuyo propio, echa un vistazo al tema Twenty Twenty-Four predeterminado.

Como Tema de Bloque, tendrá un archivo theme.json para ver. Puede resultarte útil tenerlo abierto mientras examinamos la estructura en las próximas secciones.

Lo que necesitas para trabajar con theme.json

Por supuesto, no todo el mundo podrá abrir el archivo de configuración y ponerse a trabajar. Seguirás necesitando algunas habilidades y conocimientos fundamentales para construir y personalizar un tema:

  • Conocimientos básicos de JSON. Creemos que es algo que puedes aprender rápidamente, pero aún así, la familiaridad con la sintaxis y la estructura de JSON es crucial.
  • Comprensión de CSS. Verás que muchos objetos y propiedades de theme.json se corresponden con sus homólogos CSS. Tener conocimientos de CSS será una ventaja en este caso.
  • Conocimiento del Editor de Bloques de WordPress. Entender cómo funcionan los Bloques, junto con sus opciones de personalización, te ayudará mientras construyes.

Aunque no es estrictamente necesario, te animamos a que al menos comprendas los conceptos clave de FSE, que te ayudarán a aprovechar el archivo theme.json de un modo más eficaz. También podrás llegar a comprender cómo repercutirán tus ediciones en los «retoques» realizados por el usuario final. Además, habrá casos en los que necesitarás seguir utilizando HTML y JavaScript para hacer realidad tu visión.

Por último, hay un par de «extras» técnicos que recomendaríamos:

  • Un editor de código. Elegir un editor de calidad que ofrezca resaltado y validación de sintaxis JSON hará que tu flujo de trabajo sea más agradable de ejecutar.
  • Un entorno de desarrollo local. Utilizar una herramienta como DevKinsta para trabajar en tu tema te permitirá experimentar y probar tus cambios rápidamente y sin afectar a un sitio en producción.

Con estas herramientas y conocimientos, estarás bien equipado para empezar a personalizar tu tema de WordPress utilizando theme.json.

Observando la anatomía, estructura y jerarquía de theme.json

Obviamente, el archivo theme.json tiene una estructura que debes comprender. También tiene una jerarquía, junto con algunos elementos únicos que necesitan más explicación.

Ésta es probablemente la parte más compleja del uso del archivo de configuración, pero incluso así, comprenderás los conceptos fácilmente.

Empecemos por la estructura, y luego pasemos a los demás elementos de theme.json.

Estructura básica

Dado que el archivo sigue el formato JSON, puede que ya entiendas el concepto general de la estructura. En primer lugar, todo el objeto archivo va entre llaves, al igual que algunos otros objetos que contiene. Cada objeto consta de pares clave-valor, utiliza comillas simples o dobles para las claves, y comas para terminar la línea.

Lo mínimo que necesita un archivo theme.json son los objetos version, settings y styles:

{
    "version": 2,
    "settings": {
      // Global settings go here
    },
    "styles": {
      // Global styles go here
    }
}

Los objetos settings y styles son sencillos, pero version requiere más explicaciones. Este valor será un número entero que coincida con la versión de la API que utilices para leer tu archivo. La versión actual de la API es 3, aunque la versión 2 también es común, y puedes migrar desde versiones anteriores.

La mayoría de las estructuras de archivos theme.json también incluirán un esquema. En pocas palabras, esto te permite trabajar con autocompletado dentro de los editores de código y proporciona validación para el archivo. Lo añadirás al principio del archivo:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
    },
    "styles": {
    }
}

A partir de aquí, añadirás varias propiedades y objetos a las configuraciones y estilos para construir sobre tu archivo.

Jerarquía

El archivo theme.json sigue una estructura jerárquica y es sólo un nivel de la jerarquía general de ajustes y estilos de tu sitio. Si tienes conocimientos de CSS, comprender esto te resultará más fácil, ya que este archivo es similar en complejidad al CSS.

En resumen, las personalizaciones que realices en theme.json no siempre se mostrarán en el front-end de tu sitio. Las configuraciones de usuario tienen prioridad sobre todo lo demás. Esto significa que cualquier cambio que se realice en la pantalla Apariencia > Editor dentro de WordPress se mostrará en el front-end:

La interfaz del Editor de Sitios de WordPress. La barra lateral izquierda muestra las opciones de personalización del diseño, mientras que el área principal muestra el diseño de la página de inicio del sitio web con un título sobre innovación y sostenibilidad, junto con una imagen de una estructura arquitectónica moderna.
La interfaz principal del Editor del sitio dentro de WordPress.

Si utilizas un tema hijo e incluyes un archivo theme.json, éste anulará todos los cambios que no se realicen con el Editor de Sitios. Del mismo modo, cualquier cosa que definas en el archivo de configuración del tema principal anulará los ajustes y estilos predeterminados de WordPress. En este artículo nos centraremos en este archivo, aunque WordPress también tiene su propio archivo theme.json.

Aunque no será el tema central de este artículo, también puedes anular valores utilizando hooks y filtros. Estos filtros dinámicos te permiten crear plugins y temas que también cambian la configuración y los estilos del tema y de la plataforma.

Gramática de bloques

Si entras en el Editor de Bloques o de Sitios de WordPress, abres una entrada o página y activas el Editor de Código, verás que hay muchos comentarios HTML dentro del contenido:

La interfaz del editor de código de WordPress dentro del Editor de Bloques. Muestra el código HTML de la política de privacidad de tu sitio web. El código incluye encabezados y párrafos con detalles sobre la dirección del sitio web, las políticas de comentarios y el uso de Gravatar.
La pantalla de edición de Código dentro del Editor de Bloques de WordPress.

Esto se debe a que, en lugar de utilizar archivos PHP, los Temas de Bloques utilizan archivos HTML junto con comentarios y marcas de Bloques para crear tu sitio. La combinación de estos elementos da como resultado la «gramática de bloques» que necesitas para escribir tu archivo theme.json.

Para los Bloques que contienen contenido, como el Bloque de Párrafo, envuelves ese contenido:

<!-- wp:paragraph -->
    <p>Content goes here!</p>
<!-- /wp:paragraph -->

En otros casos, sólo necesitarás comentarios de una sola línea o que se cierren solos. Con algunos Bloques, combinarás tipos para crear tus disposiciones y diseños. También puedes anidar estos comentarios:

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Aquí, creamos un Bloque Columnas utilizando un comentario como contenedor. Dentro, podemos empezar a añadir HTML para diseñar esas columnas e incluir envoltorios de columnas individuales. Esto sería muy sencillo en el front end, ya que a menudo colocarás bloques unos dentro de otros.

Para encontrar el código de un Bloque concreto, puedes buscar en el Manual del Editor de Bloques hasta que encuentres lo que necesitas. La forma más sencilla, sin embargo, es simplemente añadir el Bloque a WordPress, abrir el Editor de Código y copiar el código desde allí.

En cuanto a los cambios que harás dentro de ese marcado, lo trataremos en una sección posterior.

Cómo se combinan theme.json y la edición completa del sitio de WordPress

A partir de la discusión sobre la jerarquía, entenderás que theme.json es una parte importante de FSE. Ambos trabajan juntos para ofrecerte una solución integral de personalización de temas para WordPress. Por ejemplo, la interfaz de Estilos Globales es esencialmente la representación visual de tu configuración de theme.json.

El Editor de Sitios de WordPress, con la parte izquierda mostrando parte del contenido de tu sitio web mediante texto en color rojo oscuro. A la derecha, el panel Estilos se centra en la configuración de Colores. Incluye un selector de paleta de colores y opciones para personalizar los colores de varios elementos del sitio, como el texto, el fondo, los enlaces y los botones. También aparece un comprobador de contraste, que muestra el código hexadecimal #A62B0C para el tema de color seleccionado.
La barra lateral del Editor de Sitios, mostrando las opciones de estilos globales de un tema.

Puedes modificar los ajustes tanto en el panel de Estilos Globales como en el archivo de configuración, y WordPress actualizará los valores correspondientes según sea necesario. Aunque los ajustes del Editor de Sitios tendrán prioridad, theme.json actuará como base para los estilos propios de tu tema. Para el usuario final, los Estilos Globales le permite sustituir tus valores predeterminados por sus propias personalizaciones sin necesidad de código ni de editar el archivo theme.json.

Además, las propiedades CSS personalizadas que definas en theme.json estarán disponibles en la interfaz de Estilos Globales. Esto permite a los usuarios aprovechar estas propiedades para conseguir un estilo más coherente en todo el sitio. Esto se extiende también a la posibilidad de definir estilos y ajustes específicos de Bloque, que puedes ajustar aún más desde el panel de control de WordPress.

En pocas palabras, theme.json proporciona un control más granular sobre la configuración, los estilos y mucho más. Es una herramienta a nivel de desarrollador que ofrece una experiencia más directa y racionalizada que los enfoques clásicos. En cambio, la interfaz de Estilos Globales ofrece a todo el mundo la posibilidad de personalizar un tema a su gusto. A medida que vayas desarrollando temas, verás cómo ambos trabajan en tándem para ayudar a crear diseños y disposiciones del sitio.

Trabajar con las propiedades del archivo theme.json

Una vez comprendidos los conceptos básicos, puedes empezar a trabajar con los objetos y propiedades de theme.json. No podremos cubrir todos los casos de uso ni todas las eventualidades. Sin embargo, al final de este tutorial, serás capaz de crear temas que ofrezcan una funcionalidad completa y un excelente aspecto en el front-end.

Configuración

La propiedad settings te permite controlar qué funciones ofreces en el Editor de Sitios y cómo se comportan. Es una propiedad de nivel superior, y normalmente encontrarás múltiples niveles de anidamiento.

Cuando veamos los estilos y sus variaciones, verás que hay cierto cruce entre estas opciones, pero ambos tipos tienen un papel en la creación de tu tema.

Dispones de un número selecto de propiedades:

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

El Manual para Desarrolladores de Temas de WordPress oficial incluye una referencia para todos estos ajustes (y estilos). Sin embargo, aquí tienes un resumen rápido de algunos ajustes importantes que necesitan más aclaraciones:

  • appearanceTools. Esta propiedad «cajón de sastre» habilita varias otras y está pensada para ahorrar tiempo. Establecerá opciones de bordes, alturas de línea tipográfica, relleno, márgenes y mucho más.
  • blocks Aunque la mayor parte de tu trabajo se centrará en los ajustes y estilos globales, la propiedad blocks te permite hacerlo por Bloques. El concepto no es algo que abordemos con más detalle aquí, pero el Manual del Desarrollador de Temas tiene una excelente documentación sobre esta faceta de theme.json.
  • custom. Esta propiedad única no tiene ninguna funcionalidad en el sentido de que tú decides lo que hace. La utilizarás para crear propiedades CSS personalizadas para tu tema, y el alcance que te ofrece es amplio.
  • useRootPaddingAwareAlignments. De nuevo, se trata de una propiedad compleja que no cubriremos en su totalidad. Esencialmente te ayuda a colocar los estilos de relleno horizontal de tu tema y tiene mucho poder. La utilizarías cuando quieras que los elementos de ancho completo se extiendan hasta los bordes de la pantalla mientras utilizas el relleno en el elemento raíz.

Ten en cuenta que no necesitas añadir ninguna propiedad a theme.json con la que no quieras trabajar. Por ejemplo, si no deseas trabajar con appearanceTools, puedes simplemente omitirla en lugar de definirla con false.

Cómo definir ajustes dentro de theme.json

Cuando se trata de definir ajustes, cada propiedad tiene una serie de subpropiedades de pares clave-valor. Por ejemplo, puedes crear paletas de colores de esta forma:

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

Otras propiedades tienen simples valores booleanos, que activarán o desactivarán esas características dentro del Editor de Sitios:

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

Una vez que definas tus ajustes, puedes introducir estilos para ellos. Vamos a examinarlo ahora.

Estilos y variaciones de estilo

Mientras que settings define el acceso a determinadas opciones de estilo, la propiedad styles te permite definir esos estilos globales para tu tema. De nuevo, se trata de una propiedad de nivel superior que utilizará múltiples niveles de anidamiento. Puedes dirigirte a elementos específicos, Bloques, o incluso utilizar propiedades CSS personalizadas.

Es importante definir los estilos del tema aquí para que puedas acceder a ellos y personalizarlos desde el Editor de Sitios. Puedes trabajar con varios elementos:

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

Sin embargo, no utilizarás a menudo muchos de ellos como propiedades de nivel secundario. En su lugar, algunas funcionarán principalmente con Bloques o elementos. Por ejemplo:

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

Para estilos globales, trabajarás en la raíz, que se correlaciona con la etiqueta <body> de tu página. Para elementos específicos, puedes seguir una estructura similar a la de los Bloques, esta vez utilizando la propiedad elements:

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

Si observas los cambios que realices en el Editor de Sitios, deberías verlos en su sitio. El marcado también generará CSS para los estilos que crees:

La página de inicio de un sitio web con el título "Un compromiso con la innovación y la sostenibilidad" y un botón Sobre nosotros. La mitad inferior muestra la estructura HTML del sitio web en el panel DevTools del navegador Brave.
El front end de un sitio mostrando el navegador DevTools, resaltando el CSS generado para un elemento.

Ten en cuenta que también puedes aplicar estilos a pseudoclases de elementos, como los estilos hover y focus:

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

Aplicar estilos es aún más profundo que esto, y ése es uno de los fantásticos aspectos positivos de utilizar theme.json.

Variaciones de estilo

Antes de continuar, te interesará conocer las variaciones de estilo. Puedes ver estas diversas paletas de colores y estilos tipográficos dentro de la interfaz de FSE:

La interfaz del Editor de Sitios de WordPress muestra las variaciones de estilo de un tema en el lado izquierdo, con diversas opciones de fuente y color. El área de contenido principal muestra un encabezado "Un compromiso con la innovación y la sostenibilidad" con un subtítulo, un botón "Quiénes somos" y una imagen principal de un edificio moderno.
La barra lateral de Estilos dentro del Editor de Sitios, mostrando diferentes variaciones.

Sin embargo, no es algo que programes en theme.json. En su lugar, crearás versiones alternativas del archivo, les darás un nombre único y las guardarás en el directorio de estilos del tema:

La interfaz de macOS muestra dos ventanas. La ventana de fondo muestra un explorador de archivos con varios archivos JSON para diferentes esquemas de color. La ventana de primer plano muestra un editor de código abierto a green.json, que contiene los ajustes de color del tema para un esquema de color verde.
Un editor de código que muestra archivos JSON de variación de estilos.

Ten en cuenta que el título dentro del marcado es único para cada archivo JSON alternativo. Sin embargo, es un campo opcional, aunque te recomendamos que lo utilices para mayor claridad y mejor experiencia.

Plantillas personalizadas y partes de plantillas

Al igual que las variaciones de estilo, theme.json te permite registrar plantillas personalizadas y partes de plantilla asociadas. Registrar el marcado es sencillo:

"customTemplates": [
    {
        "name": "my-template",
        "title": "My Template",
        "postTypes": [
            "page",
            "post"
        ]
    }
]

La propiedad customTemplates necesita que definas tres elementos:

  • name. Corresponderá a una plantilla que crees dentro del directorio de plantillas de tu tema, como /template/mi-plantilla.html.
  • title. Esta es la versión legible por humanos del nombre de la plantilla.
  • postTypes. Sin definición, esto corresponde por defecto a una página, pero puedes especificar una serie de tipos de entrada para los que la plantilla es adecuada.

Los usuarios podrán seleccionar las plantillas que registres desde el Editor de Sitios o Bloques:

El editor de bloques de WordPress muestra los detalles de una página publicada, incluyendo el estado, la fecha de publicación, el enlace, el autor y la plantilla. Hay un menú desplegable abierto con opciones para editar, intercambiar, mostrar o crear una nueva plantilla.
Elegir editar, intercambiar, crear o mostrar una plantilla dentro del Editor de Sitios de WordPress.

Cuando se trata de partes de plantillas, no es necesario que las registres, pero te lo recomendamos. La estructura es similar a la del registro de plantillas:

…
"templateParts": [
    {
        "area": "header",
        "name": "header",
        "title": "Header"
    },
…

Aquí, el nombre y el título coinciden con las mismas definiciones que las plantillas completas. El área se refiere al lugar al que pertenece la pieza: header, footer, o uncategorized son las predeterminadas, pero puedes asignar partes de plantilla a cualquier área personalizada.

Te animamos a que investigues también cómo mostrar estas partes de plantilla, ya que no se mostrarán sin algo de programación adicional. Aun así, registrarlas es sencillo.

Patrones

Para terminar, hablemos de los patrones de Bloque. Puedes agrupar cualquier número de ellos en tu archivo theme.json utilizando un array de nivel superior. Puedes incluir en tu archivo cualquier patrón adecuado de la Biblioteca de Patrones de WordPress:

La pantalla de búsqueda de la biblioteca de patrones de WordPress muestra una cuadrícula de plantillas de diseño de sitios web. Las plantillas incluyen varios diseños de banners y cabeceras con imágenes, texto y botones.
La biblioteca de patrones de WordPress.

Definir el array es sencillo: utilizas la propiedad patterns y el slug del patrón asociado de la URL de la biblioteca:

Un primer plano de la barra de direcciones de un navegador resaltando el slug de la URL en la barra de herramientas. El resto de la pantalla muestra un patrón de imagen naranja con un título grande, una descripción pequeña y un botón "Comprar ahora".
Seleccionando el slug de un patrón desde la URL dentro de un navegador web.

Con este slug, puedes rellenar el marcado patterns:

{
    "version": 3,
    "patterns": [
        "fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
    ]
}

Podrás seleccionarlos desde el Directorio de Patrones del Editor de Bloques:

La interfaz del Editor de Bloques de WordPress muestra un menú lateral de elementos de bloques y patrones a la izquierda, con una vista previa de varios diseños de banners a la derecha. El banner principal mostrado muestra el texto en negrita LET 'EM ROLL BIG JOHN PATTON sobre un fondo naranja.
El Directorio de Patrones de WordPress dentro del Editor de Bloques.

Esta sencilla forma de introducir recursos de la Biblioteca de Patrones en tus temas es práctica y útil. Es otra razón más por la que el archivo theme.json se está convirtiendo rápidamente en la forma favorita de construir entre los desarrolladores de temas de WordPress.

El flujo de trabajo para personalizar tu sitio web WordPress utilizando theme.json

Una vez que comprendas los componentes clave de theme.json, desarrollar tu flujo de trabajo para utilizarlo es un paso importante. Representa una nueva forma de desarrollar temas, y como tal necesita un manejo diferente a los métodos clásicos.

Nuestro enfoque sería configurar la URL del esquema, elegir una versión de la API y definir primero tu configuración global. Esto incluiría tu paleta de colores, opciones tipográficas y ajustes de diseño. En la mayoría de los casos, activar el appearanceTools también sería beneficioso:

"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
   "settings": {
"appearanceTools": true,
     "color": {
       "palette": [
         {
           "name": "Primary",
"slug": "primary",
           "color": "#0073aa"
         },
         {
      "name": "Secondary",
        "slug": "secondary",
           "color": "#23282d"
         }
       ]
     },
     "typography": {
"fluid": true,
       "fontSizes": [
         {
           "size": "13px",
           "slug": "small",
           "name": "Small"
         },
         {
"size": "16px",
           "slug": "normal",
           "name": "Normal"
…

A continuación, puedes intentar crear propiedades CSS personalizadas utilizando los slugs que definas. Por ejemplo, puedes haber creado pesos de fuente personalizados:

…
"custom": {
    "fontWeight": {
        "light": 300,
        "regular": 400,
        "medium": 500,
        "bold": 700
    },
…

Una vez que hayas terminado con la configuración, es hora de especificar los estilos.

…
"styles": {
    "color": {
        "background": "var(--wp--preset--color--base)",
        "text": "var(--wp--preset--color--main)"
    },
…

Lo siguiente será personalizar tus estilos de Bloque, y esto podría representar una gran parte de tu archivo theme.json.

…
"styles": {
    "block": {
        "core/separator": {
            "color": {
            "text": "var(--wp--preset--color--main)"
            },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
            }
        },
        "core/site-tagline": {
            "spacing": {
                "margin": {
                    "bottom": "20px"
                }
            },
            "typography": {
                "fontSize": "var(--wp--preset--font-size--small)"
            }
        },
        "core/site-title": {
            "typography": {
                "fontSize": "var(--wp--preset--font-size--medium)",
                "fontWeight": "var(--wp--custom--font-weight--semi-bold)",
                "lineHeight": "var(--wp--custom--line-height--none)"
        },
…

Por último, deberás diseñar las plantillas y partes de plantillas personalizadas y registrarlas en theme.json. También es el momento de registrar los patrones de Bloque que quieras utilizar y crearlos si es necesario.

Utilizar Kinsta como parte de tu flujo de trabajo de desarrollo y personalización de temas

Antes de poner en marcha cualquier cambio, deberás probarlo todo. Hasta ahora, es probable que hayas estado trabajando con una herramienta de desarrollo local como DevKinsta:

La interfaz de DevKinsta para un solo sitio. Muestra detalles como la versión de WordPress, el servidor web, la versión de PHP y el tipo de base de datos, junto con una vista previa de la página de inicio del sitio web.
La interfaz de DevKinsta.

Sin embargo, también es importante comprobar tu desarrollo en un sitio en producción. La integración con Kinsta de DevKinsta te permite enviar un sitio a un entorno staging estándar o premium:

La interfaz de DevKinsta muestra información y controles del sitio. El menú desplegable del botón Sincronizar está abierto, mostrando las opciones Enviar a Kinsta y Recibir de Kinsta.
Las opciones de sincronización dentro de DevKinsta.

A partir de ahí, puedes probar tu tema en nuestra arquitectura en la nube, la mejor de su clase, y disfrutar de un control total sobre los cambios que realices.

También puedes aprovechar nuestra completa solución de gestión de copias de seguridad, que te permite restaurar copias de seguridad automáticas diarias tanto en el entorno activo como en el staging. Además, todos nuestros entornos staging incluyen DevTools para ayudarte a supervisar el rendimiento de tu sitio antes de enviarlo a producción.

Si debes usar theme.json o la edición completa del sitio de WordPress

Debido a la interrelación entre theme.json y la edición completa del sitio, te preguntarás por qué utilizar uno en lugar del otro. De hecho, ambos se adaptan a escenarios diferentes y deben utilizarse conjuntamente.

Por ejemplo, theme.json será tu mejor opción en las siguientes situaciones:

  • Desarrollas temas y creas un tema nuevo desde cero.
  • JSON es un lenguaje que entiendes y con el que te sientes cómodo trabajando.
  • Quieres un método programático para definir estilos y ajustes por defecto para tu tema.
  • Los estilos y ajustes que quieres implementar necesitan más control del que puedes encontrar por defecto en el Editor de Sitios.

Desde luego, este último punto será un nicho, ya que FSE refleja la funcionalidad de theme.json casi exactamente. Como tal, la edición completa del sitio tendrá más sentido para la mayoría de los usuarios en los siguientes escenarios:

  • Eres el propietario de un sitio que quiere personalizar un tema existente.
  • No estás familiarizado con JSON.
  • Las interfaces visuales tienen más sentido para tu flujo de trabajo de personalización y desarrollo.
  • Quieres hacer ajustes rápidos sin necesidad de una programación exhaustiva.

En la práctica, el tema necesitará un archivo de configuración para definir sus bases. A partir de ahí, la jerarquía se hace cargo, y los propietarios del sitio pueden utilizar FSE para realizar otras personalizaciones.

Resumen

El archivo de configuración theme.json es revolucionario para el desarrollo de temas de WordPress. Te proporciona un lugar centralizado para los ajustes y estilos de tu tema y te permite crear temas más flexibles, fáciles de mantener y personalizables.

Utilizarás el archivo junto con el Editor de Sitios dentro de WordPress para llegar al diseño final de un sitio. Las opciones que establezcas en theme.json servirán como predeterminadas, que el usuario final personalizará aún más. La buena noticia es que programar este archivo es más sencillo que retocar una serie de archivos PHP y CSS, y es el futuro del diseño de WordPress.

¿Tienes alguna pregunta sobre el uso del archivo theme.json en WordPress? ¡Háznoslo saber en la sección de comentarios más abajo!

Jeremy Holcombe Kinsta

Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.