{"id":76023,"date":"2024-08-05T09:17:33","date_gmt":"2024-08-05T07:17:33","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=76023&#038;preview=true&#038;preview_id=76023"},"modified":"2025-12-16T23:11:12","modified_gmt":"2025-12-16T22:11:12","slug":"theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/theme-json\/","title":{"rendered":"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional"},"content":{"rendered":"<p>Los desarrolladores de WordPress tienen m\u00e1s control que nunca a medida que el ecosistema de WordPress sigue evolucionando. La <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-edicion-sitio-completa\/\">edici\u00f3n completa del sitio (FSE)<\/a> nivela el campo de juego para que todos los usuarios puedan construir un tema desde cero, especialmente cuando se utiliza el archivo <code>theme.json<\/code>.<\/p>\n<p>Los desarrolladores tambi\u00e9n pueden aprovechar el archivo <code>theme.json<\/code>. Este archivo de configuraci\u00f3n permite una personalizaci\u00f3n granular de tu tema de WordPress sin el tedio y la complejidad de lenguajes de programaci\u00f3n m\u00e1s complejos.<\/p>\n<p>En esta completa gu\u00eda, exploraremos lo que ofrece el archivo <code>theme.json<\/code>, incluida su relaci\u00f3n con la edici\u00f3n completa del sitio. Al final, entender\u00e1s c\u00f3mo aprovechar sus capacidades para crear sitios web modernos y eficaces, independientemente de tu capacidad de desarrollo.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Presentaci\u00f3n del archivo theme.json<\/h2>\n<p>En esencia, <code>theme.json<\/code> es un archivo de configuraci\u00f3n 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\u00f3digo.<\/p>\n<figure id=\"attachment_183346\" aria-describedby=\"caption-attachment-183346\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183346 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/json-code.png\" alt=\"Un fragmento de c\u00f3digo JSON que define la estructura de un glosario. Incluye una entrada para SGML (Standard Generalized Markup Language,Lenguaje de Marcado Generalizado Est\u00e1ndar) con detalles como su acr\u00f3nimo, abreviatura, definici\u00f3n y t\u00e9rminos relacionados.\" width=\"1200\" height=\"482\"><figcaption id=\"caption-attachment-183346\" class=\"wp-caption-text\">Ejemplo de c\u00f3digo JSON.<\/figcaption><\/figure>\n<p>El archivo <code>theme.json<\/code> es clave para controlar varios aspectos de tu tema. Esto incluye paletas de colores, ajustes de tipograf\u00eda, opciones de dise\u00f1o, estilos por Bloque, propiedades CSS personalizadas y mucho m\u00e1s. Daremos m\u00e1s detalles sobre estos aspectos a lo largo del art\u00edculo.<\/p>\n<p>Aunque de momento no parezca demasiado revolucionario, <code>theme.json<\/code> es importante para el futuro del desarrollo de WordPress. En el pr\u00f3ximo apartado te explicamos por qu\u00e9.<\/p>\n<h2>Por qu\u00e9 theme.json es relevante para el desarrollo de temas de WordPress<\/h2>\n<p>El enfoque habitual de WordPress para el <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\">desarrollo de temas<\/a> y la <a href=\"https:\/\/kinsta.com\/es\/blog\/directorio-de-plugins-de-wordpress\/\">creaci\u00f3n de plugins<\/a> sol\u00eda girar en torno a la <a href=\"https:\/\/kinsta.com\/es\/blog\/plantillas-de-entradas-wordpress\/\">edici\u00f3n de archivos de plantilla<\/a> con PHP, el uso del archivo <a href=\"https:\/\/kinsta.com\/es\/blog\/functions-php-wordpress\/\">functions.php<\/a> y otras tareas t\u00e9cnicas.<\/p>\n<p>El archivo <code>theme.json<\/code> marca un cambio significativo, especialmente para el desarrollo de temas. Esto se debe a varias razones:<\/p>\n<ul>\n<li>El archivo representa una ubicaci\u00f3n \u00fanica y organizada para definir la configuraci\u00f3n y los estilos de tu tema. Esto reduce la necesidad de un conjunto disperso de archivos CSS y PHP.<\/li>\n<li>Este enfoque centralizado de declarar estilos y ajustes en <code>theme.json<\/code> significa que WordPress puede generar un CSS m\u00e1s eficiente. En comparaci\u00f3n con el uso de un <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/10\/04\/the-performance-impact-of-using-jquery-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">framework como jQuery<\/a>, existe un potencial de mejora del rendimiento.<\/li>\n<li>Tienes m\u00e1s 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\u00e9cnicos.<\/li>\n<li>A medida que FSE siga evolucionando, el archivo <code>theme.json<\/code> tendr\u00e1 un papel crucial en c\u00f3mo interact\u00faan los temas, los Estilos Globales y el Editor de Bloques.<\/li>\n<\/ul>\n<p>La combinaci\u00f3n 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 <code>theme.json<\/code> te permitir\u00e1 crear temas de WordPress m\u00e1s robustos, flexibles y f\u00e1ciles de usar. Y lo que es mejor, estas creaciones se alinear\u00e1n con la direcci\u00f3n de la plataforma en el futuro.<\/p>\n<h2>D\u00f3nde encontrar el archivo theme.json<\/h2>\n<p>En primer lugar, no encontrar\u00e1s un archivo <code>theme.json<\/code> en los temas \u00abtradicionales\u00bb o \u00abcl\u00e1sicos\u00bb. 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.<\/p>\n<p>La ubicaci\u00f3n t\u00edpica del archivo <code>theme.json<\/code> es dentro de <strong>wp-content\/themes\/[tu-tema]<\/strong>. Si el archivo no est\u00e1 ah\u00ed, debes abrir tu editor de c\u00f3digo favorito y crear el archivo seg\u00fan sea necesario. Por ahora no te preocupes por el contenido. \u2014 ya hablaremos de ello.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183342 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-editor.png\" alt width=\"1200\" height=\"829\"><\/p>\n<p>Si necesitas crear un nuevo archivo desde cero, pero tambi\u00e9n quieres ver los entresijos de lo que contiene antes de personalizar el tuyo propio, echa un vistazo al <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-twenty-four\/\">tema Twenty Twenty-Four<\/a> predeterminado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four-json.png\" alt width=\"1200\" height=\"773\"><\/p>\n<p>Como Tema de Bloque, tendr\u00e1 un archivo <code>theme.json<\/code> para ver. Puede resultarte \u00fatil tenerlo abierto mientras examinamos la estructura en las pr\u00f3ximas secciones.<\/p>\n<h2>Lo que necesitas para trabajar con theme.json<\/h2>\n<p>Por supuesto, no todo el mundo podr\u00e1 abrir el archivo de configuraci\u00f3n y ponerse a trabajar. Seguir\u00e1s necesitando algunas habilidades y conocimientos fundamentales para construir y personalizar un tema:<\/p>\n<ul>\n<li><strong>Conocimientos b\u00e1sicos de JSON.<\/strong> Creemos que es algo que puedes aprender r\u00e1pidamente, pero a\u00fan as\u00ed, la familiaridad con la sintaxis y la estructura de JSON es crucial.<\/li>\n<li><strong>Comprensi\u00f3n de CSS.<\/strong> Ver\u00e1s que muchos objetos y propiedades de <code>theme.json<\/code> se corresponden con sus hom\u00f3logos CSS. Tener conocimientos de CSS ser\u00e1 una ventaja en este caso.<\/li>\n<li><strong>Conocimiento del Editor de Bloques de WordPress.<\/strong> Entender c\u00f3mo funcionan los Bloques, junto con sus opciones de personalizaci\u00f3n, te ayudar\u00e1 mientras construyes.<\/li>\n<\/ul>\n<p>Aunque no es estrictamente necesario, te animamos a que al menos comprendas los conceptos clave de FSE, que te ayudar\u00e1n a aprovechar el archivo <code>theme.json<\/code> de un modo m\u00e1s eficaz. Tambi\u00e9n podr\u00e1s llegar a comprender c\u00f3mo repercutir\u00e1n tus ediciones en los \u00abretoques\u00bb realizados por el usuario final. Adem\u00e1s, habr\u00e1 casos en los que necesitar\u00e1s seguir utilizando <a href=\"\/\/kinsta.com\/knowledgebase\/what-is-html\/\"><u>HTML<\/u><\/a> y <a href=\"\/\/kinsta.com\/javascript\/\"><u>JavaScript<\/u><\/a> para hacer realidad tu visi\u00f3n.<\/p>\n<p>Por \u00faltimo, hay un par de \u00abextras\u00bb t\u00e9cnicos que recomendar\u00edamos:<\/p>\n<ul>\n<li><strong>Un editor de c\u00f3digo.<\/strong> Elegir un <a href=\"https:\/\/kinsta.com\/es\/blog\/php-editor\/\">editor de calidad<\/a> que ofrezca resaltado y validaci\u00f3n de sintaxis JSON har\u00e1 que tu flujo de trabajo sea m\u00e1s agradable de ejecutar.<\/li>\n<li><strong>Un entorno de desarrollo local.<\/strong> Utilizar una herramienta <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">como DevKinsta<\/a> para trabajar en tu tema te permitir\u00e1 experimentar y probar tus cambios r\u00e1pidamente y sin afectar a un sitio en producci\u00f3n.<\/li>\n<\/ul>\n<p>Con estas herramientas y conocimientos, estar\u00e1s bien equipado para empezar a personalizar tu tema de WordPress utilizando <code>theme.json<\/code>.<\/p>\n<h2>Observando la anatom\u00eda, estructura y jerarqu\u00eda de theme.json<\/h2>\n<p>Obviamente, el archivo <code>theme.json<\/code> tiene una estructura que debes comprender. Tambi\u00e9n tiene una jerarqu\u00eda, junto con algunos elementos \u00fanicos que necesitan m\u00e1s explicaci\u00f3n.<\/p>\n<p>\u00c9sta es probablemente la parte m\u00e1s compleja del uso del archivo de configuraci\u00f3n, pero incluso as\u00ed, comprender\u00e1s los conceptos f\u00e1cilmente.<\/p>\n<p>Empecemos por la estructura, y luego pasemos a los dem\u00e1s elementos de <code>theme.json<\/code>.<\/p>\n<h3>Estructura b\u00e1sica<\/h3>\n<p>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\u00ednea.<\/p>\n<p>Lo m\u00ednimo que necesita un archivo <code>theme.json<\/code> son los objetos <code>version<\/code>, <code>settings<\/code> y <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 2,\n    \"settings\": {\n      \/\/ Global settings go here\n    },\n    \"styles\": {\n      \/\/ Global styles go here\n    }\n}<\/code><\/pre>\n<p>Los objetos <code>settings<\/code> y <code>styles<\/code> son sencillos, pero <code>version<\/code> requiere m\u00e1s explicaciones. Este valor ser\u00e1 un n\u00famero entero que coincida con la versi\u00f3n de la API que utilices para leer tu archivo. La versi\u00f3n actual de la API es <code>3<\/code>, aunque la versi\u00f3n <code>2<\/code> tambi\u00e9n es com\u00fan, y puedes <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/theme-json-migrations\/\" target=\"_blank\" rel=\"noopener noreferrer\">migrar desde versiones anteriores<\/a>.<\/p>\n<p>La mayor\u00eda de las estructuras de archivos <code>theme.json<\/code> tambi\u00e9n <a href=\"https:\/\/schemas.wp.org\/trunk\/theme.json\" target=\"_blank\" rel=\"noopener noreferrer\">incluir\u00e1n un esquema<\/a>. En pocas palabras, esto te permite trabajar con autocompletado dentro de los editores de c\u00f3digo y proporciona validaci\u00f3n para el archivo. Lo a\u00f1adir\u00e1s al principio del archivo:<\/p>\n<pre><code class=\"language-json\">{\n    \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n    \"version\": 2,\n    \"settings\": {\n    },\n    \"styles\": {\n    }\n}<\/code><\/pre>\n<p>A partir de aqu\u00ed, a\u00f1adir\u00e1s varias propiedades y objetos a las <strong>configuraciones<\/strong> y <strong>estilos<\/strong> para construir sobre tu archivo.<\/p>\n<h3>Jerarqu\u00eda<\/h3>\n<p>El archivo <code>theme.json<\/code> sigue una estructura jer\u00e1rquica y es s\u00f3lo un nivel de la jerarqu\u00eda general de <strong>ajustes<\/strong> y <strong>estilos<\/strong> de tu sitio. Si tienes <a href=\"https:\/\/kinsta.com\/es\/blog\/tecnicas-advanzadas-css\/\">conocimientos de CSS<\/a>, comprender esto te resultar\u00e1 m\u00e1s f\u00e1cil, ya que este archivo es <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">similar en complejidad al CSS<\/a>.<\/p>\n<p>En resumen, las personalizaciones que realices en <code>theme.json<\/code> no siempre se mostrar\u00e1n en el front-end de tu sitio. Las configuraciones de usuario tienen prioridad sobre todo lo dem\u00e1s. Esto significa que cualquier cambio que se realice en la pantalla <strong>Apariencia &gt; Editor<\/strong> dentro de WordPress se mostrar\u00e1 en el front-end:<\/p>\n<figure id=\"attachment_183351\" aria-describedby=\"caption-attachment-183351\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/site-editor-screen.png\" alt=\"La interfaz del Editor de Sitios de WordPress. La barra lateral izquierda muestra las opciones de personalizaci\u00f3n del dise\u00f1o, mientras que el \u00e1rea principal muestra el dise\u00f1o de la p\u00e1gina de inicio del sitio web con un t\u00edtulo sobre innovaci\u00f3n y sostenibilidad, junto con una imagen de una estructura arquitect\u00f3nica moderna.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183351\" class=\"wp-caption-text\">La interfaz principal del Editor del sitio dentro de WordPress.<\/figcaption><\/figure>\n<p>Si utilizas un <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">tema hijo<\/a> e incluyes un archivo <code>theme.json<\/code>, \u00e9ste anular\u00e1 todos los cambios que no se realicen con el Editor de Sitios. Del mismo modo, cualquier cosa que definas en el archivo de configuraci\u00f3n del tema principal anular\u00e1 los ajustes y estilos predeterminados de WordPress. En este art\u00edculo nos centraremos en este archivo, aunque WordPress tambi\u00e9n tiene su propio archivo <code>theme.json<\/code>.<\/p>\n<p>Aunque no ser\u00e1 el tema central de este art\u00edculo, tambi\u00e9n puedes anular valores utilizando <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/07\/how-to-modify-theme-json-data-using-server-side-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">hooks y filtros<\/a>. Estos filtros din\u00e1micos te permiten crear plugins y temas que tambi\u00e9n cambian la configuraci\u00f3n y los estilos del tema y de la plataforma.<\/p>\n<h3>Gram\u00e1tica de bloques<\/h3>\n<p>Si entras en el Editor de Bloques o de Sitios de WordPress, abres una entrada o p\u00e1gina y activas el Editor de C\u00f3digo, ver\u00e1s que hay muchos comentarios HTML dentro del contenido:<\/p>\n<figure id=\"attachment_183341\" aria-describedby=\"caption-attachment-183341\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-block-editor.png\" alt=\"La interfaz del editor de c\u00f3digo de WordPress dentro del Editor de Bloques. Muestra el c\u00f3digo HTML de la pol\u00edtica de privacidad de tu sitio web. El c\u00f3digo incluye encabezados y p\u00e1rrafos con detalles sobre la direcci\u00f3n del sitio web, las pol\u00edticas de comentarios y el uso de Gravatar.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183341\" class=\"wp-caption-text\">La pantalla de edici\u00f3n de C\u00f3digo dentro del Editor de Bloques de WordPress.<\/figcaption><\/figure>\n<p>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\u00f3n de estos elementos da como resultado la \u00abgram\u00e1tica de bloques\u00bb que necesitas para escribir tu archivo <code>theme.json<\/code>.<\/p>\n<p>Para los Bloques que contienen contenido, como el Bloque de P\u00e1rrafo, envuelves ese contenido:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:paragraph --&gt;\n    &lt;p&gt;Content goes here!&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n<\/code><\/pre>\n<p>En otros casos, s\u00f3lo necesitar\u00e1s comentarios de una sola l\u00ednea o que se cierren solos. Con algunos Bloques, combinar\u00e1s tipos para crear tus disposiciones y dise\u00f1os. Tambi\u00e9n puedes anidar estos comentarios:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n    \n\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;<\/code><\/pre>\n<p>Aqu\u00ed, creamos un Bloque Columnas utilizando un comentario como contenedor. Dentro, podemos empezar a a\u00f1adir HTML para dise\u00f1ar esas columnas e incluir envoltorios de columnas individuales. Esto ser\u00eda muy sencillo en el front end, ya que a menudo colocar\u00e1s bloques unos dentro de otros.<\/p>\n<p>Para encontrar el c\u00f3digo de un Bloque concreto, puedes buscar en el <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\">Manual del Editor de Bloques<\/a> hasta que encuentres lo que necesitas. La forma m\u00e1s sencilla, sin embargo, es simplemente a\u00f1adir el Bloque a WordPress, abrir el Editor de C\u00f3digo y copiar el c\u00f3digo desde all\u00ed.<\/p>\n<p>En cuanto a los cambios que har\u00e1s dentro de ese marcado, lo trataremos en una secci\u00f3n posterior.<\/p>\n<h2>C\u00f3mo se combinan theme.json y la edici\u00f3n completa del sitio de WordPress<\/h2>\n<p>A partir de la discusi\u00f3n sobre la jerarqu\u00eda, entender\u00e1s que <code>theme.json<\/code> es una parte importante de FSE. Ambos trabajan juntos para ofrecerte una soluci\u00f3n integral de personalizaci\u00f3n de temas para WordPress. Por ejemplo, la interfaz de Estilos Globales es esencialmente la representaci\u00f3n visual de tu configuraci\u00f3n de <code>theme.json<\/code>.<\/p>\n<figure id=\"attachment_183345\" aria-describedby=\"caption-attachment-183345\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183345 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/global-styles.png\" alt=\"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\u00f3n 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\u00e9n aparece un comprobador de contraste, que muestra el c\u00f3digo hexadecimal #A62B0C para el tema de color seleccionado.\" width=\"1200\" height=\"695\"><figcaption id=\"caption-attachment-183345\" class=\"wp-caption-text\">La barra lateral del Editor de Sitios, mostrando las opciones de estilos globales de un tema.<\/figcaption><\/figure>\n<p>Puedes modificar los ajustes tanto en el panel de Estilos Globales como en el archivo de configuraci\u00f3n, y WordPress actualizar\u00e1 los valores correspondientes seg\u00fan sea necesario. Aunque los ajustes del Editor de Sitios tendr\u00e1n prioridad, <code>theme.json<\/code> actuar\u00e1 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\u00f3digo ni de editar el archivo <code>theme.json<\/code>.<\/p>\n<p>Adem\u00e1s, las propiedades CSS personalizadas que definas en <code>theme.json<\/code> estar\u00e1n disponibles en la interfaz de Estilos Globales. Esto permite a los usuarios aprovechar estas propiedades para conseguir un estilo m\u00e1s coherente en todo el sitio. Esto se extiende tambi\u00e9n a la posibilidad de definir estilos y ajustes espec\u00edficos de Bloque, que puedes ajustar a\u00fan m\u00e1s desde el <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">panel de control de WordPress<\/a>.<\/p>\n<p>En pocas palabras, <code>theme.json<\/code> proporciona un control m\u00e1s granular sobre la configuraci\u00f3n, los estilos y mucho m\u00e1s. Es una herramienta a nivel de desarrollador que ofrece una experiencia m\u00e1s directa y racionalizada que los enfoques cl\u00e1sicos. 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\u00e1s c\u00f3mo ambos trabajan en t\u00e1ndem para ayudar a crear dise\u00f1os y disposiciones del sitio.<\/p>\n<h2>Trabajar con las propiedades del archivo theme.json<\/h2>\n<p>Una vez comprendidos los conceptos b\u00e1sicos, puedes empezar a trabajar con los objetos y propiedades de <code>theme.json<\/code>. No podremos cubrir todos los casos de uso ni todas las eventualidades. Sin embargo, al final de este tutorial, ser\u00e1s capaz de crear temas que ofrezcan una funcionalidad completa y un excelente aspecto en el front-end.<\/p>\n<h3>Configuraci\u00f3n<\/h3>\n<p>La propiedad <code>settings<\/code> te permite controlar qu\u00e9 funciones ofreces en el Editor de Sitios y c\u00f3mo se comportan. Es una propiedad de nivel superior, y normalmente encontrar\u00e1s m\u00faltiples niveles de anidamiento.<\/p>\n<p>Cuando veamos los estilos y sus variaciones, ver\u00e1s que hay cierto cruce entre estas opciones, pero ambos tipos tienen un papel en la creaci\u00f3n de tu tema.<\/p>\n<p>Dispones de un n\u00famero selecto de propiedades:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"blocks\": {},\n        \"border\": {},\n        \"color\": {},\n        \"custom\": {},\n        \"dimensions\": {},\n        \"layout\": {},\n        \"position\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"useRootPaddingAwareAlignments\": false\n    }\n}<\/code><\/pre>\n<p>El <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/#settings-documentation\">Manual para Desarrolladores de Temas de WordPress<\/a> oficial incluye una referencia para todos estos ajustes (y estilos). Sin embargo, aqu\u00ed tienes un resumen r\u00e1pido de algunos ajustes importantes que necesitan m\u00e1s aclaraciones:<\/p>\n<ul>\n<li><code>appearanceTools<\/code><strong>.<\/strong> Esta <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/appearance-tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">propiedad \u00abcaj\u00f3n de sastre\u00bb<\/a> habilita varias otras y est\u00e1 pensada para ahorrar tiempo. Establecer\u00e1 opciones de bordes, alturas de l\u00ednea tipogr\u00e1fica, relleno, m\u00e1rgenes y mucho m\u00e1s.<\/li>\n<li><code>blocks<\/code><strong>.\u00a0<\/strong> Aunque la mayor parte de tu trabajo se centrar\u00e1 en los ajustes y estilos globales, la propiedad <code>blocks<\/code> te permite hacerlo por Bloques. El concepto no es algo que abordemos con m\u00e1s detalle aqu\u00ed, pero el <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/blocks\/\">Manual del Desarrollador de Temas<\/a> tiene una excelente documentaci\u00f3n sobre esta faceta de <code>theme.json<\/code>.<\/li>\n<li><code>custom<\/code><strong>.<\/strong> Esta propiedad \u00fanica no tiene ninguna funcionalidad en el sentido de que t\u00fa decides lo que hace. La utilizar\u00e1s para crear <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/custom\/\" target=\"_blank\" rel=\"noopener noreferrer\">propiedades CSS personalizadas<\/a> para tu tema, y el alcance que te ofrece es amplio.<\/li>\n<li><code>useRootPaddingAwareAlignments<\/code><strong>.<\/strong> De nuevo, se trata de una propiedad compleja que no cubriremos en su totalidad. Esencialmente te ayuda a colocar los <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/use-root-padding-aware-alignments\/\" target=\"_blank\" rel=\"noopener noreferrer\">estilos de relleno horizontal<\/a> de tu tema y tiene mucho poder. La utilizar\u00edas cuando quieras que los elementos de ancho completo se extiendan hasta los bordes de la pantalla mientras utilizas el relleno en el elemento ra\u00edz.<\/li>\n<\/ul>\n<p>Ten en cuenta que no necesitas a\u00f1adir ninguna propiedad a <code>theme.json<\/code> con la que no quieras trabajar. Por ejemplo, si no deseas trabajar con <code>appearanceTools<\/code>, puedes simplemente omitirla en lugar de definirla con <code>false<\/code>.<\/p>\n<h4>C\u00f3mo definir ajustes dentro de theme.json<\/h4>\n<p>Cuando se trata de definir ajustes, cada propiedad tiene una serie de subpropiedades de pares clave-valor. Por ejemplo, puedes crear <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/color\/\">paletas de colores<\/a> de esta forma:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n          \"palette\": [\n            {\n              \"color\": \"#0073aa\",\n              \"name\": \"Primary\",\n              \"slug\": \"primary\"\n            },\n            {\n              \"color\": \"#23282d\",\n              \"name\": \"Secondary\",\n              \"slug\": \"secondary\"\n            }\n          ],\n\u2026<\/code><\/pre>\n<p>Otras propiedades tienen simples valores booleanos, que activar\u00e1n o desactivar\u00e1n esas caracter\u00edsticas dentro del Editor de Sitios:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n            \"background\": true,\n            \"defaultPalette\": true,\n            \"link\": true,\n            \"text\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Una vez que definas tus ajustes, puedes introducir estilos para ellos. Vamos a examinarlo ahora.<\/p>\n<h3>Estilos y variaciones de estilo<\/h3>\n<p>Mientras que <code>settings<\/code> define el acceso a determinadas opciones de estilo, la propiedad <code>styles<\/code> te permite definir esos estilos globales para tu tema. De nuevo, se trata de una propiedad de nivel superior que utilizar\u00e1 m\u00faltiples niveles de anidamiento. Puedes dirigirte a elementos espec\u00edficos, Bloques, o incluso utilizar propiedades CSS personalizadas.<\/p>\n<p>Es importante definir los estilos del tema aqu\u00ed para que puedas acceder a ellos y personalizarlos desde el Editor de Sitios. Puedes trabajar con <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/styles-reference\/\">varios elementos<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"styles\": {\n        \"border\": {},\n        \"color\": {},\n        \"dimensions\": {},\n        \"filter\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"css\": {}\n    }\n}<\/code><\/pre>\n<p>Sin embargo, no utilizar\u00e1s a menudo muchos de ellos como propiedades de nivel secundario. En su lugar, algunas funcionar\u00e1n principalmente con Bloques o elementos. Por ejemplo:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"blocks\": {\n        \"core\/group\": {\n            \"color\": {\n                \"text\": \"#000000\",\n                \"background\": \"#ffffff\",\n                \"link\": \"#777777\"\n            }\n\u2026<\/code><\/pre>\n<p>Para estilos globales, trabajar\u00e1s en la ra\u00edz, que se correlaciona con la etiqueta <code>&lt;body&gt;<\/code> de tu p\u00e1gina. Para elementos espec\u00edficos, puedes seguir una estructura similar a la de los Bloques, esta vez utilizando la propiedad <code>elements<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"elements\": {\n        \"button\": {\n            \"color\": {\n                \"text\": \"#ffffff\",\n                \"background\": \"#aa3f33\"\n            }\n\u2026<\/code><\/pre>\n<p>Si observas los cambios que realices en el Editor de Sitios, deber\u00edas verlos en su sitio. El marcado tambi\u00e9n generar\u00e1 CSS para los estilos que crees:<\/p>\n<figure id=\"attachment_183344\" aria-describedby=\"caption-attachment-183344\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183344 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/generate-css.png\" alt=\"La p\u00e1gina de inicio de un sitio web con el t\u00edtulo \"Un compromiso con la innovaci\u00f3n y la sostenibilidad\" y un bot\u00f3n Sobre nosotros. La mitad inferior muestra la estructura HTML del sitio web en el panel DevTools del navegador Brave.\" width=\"1200\" height=\"720\"><figcaption id=\"caption-attachment-183344\" class=\"wp-caption-text\">El front end de un sitio mostrando el navegador DevTools, resaltando el CSS generado para un elemento.<\/figcaption><\/figure>\n<p>Ten en cuenta que tambi\u00e9n puedes aplicar estilos a pseudoclases de elementos, como los estilos hover y focus:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"elements\": {\n    \"button\": {\n        \"color\": {\n            \"text\": \"#ffffff\",\n            \"background\": \"#aa3f33\"\n        },\n        \":hover\": {\n            \"color\": {\n                \"background\": \"#822f27\"\n            }\n\u2026<\/code><\/pre>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/applying-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Aplicar estilos<\/a> es a\u00fan m\u00e1s profundo que esto, y \u00e9se es uno de los fant\u00e1sticos aspectos positivos de utilizar <code>theme.json<\/code>.<\/p>\n<h4>Variaciones de estilo<\/h4>\n<p>Antes de continuar, te interesar\u00e1 conocer las variaciones de estilo. Puedes ver estas diversas paletas de colores y estilos tipogr\u00e1ficos dentro de la interfaz de FSE:<\/p>\n<figure id=\"attachment_183352\" aria-describedby=\"caption-attachment-183352\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183352 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-variations-fse.png\" alt=\"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 \u00e1rea de contenido principal muestra un encabezado \"Un compromiso con la innovaci\u00f3n y la sostenibilidad\" con un subt\u00edtulo, un bot\u00f3n \"Qui\u00e9nes somos\" y una imagen principal de un edificio moderno.\" width=\"1200\" height=\"571\"><figcaption id=\"caption-attachment-183352\" class=\"wp-caption-text\">La barra lateral de Estilos dentro del Editor de Sitios, mostrando diferentes variaciones.<\/figcaption><\/figure>\n<p>Sin embargo, no es algo que programes en <code>theme.json<\/code>. En su lugar, crear\u00e1s versiones alternativas del archivo, les dar\u00e1s un nombre \u00fanico y las guardar\u00e1s en el directorio de <strong>estilos<\/strong> del tema:<\/p>\n<figure id=\"attachment_183355\" aria-describedby=\"caption-attachment-183355\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183355 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/variations-code.png\" alt=\"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\u00f3digo abierto a green.json, que contiene los ajustes de color del tema para un esquema de color verde.\" width=\"1200\" height=\"822\"><figcaption id=\"caption-attachment-183355\" class=\"wp-caption-text\">Un editor de c\u00f3digo que muestra archivos JSON de variaci\u00f3n de estilos.<\/figcaption><\/figure>\n<p>Ten en cuenta que el t\u00edtulo dentro del marcado es \u00fanico para cada archivo JSON alternativo. Sin embargo, es un campo opcional, aunque te recomendamos que lo utilices para mayor claridad y mejor experiencia.<\/p>\n<h3>Plantillas personalizadas y partes de plantillas<\/h3>\n<p>Al igual que las variaciones de estilo, <code>theme.json<\/code> te permite registrar plantillas personalizadas y partes de plantilla asociadas. Registrar el marcado es sencillo:<\/p>\n<pre><code class=\"language-json\">\"customTemplates\": [\n    {\n        \"name\": \"my-template\",\n        \"title\": \"My Template\",\n        \"postTypes\": [\n            \"page\",\n            \"post\"\n        ]\n    }\n]<\/code><\/pre>\n<p>La propiedad <code>customTemplates<\/code> necesita que definas tres elementos:<\/p>\n<ul>\n<li><code>name<\/code><strong>.<\/strong>\u00a0Corresponder\u00e1 a una plantilla que crees dentro del directorio de <strong>plantillas<\/strong> de tu tema, como <strong>\/template\/mi-plantilla.html<\/strong>.<\/li>\n<li><code>title<\/code><strong>.<\/strong>\u00a0Esta es la versi\u00f3n legible por humanos del nombre de la plantilla.<\/li>\n<li><code>postTypes<\/code><strong>.<\/strong> Sin definici\u00f3n, esto corresponde por defecto a una p\u00e1gina, pero puedes especificar una serie de tipos de entrada para los que la plantilla es adecuada.<\/li>\n<\/ul>\n<p>Los usuarios podr\u00e1n seleccionar las plantillas que registres desde el Editor de Sitios o Bloques:<\/p>\n<figure id=\"attachment_183353\" aria-describedby=\"caption-attachment-183353\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183353 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/template-site-editor.png\" alt=\"El editor de bloques de WordPress muestra los detalles de una p\u00e1gina publicada, incluyendo el estado, la fecha de publicaci\u00f3n, el enlace, el autor y la plantilla. Hay un men\u00fa desplegable abierto con opciones para editar, intercambiar, mostrar o crear una nueva plantilla.\" width=\"1200\" height=\"576\"><figcaption id=\"caption-attachment-183353\" class=\"wp-caption-text\">Elegir editar, intercambiar, crear o mostrar una plantilla dentro del Editor de Sitios de WordPress.<\/figcaption><\/figure>\n<p>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:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"templateParts\": [\n    {\n        \"area\": \"header\",\n        \"name\": \"header\",\n        \"title\": \"Header\"\n    },\n\u2026<\/code><\/pre>\n<p>Aqu\u00ed, el nombre y el t\u00edtulo coinciden con las mismas definiciones que las plantillas completas. El \u00e1rea se refiere al lugar al que pertenece la pieza: <code>header<\/code>, <code>footer<\/code>, o <code>uncategorized<\/code> son las predeterminadas, pero puedes asignar partes de plantilla a cualquier \u00e1rea personalizada.<\/p>\n<p>Te animamos a que investigues tambi\u00e9n c\u00f3mo <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/template-parts\/#including-a-template-part\">mostrar estas partes de plantilla<\/a>, ya que no se mostrar\u00e1n sin algo de programaci\u00f3n adicional. Aun as\u00ed, registrarlas es sencillo.<\/p>\n<h3>Patrones<\/h3>\n<p>Para terminar, hablemos de los patrones de Bloque. Puedes agrupar cualquier n\u00famero de ellos en tu archivo <code>theme.json<\/code> utilizando un array de nivel superior. Puedes incluir en tu archivo cualquier patr\u00f3n adecuado de la <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Biblioteca de Patrones de WordPress<\/a>:<\/p>\n<figure id=\"attachment_183348\" aria-describedby=\"caption-attachment-183348\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183348 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-library-wordpress.png\" alt=\"La pantalla de b\u00fasqueda de la biblioteca de patrones de WordPress muestra una cuadr\u00edcula de plantillas de dise\u00f1o de sitios web. Las plantillas incluyen varios dise\u00f1os de banners y cabeceras con im\u00e1genes, texto y botones.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183348\" class=\"wp-caption-text\">La biblioteca de patrones de WordPress.<\/figcaption><\/figure>\n<p>Definir el array es sencillo: utilizas la propiedad <code>patterns<\/code> y el slug del patr\u00f3n asociado de la URL de la biblioteca:<\/p>\n<figure id=\"attachment_183349\" aria-describedby=\"caption-attachment-183349\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183349 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-slug.png\" alt=\"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\u00f3n de imagen naranja con un t\u00edtulo grande, una descripci\u00f3n peque\u00f1a y un bot\u00f3n \"Comprar ahora\".\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183349\" class=\"wp-caption-text\">Seleccionando el slug de un patr\u00f3n desde la URL dentro de un navegador web.<\/figcaption><\/figure>\n<p>Con este slug, puedes rellenar el marcado <code>patterns<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"patterns\": [\n        \"fullwidth-vertically-aligned-headline-on-right-with-description-on-left\"\n    ]\n}<\/code><\/pre>\n<p>Podr\u00e1s seleccionarlos desde el Directorio de Patrones del Editor de Bloques:<\/p>\n<figure id=\"attachment_183347\" aria-describedby=\"caption-attachment-183347\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183347 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-directory.png\" alt=\"La interfaz del Editor de Bloques de WordPress muestra un men\u00fa lateral de elementos de bloques y patrones a la izquierda, con una vista previa de varios dise\u00f1os de banners a la derecha. El banner principal mostrado muestra el texto en negrita LET 'EM ROLL BIG JOHN PATTON sobre un fondo naranja.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183347\" class=\"wp-caption-text\">El Directorio de Patrones de WordPress dentro del Editor de Bloques.<\/figcaption><\/figure>\n<p>Esta sencilla forma de introducir recursos de la Biblioteca de Patrones en tus temas es pr\u00e1ctica y \u00fatil. Es otra raz\u00f3n m\u00e1s por la que el archivo <code>theme.json<\/code> se est\u00e1 convirtiendo r\u00e1pidamente en la forma favorita de construir entre los desarrolladores de temas de WordPress.<\/p>\n<h2>El flujo de trabajo para personalizar tu sitio web WordPress utilizando theme.json<\/h2>\n<p>Una vez que comprendas los componentes clave de <code>theme.json<\/code>, 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\u00e9todos cl\u00e1sicos.<\/p>\n<p>Nuestro enfoque ser\u00eda configurar la URL del esquema, elegir una versi\u00f3n de la API y definir primero tu configuraci\u00f3n global. Esto incluir\u00eda tu paleta de colores, opciones tipogr\u00e1ficas y ajustes de dise\u00f1o. En la mayor\u00eda de los casos, activar el <code>appearanceTools<\/code> tambi\u00e9n ser\u00eda beneficioso:<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\"version\": 3,\n   \"settings\": {\n\"appearanceTools\": true,\n     \"color\": {\n       \"palette\": [\n         {\n           \"name\": \"Primary\",\n\"slug\": \"primary\",\n           \"color\": \"#0073aa\"\n         },\n         {\n      \"name\": \"Secondary\",\n        \"slug\": \"secondary\",\n           \"color\": \"#23282d\"\n         }\n       ]\n     },\n     \"typography\": {\n\"fluid\": true,\n       \"fontSizes\": [\n         {\n           \"size\": \"13px\",\n           \"slug\": \"small\",\n           \"name\": \"Small\"\n         },\n         {\n\"size\": \"16px\",\n           \"slug\": \"normal\",\n           \"name\": \"Normal\"\n\u2026<\/code><\/pre>\n<p>A continuaci\u00f3n, puedes intentar crear propiedades CSS personalizadas utilizando los slugs que definas. Por ejemplo, puedes haber creado pesos de fuente personalizados:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"custom\": {\n    \"fontWeight\": {\n        \"light\": 300,\n        \"regular\": 400,\n        \"medium\": 500,\n        \"bold\": 700\n    },\n\u2026<\/code><\/pre>\n<p>Una vez que hayas terminado con la configuraci\u00f3n, es hora de especificar los estilos.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"color\": {\n        \"background\": \"var(--wp--preset--color--base)\",\n        \"text\": \"var(--wp--preset--color--main)\"\n    },\n\u2026<\/code><\/pre>\n<p>Lo siguiente ser\u00e1 personalizar tus estilos de Bloque, y esto podr\u00eda representar una gran parte de tu archivo <code>theme.json<\/code>.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"block\": {\n        \"core\/separator\": {\n            \"color\": {\n            \"text\": \"var(--wp--preset--color--main)\"\n            },\n        \"typography\": {\n            \"fontSize\": \"var(--wp--preset--font-size--large)\"\n            }\n        },\n        \"core\/site-tagline\": {\n            \"spacing\": {\n                \"margin\": {\n                    \"bottom\": \"20px\"\n                }\n            },\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--small)\"\n            }\n        },\n        \"core\/site-title\": {\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n                \"fontWeight\": \"var(--wp--custom--font-weight--semi-bold)\",\n                \"lineHeight\": \"var(--wp--custom--line-height--none)\"\n        },\n\u2026<\/code><\/pre>\n<p>Por \u00faltimo, deber\u00e1s dise\u00f1ar las plantillas y partes de plantillas personalizadas y registrarlas en <code>theme.json<\/code>. Tambi\u00e9n es el momento de registrar los patrones de Bloque que quieras utilizar y crearlos si es necesario.<\/p>\n<h3>Utilizar Kinsta como parte de tu flujo de trabajo de desarrollo y personalizaci\u00f3n de temas<\/h3>\n<p>Antes de poner en marcha cualquier cambio, deber\u00e1s probarlo todo. Hasta ahora, es probable que hayas estado trabajando con una herramienta de desarrollo local como <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a>:<\/p>\n<figure id=\"attachment_183343\" aria-describedby=\"caption-attachment-183343\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/devkinsta.png\" alt=\"La interfaz de DevKinsta para un solo sitio. Muestra detalles como la versi\u00f3n de WordPress, el servidor web, la versi\u00f3n de PHP y el tipo de base de datos, junto con una vista previa de la p\u00e1gina de inicio del sitio web.\" width=\"1200\" height=\"592\"><figcaption id=\"caption-attachment-183343\" class=\"wp-caption-text\">La interfaz de DevKinsta.<\/figcaption><\/figure>\n<p>Sin embargo, tambi\u00e9n es importante comprobar tu desarrollo en un sitio en producci\u00f3n. La <a href=\"https:\/\/kinsta.com\/es\/docs\/devkinsta\/integracion-devkinsta\/#push-changes-to-staging\">integraci\u00f3n con Kinsta<\/a> de DevKinsta te permite enviar un sitio a un <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/staging\/\">entorno staging<\/a> est\u00e1ndar o premium:<\/p>\n<figure id=\"attachment_183350\" aria-describedby=\"caption-attachment-183350\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183350 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/push-to-kinsta.png\" alt=\"La interfaz de DevKinsta muestra informaci\u00f3n y controles del sitio. El men\u00fa desplegable del bot\u00f3n Sincronizar est\u00e1 abierto, mostrando las opciones Enviar a Kinsta y Recibir de Kinsta.\" width=\"1200\" height=\"417\"><figcaption id=\"caption-attachment-183350\" class=\"wp-caption-text\">Las opciones de sincronizaci\u00f3n dentro de DevKinsta.<\/figcaption><\/figure>\n<p>A partir de ah\u00ed, 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.<\/p>\n<p>Tambi\u00e9n puedes aprovechar nuestra completa soluci\u00f3n de gesti\u00f3n de copias de seguridad, que te permite restaurar copias de seguridad autom\u00e1ticas diarias tanto en el entorno activo como en el staging. Adem\u00e1s, todos nuestros entornos staging incluyen DevTools para ayudarte a supervisar el rendimiento de tu sitio antes de enviarlo a producci\u00f3n.<\/p>\n<h2>Si debes usar theme.json o la edici\u00f3n completa del sitio de WordPress<\/h2>\n<p>Debido a la interrelaci\u00f3n entre <code>theme.json<\/code> y la edici\u00f3n completa del sitio, te preguntar\u00e1s por qu\u00e9 utilizar uno en lugar del otro. De hecho, ambos se adaptan a escenarios diferentes y deben utilizarse conjuntamente.<\/p>\n<p>Por ejemplo, <code>theme.json<\/code> ser\u00e1 tu mejor opci\u00f3n en las siguientes situaciones:<\/p>\n<ul>\n<li>Desarrollas temas y creas un tema nuevo desde cero.<\/li>\n<li>JSON es un lenguaje que entiendes y con el que te sientes c\u00f3modo trabajando.<\/li>\n<li>Quieres un m\u00e9todo program\u00e1tico para definir estilos y ajustes por defecto para tu tema.<\/li>\n<li>Los estilos y ajustes que quieres implementar necesitan m\u00e1s control del que puedes encontrar por defecto en el Editor de Sitios.<\/li>\n<\/ul>\n<p>Desde luego, este \u00faltimo punto ser\u00e1 un nicho, ya que FSE refleja la funcionalidad de <code>theme.json<\/code> casi exactamente. Como tal, la edici\u00f3n completa del sitio tendr\u00e1 m\u00e1s sentido para la mayor\u00eda de los usuarios en los siguientes escenarios:<\/p>\n<ul>\n<li>Eres el propietario de un sitio que quiere <a href=\"https:\/\/kinsta.com\/es\/blog\/como-personalizar-tema-wordpress\/\">personalizar un tema existente<\/a>.<\/li>\n<li>No est\u00e1s familiarizado con JSON.<\/li>\n<li>Las interfaces visuales tienen m\u00e1s sentido para tu flujo de trabajo de personalizaci\u00f3n y desarrollo.<\/li>\n<li>Quieres hacer ajustes r\u00e1pidos sin necesidad de una programaci\u00f3n exhaustiva.<\/li>\n<\/ul>\n<p>En la pr\u00e1ctica, el tema necesitar\u00e1 un archivo de configuraci\u00f3n para definir sus bases. A partir de ah\u00ed, la jerarqu\u00eda se hace cargo, y los propietarios del sitio pueden utilizar FSE para realizar otras personalizaciones.<\/p>\n<h2>Resumen<\/h2>\n<p>El archivo de configuraci\u00f3n <code>theme.json<\/code> 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\u00e1s flexibles, f\u00e1ciles de mantener y personalizables.<\/p>\n<p>Utilizar\u00e1s el archivo junto con el Editor de Sitios dentro de WordPress para llegar al dise\u00f1o final de un sitio. Las opciones que establezcas en <code>theme.json<\/code> servir\u00e1n como predeterminadas, que el usuario final personalizar\u00e1 a\u00fan m\u00e1s. La buena noticia es que programar este archivo es m\u00e1s sencillo que retocar una serie de archivos PHP y CSS, y es el futuro del dise\u00f1o de WordPress.<\/p>\n<p>\u00bfTienes alguna pregunta sobre el uso del archivo <code>theme.json<\/code> en WordPress? \u00a1H\u00e1znoslo saber en la secci\u00f3n de comentarios m\u00e1s abajo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los desarrolladores de WordPress tienen m\u00e1s control que nunca a medida que el ecosistema de WordPress sigue evolucionando. La edici\u00f3n completa del sitio (FSE) nivela el &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76024,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345,1358],"class_list":["post-76023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-wordpress","topic-diseno-sitios-web-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gu\u00eda Definitiva para la Personalizaci\u00f3n de theme.json de WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional\" \/>\n<meta property=\"og:description\" content=\"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-05T07:17:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T22:11:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional\",\"datePublished\":\"2024-08-05T07:17:33+00:00\",\"dateModified\":\"2025-12-16T22:11:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\"},\"wordCount\":4090,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\",\"name\":\"Gu\u00eda Definitiva para la Personalizaci\u00f3n de theme.json de WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"datePublished\":\"2024-08-05T07:17:33+00:00\",\"dateModified\":\"2025-12-16T22:11:12+00:00\",\"description\":\"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gu\u00eda Definitiva para la Personalizaci\u00f3n de theme.json de WordPress - Kinsta\u00ae","description":"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/theme-json\/","og_locale":"es_ES","og_type":"article","og_title":"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional","og_description":"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!","og_url":"https:\/\/kinsta.com\/es\/blog\/theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-08-05T07:17:33+00:00","article_modified_time":"2025-12-16T22:11:12+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"22 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional","datePublished":"2024-08-05T07:17:33+00:00","dateModified":"2025-12-16T22:11:12+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/"},"wordCount":4090,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/","url":"https:\/\/kinsta.com\/es\/blog\/theme-json\/","name":"Gu\u00eda Definitiva para la Personalizaci\u00f3n de theme.json de WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg","datePublished":"2024-08-05T07:17:33+00:00","dateModified":"2025-12-16T22:11:12+00:00","description":"El desarrollo de temas con WordPress utiliza ahora el archivo theme.json. \u00a1En este art\u00edculo te explicamos todo sobre este importante archivo de configuraci\u00f3n!","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/08\/unleashing-the-power-of-themejson.jpg","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Libera el poder de theme.json: personaliza tu tema de WordPress como un profesional"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"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.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=76023"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76023\/revisions"}],"predecessor-version":[{"id":76229,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76023\/revisions\/76229"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76023\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/76024"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=76023"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=76023"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=76023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}