{"id":76681,"date":"2024-10-01T16:25:06","date_gmt":"2024-10-01T14:25:06","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=76681&#038;preview=true&#038;preview_id=76681"},"modified":"2024-10-02T13:18:41","modified_gmt":"2024-10-02T11:18:41","slug":"propiedades-personalizadas-css-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/","title":{"rendered":"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress"},"content":{"rendered":"<p>Los desarrolladores de temas de WordPress pueden utilizar un archivo <code>theme.json<\/code> para agilizar un proceso que sol\u00eda depender en gran medida de PHP. Sin embargo, puedes seguir utilizando tus conocimientos de HTML, JavaScript y PHP para crear tus temas, y el CSS no es una excepci\u00f3n. De hecho, puedes utilizar propiedades CSS personalizadas dentro de <code>theme.json<\/code>. Esto puede mejorar la fase de dise\u00f1o y ofrecer una mayor flexibilidad.<\/p>\n<p>En esta gu\u00eda, vamos a tratar de lleno las propiedades personalizadas CSS para explorar c\u00f3mo funcionan junto con WordPress y <code>theme.json<\/code>. Pero antes de llegar a eso, resumamos theme.json, la edici\u00f3n completa del sitio (FSE) y c\u00f3mo encaja CSS en este nuevo enfoque de dise\u00f1o.<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>C\u00f3mo funciona theme.json con WordPress<\/h2>\n<p>El archivo <code>theme.json<\/code> apareci\u00f3 por primera vez en <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a>. Es una forma revolucionaria de dise\u00f1ar temas de WordPress, utilizando sintaxis JSON para <a href=\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\">construir un archivo de configuraci\u00f3n<\/a>. WordPress lo lee y aplica los resultados sin necesidad de mucho <a href=\"https:\/\/kinsta.com\/es\/blog\/php-tutoriales\/\">PHP<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a>.<\/p>\n<figure id=\"attachment_184933\" aria-describedby=\"caption-attachment-184933\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184933 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json.png\" alt=\"Una ventana del editor de c\u00f3digo que muestra el contenido del archivo theme.json de un tema de WordPress. La estructura JSON define los ajustes del tema, incluidas las versiones del esquema, los patrones y los ajustes de color. En el fondo, se ve un paisaje con monta\u00f1as, bosques y campos de cultivo en terrazas.\" width=\"1200\" height=\"705\"><figcaption id=\"caption-attachment-184933\" class=\"wp-caption-text\">Un archivo <strong>theme.json<\/strong> dentro de un editor de c\u00f3digo.<\/figcaption><\/figure>\n<p>Los <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-edicion-sitio-completa\/\">ajustes y estilos globales<\/a> de FSE controlan varios aspectos visuales de tu tema. Pueden incluir las t\u00edpicas paletas de colores y tipograf\u00eda, pero tambi\u00e9n opciones de dise\u00f1o y estilos individuales de bloques y elementos.<\/p>\n<p>Aunque FSE es intuitivo, potente, adaptable y f\u00e1cil de usar, <code>theme.json<\/code> puede ayudar a reducir la distancia entre las funciones del usuario final y del desarrollador. Casi todas las opciones que te ofrece <code>theme.json<\/code> son tambi\u00e9n visibles en el Editor de Sitios.<\/p>\n<figure id=\"attachment_184932\" aria-describedby=\"caption-attachment-184932\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184932 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/site-editor-interface.png\" alt=\"La interfaz del Editor de Sitios de WordPress, que muestra la p\u00e1gina de inicio de un sitio web en la parte derecha de la pantalla, mientras que la barra lateral negra de la izquierda ofrece opciones de navegaci\u00f3n, estilos, p\u00e1ginas, plantillas y patrones.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184932\" class=\"wp-caption-text\">La interfaz principal del Editor de Sitios dentro de WordPress.<\/figcaption><\/figure>\n<p>Utilizar <code>theme.json<\/code> ofrece muchas ventajas a la hora de <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\">crear temas para WordPress<\/a>. Esto se debe a varias razones:<\/p>\n<ul>\n<li>Tienes una ubicaci\u00f3n central para la configuraci\u00f3n del dise\u00f1o de tu tema, lo que facilita su gesti\u00f3n y actualizaci\u00f3n.<\/li>\n<li>Hay menos ofuscaci\u00f3n entre la experiencia del front-end, el Editor de Sitios, y la base de c\u00f3digo de un tema.<\/li>\n<li>Utilizar <code>theme.json<\/code> ofrece compatibilidad con el futuro desarrollo y dise\u00f1o de WordPress.<\/li>\n<li>La funcionalidad integrada de WordPress significa que reduces la necesidad de que el usuario aplique CSS personalizado.<\/li>\n<\/ul>\n<p>Veamos c\u00f3mo se relaciona <code>theme.json<\/code> con los ajustes y estilos globales de FSE.<\/p>\n<h3>Introducci\u00f3n a los Ajustes Globales y Estilos de FSE<\/h3>\n<p>FSE representa una nueva era en el desarrollo de temas para WordPress, y la Configuraci\u00f3n Global y los Estilos ocupan un lugar destacado. Esto permite a los usuarios personalizar casi todos los aspectos de la apariencia de un sitio a trav\u00e9s de la funcionalidad del Editor de Sitios.<\/p>\n<figure id=\"attachment_184929\" aria-describedby=\"caption-attachment-184929\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184929 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/global-settings-styles.png\" alt=\"El Editor de Sitios de WordPress muestra los campos de entrada del panel Estilos en la barra lateral derecha. Te permite realizar ajustes en la configuraci\u00f3n de la tipograf\u00eda. La parte izquierda muestra una vista parcial de una p\u00e1gina web con un tema azul.\" width=\"1200\" height=\"863\"><figcaption id=\"caption-attachment-184929\" class=\"wp-caption-text\">El panel Estilos dentro del Editor de Sitios de WordPress.<\/figcaption><\/figure>\n<p>Aqu\u00ed puedes ajustar aspectos del dise\u00f1o de tu tema con opciones que antes requer\u00edan CSS o un <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">plugin constructor de p\u00e1ginas<\/a> de terceros. Modificar los m\u00e1rgenes, el padding y los bordes son algunos ejemplos, pero hay muchos m\u00e1s.<\/p>\n<figure id=\"attachment_184930\" aria-describedby=\"caption-attachment-184930\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184930 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/paddings-margins.png\" alt=\"El Editor de Sitios de WordPress, mostrando el panel de personalizaci\u00f3n Dise\u00f1o. Te permite personalizar las dimensiones del contenido, el padding y el espaciado entre bloques. La parte izquierda de la pantalla muestra una vista parcial de una p\u00e1gina web con un tema azul.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-184930\" class=\"wp-caption-text\">Trabajando con elementos CSS t\u00edpicos como el padding y los m\u00e1rgenes dentro del Editor de Sitios.<\/figcaption><\/figure>\n<p>Incluso puedes activar o desactivar muchas de estas funciones en <code>theme.json<\/code> (o en el propio archivo <code>block.json<\/code> de un bloque). Esto permite personalizar la interfaz de usuario junto con el dise\u00f1o general del sitio.<\/p>\n<p>Sin embargo, las opciones de las que dispones \u2014 aunque amplias \u2014 pueden no cubrir todas las necesidades. Esto es especialmente cierto si creas un tema desde cero. Las propiedades personalizadas CSS pueden ayudarte a resolver esta tarea.<\/p>\n<h2>Comprender las propiedades personalizadas CSS<\/h2>\n<p>En PHP, JavaScript y casi todos los lenguajes de programaci\u00f3n, las variables guardan los valores de diversos elementos de tu c\u00f3digo. Por ejemplo, puedes almacenar valores como nombres, fechas y n\u00fameros y utilizarlos en todo tu programa.<\/p>\n<p>Las variables CSS3 \u2014 o propiedades personalizadas CSS, como las llamaremos a lo largo de este post \u2014 son <a href=\"https:\/\/caniuse.com\/?search=css%20variables\" target=\"_blank\" rel=\"noopener noreferrer\">compatibles con la mayor\u00eda de los navegadores actuales<\/a>. Internet Explorer no las soporta, ni tampoco Opera Mini. Sin embargo, <a href=\"https:\/\/kinsta.com\/es\/blog\/microsoft-edge-vs-chrome\/\">los m\u00e1s importantes s\u00ed las soportan.<\/a><\/p>\n<figure id=\"attachment_184927\" aria-describedby=\"caption-attachment-184927\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184927 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/can-i-use.png\" alt=\"Un gr\u00e1fico de compatibilidad de las Variables CSS (Propiedades Personalizadas) en diferentes navegadores web. El gr\u00e1fico muestra un elevado uso global del 97,05 por ciento e indica una amplia compatibilidad en los principales navegadores de escritorio y m\u00f3viles.\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-184927\" class=\"wp-caption-text\">El sitio web Can I Use muestra la compatibilidad actual con las propiedades personalizadas CSS.<\/figcaption><\/figure>\n<p>Las propiedades personalizadas CSS te permiten almacenar valores para reutilizarlos en toda tu hoja de estilos. Es una potente forma de crear un CSS m\u00e1s din\u00e1mico y flexible. Puedes actualizar varias reglas de estilo cambiando un \u00fanico valor.<\/p>\n<p>El concepto de variables CSS no es totalmente nuevo. Preprocesadores como <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> utilizan una funcionalidad similar. Por ejemplo, toma el siguiente Sass:<\/p>\n<pre><code class=\"language-css\">$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color<\/code><\/pre>\n<p>Esto se procesa en el t\u00edpico CSS:<\/p>\n<pre><code class=\"language-css\">body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}<\/code><\/pre>\n<p>Sin embargo, las propiedades personalizadas CSS lo llevan directamente al navegador. Esto ofrece algunas ventajas:<\/p>\n<ul>\n<li><strong>Actualizaciones din\u00e1micas.<\/strong> A diferencia de la mayor\u00eda de las variables de preprocesador, puedes actualizar las propiedades personalizadas CSS \u00absobre la marcha\u00bb utilizando JavaScript.<\/li>\n<li><strong>Comportamiento en cascada.<\/strong> Las propiedades personalizadas seguir\u00e1n la cascada CSS, lo que te proporciona una mayor flexibilidad y un estilo m\u00e1s consciente del contexto.<\/li>\n<\/ul>\n<p>Las propiedades personalizadas tambi\u00e9n ser\u00e1n m\u00e1s eficaces al reducir la redundancia de c\u00f3digo. Hojas de estilo m\u00e1s peque\u00f1as significan tiempos de carga m\u00e1s r\u00e1pidos.<\/p>\n<h3>La sintaxis de las propiedades personalizadas CSS<\/h3>\n<p>Como ocurre con las variables t\u00edpicas del preprocesador, la sintaxis de las propiedades personalizadas CSS es sencilla. Utiliza guiones dobles en lugar de signos de d\u00f3lar para especificar una propiedad:<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary-color: #007bff;\n}<\/code><\/pre>\n<p>A partir de ah\u00ed, utilizas la funci\u00f3n <code>var()<\/code> para asignar esas propiedades a los elementos:<\/p>\n<pre><code class=\"language-css\">.button {\n  background-color: var(--primary-color);\n}<\/code><\/pre>\n<p>Ten en cuenta que tambi\u00e9n puedes asignar propiedades personalizadas utilizando la propiedad <code>@<\/code>. Sin embargo, como comprender\u00e1s en breve, WordPress simplifica todo este proceso.<\/p>\n<h3>D\u00f3nde puedes utilizar las propiedades personalizadas CSS<\/h3>\n<p>La versatilidad est\u00e1 a la orden del d\u00eda cuando se trata de propiedades personalizadas CSS. Con WordPress y <code>theme.json<\/code> tienes varias formas de utilizarlas:<\/p>\n<ul>\n<li><strong>Preconfiguraciones:<\/strong> Puedes definir preajustes de color, fuente e interlineado.<\/li>\n<li><strong>Estilos de bloque:<\/strong> Los <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">bloques individuales<\/a> pueden utilizar propiedades personalizadas para conseguir un estilo coherente.<\/li>\n<li><strong>Estilos globales:<\/strong> Las propiedades personalizadas tienen un valor incalculable para el dise\u00f1o de todo el sitio.<\/li>\n<\/ul>\n<p>Puedes crear propiedades completamente personalizadas para cualquier prop\u00f3sito que desees. Veamos un ejemplo pr\u00e1ctico de c\u00f3mo puedes utilizar propiedades personalizadas en tu archivo <code>theme.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"line-height\": {\n        \"body\": 1.5,\n        \"heading\": 1.2\n      }\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"lineHeight\": \"var(--wp--custom--line-height--body)\"\n    },\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"lineHeight\": \"var(--wp--custom--line-height--heading)\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Aqu\u00ed, definimos un color preestablecido y utilizamos la propiedad <code>custom<\/code> para definir valores <code>line-height<\/code> para los encabezados y el cuerpo de las p\u00e1ginas. WordPress generar\u00e1 propiedades CSS para los elementos que definas utilizando <code>custom<\/code>. M\u00e1s adelante, podemos asignar estas propiedades personalizadas a varios estilos, configuraciones, bloques y m\u00e1s.<\/p>\n<h2>Las ventajas de utilizar propiedades CSS personalizadas<\/h2>\n<p>Puede que ya tengas ideas sobre c\u00f3mo las propiedades personalizadas CSS pueden ayudarte a la hora de desarrollar temas. Aun as\u00ed, hay muchas ventajas que debes tener en cuenta.<\/p>\n<p>Ya hemos hablado de modularidad y reutilizaci\u00f3n. Todos los valores comunes que definas como propiedades personalizadas promover\u00e1n la coherencia y reducir\u00e1n la redundancia. Esa redundancia se traducir\u00e1 en un mejor <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-css\/\">rendimiento potencial<\/a> para tu tema.<\/p>\n<p>Para el usuario final, las propiedades personalizadas ofrecen varias ventajas:<\/p>\n<ul>\n<li><strong>Personalizaci\u00f3n simplificada.<\/strong> Los usuarios y propietarios de sitios pueden <a href=\"https:\/\/kinsta.com\/es\/blog\/como-personalizar-tema-wordpress\/\">personalizar un tema<\/a> sin necesidad de tener conocimientos complejos de CSS. Una vez que expones las variables a trav\u00e9s de <code>theme.json<\/code>, los usuarios pueden acceder a la configuraci\u00f3n a trav\u00e9s del Editor de Sitios.<\/li>\n<li><strong>Mejor compatibilidad con FSE.<\/strong> Las propiedades personalizadas se alinean con los principios de FSE, permiti\u00e9ndote crear dise\u00f1os de temas m\u00e1s flexibles y din\u00e1micos.<\/li>\n<li><strong>Mantenimiento y actualizaciones m\u00e1s f\u00e1ciles.<\/strong> Si necesitas actualizar valores comunes en todo tu tema, una propiedad personalizada significa cambiarlo en un solo lugar. Agiliza tu mantenimiento y hace que las actualizaciones y retoques sean m\u00e1s manejables.<\/li>\n<\/ul>\n<p>En general, las propiedades personalizadas pueden mejorar tu flujo de trabajo de desarrollo de temas. Determinarlas tambi\u00e9n es m\u00e1s sencillo que utilizar las t\u00edpicas variables CSS.<\/p>\n<h2>C\u00f3mo definir propiedades CSS personalizadas en theme.json<\/h2>\n<p>Entremos en los aspectos pr\u00e1cticos de la definici\u00f3n y el uso de propiedades CSS personalizadas en <code>theme.json<\/code>. El primer paso es aprender a escribirlas.<\/p>\n<h3>Sintaxis y convenciones de nomenclatura<\/h3>\n<p>WordPress ofrece la propiedad <code>custom<\/code> para ayudar con las definiciones. Es algo m\u00e1s f\u00e1cil de usar que la propiedad <code>@<\/code> o las definiciones dentro de pseudoclases, y utiliza el formato est\u00e1ndar clave\/valor:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"custom\": {\n      \"property-name\": \"value\"\n    }\n  }\n}<\/code><\/pre>\n<p>En segundo plano, WordPress procesar\u00e1 esta definici\u00f3n y generar\u00e1 una propiedad personalizada CSS utilizando guiones dobles:<\/p>\n<pre><code class=\"language-css\">--wp--custom--&lt;custom-element&gt;<\/code><\/pre>\n<p><code>--wp--custom--<\/code> siempre formar\u00e1 parte de tu propiedad CSS, y no utilizar\u00e1 may\u00fasculas y min\u00fasculas. Por ejemplo, si defines <code>lineHeight<\/code> como propiedad personalizada, WordPress la convertir\u00e1 en \u00abkebab case:\u00bb<\/p>\n<pre><code class=\"language-css\">--wp--custom--line-height<\/code><\/pre>\n<p>En lo que respecta a las convenciones de nomenclatura, puedes utilizar camel case si lo deseas, aunque te aconsejamos utilizar kebab case para los nombres de tus propiedades personalizadas. Esto es coherente con las convenciones de nomenclatura de WordPress, mejora la legibilidad y reduce los errores de procesamiento.<\/p>\n<p><strong>Nota<\/strong>: Las propiedades personalizadas CSS utilizan guiones dobles porque el <a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grupo de Trabajo CSS del W3C<\/a> tambi\u00e9n quiere afomentar el uso de Sass (que utiliza signos de d\u00f3lar para definir las propiedades). De este modo, tienes la opci\u00f3n de utilizar ambos para mejorar tus dise\u00f1os.<\/p>\n<p>WordPress ya define algunas propiedades personalizadas, o al menos, los temas tienen la opci\u00f3n de hacerlo. Esto significa que ver\u00e1s variables CSS dentro de <code>theme.json<\/code> sin una declaraci\u00f3n expl\u00edcita:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"var(--wp--preset--color--primary)\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"spacing\": {\n        \"small\": \"1rem\",\n        \"medium\": \"2rem\",\n        \"large\": \"3rem\"\n      }\n    }\n  },\n  \"styles\": {\n    \"spacing\": {\n      \"blockGap\": \"var(--wp--custom--spacing--medium)\"\n    }\n  }\n}<\/code><\/pre>\n<p>En este ejemplo, definimos un color primario utilizando un color preestablecido existente. A continuaci\u00f3n, definimos algunas propiedades de espaciado personalizadas y las establecemos utilizando <code>var()<\/code>.<\/p>\n<p>Esto significa que no necesitamos codificar valores en <code>theme.json<\/code>. Es m\u00e1s, los usuarios pueden actualizar estos valores dentro del Editor de Sitios y hacer que se propaguen por todo el tema.<\/p>\n<h3>Preconfiguraciones vs a propiedades personalizadas<\/h3>\n<p>Por supuesto, <code>theme.json<\/code> tambi\u00e9n te permite definir preajustes para colores, tama\u00f1os de fuente y otros elementos comunes del tema. Por otro lado, puedes utilizar propiedades personalizadas para cualquier valor que quieras reutilizar en todo el tema.<\/p>\n<p>La mayor diferencia est\u00e1 en las convenciones de nomenclatura y la accesibilidad. Los usuarios no podr\u00e1n acceder a las propiedades personalizadas en el Editor de Sitios sin un trabajo adicional por tu parte. Con los preajustes, WordPress generar\u00e1 CSS con un aspecto similar a c\u00f3mo procesa las propiedades personalizadas:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"fontFamily\": {\n        \"base\": \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n        \"headings\": \"'Helvetica Neue', Helvetica, Arial, sans-serif\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Una vez que WordPress procese esto, podr\u00e1s ver las diferencias inherentes:<\/p>\n<pre><code class=\"language-css\">--wp--preset--primary: #007bff;\n--wp--custom--font-family--base: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\";\n--wp--custom--font-family--headings: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";<\/code><\/pre>\n<p>Observa que el anidamiento posterior de propiedades utilizar\u00e1 guiones dobles, incluso despu\u00e9s de convertir camel case a kebab case.<\/p>\n<h3>CSS global y espec\u00edfico de Bloque versus propiedades personalizadas CSS<\/h3>\n<p>Con el WordPress cl\u00e1sico, utilizar\u00edas <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">CSS adicional y personalizado<\/a> en el front end para dise\u00f1ar elementos dentro de tu tema. Este sigue siendo el caso con <code>theme.json<\/code> y FSE, aunque el enfoque es diferente al de las propiedades personalizadas CSS.<\/p>\n<p>Si visitas el Editor de Sitios y te diriges a la pantalla <strong>Estilos<\/strong>, ver\u00e1s la secci\u00f3n <strong>CSS Adicional<\/strong>. Act\u00faa de forma muy parecida al panel CSS personalizado de las instalaciones cl\u00e1sicas de WordPress:<\/p>\n<figure id=\"attachment_184926\" aria-describedby=\"caption-attachment-184926\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184926 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/additional-css.png\" alt=\"Una vista parcial del Editor de Sitios de WordPress que muestra enlaces a los ajustes de Bloques y CSS Adicional. La parte izquierda de la pantalla muestra una vista parcial de un edificio sobre un cielo azul.\" width=\"1200\" height=\"587\"><figcaption id=\"caption-attachment-184926\" class=\"wp-caption-text\">La secci\u00f3n CSS adicional dentro del Editor de Sitios de WordPress.<\/figcaption><\/figure>\n<p>Esto representa una forma de a\u00f1adir personalizaci\u00f3n CSS global a un tema. Sin embargo, en realidad es una forma de dar a los usuarios la posibilidad de a\u00f1adir CSS. Tambi\u00e9n puedes utilizarlo para realizar peque\u00f1os cambios sin importancia que no justifiquen una hoja de estilos completa.<\/p>\n<p>Dentro de <code>theme.json<\/code>, utilizas la propiedad <code>css<\/code> para definir cualquier CSS adicional que quieras a\u00f1adir:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n    \"styles\": {\n      \"css\": \"margin: 0\"\n    }\n}<\/code><\/pre>\n<p>Ten en cuenta que no necesitas usar punto y coma para terminar las declaraciones CSS. Tambi\u00e9n puedes definir CSS personalizado para los Bloques:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/post-title\": {\n        \"css\": \"letter-spacing: 1px;\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Cada vez que establezcas CSS de este tipo en <code>theme.json<\/code>, lo ver\u00e1s en cualquier campo <strong>CSS adicional<\/strong> del Editor de Sitios. Sin embargo, recuerda que nada de lo que declares utilizando <code>css<\/code> es una propiedad CSS personalizada.<\/p>\n<h3>Uso del selector ampersand (&#038;)<\/h3>\n<p>Al igual que Sass, WordPress tambi\u00e9n soporta el selector ampersand, con algunas diferencias. En este caso, es una excelente forma de apuntar a elementos y propiedades anidados. Esto podr\u00eda ser relevante si decides declarar propiedades CSS personalizadas para Bloques individuales.<\/p>\n<p>Por ejemplo, piensa en lo siguiente:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/table\": {\n      \"css\": \"color:#333 & th{ background:#f5f5f5; }\"\n    }\n\u2026<\/code><\/pre>\n<p>Esto define un color de texto y un color de fondo para el elemento de cabecera de la tabla. Una vez que WordPress lo procesa, obtienes un CSS limpio y sencillo:<\/p>\n<pre><code class=\"language-css\">.wp-block-table &gt; table {\n  color: #333;\n}\n\n.wp-block-table &gt; table th {\n  background: #f5f5f5;\n}<\/code><\/pre>\n<p>Los selectores ampersand son excelentes si deseas ampliar el CSS al que te diriges. Una forma comprensible de pensar en el selector es que ayuda a separar tus elementos CSS. Por ejemplo, lo siguiente:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/avatar\": {\n        \"css\": \"& img {border-radius: 999px}\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Esto a\u00f1ade un radio de borde a un avatar y genera el CSS como cabr\u00eda esperar:<\/p>\n<pre><code class=\"language-css\">.wp-block-image img {\n  border-radius: 999px;\n}<\/code><\/pre>\n<p>Sin embargo, sin el ampersand, WordPress unir\u00eda tus declaraciones:<\/p>\n<pre><code class=\"language-css\">\u2026\n\u200b\u200b.wp-block-imageimg\n\u2026<\/code><\/pre>\n<p>Utilizar el selector ampersand para tus propiedades personalizadas CSS ser\u00e1 algo que hagas de forma habitual.<\/p>\n<h2>El papel de Kinsta en el soporte al desarrollo moderno de WordPress<\/h2>\n<p>Tu elecci\u00f3n de alojamiento es tan importante como cualquier lenguaje de programaci\u00f3n, preprocesador u otro elemento t\u00e9cnico. Sin un proveedor de alojamiento de calidad a tu lado, no podr\u00e1s beneficiarte del rendimiento y el conjunto de herramientas de <code>theme.json<\/code> o FSE.<\/p>\n<p>Kinsta puede ser el centro de todo tu flujo de trabajo, gracias a nuestras herramientas de desarrollo. Puedes empezar con <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a>, nuestro entorno de desarrollo local que utiliza <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-docker\/\">contenedores Docker<\/a> para aislar tu instalaci\u00f3n de WordPress:<\/p>\n<figure id=\"attachment_184928\" aria-describedby=\"caption-attachment-184928\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184928 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface-1.png\" alt=\"La interfaz de DevKinsta muestra los ajustes de configuraci\u00f3n de la base de datos y de WordPress. Muestra detalles de la conexi\u00f3n, como el host, el puerto, el nombre de la base de datos y la versi\u00f3n de WordPress. La interfaz tambi\u00e9n muestra opciones para activar la depuraci\u00f3n y las actualizaciones autom\u00e1ticas de WordPress.\" width=\"1200\" height=\"596\"><figcaption id=\"caption-attachment-184928\" class=\"wp-caption-text\">La interfaz principal de DevKinsta.<\/figcaption><\/figure>\n<p>Una funcionalidad \u00fatil es la capacidad de DevKinsta para enviar y recibir datos entre tu m\u00e1quina local y tus <a href=\"https:\/\/kinsta.com\/es\/blog\/entornos-staging-de-kinsta\/\">entornos staging de Kinsta<\/a>:<\/p>\n<figure id=\"attachment_184931\" aria-describedby=\"caption-attachment-184931\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184931 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/push-pull.png\" alt=\"Una vista parcial de la interfaz de DevKinsta que muestra la informaci\u00f3n del sitio y las opciones de control. La interfaz muestra botones para abrir el sitio, sincronizar, acceder al gestor de base de datos y al admin de WordPress. Un men\u00fa desplegable muestra opciones para enviar o recibir informaci\u00f3n de Kinsta. El tipo de sitio aparece como WordPress, con informaci\u00f3n visible aunque parcial sobre el host.\" width=\"1200\" height=\"354\"><figcaption id=\"caption-attachment-184931\" class=\"wp-caption-text\">Las opciones para enviar o recibir datos de Kinsta dentro de DevKinsta.<\/figcaption><\/figure>\n<p>Esto te permite probar tus temas en un entorno similar al de producci\u00f3n antes de empezar a distribuirlos. Cuando trabajes con propiedades CSS personalizadas, puedes asegurarte de que funcionan en diferentes contextos. <span style=\"margin: 0px;padding: 0px\">La <a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API de Kinsta<\/a> puede ser compatible con tu <a href=\"https:\/\/kinsta.com\/es\/blog\/como-configurar-pipeline-ci-cd\/\">pipeline CI\/CD<\/a> cuando est\u00e9s listo para ponerte en marcha<\/span>.<\/p>\n<p>Otros aspectos de la arquitectura de Kinsta te ayudar\u00e1n en toda tu configuraci\u00f3n de desarrollo. Por ejemplo, Kinsta es compatible con Git, lo que facilita el control de versiones de los archivos de tu tema, incluyendo <code>theme.json<\/code>. Para iterar propiedades personalizadas, o simplemente experimentar con diferentes configuraciones, deber\u00e1s saber que tienes una opci\u00f3n de retroceso.<\/p>\n<p>Por \u00faltimo, si decides utilizar tu tema en un servidor Kinsta, nuestro <a href=\"https:\/\/kinsta.com\/es\/blog\/edge-caching\/\">Edge Caching<\/a> aumenta el rendimiento de <code>theme.json<\/code> hasta en <a href=\"https:\/\/kinsta.com\/es\/edge-caching\/\">un 80 por ciento<\/a>. Tener un sitio web que funcione r\u00e1pido, independientemente del navegador del usuario, garantizar\u00e1 que esas personalizaciones se muestren r\u00e1pidamente.<\/p>\n<h2>Resumen<\/h2>\n<p>Al igual que <code>theme.json<\/code> es un potente archivo de configuraci\u00f3n para crear temas de WordPress flexibles y mantenibles, las propiedades personalizadas CSS son cruciales para el flujo de trabajo. As\u00ed es como construir\u00e1s y declarar\u00e1s CSS para elementos a los que el Editor de Sitios no llega. Tambi\u00e9n ser\u00e1 clave si construyes tus propios Bloques o simplemente quieres desarrollar temas de WordPress \u00fanicos con la m\u00e1xima profundidad de personalizaci\u00f3n. Es m\u00e1s, tambi\u00e9n tienes la opci\u00f3n de compartir ese CSS con los usuarios a trav\u00e9s del Editor de Sitios.<\/p>\n<p>\u00bfLas propiedades CSS personalizadas formar\u00e1n parte de tu flujo de trabajo de desarrollo de temas? Si es as\u00ed, \u00bfc\u00f3mo las utilizar\u00e1s? Comparte tu opini\u00f3n en la secci\u00f3n de comentarios m\u00e1s abajo<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los desarrolladores de temas de WordPress pueden utilizar un archivo theme.json para agilizar un proceso que sol\u00eda depender en gran medida de PHP. Sin embargo, puedes &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76682,"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-76681","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>Desarrollo de propiedades CSS personalizadas con theme.json en WordPress<\/title>\n<meta name=\"description\" content=\"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas 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:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress\" \/>\n<meta property=\"og:description\" content=\"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-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-10-01T14:25:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T11:18:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-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=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress\",\"datePublished\":\"2024-10-01T14:25:06+00:00\",\"dateModified\":\"2024-10-02T11:18:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/\"},\"wordCount\":2615,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/\",\"name\":\"Desarrollo de propiedades CSS personalizadas con theme.json en WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png\",\"datePublished\":\"2024-10-01T14:25:06+00:00\",\"dateModified\":\"2024-10-02T11:18:41+00:00\",\"description\":\"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-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\":\"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress\"}]},{\"@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":"Desarrollo de propiedades CSS personalizadas con theme.json en WordPress","description":"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas 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:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/","og_locale":"es_ES","og_type":"article","og_title":"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress","og_description":"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas de WordPress.","og_url":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-10-01T14:25:06+00:00","article_modified_time":"2024-10-02T11:18:41+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas de WordPress.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress","datePublished":"2024-10-01T14:25:06+00:00","dateModified":"2024-10-02T11:18:41+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/"},"wordCount":2615,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/","url":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/","name":"Desarrollo de propiedades CSS personalizadas con theme.json en WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png","datePublished":"2024-10-01T14:25:06+00:00","dateModified":"2024-10-02T11:18:41+00:00","description":"A continuaci\u00f3n se explica c\u00f3mo desarrollar propiedades CSS personalizadas dentro de theme.json para a\u00f1adir funcionalidades avanzadas a los temas de WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/10\/css-custom-properties-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/propiedades-personalizadas-css-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":"Desarrollar propiedades CSS personalizadas con theme.json para mejorar los temas de WordPress"}]},{"@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\/76681","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=76681"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76681\/revisions"}],"predecessor-version":[{"id":76694,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76681\/revisions\/76694"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76681\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/76682"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=76681"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=76681"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=76681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}