{"id":77214,"date":"2024-11-18T10:01:21","date_gmt":"2024-11-18T09:01:21","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=77214&#038;preview=true&#038;preview_id=77214"},"modified":"2024-11-20T14:26:20","modified_gmt":"2024-11-20T13:26:20","slug":"theme-json-propiedades-pares-clave-valor","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/","title":{"rendered":"Trabajar con propiedades y pares clave-valor en theme.json"},"content":{"rendered":"<p>Comprender la estructura y las propiedades del archivo <code><a href=\"https:\/\/kinqsta.com\/es\/blog\/propiedad-blocks-theme-json\/\">theme.json<\/a><\/code> es fundamental para el <a href=\"https:\/\/kinqsta.com\/es\/blog\/conceptos-basicos-temas-wordpress\/\">desarrollo de temas<\/a> de bloques. Este archivo sirve como eje principal de configuraci\u00f3n para todos los temas basados en bloques.<\/p>\n<p>Tanto si est\u00e1s construyendo un tema desde cero, personalizando uno existente, desarrollando una variaci\u00f3n de estilo o trabajando en un tema hijo, comprender c\u00f3mo trabajar con <code>theme.json<\/code> es esencial.<\/p>\n<p>Afortunadamente, JSON (JavaScript Object Notation) es un formato legible por humanos con una estructura jer\u00e1rquica que organiza la informaci\u00f3n de propiedades generales a espec\u00edficas. En el contexto de <code>theme.json<\/code>, la familiaridad con las Hojas de Estilo en Cascada (<a href=\"https:\/\/kinqsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a>, Cascading Style Sheets) es m\u00e1s relevante que un conocimiento profundo de <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a>.<\/p>\n<p>Este art\u00edculo pretende desglosar las propiedades primarias y secundarias (anidadas) de un archivo <code>theme.json<\/code>, centr\u00e1ndose en las propiedades clave de configuraci\u00f3n y estilos. Estos son los elementos centrales del archivo, y proporcionaremos explicaciones detalladas y ejemplos de c\u00f3digo para cada uno de ellos.<\/p>\n<p>Nos basaremos en los cimientos establecidos en nuestro art\u00edculo anterior, <em><a href=\"https:\/\/kinqsta.com\/es\/blog\/theme-json\/\">Libera el poder de theme.json: Personaliza tu tema de WordPress como un profesional<\/a> <\/em>especialmente en la secci\u00f3n <em><a href=\"https:\/\/kinqsta.com\/es\/blog\/theme-json\/#working-with-the-themejson-file-properties\">Trabajar con las propiedades del archivo theme.json<\/a><\/em>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Para el desarrollo local de temas, puedes utilizar la herramienta de desarrollo de Kinsta, <a href=\"https:\/\/kinqsta.com\/es\/devkinsta\/\">DevKinsta<\/a>, que te permite <a href=\"https:\/\/kinqsta.com\/es\/blog\/instalar-wordpress-localmente\/\">configurar un entorno local de WordPress<\/a> r\u00e1pidamente y desplegarlo f\u00e1cilmente\u00a0en tu <a href=\"https:\/\/kinqsta.com\/es\/mykinsta\/\">cuenta de Kinsta<\/a>.<\/p>\n<p>Kinsta tambi\u00e9n proporciona acceso a <a href=\"https:\/\/kinqsta.com\/es\/docs\/alojamiento-wordpress\/entorno-staging\/\">entornos staging<\/a>, lo que permite gestionar y perfeccionar tus proyectos web sin problemas. Esto puede ser especialmente \u00fatil para probar cambios en tu tema, incluidas las actualizaciones del archivo <code>theme.json<\/code>.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>C\u00f3mo se muestran los estilos en un tema de bloques<\/h2>\n<p>WordPress utiliza un proceso en cascada integrado para mostrar los estilos de un sitio. Cuando varias fuentes definen el mismo ajuste o estilo, WordPress debe determinar cu\u00e1l tiene prioridad. A continuaci\u00f3n se muestra el orden de preferencia que sigue WordPress para decidir qu\u00e9 estilos se aplican:<\/p>\n<ol start=\"1\">\n<li><strong>Core de WordPress<\/strong> \u2014 El archivo fallback <code>theme.json<\/code> est\u00e1 en el directorio wp-includes. Este archivo se actualiza con las principales versiones de WordPress y no debe editarse.<\/li>\n<li><strong>Tema<\/strong> \u2014 El archivo principal <code>theme.json<\/code> utilizado por los desarrolladores de temas para definir la configuraci\u00f3n, los estilos y otras propiedades del tema.<\/li>\n<li><strong>Variaciones de estilo<\/strong> \u2014 Si un tema incluye variaciones de estilo, cada una tiene su propio archivo <code>theme.json<\/code> almacenado en el subdirectorio styles del tema.<\/li>\n<li><strong>Tema hijo<\/strong> \u2014 Al igual que con los temas cl\u00e1sicos, un tema hijo puede modificar un tema padre sin alterar sus archivos (opcional).<\/li>\n<li><strong>Variaciones de estilo del tema hijo<\/strong> \u2014 De forma similar a las variaciones de estilo normales, un tema hijo puede tener su propio archivo <code>theme.json<\/code> en su subdirectorio de estilos (opcional).<\/li>\n<li><strong>Estilos creados por el usuario<\/strong> \u2014 Son estilos personalizados a\u00f1adidos a trav\u00e9s de los editores de WordPress (para p\u00e1ginas, entradas o el sitio en su conjunto) y almacenados en la base de datos.<\/li>\n<\/ol>\n<p>El orden en cascada garantiza que los estilos de las fuentes de mayor prioridad anulen a los de menor prioridad. Por ejemplo, los ajustes del archivo <code>theme.json<\/code> del tema prevalecer\u00e1n sobre los del core de WordPress <code>theme.json<\/code>. Del mismo modo, la variaci\u00f3n de estilo de un tema hijo preceder\u00e1 a la variaci\u00f3n de estilo del tema padre.<\/p>\n<p>Los estilos creados por el usuario (6) tienen la m\u00e1xima prioridad, anulando todos los dem\u00e1s estilos de la cascada.<\/p>\n<p>En este art\u00edculo, nos centraremos en el archivo <code>theme.json<\/code> situado en el directorio ra\u00edz de cualquier tema de bloques de WordPress.<\/p>\n<h2>Una referencia para las propiedades primarias y sus clave-valor<\/h2>\n<p>Exploremos los siete objetos de nivel superior de <code>theme.json<\/code>, que hemos agrupado en tres secciones para facilitar la comprensi\u00f3n de la informaci\u00f3n.<\/p>\n<h3>Algunas definiciones antes de entrar en materia<\/h3>\n<p>Cuando trabajes con <code>theme.json<\/code>, es probable que encuentres distintas definiciones para componentes importantes. Para mayor claridad, as\u00ed es como los definimos en este art\u00edculo:<\/p>\n<ol start=\"1\">\n<li><strong>Secciones<\/strong> \u2014 Agrupaciones de opciones de nivel superior (tambi\u00e9n denominadas \u00abobjetos de nivel superior\u00bb en algunos art\u00edculos).<\/li>\n<li><strong>Objetos \u2014<\/strong>\u00a0Los elementos principales del archivo <code>theme.json<\/code>, como <code>settings<\/code> y <code>styles<\/code>.<\/li>\n<li><strong>Propiedades<\/strong> \u2014 Los componentes dentro de los objetos. Por ejemplo, el objeto <code>settings<\/code> contiene 12 propiedades diferentes.<\/li>\n<li><strong>Pares clave-valor<\/strong> \u2014 Las propiedades est\u00e1n formadas por pares clave-valor. Una \u00abclave\u00bb representa un atributo de la propiedad y va entre comillas. Un \u00abvalor\u00bb puede ser un booleano, una cadena o un array.<\/li>\n<\/ol>\n<p>Cuando mencionamos \u00abpor defecto\u00bb, nos referimos a las configuraciones por defecto del archivo del core <code>theme.json<\/code>, ubicado en <code>wp-includes\/theme.json<\/code>.<\/p>\n<p>Por \u00faltimo, \u00abusuarios\u00bb se refiere a cualquiera que utilice el <a href=\"https:\/\/kinqsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">Admin de WordPress<\/a> y pueda modificar la configuraci\u00f3n en los editores de sitios, p\u00e1ginas o entradas.<\/p>\n<h3>Resumen de la sintaxis<\/h3>\n<ol start=\"1\">\n<li>Los <strong>booleanos<\/strong> no van entre comillas.<\/li>\n<li>Las <strong>cadenas<\/strong> van entre comillas dobles.<\/li>\n<li>Los<strong> arrays<\/strong> van entre corchetes <code>[]<\/code>.<\/li>\n<li>Los<strong> objetos<\/strong> se encierran entre llaves <code>{}<\/code>, que contienen m\u00faltiples propiedades u objetos anidados.<\/li>\n<li>Las <strong>comas<\/strong> se utilizan para separar varios pares clave-valor dentro de un objeto.<\/li>\n<\/ol>\n<p>Aqu\u00ed tienes un ejemplo de sintaxis t\u00edpica:<\/p>\n<pre><code class=\"language-json\">{\n    \"house\": {\n        \"rooms\": \"kitchen\"\n    }\n}<\/code><\/pre>\n<h3>Agrupar las propiedades<\/h3>\n<p>Hemos organizado las propiedades en tres secciones para facilitar la navegaci\u00f3n:<\/p>\n<ol start=\"1\">\n<li>Propiedades b\u00e1sicas<\/li>\n<li>Propiedades de ajustes y estilos<\/li>\n<li>Propiedades de plantillas y patrones<\/li>\n<\/ol>\n<p>Para simplificar los ejemplos, a veces hemos omitido las envolturas externas de los objetos. En lugar de mostrar toda la estructura:<\/p>\n<pre><code class=\"language-json\">{\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"background\": {\n            \"backgroundImage\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Podr\u00edamos acortarla a:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Algunos ejemplos se utilizan para ilustrar conceptos y pueden no representar un uso pr\u00e1ctico en el desarrollo de temas<\/p>\n<\/aside>\n.<\/p>\n<h3>Propiedades b\u00e1sicas<\/h3>\n<p>Al principio de un archivo <code>theme.json<\/code>, encontrar\u00e1s normalmente dos propiedades clave: <code>$schema<\/code> y <code>version<\/code>. Estas propiedades suelen colocarse al principio del archivo. La versi\u00f3n actual del schema es la 3, introducida con <a href=\"https:\/\/kinqsta.com\/es\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>.<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.6\/<code>theme.json<\/code>\", \"version\": 3<\/code><\/pre>\n<h3>Propiedades de configuraci\u00f3n y estilos<\/h3>\n<p>Si est\u00e1s familiarizado con los temas cl\u00e1sicos, considera las propiedades de configuraci\u00f3n como caracter\u00edsticas y funcionalidades que generalmente se establecer\u00edan en el archivo <code><a href=\"https:\/\/kinqsta.com\/es\/blog\/functions-php-wordpress\/\">functions.php<\/a><\/code> y expuestas en la <strong>secci\u00f3n<\/strong> <strong>Apariencia<\/strong> &gt; <strong>Personalizada<\/strong> del admin de WordPress.<\/p>\n<p>Los estilos, por otro lado, son similares a las propiedades CSS que sol\u00edan residir en el archivo <code>styles.css<\/code>, controlando la disposici\u00f3n y el dise\u00f1o del tema.<\/p>\n<h4>Configuraci\u00f3n<\/h4>\n<p>Excepto las propiedades <code>block<\/code> y <code>elements<\/code>, todos los dem\u00e1s ajustes son globales. Como muchos de estos ajustes son booleanos, act\u00faan como conmutadores para activar o desactivar una funci\u00f3n de la interfaz de usuario.<\/p>\n<p>Es importante tener en cuenta que no todas las propiedades se aplican en todos los contextos. Por ejemplo, no es posible permitir a los usuarios establecer una altura m\u00ednima para un bloque de p\u00e1rrafo.<\/p>\n<h5>Herramientas de apariencia<\/h5>\n<p>Estos ajustes pueden activarse colectiva o individualmente utilizando <code>\"appearanceTools\": true<\/code>.<\/p>\n<p>Activar esta funci\u00f3n expone varias opciones de interfaz de usuario en el <a href=\"https:\/\/kinqsta.com\/es\/blog\/wordpress-edicion-sitio-completa\/\">editor de WordPress<\/a>, ahorrando tiempo a los desarrolladores. Por defecto, estas herramientas est\u00e1n desactivadas (<code>\"appearanceTools\": false<\/code>).<\/p>\n<p>Las claves dentro de <code>appearanceTools<\/code> incluyen:<\/p>\n<ul>\n<li><code>background<\/code>\n<ul>\n<li><code>backgroundImage<\/code> \u2014 Permite al usuario a\u00f1adir una imagen de fondo a los bloques.<\/li>\n<li><code>backgroundSize<\/code> \u2014 Define c\u00f3mo se escala la imagen de fondo (cubrir, contener, etc.).<\/li>\n<\/ul>\n<\/li>\n<li><code>border<\/code>\n<ul>\n<li><code>color<\/code> \u2014 Permite seleccionar el color de los bordes.<\/li>\n<li><code>style<\/code> \u2014 Permite al usuario elegir el estilo del borde (s\u00f3lido, discontinuo, punteado, etc.).<\/li>\n<li><code>width<\/code> \u2014 Controla el grosor del borde.<\/li>\n<li><code>radius<\/code> \u2014 Permite al usuario establecer esquinas redondeadas ajustando el radio del borde.<\/li>\n<\/ul>\n<\/li>\n<li><code>color<\/code>\n<ul>\n<li><code>link<\/code> \u2014 Permite establecer un color para los enlaces dentro del contenido.<\/li>\n<li><code>heading<\/code> \u2014 Permite a los usuarios definir colores para las etiquetas de encabezado (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.).<\/li>\n<li><code>button<\/code> \u2014 Controla el color de los botones del tema.<\/li>\n<li><code>caption<\/code> \u2014 Permite establecer un color personalizado para los pies de foto.<\/li>\n<\/ul>\n<\/li>\n<li><code>dimensions<\/code>\n<ul>\n<li><code>aspectRatio<\/code> \u2014 Permite a los usuarios controlar la relaci\u00f3n anchura-altura de los bloques.<\/li>\n<li><code>minHeight<\/code> \u2014 Permite establecer una altura m\u00ednima para los bloques.<\/li>\n<\/ul>\n<\/li>\n<li><code>position<\/code>\n<ul>\n<li><code>sticky<\/code> \u2014 Permite al usuario hacer que un bloque sea pegajoso, es decir, que permanezca fijo en su sitio mientras se desplaza.<\/li>\n<\/ul>\n<\/li>\n<li><code>spacing<\/code>\n<ul>\n<li><code>blockGap<\/code> \u2014 Controla el espaciado entre bloques.<\/li>\n<li><code>margin<\/code> \u2014 Permite al usuario ajustar los m\u00e1rgenes alrededor de un bloque.<\/li>\n<li><code>padding<\/code> \u2014 Controla el relleno dentro de un bloque, definiendo el espacio entre su contenido y su borde.<\/li>\n<\/ul>\n<\/li>\n<li><code>typography<\/code>\n<ul>\n<li><code>lineHeight<\/code> &#8211; Permite a los usuarios ajustar la altura de l\u00ednea (espacio entre l\u00edneas de texto) para mejorar la legibilidad.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Ejemplo:<\/strong> Si quieres que los usuarios a\u00f1adan una imagen de fondo manteniendo desactivadas otras herramientas de apariencia, utiliza:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/background-img-block.png\" alt=\"La IU resultante que permite a los usuarios a\u00f1adir una imagen de fondo a un bloque de grupo.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La IU resultante que permite a los usuarios a\u00f1adir una imagen de fondo a un bloque de grupo.<\/figcaption><\/figure>\n<h5>Bloques<\/h5>\n<p>La propiedad <code>blocks<\/code> permite a los usuarios habilitar ajustes por bloque, que pueden anular los ajustes globales.<\/p>\n<p><strong>Ejemplo:<\/strong> Si <code>appearanceTools<\/code> est\u00e1 configurado como <code>false<\/code>, pero a\u00fan as\u00ed quieres exponer controles de borde para un bloque, utiliza:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n    \"color\": true,\n    \"style\": true,\n    \"width\": true,\n    \"radius\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/border-shadow-block.png\" alt=\"Mostrando la IU resultante que permite a\u00f1adir bordes.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Mostrando la IU resultante que permite a\u00f1adir bordes.<\/figcaption><\/figure>\n<h5>Color<\/h5>\n<p>Esta propiedad permite a los usuarios establecer opciones de color, como el color de fondo, el color del texto o los degradados.<\/p>\n<p>Claves dentro de la propiedad <code>color<\/code>:<\/p>\n<ul>\n<li><strong><code>background<\/code><\/strong> \u2014 Controla el color de fondo de los bloques o elementos.<\/li>\n<li><strong><code>custom<\/code><\/strong> \u2014 Activa o desactiva la posibilidad de que los usuarios seleccionen colores personalizados.<\/li>\n<li><strong><code>customDuotone<\/code><\/strong> \u2014 Permite a los usuarios aplicar filtros duotono personalizados a las im\u00e1genes.<\/li>\n<li><strong><code>customGradient<\/code><\/strong> \u2014 Habilita opciones de degradado personalizadas.<\/li>\n<li><strong><code>defaultDuotone<\/code><\/strong> \u2014 Proporciona opciones predeterminadas de filtro duotono para im\u00e1genes.<\/li>\n<li><strong><code>defaultGradient<\/code><\/strong> \u2014 Define las opciones de degradado por defecto disponibles para los usuarios.<\/li>\n<li><strong><code>defaultPalette<\/code><\/strong> \u2014 Controla la paleta de colores por defecto del tema.<\/li>\n<li><strong><code>duotone<\/code><\/strong> \u2014 Permite filtros duotono en im\u00e1genes.<\/li>\n<li><strong><code>gradient<\/code><\/strong> \u2014 Habilita opciones de degradado para fondos u otros elementos.<\/li>\n<li><strong><code>link<\/code><\/strong> \u2014 Define el color de los enlaces en el tema.<\/li>\n<li><strong><code>text<\/code><\/strong> \u2014 Controla las opciones de color del texto.<\/li>\n<li><strong><code>heading<\/code><\/strong> \u2014 Establece colores para los encabezados (por ejemplo, h1, h2, etc.).<\/li>\n<li><strong><code>button<\/code><\/strong> \u2014 Controla las opciones de color de los botones.<\/li>\n<li><strong><code>caption<\/code><\/strong> \u2014 Establece el color del pie de foto para los elementos multimedia.<\/li>\n<\/ul>\n<p>Veamos algunos ejemplos:<\/p>\n<p><strong>Ejemplo 1:<\/strong> Si quieres desactivar el selector de color para los usuarios, puedes utilizar lo siguiente:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n    \"custom\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-color-picker.png\" alt=\"Desactivar la IU del selector de color.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Desactivar la IU del selector de color.<\/figcaption><\/figure>\n<p><strong>Ejemplo 2:<\/strong> Para establecer colores de tema primario y secundario personalizados, puedes utilizar esta configuraci\u00f3n:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"palette\": [\n       { \"slug\": \"primary\", \"color\": \"#0000ff\", \"name\": \"Primary\" },\n       { \"slug\": \"secondary\", \"color\": \"#ff0000\", \"name\": \"Secondary\" }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/theme-color-setting.png\" alt=\"La IU resultante configurando los colores primario y secundario del tema.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La IU resultante configurando los colores primario y secundario del tema.<\/figcaption><\/figure>\n<h5>Dimensions (Dimensiones)<\/h5>\n<p>Esta propiedad proporciona opciones para controlar las dimensiones del bloque, como la anchura, la altura y la relaci\u00f3n de aspecto.<\/p>\n<p>Claves dentro de la propiedad <code>dimensions<\/code>:<\/p>\n<ul>\n<li><strong><code>aspectRatio<\/code><\/strong> \u2014 Permite a los usuarios establecer o bloquear la relaci\u00f3n de aspecto de un bloque (por ejemplo, 16:9, 4:3).<\/li>\n<li><strong><code>defaultAspectRatios<\/code><\/strong> \u2014 Define relaciones de aspecto por defecto para los bloques.<\/li>\n<li><strong><code>minHeight<\/code><\/strong> \u2014 Permite establecer una altura m\u00ednima para los bloques.<\/li>\n<\/ul>\n<p>Por ejemplo, para permitir a los usuarios establecer una altura m\u00ednima para los bloques admitidos, utiliza lo siguiente:<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n    \"minHeight\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/min-height-setting.png\" alt=\"Altura m\u00ednima establecida en la IU.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Altura m\u00ednima establecida en la IU.<\/figcaption><\/figure>\n<h5>Layout (Dise\u00f1o)<\/h5>\n<p>La propiedad <code>layout<\/code> permite a los usuarios establecer opciones relacionadas con el dise\u00f1o, como la anchura del contenido y si los usuarios pueden personalizar el dise\u00f1o. Esto permite a los usuarios establecer opciones de dise\u00f1o con estas claves:<\/p>\n<ul>\n<li><strong><code>contentSize<\/code> \u2014 <\/strong>Define la anchura por defecto de los bloques.<\/li>\n<li><strong><code>wideSize<\/code> \u2014 <\/strong>Define la anchura de los bloques cuando se selecciona la opci\u00f3n de alineaci\u00f3n ancha.<\/li>\n<li><strong><code>allowEditing<\/code> \u2014 <\/strong>Determina si los usuarios pueden editar las opciones de dise\u00f1o.<\/li>\n<li><strong><code>allowCustomContentAndWideSize<\/code> \u2014 <\/strong>Permite la personalizaci\u00f3n de <code>contentSize<\/code> y <code>wideSize<\/code>.<\/li>\n<\/ul>\n<p><strong>Ejemplo<\/strong>: Configurar las opciones de maquetaci\u00f3n con anchos de bloque por defecto y ancho:<\/p>\n<pre><code class=\"language-json\">\"layout\": {\n    \"contentSize\": \"620px\",\n    \"wideSize\": \"1000px\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/width-setting.png\" alt=\"Configuraci\u00f3n resultante de bloques por defecto y anchos.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Configuraci\u00f3n resultante de bloques por defecto y anchos.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Estos valores son puntos de partida que los usuarios pueden cambiar.<\/p>\n<\/aside>\n\n<h5>Lightbox (Caja de luz)<\/h5>\n<p>La propiedad <code>lightbox<\/code> permite a los usuarios activar la funci\u00f3n \u00abExpandir al hacer clic\u00bb para las im\u00e1genes, abri\u00e9ndolas en una vista m\u00e1s grande al hacer clic.<\/p>\n<p>Claves dentro de la propiedad <code>lightbox<\/code>:<\/p>\n<ul>\n<li><strong><code>enabled<\/code><\/strong> \u2014 Activa o desactiva la funci\u00f3n lightbox.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong> \u2014 Permite a los usuarios cambiar la configuraci\u00f3n de la caja de luz.<\/li>\n<\/ul>\n<p><strong>Ejemplo: <\/strong>Para permitir a los usuarios alternar la funci\u00f3n de lightbox para las im\u00e1genes, utiliza esta configuraci\u00f3n:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n    \"core\/image\": {\n        \"lightbox\": {\n            \"allowEditing\": true\n        }\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/lightbox-effect-toggle.png\" alt=\"Activar el efecto lightbox expuesto.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Activar el efecto lightbox expuesto.<\/figcaption><\/figure>\n<h5>Position (Posici\u00f3n)<\/h5>\n<p>La propiedad <code>position<\/code> permite a los usuarios controlar la posici\u00f3n de los bloques, como por ejemplo hacer que un bloque sea pegajoso (sticky) en la p\u00e1gina.<\/p>\n<p><strong>Ejemplo<\/strong>: Hacer que un bloque sea pegajoso:<\/p>\n<pre><code class=\"language-json\">\"position\": {\n    \"sticky\": true\n}<\/code><\/pre>\n<h5>Shadow (Sombra)<\/h5>\n<p>Esta propiedad permite a los usuarios aplicar efectos de sombra a los bloques, ya sea utilizando preajustes predefinidos o sombras definidas por el usuario.<\/p>\n<p>Claves dentro de la propiedad <code>shadow<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultPresets<\/code> \u2014 <\/strong>Activa o desactiva los preajustes de sombra predefinidos.<\/li>\n<li><strong><code>presets<\/code> \u2014 <\/strong>Permite a los usuarios definir preajustes de sombra personalizados.<\/li>\n<\/ul>\n<p>Aqu\u00ed tienes un ejemplo en el que se desactivan las sombras por defecto y se define una sombra personalizada llamada \u00abNatural\u00bb:<\/p>\n<pre><code class=\"language-json\">\"shadow\": {\n    \"defaultPresets\": false,\n    \"presets\": [\n        { \"name\": \"Natural\", \"slug\": \"natural\", \"shadow\": \"6px 6px 9px rgba(0, 0, 0, 0.2)\" }\n    ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-setting.png\" alt=\"Definir opciones de sombra en la interfaz de usuario.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Definir opciones de sombra en la interfaz de usuario.<\/figcaption><\/figure>\n<p>Los n\u00fameros indican los clics realizados en el editor del sitio para mostrar la interfaz de usuario. El \u00faltimo paso muestra la sombra \u00abNatural\u00bb.<\/p>\n<h5>Spacing (Espaciado)<\/h5>\n<p>Esta propiedad define c\u00f3mo se controla el espaciado (relleno, margen, hueco) en el editor.<\/p>\n<p>Claves dentro de la propiedad <code>spacing<\/code>:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong> \u2014 Controla el espacio entre bloques.<\/li>\n<li><strong><code>margin<\/code><\/strong> \u2014 Permite establecer m\u00e1rgenes alrededor de los bloques.<\/li>\n<li><strong><code>padding<\/code>\u00a0<\/strong>\u2014 Proporciona opciones para establecer el relleno dentro de los bloques.<\/li>\n<li><strong><code>units<\/code> \u2014 <\/strong>Define las unidades disponibles para el espaciado (por ejemplo, px, rem).<\/li>\n<li><strong><code>customSpacingSize<\/code>\u00a0<\/strong>\u2014 Permite a los usuarios establecer tama\u00f1os de espaciado personalizados.<\/li>\n<li><strong><code>spacingSizes<\/code>\u00a0<\/strong>\u2014 Define un rango de tama\u00f1os de espaciado preestablecidos.<\/li>\n<li><strong><code>spacingScale<\/code>\u00a0<\/strong>\u2014 Permite escalar las unidades de espaciado.<\/li>\n<\/ul>\n<p><strong>Ejemplo:<\/strong> Para limitar a los usuarios a dos unidades de medida (p\u00edxeles y rem) para el relleno, los m\u00e1rgenes, las anchuras y las alturas, y para exponer los controles de espaciado en el editor del sitio, establece <code>appearanceTools<\/code> en <code>true<\/code> y config\u00faralo as\u00ed:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"units\": [\"px\", \"rem\"]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/measurement-limit.png\" alt=\"Limitar el uso de 2 unidades de medida.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Limitar el uso de 2 unidades de medida.<\/figcaption><\/figure>\n<h5>Typography (Tipograf\u00eda)<\/h5>\n<p>Esta propiedad controla los ajustes relacionados con el texto de tu tema, como el tama\u00f1o de la fuente, el peso y la altura de l\u00ednea.<\/p>\n<p>Claves dentro de la propiedad <code>typography<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultFontSizes<\/code>\u00a0<\/strong>\u2014 Define los tama\u00f1os de fuente por defecto disponibles para los usuarios.<\/li>\n<li><strong><code>customFontSize<\/code>\u00a0<\/strong>\u2014 Activa o desactiva la posibilidad de establecer tama\u00f1os de fuente personalizados.<\/li>\n<li><strong><code>fontStyle<\/code>\u00a0<\/strong>\u2014 Controla el estilo de la fuente (por ejemplo, normal, cursiva).<\/li>\n<li><strong><code>fontWeight<\/code>\u00a0<\/strong>\u2014 Permite a los usuarios establecer el peso de la fuente (por ejemplo, negrita, ligera).<\/li>\n<li><strong><code>fluid<\/code>\u00a0<\/strong>\u2014 Permite una tipograf\u00eda fluida, ajustando el tama\u00f1o de la fuente din\u00e1micamente en funci\u00f3n del tama\u00f1o de la pantalla.<\/li>\n<li><strong><code>letterSpacing<\/code>\u00a0<\/strong>\u2014 Controla el espaciado entre letras.<\/li>\n<li><strong><code>lineHeight<\/code>\u00a0<\/strong>\u2014 Establece la altura de cada l\u00ednea de texto.<\/li>\n<li><strong><code>textAlign<\/code>\u00a0<\/strong>\u2014 Permite controlar la alineaci\u00f3n del texto (por ejemplo, izquierda, centro, derecha).<\/li>\n<li><strong><code>textDecoration<\/code>\u00a0<\/strong>\u2014 Proporciona opciones para la decoraci\u00f3n del texto (por ejemplo, subrayado).<\/li>\n<li><strong><code>writingMode<\/code>\u00a0<\/strong>\u2014 Establece el modo de escritura del texto (por ejemplo, horizontal o vertical).<\/li>\n<\/ul>\n<p><strong>Ejemplo<\/strong>: Para desactivar tanto los tama\u00f1os de fuente personalizados como las opciones de letra capital (dropCap), utiliza lo siguiente:<\/p>\n<pre><code class=\"language-json\">\"typography\": {\n    \"customFontSize\": false,\n    \"dropCap\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/font-size-drop-cap-options.png\" alt=\"Eliminar las opciones de tama\u00f1o de fuente personalizado y Letra Capital (DropCap).\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Eliminar las opciones de tama\u00f1o de fuente personalizado y Letra Capital (DropCap)..<\/figcaption><\/figure>\n<p>En este caso, las dos teclas resaltadas <strong>no<\/strong> aparecer\u00e1n en el editor.<\/p>\n<h5>Root padding aware alignments (Alineaciones que tienen en cuenta el padding ra\u00edz)<\/h5>\n<p>Cuando se establece en <code>true<\/code>, esta propiedad garantiza que las alineaciones de bloque ancho o ancho completo sean conscientes del padding aplicado al elemento ra\u00edz de la p\u00e1gina (por ejemplo, <code>&lt;html&gt;<\/code> o <code>&lt;body&gt;<\/code>), garantizando una alineaci\u00f3n adecuada incluso cuando se aplica padding.<\/p>\n<p><strong>Ejemplo:<\/strong><\/p>\n<pre><code class=\"language-json\">\"useRootPaddingAwareAlignments\": true<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Por defecto, esta propiedad se establece en <code>false<\/code>, lo que da como resultado un dise\u00f1o sin m\u00e1rgenes.<\/p>\n<\/aside>\n\n<p>Cuando se establece en <code>true<\/code>, tambi\u00e9n debes definir los valores de los padding superior, derecho, inferior e izquierdo de la ra\u00edz como un estilo. (M\u00e1s informaci\u00f3n sobre las propiedades de estilo m\u00e1s adelante).<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"padding\": {\n        \"top\": \"0\",\n        \"right\": \"100px\",\n        \"bottom\": \"0\",\n        \"left\": \"100px\"\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/use-root-padding-aware-alignments-default.png\" alt=\"El valor por defecto de useRotPaddingAwareAignments.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">El valor por defecto de useRotPaddingAwareAignments.<\/figcaption><\/figure>\n<p>Aplicando el ajuste <code>useRootPaddingAwareAlignements<\/code> y el padding derecho e izquierdo al cuerpo (como en el c\u00f3digo anterior) se obtiene lo siguiente.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/alignment-padding.png\" alt=\"Aplicar el padding derecho e izquierdo cuando useRootPaddingAwareAlignments est\u00e1 establecido en true.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Aplicar el padding derecho e izquierdo cuando useRootPaddingAwareAlignments est\u00e1 establecido en true.<\/figcaption><\/figure>\n<h4 id=\"styles\" class=\"has-anchor-hash\">Styles (Estilos)<\/h4>\n<p>La propiedad <code>styles<\/code> te permite aplicar estilos CSS a la ra\u00edz (por defecto), a elementos espec\u00edficos o a bloques individuales de tu tema.<\/p>\n<h5>Estilos de fondo<\/h5>\n<p>Puedes controlar las propiedades relacionadas con el fondo, como las im\u00e1genes, el posicionamiento y los adjuntos.<\/p>\n<p>Claves comunes para el fondo:<\/p>\n<ul>\n<li><strong><code>backgroundImage<\/code>\u00a0<\/strong>\u2014 Define la imagen de fondo para el bloque o elemento.<\/li>\n<li><strong><code>backgroundPosition<\/code>\u00a0<\/strong>\u2014 Establece la posici\u00f3n de la imagen de fondo (por ejemplo, centro, arriba-derecha).<\/li>\n<li><strong><code>backgroundRepeat<\/code>\u00a0<\/strong>\u2014 Especifica si la imagen de fondo se repite (por ejemplo, repetir, no repetir).<\/li>\n<li><strong><code>backgroundSize<\/code>\u00a0<\/strong>\u2014 Controla el tama\u00f1o de la imagen de fondo (por ejemplo, cover (cubrir), contain (contener)).<\/li>\n<li><strong><code>backgroundAttachment<\/code>\u00a0<\/strong>\u2014 Especifica si la imagen de fondo es fija o se desplaza con la p\u00e1gina.<\/li>\n<\/ul>\n<p>Por ejemplo, puedes establecer una imagen de fondo para tu tema:<\/p>\n<pre><code class=\"language-json\">\"background\": {\n   \"backgroundImage\": {\n       \"url\": \"https:\/\/joyofwp.com\/wp-content\/uploads\/2024\/09\/dots.png\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/bg-style-page.png\" alt=\"A\u00f1ade un estilo de imagen de fondo a todas las p\u00e1ginas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1ade un estilo de imagen de fondo a todas las p\u00e1ginas.<\/figcaption><\/figure>\n<h5>Bloquear estilos espec\u00edficos<\/h5>\n<p>Puedes aplicar estilos espec\u00edficos, como sombra, tipograf\u00eda y bordes, a bloques individuales.<\/p>\n<p>Claves para el borde:<\/p>\n<ul>\n<li><strong><code>color<\/code>\u00a0<\/strong>\u2014 Define el color del borde.<\/li>\n<li><strong><code>radius<\/code>\u00a0<\/strong>\u2014 Define el radio del borde para esquinas redondeadas.<\/li>\n<li><strong><code>style<\/code>\u00a0<\/strong>\u2014 Especifica el estilo del borde (por ejemplo, s\u00f3lido, punteado).<\/li>\n<li><strong><code>width<\/code>\u00a0<\/strong>\u2014 Controla la anchura del borde.<\/li>\n<li><strong><code>top<\/code>, <code>right<\/code><\/strong>,<strong> <code>bottom<\/code>, <\/strong><strong><code>left<\/code>\u00a0<\/strong>\u2014 Te permite definir estilos de borde individuales para cada lado.<\/li>\n<\/ul>\n<p>Por ejemplo, lo siguiente establece un borde rojo s\u00f3lido de 20px alrededor de toda la p\u00e1gina:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-border-styles.png\" alt=\"A\u00f1adir un estilo de borde a todas las p\u00e1ginas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1adir un estilo de borde a todas las p\u00e1ginas.<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes asignar CSS personalizado a un bloque espec\u00edfico, a un elemento o a la ra\u00edz.<br \/>\nPor ejemplo, el siguiente c\u00f3digo aplica un color de texto rojo a un bloque de tabla:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-text-color-tables.png\" alt=\"A\u00f1adir un estilo de color de texto a todas las tablas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1adir un estilo de color de texto a todas las tablas.<\/figcaption><\/figure>\n<h5>Estilos de color<\/h5>\n<p>La propiedad color te permite controlar los ajustes de fondo, degradado y color del texto.<br \/>\nClaves para <code>color<\/code>:<\/p>\n<ul>\n<li><code>background<\/code> \u2014 Define el color de fondo del bloque o elemento.<\/li>\n<li><code>gradient<\/code> \u2014 Define un degradado de fondo para el bloque.<\/li>\n<li><code>text<\/code> \u2014 Controla el color del texto.<\/li>\n<\/ul>\n<p>El siguiente ejemplo establece un fondo negro con texto blanco en todos los elementos de todas las p\u00e1ginas:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"background\": \"#000000\",\n   \"text\": \"#ffffff\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/text-bg-styling.png\" alt=\"Establecer el estilo del color del texto y del fondo en todas las p\u00e1ginas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Establecer el estilo del color del texto y del fondo en todas las p\u00e1ginas.<\/figcaption><\/figure>\n<h5>CSS<\/h5>\n<p>La propiedad <code>css<\/code> te permite adjuntar estilos personalizados a clases espec\u00edficas, permitiendo un control m\u00e1s granular sobre los estilos del tema.<\/p>\n<p><strong>Ejemplo<\/strong>: Aplica estilos personalizados a <code>wp-block-template-parts<\/code> y <code>wp-block-button<\/code>, y a\u00f1ade un efecto hover para el bot\u00f3n:<\/p>\n<pre><code class=\"language-json\">\"css\": \".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }\"<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/btn-hover-style.png\" alt=\"Muestra todos los botones de la cabecera con un estado hover para los estilos de texto y fondo.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Muestra todos los botones de la cabecera con un estado hover para los estilos de texto y fondo.<\/figcaption><\/figure>\n<p>Como puedes ver, a las partes de la plantilla de cabecera y pie de p\u00e1gina se les asigna <code>background-color<\/code> y <code>padding<\/code>, mientras que el estado hover para el bot\u00f3n tiene un fondo blanco con texto negro.<\/p>\n<h5>Dimensions (Dimensiones)<\/h5>\n<p>La propiedad <code>dimensions<\/code> te permite controlar la anchura, la altura y la <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/08\/05\/registering-custom-aspect-ratios-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">relaci\u00f3n de aspecto<\/a> de los bloques.<\/p>\n<p>Claves para las dimensiones:<\/p>\n<ul>\n<li><strong><code>aspectRatios<\/code>\u00a0<\/strong>\u2014 Define relaciones de aspecto personalizadas para los elementos.<\/li>\n<li><strong><code>minHeight<\/code>\u00a0<\/strong>\u2014 Define la altura m\u00ednima de los bloques.<\/li>\n<\/ul>\n<p><strong>Ejemplo<\/strong>: Crea una relaci\u00f3n de aspecto personalizada de 3:7 para un bloque de imagen:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"dimensions\": {\n           \"aspectRatio\": \"custom\"\n       }\n   }\n}<\/code><\/pre>\n<p>Sin embargo, lo anterior por s\u00ed solo no es suficiente. Debes registrar el estilo \u00abpersonalizado\u00bb dentro de las secciones de configuraci\u00f3n.<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n   \"defaultAspectRatios\": true,\n   \"aspectRatios\": [\n       {\n           \"name\": \"Custom Ratio 3:7\",\n           \"slug\": \"custom\",\n           \"ratio\": \"3\/7\"\n       }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/image-custom-ratio.png\" alt=\"A\u00f1adir una opci\u00f3n de estilo de proporci\u00f3n personalizada para todas las im\u00e1genes.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1adir una opci\u00f3n de estilo de proporci\u00f3n personalizada para todas las im\u00e1genes.<\/figcaption><\/figure>\n<p>Aqu\u00ed puedes ver que se ha a\u00f1adido la opci\u00f3n \u00abProporci\u00f3n personalizada\u00bb. Si prefieres eliminar las siete relaciones de aspecto predeterminadas, elimina <code>\"defaultAspectRatios\":true<\/code> de la secci\u00f3n de configuraci\u00f3n.<\/p>\n<h5>Estilos espec\u00edficos de cada elemento<\/h5>\n<p>La propiedad <code>elements<\/code> te permite aplicar estilos a elementos HTML espec\u00edficos, como enlaces, botones o encabezados.<\/p>\n<p>Por ejemplo, el siguiente c\u00f3digo desactiva la decoraci\u00f3n del texto (subrayado) para todos los enlaces:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"link\": {\n       \"typography\": {\n           \"textDecoration\": \"none\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-text-decoration.png\" alt=\"Desactivar el estilo de decoraci\u00f3n de texto para los enlaces.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Desactivar el estilo de decoraci\u00f3n de texto para los enlaces.<\/figcaption><\/figure>\n<h5>Filter (Filtro)<\/h5>\n<p>La propiedad <code>filter<\/code> te permite aplicar efectos de filtro similares a los de CSS (por ejemplo, desenfoque, brillo) a determinados bloques como las im\u00e1genes.<\/p>\n<p><strong>Ejemplo:<\/strong> Aplica un filtro de desenfoque y brillo a un bloque de imagen:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"filter\": {\n           \"duotone\": \"blur(5px) brightness(0.8)\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/blur-image.png\" alt=\"A\u00f1adir un estilo de desenfoque a todas las im\u00e1genes.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1adir un estilo de desenfoque a todas las im\u00e1genes.<\/figcaption><\/figure>\n<p>Aqu\u00ed se han aplicado efectos de desenfoque y brillo al bloque de im\u00e1genes. Otros valores de filtro disponibles son:<\/p>\n<ul>\n<li><strong><code>contrast<\/code><\/strong> \u2014 Ajusta el contraste del elemento.<\/li>\n<li><strong><code>grayscale<\/code>\u00a0<\/strong>\u2014 Convierte el elemento a escala de grises.<\/li>\n<li><strong><code>invert<\/code>\u00a0<\/strong>\u2014 Invierte los colores del elemento.<\/li>\n<li><strong><code>opacity<\/code>\u00a0<\/strong>\u2014 Controla la transparencia del elemento.<\/li>\n<li><strong><code>saturate<\/code>\u00a0<\/strong>\u2014 Aumenta o disminuye la saturaci\u00f3n de los colores.<\/li>\n<li><strong><code>sepia<\/code>\u00a0<\/strong>\u2014 Aplica un tono sepia al elemento.<\/li>\n<\/ul>\n<h5>Outline (Contorno)<\/h5>\n<p>La propiedad <code>outline<\/code> define estilos para los contornos dibujados fuera del borde del elemento, sin afectar al espacio de dise\u00f1o.<\/p>\n<p>Claves para el contorno:<\/p>\n<ul>\n<li><strong><code>color<\/code>\u00a0<\/strong>\u2014 Establece el color del contorno.<\/li>\n<li><strong><code>offset<\/code>\u00a0<\/strong>\u2014 Controla el espacio entre el borde y el contorno.<\/li>\n<li><strong><code>style<\/code>\u00a0<\/strong>\u2014 Especifica el estilo del contorno (por ejemplo, punteado, s\u00f3lido).<\/li>\n<li><strong><code>width<\/code>\u00a0<\/strong>\u2014 Establece la anchura del contorno.<\/li>\n<\/ul>\n<p><strong>Ejemplo<\/strong>: Aplicar un contorno punteado rojo a un bot\u00f3n:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"button\": {\n       \"outline\": {\n           \"color\": \"#ff0000\",\n           \"style\": \"dotted\",\n           \"width\": \"4px\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/button-outline-style.png\" alt=\"A\u00f1adir un estilo de contorno a todos los botones.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1adir un estilo de contorno a todos los botones.<\/figcaption><\/figure>\n<h5>Estilos de sombra<\/h5>\n<p>La propiedad <code>shadow<\/code> te permite aplicar sombras de caja a los bloques, a\u00f1adiendo profundidad y \u00e9nfasis a los elementos.<\/p>\n<p><strong>Ejemplo<\/strong>: Aplicar una sombra a todas las im\u00e1genes:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"shadow\": \"0 10px 20px 0 rgb(0 0 225 \/ 0.50)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-image.png\" alt=\"A\u00f1ade una sombra a todas las im\u00e1genes.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1ade una sombra a todas las im\u00e1genes.<\/figcaption><\/figure>\n<h5>Estilos de espaciado<\/h5>\n<p>La propiedad <code>spacing<\/code> gestiona los estilos de relleno, margen y espacio entre bloques de tu tema.<\/p>\n<p>Claves para el espaciado:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code>\u00a0<\/strong>\u2014 Controla el espacio entre bloques.<\/li>\n<li><strong><code>margin<\/code>\u00a0<\/strong>\u2014 Establece los m\u00e1rgenes alrededor de los bloques.<\/li>\n<li><strong><code>padding<\/code>\u00a0<\/strong>\u2014 Controla el relleno dentro de los bloques.<\/li>\n<\/ul>\n<p>En el ejemplo siguiente se establece un padding personalizado en los lados izquierdo y derecho:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n   \"padding\": {\n       \"left\": \"min(6.5rem, 8vw)\",\n       \"right\": \"min(6.5rem, 8vw)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/left-right-padding.png\" alt=\"A\u00f1ade padding a izquierda y derecha.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A\u00f1ade padding a izquierda y derecha.<\/figcaption><\/figure>\n<h5>Estilos de tipograf\u00eda<\/h5>\n<p>La propiedad <code>typography<\/code> gestiona los estilos de fuente, tama\u00f1os y otros ajustes relacionados con el texto.<\/p>\n<p>Claves comunes para tipograf\u00eda:<\/p>\n<ul>\n<li><strong><code>fontFamily<\/code>\u00a0<\/strong>\u2014 Define la familia de fuentes para el texto.<\/li>\n<li><strong><code>fontSize<\/code><\/strong> \u2014 Define el tama\u00f1o de la fuente.<\/li>\n<li><strong><code>fontStyle<\/code> \u2014 <\/strong>Especifica el estilo de la fuente (por ejemplo, cursiva, normal).<\/li>\n<li><strong><code>fontWeight<\/code>\u00a0<\/strong>\u2014 Controla el peso (grosor) de la fuente.<\/li>\n<li><strong><code>letterSpacing<\/code>\u00a0<\/strong>\u2014 Ajusta el espaciado entre letras.<\/li>\n<li><strong><code>lineHeight<\/code>\u00a0<\/strong>\u2014 Define la altura de l\u00ednea (espacio entre l\u00edneas de texto).<\/li>\n<li><strong><code>textAlign<\/code>\u00a0<\/strong>\u2014 Define la alineaci\u00f3n del texto (por ejemplo, izquierda, centro, derecha).<\/li>\n<li><strong><code>textColumns<\/code>\u00a0<\/strong>\u2014 Controla el n\u00famero de columnas de texto.<\/li>\n<li><strong><code>textDecoration<\/code>\u00a0<\/strong>\u2014 Define la decoraci\u00f3n del texto (por ejemplo, subrayado).<\/li>\n<li><strong><code>writingMode<\/code>\u00a0<\/strong>\u2014 Define el modo de escritura (por ejemplo, horizontal, vertical).<\/li>\n<li><strong><code>textTransform<\/code>\u00a0<\/strong>\u2014 Controla la transformaci\u00f3n del texto (por ejemplo, may\u00fasculas, min\u00fasculas).<\/li>\n<\/ul>\n<p>Por ejemplo, puedes establecer que todos los encabezados tengan un peso de fuente de 300 y un estilo cursiva:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/heading\": {\n       \"typography\": {\n           \"fontWeight\": \"300\",\n           \"fontStyle\": \"italic\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/heading-style.png\" alt=\"Todos los encabezados incluyen las propiedades de estilo cursiva y peso\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Todos los encabezados incluyen las propiedades de estilo cursiva y peso.<\/figcaption><\/figure>\n<h3>Propiedades de plantillas y patrones<\/h3>\n<p>Estas tres propiedades de nivel superior se utilizan para registrar activos personalizados en tu tema.<\/p>\n<h4>1. Plantillas personalizadas<\/h4>\n<p>La propiedad <code>templates<\/code> se utiliza para registrar plantillas personalizadas para varios tipos de entradas.<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong>\u00a0\u2014 El nombre del archivo <code>.html<\/code> o <code>.php<\/code> ubicado en el subdirectorio <code>templates<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong> \u2014 El t\u00edtulo que se asignar\u00e1 a la plantilla para facilitar su identificaci\u00f3n.<\/li>\n<li><strong><code>postTypes<\/code><\/strong> \u2014 Especifica el tipo de contenido (por ejemplo, entradas, p\u00e1ginas) para el que se utilizar\u00e1 la plantilla.<\/li>\n<\/ul>\n<h4>2. Partes de la plantilla<\/h4>\n<p>La propiedad <code>templateParts<\/code> se utiliza para definir partes reutilizables de las plantillas (por ejemplo, encabezados, pies de p\u00e1gina).<\/p>\n<ul>\n<li><strong><code>name<\/code>\u00a0<\/strong>\u2014 El nombre del archivo <code>.html<\/code> o <code>.php<\/code> ubicado en el subdirectorio <code>parts<\/code>.<\/li>\n<li><strong><code>title<\/code>\u00a0<\/strong>\u2014 El t\u00edtulo dado a la parte de la plantilla para facilitar su identificaci\u00f3n.<\/li>\n<li><strong><code>area<\/code>\u00a0<\/strong>\u2014 Especifica a qu\u00e9 parte de la p\u00e1gina se aplica la parte de plantilla (por ejemplo, <code>header<\/code>, <code>footer<\/code>, <code>sidebar<\/code>).<\/li>\n<\/ul>\n<h4>3. Patrones<\/h4>\n<p>La propiedad <code>patterns<\/code> te permite registrar una serie de patrones del directorio de patrones de WordPress, para que est\u00e9n disponibles en el tema.<\/p>\n<p>A continuaci\u00f3n te explicamos c\u00f3mo registrar un patr\u00f3n:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n    \"my-custom-pattern-slug\"\n]<\/code><\/pre>\n<h2>Tres ejemplos pr\u00e1cticos de trabajo con theme.json<\/h2>\n<p>Aqu\u00ed tienes algunas cosas que podr\u00edas desear hacer para un tema que est\u00e9s desarrollando.<\/p>\n<h3>1. A\u00f1adir un patr\u00f3n<\/h3>\n<p>A continuaci\u00f3n te mostramos c\u00f3mo incluir dos patrones del directorio de patrones de WordPress. Aqu\u00ed se muestra el patr\u00f3n \u00abGaler\u00eda de im\u00e1genes de portada a pantalla completa\u00bb:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n   \"fullscreen-cover-image-gallery\",\n   \"hero-banner-with-overlap-images\"\n]<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/pattern-wordpress.png\" alt=\"Muestra la inserci\u00f3n de un patr\u00f3n de wordpress.org.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Muestra la inserci\u00f3n de un patr\u00f3n de wordpress.org.<\/figcaption><\/figure>\n<p><strong>Notas:<\/strong><\/p>\n<ul>\n<li>Los patrones extra\u00eddos del directorio de<strong> Patrones<\/strong> no se mostrar\u00e1n en la secci\u00f3n de <strong>Patrones<\/strong> del editor del sitio. Estos patrones s\u00f3lo estar\u00e1n disponibles a trav\u00e9s del <strong>Insertador<\/strong>.<\/li>\n<li>En este ejemplo, incluimos la propiedad de nivel superior <code>patterns<\/code> (frente a <code>settings<\/code> y <code>styles<\/code>, que omitimos en ejemplos anteriores por brevedad).<\/li>\n<\/ul>\n<h3>2. A\u00f1adir una fuente personalizada<\/h3>\n<p>Descargamos dos archivos de fuentes (<code>Roboto-Regular.ttf<\/code> y <code>Roboto-Bold.ttf<\/code>) de la biblioteca <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> y los subimos al subdirectorio <code>assets\/fonts\/<\/code> de nuestro tema.<\/p>\n<p>El siguiente c\u00f3digo registra ambas fuentes, haci\u00e9ndolas disponibles en todo el sitio:<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"typography\": {\n       \"fontFamilies\": [\n           {\n               \"fontFamily\": \"Roboto\",\n               \"name\": \"Roboto\",\n               \"slug\": \"roboto\",\n               \"fontFace\": [\n                   {\n                       \"fontFamily\": \"Roboto Regular\",\n                       \"fontWeight\": \"400\",\n                       \"fontStyle\": \"normal\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Regular.ttf\"\n                       ]\n                   },\n                   {\n                       \"fontFamily\": \"Roboto Bold\",\n                       \"fontWeight\": \"700\",\n                       \"fontStyle\": \"bold\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Bold.ttf\"\n                       ]      \n                   }  \n               ]\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/google-font.png\" alt=\"Muestra la inclusi\u00f3n de una fuente de Google.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Muestra la inclusi\u00f3n de una fuente de Google.<\/figcaption><\/figure>\n<h3>3. Configurar tu paleta de colores<\/h3>\n<p>Si quieres restringir a tus usuarios a una paleta de colores espec\u00edfica, puedes configurarla as\u00ed. (Los degradados y duotonos tambi\u00e9n pueden configurarse seg\u00fan tus especificaciones).<\/p>\n<p><strong>Ejemplo:<\/strong><\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"color\": {\n       \"custom\": false,\n       \"defaultPalette\": false,\n       \"palette\": [\n           {\n               \"slug\": \"primary\",\n               \"color\": \"#1e8cbe\",\n               \"name\": \"Primary\"\n           },\n           {\n               \"slug\": \"secondary\",\n               \"color\": \"#21759b\",\n               \"name\": \"Secondary\"\n           },\n           {\n               \"slug\": \"tertiary\",\n               \"color\": \"#\",\n               \"name\": \"Tertiary\"\n           },\n           {\n               \"slug\": \"accent\",\n               \"color\": \"#464646\",\n               \"name\": \"Accent\"\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/custom-theme-colors.png\" alt=\"Colores de temas personalizados mostrados\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Colores de temas personalizados mostrados<\/figcaption><\/figure>\n<p>\u00bfReconoces estos cuatro colores? Forman parte de la historia de colores de WordPress.<\/p>\n<h2>Resumen<\/h2>\n<p>Este art\u00edculo destaca el papel fundamental de <code>theme.json<\/code> en el desarrollo moderno de temas para WordPress. Si dominas <code>theme.json<\/code>, podr\u00e1s personalizar completamente el dise\u00f1o visual y la interfaz de usuario de tu tema sin necesidad de complejas modificaciones <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-php\/\">PHP<\/a> o CSS.<\/p>\n<p>Comprender c\u00f3mo utilizar eficazmente propiedades como <code>appearanceTools<\/code> proporciona un mayor control y eficacia a la hora de crear o refinar temas de WordPress, lo que convierte a este archivo en una herramienta esencial para los desarrolladores que deseen crear temas flexibles y f\u00e1ciles de usar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprender la estructura y las propiedades del archivo theme.json es fundamental para el desarrollo de temas de bloques. Este archivo sirve como eje principal de configuraci\u00f3n &#8230;<\/p>\n","protected":false},"author":313,"featured_media":77215,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345,1355],"class_list":["post-77214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-wordpress","topic-temas-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>Trabajar con propiedades y pares clave-valor en theme.json<\/title>\n<meta name=\"description\" content=\"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trabajar con propiedades y pares clave-valor en theme.json\" \/>\n<meta property=\"og:description\" content=\"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\" \/>\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-11-18T09:01:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T13:26:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png\" \/>\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=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Trabajar con propiedades y pares clave-valor en theme.json\",\"datePublished\":\"2024-11-18T09:01:21+00:00\",\"dateModified\":\"2024-11-20T13:26:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\"},\"wordCount\":4255,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\",\"name\":\"Trabajar con propiedades y pares clave-valor en theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"datePublished\":\"2024-11-18T09:01:21+00:00\",\"dateModified\":\"2024-11-20T13:26:20+00:00\",\"description\":\"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Trabajar con propiedades y pares clave-valor en theme.json\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Trabajar con propiedades y pares clave-valor en theme.json","description":"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.","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:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/","og_locale":"es_ES","og_type":"article","og_title":"Trabajar con propiedades y pares clave-valor en theme.json","og_description":"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.","og_url":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-11-18T09:01:21+00:00","article_modified_time":"2024-11-20T13:26:20+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Bud Kraus","Tiempo de lectura":"24 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Trabajar con propiedades y pares clave-valor en theme.json","datePublished":"2024-11-18T09:01:21+00:00","dateModified":"2024-11-20T13:26:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/"},"wordCount":4255,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/","url":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/","name":"Trabajar con propiedades y pares clave-valor en theme.json","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","datePublished":"2024-11-18T09:01:21+00:00","dateModified":"2024-11-20T13:26:20+00:00","description":"Aprende a trabajar con propiedades y pares clave-valor en theme.json para personalizar la configuraci\u00f3n y los estilos de los temas en bloque de WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/theme-json-propiedades-pares-clave-valor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinqsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Trabajar con propiedades y pares clave-valor en theme.json"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinqsta.com\/es\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/77214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=77214"}],"version-history":[{"count":11,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/77214\/revisions"}],"predecessor-version":[{"id":77269,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/77214\/revisions\/77269"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77214\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/77215"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=77214"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=77214"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=77214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}