{"id":69876,"date":"2024-10-02T11:26:54","date_gmt":"2024-10-02T14:26:54","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=69876&#038;preview=true&#038;preview_id=69876"},"modified":"2024-10-03T10:18:30","modified_gmt":"2024-10-03T13:18:30","slug":"propriedades-personalizadas-css-theme-json","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/","title":{"rendered":"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress"},"content":{"rendered":"<p>Os desenvolvedores de temas do WordPress podem usar um arquivo <code>theme.json<\/code> para simplificar um processo que costumava depender muito do PHP. No entanto, voc\u00ea ainda pode usar suas habilidades em HTML, JavaScript e PHP para criar seus temas, e o CSS n\u00e3o \u00e9 exce\u00e7\u00e3o. Na verdade, voc\u00ea usa propriedades personalizadas de CSS em <code>theme.json<\/code>. Isso pode aprimorar o est\u00e1gio do design e oferecer maior flexibilidade.<\/p>\n<p>Neste guia, abordamos as propriedades personalizadas do CSS para explorar como elas funcionam com o WordPress e o <code>theme.json<\/code>. Mas, antes disso, vamos resumir o theme.json, a edi\u00e7\u00e3o completa de sites (FSE) e como o CSS se encaixa nessa nova abordagem de design.<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>Como o theme.json funciona com o WordPress<\/h2>\n<p>O arquivo <code>theme.json<\/code> apareceu pela primeira vez no <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a>. \u00c9 uma maneira revolucion\u00e1ria de projetar temas WordPress, usando a sintaxe JSON para <a href=\"https:\/\/kinqsta.com\/pt\/blog\/theme-json\/\">criar um arquivo de configura\u00e7\u00e3o<\/a>. O WordPress l\u00ea esse arquivo e aplica os resultados sem a necessidade de muito <a href=\"https:\/\/kinqsta.com\/pt\/blog\/tutoriais-de-php\/\">PHP<\/a>, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> ou <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/theme-json.png\" alt=\"Uma janela de edi\u00e7\u00e3o de c\u00f3digo mostrando o conte\u00fado de um arquivo theme.json para um tema WordPress. A estrutura JSON define as configura\u00e7\u00f5es do tema, incluindo vers\u00f5es de schema, padr\u00f5es e configura\u00e7\u00f5es de cores. Ao fundo, \u00e9 vis\u00edvel uma paisagem c\u00eanica com montanhas, florestas e campos em terra\u00e7os.\" width=\"1200\" height=\"705\"><figcaption id=\"caption-attachment-184933\" class=\"wp-caption-text\">Um arquivo <strong>theme.json<\/strong> em um editor de c\u00f3digo.<\/figcaption><\/figure>\n<p>As <a href=\"https:\/\/kinqsta.com\/pt\/blog\/edicao-completa-sites-wordpress\/\">configura\u00e7\u00f5es e estilos globais<\/a> do FSE controlam v\u00e1rios aspectos visuais do seu tema. Podem incluir paletas de cores e tipografia t\u00edpicas, mas tamb\u00e9m op\u00e7\u00f5es de layout e estilos individuais de Blocos e elementos.<\/p>\n<p>Embora o FSE seja intuitivo, poderoso, adapt\u00e1vel e f\u00e1cil de usar, o <code>theme.json<\/code> pode ajudar a preencher a lacuna entre as fun\u00e7\u00f5es de usu\u00e1rio final e desenvolvedor. Quase todas as op\u00e7\u00f5es que o <code>theme.json<\/code> oferece a voc\u00ea tamb\u00e9m s\u00e3o vis\u00edveis no Editor de Site.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/site-editor-interface.png\" alt=\"A interface do Editor de Sites do WordPress, mostrando a p\u00e1gina inicial de um site no lado direito da tela, enquanto a barra lateral preta \u00e0 esquerda oferece op\u00e7\u00f5es de navega\u00e7\u00e3o, estilos, p\u00e1ginas, templates e padr\u00f5es.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184932\" class=\"wp-caption-text\">A interface principal do Editor de Sites no WordPress.<\/figcaption><\/figure>\n<p>O uso do <code>theme.json<\/code> oferece muitas vantagens ao <a href=\"https:\/\/kinqsta.com\/pt\/blog\/tema-wordpress-react\/\">criar temas para o WordPress<\/a>. H\u00e1 alguns motivos para isso:<\/p>\n<ul>\n<li>Voc\u00ea tem um local central para a configura\u00e7\u00e3o do design do seu tema, o que facilita o gerenciamento e a atualiza\u00e7\u00e3o.<\/li>\n<li>H\u00e1 menos camadas de abstra\u00e7\u00e3o entre a experi\u00eancia do frontend, o Editor de Sites e a base de c\u00f3digo de um tema.<\/li>\n<li>O uso do <code>theme.json<\/code> oferece compatibilidade com o futuro do desenvolvimento e do design no WordPress.<\/li>\n<li>A funcionalidade integrada do WordPress significa que voc\u00ea reduz a necessidade de o usu\u00e1rio aplicar CSS personalizado.<\/li>\n<\/ul>\n<p>Vamos dar uma olhada em como o <code>theme.json<\/code> se relaciona com as configura\u00e7\u00f5es e estilos globais do FSE.<\/p>\n<h3>Uma introdu\u00e7\u00e3o \u00e0s configura\u00e7\u00f5es e aos estilos globais do FSE<\/h3>\n<p>O FSE representa uma nova era de desenvolvimento de temas WordPress, e as configura\u00e7\u00f5es e os estilos globais est\u00e3o na vanguarda. Isso permite que os usu\u00e1rios personalizem quase todos os aspectos da apar\u00eancia de um site por meio da funcionalidade do Editor de Sites.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/global-settings-styles.png\" alt=\"O Editor de Sites do WordPress mostrando os campos de entrada do painel Estilos na barra lateral direita. Ele permite fazer ajustes nas configura\u00e7\u00f5es de tipografia. O lado esquerdo exibe uma visualiza\u00e7\u00e3o parcial de uma p\u00e1gina web com tema azul.\" width=\"1200\" height=\"863\"><figcaption id=\"caption-attachment-184929\" class=\"wp-caption-text\">O painel Estilos no Editor de Sites do WordPress.<\/figcaption><\/figure>\n<p>Aqui, voc\u00ea pode ajustar aspectos do layout do seu tema com op\u00e7\u00f5es que costumavam exigir CSS ou um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">plugin de construtor de p\u00e1ginas<\/a> de terceiros. A modifica\u00e7\u00e3o de margens, preenchimento e bordas s\u00e3o exemplos, mas h\u00e1 muitos outros.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/paddings-margins.png\" alt=\"O Editor de Sites do WordPress, mostrando o painel de personaliza\u00e7\u00e3o Layout. Ele permite customizar as dimens\u00f5es do conte\u00fado, o padding e o espa\u00e7amento entre blocos. O lado esquerdo da tela exibe uma visualiza\u00e7\u00e3o parcial de uma p\u00e1gina web com tema azul.webpage.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-184930\" class=\"wp-caption-text\">Trabalhando com elementos CSS t\u00edpicos, como preenchimento e margens, no Editor de Sites.<\/figcaption><\/figure>\n<p>Voc\u00ea pode at\u00e9 mesmo ativar ou desativar grande parte dessa funcionalidade em <code>theme.json<\/code> (ou no pr\u00f3prio arquivo <code>block.json<\/code> de um bloco). Isso permite a personaliza\u00e7\u00e3o da interface do usu\u00e1rio juntamente com o design geral do site.<\/p>\n<p>Entretanto, as op\u00e7\u00f5es que voc\u00ea tem \u00e0 disposi\u00e7\u00e3o, embora amplas, podem n\u00e3o atender a todas as necessidades. Isso ser\u00e1 especialmente verdadeiro se voc\u00ea criar um tema do zero. Essa \u00e9 uma tarefa que as propriedades personalizadas do CSS podem ajudar a resolver.<\/p>\n<h2>Entendendo as propriedades personalizadas do CSS<\/h2>\n<p>Em PHP, JavaScript e em quase todas as linguagens de programa\u00e7\u00e3o, as vari\u00e1veis armazenam os valores de v\u00e1rios elementos em seu c\u00f3digo. Por exemplo, voc\u00ea pode armazenar valores como nomes, datas e n\u00fameros e us\u00e1-los em todo o programa.<\/p>\n<p>As vari\u00e1veis CSS3 \u2014 ou propriedades personalizadas de CSS, como as chamamos neste artigo \u2014 s\u00e3o <a href=\"https:\/\/caniuse.com\/?search=css%20variables\" target=\"_blank\" rel=\"noopener noreferrer\">compat\u00edveis com a maioria dos navegadores atuais<\/a>. O Internet Explorer n\u00e3o \u00e9 compat\u00edvel com elas, nem o Opera Mini. Ainda assim, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/microsoft-edge-vs-chrome\/\">todos os principais players s\u00e3o compat\u00edveis<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/can-i-use.png\" alt=\"Um gr\u00e1fico de compatibilidade para Vari\u00e1veis CSS (Propriedades Personalizadas) em diferentes navegadores web. O gr\u00e1fico mostra um alto uso global de 97,05% e indica amplo suporte nos principais navegadores desktop e para dispositivos m\u00f3veis.\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-184927\" class=\"wp-caption-text\">O site Can I Use mostra o suporte atual para propriedades personalizadas de CSS.<\/figcaption><\/figure>\n<p>As propriedades personalizadas do CSS permitem que voc\u00ea armazene valores para reutiliz\u00e1-los em toda a sua folha de estilo. \u00c9 uma maneira eficiente de criar CSS mais din\u00e2mico e flex\u00edvel. Voc\u00ea pode atualizar v\u00e1rias regras de estilo alterando um \u00fanico valor.<\/p>\n<p>O conceito de vari\u00e1veis CSS n\u00e3o \u00e9 totalmente novo. Pr\u00e9-processadores como o <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> usam funcionalidade semelhante. Por exemplo, veja o seguinte c\u00f3digo 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>Isso processa em CSS t\u00edpico:<\/p>\n<pre><code class=\"language-css\">body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}<\/code><\/pre>\n<p>No entanto, as propriedades personalizadas do CSS levam isso diretamente para o navegador. Isso oferece algumas vantagens:<\/p>\n<ul>\n<li><strong>Atualiza\u00e7\u00f5es din\u00e2micas.<\/strong> Ao contr\u00e1rio da maioria das vari\u00e1veis de pr\u00e9-processador, voc\u00ea pode atualizar as propriedades personalizadas do CSS &#8220;em tempo real&#8221; usando JavaScript.<\/li>\n<li><strong>Natureza em cascata.<\/strong> As propriedades personalizadas seguir\u00e3o a cascata do CSS, o que lhe dar\u00e1 maior flexibilidade e um estilo mais coerente com o contexto.<\/li>\n<\/ul>\n<p>As propriedades personalizadas tamb\u00e9m ter\u00e3o melhor desempenho, pois reduzem a redund\u00e2ncia de c\u00f3digo. Folhas de estilo menores significam tempos de carregamento mais r\u00e1pidos.<\/p>\n<h3>A sintaxe das propriedades personalizadas de CSS<\/h3>\n<p>Assim como as vari\u00e1veis t\u00edpicas do pr\u00e9-processador, a sintaxe das propriedades personalizadas do CSS \u00e9 simples. Ela usa h\u00edfens duplos em vez de cifr\u00f5es para especificar uma propriedade:<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary-color: #007bff;\n}<\/code><\/pre>\n<p>A partir da\u00ed, voc\u00ea usa a fun\u00e7\u00e3o <code>var()<\/code> para atribuir essas propriedades aos elementos:<\/p>\n<pre><code class=\"language-css\">.button {\n  background-color: var(--primary-color);\n}<\/code><\/pre>\n<p>Observe que voc\u00ea tamb\u00e9m pode atribuir propriedades personalizadas usando a propriedade <code>@<\/code>. Entretanto, como voc\u00ea entender\u00e1 em breve, o WordPress simplifica todo esse processo.<\/p>\n<h3>Onde voc\u00ea pode usar as propriedades personalizadas de CSS<\/h3>\n<p>Versatilidade \u00e9 a ordem do dia quando se trata de propriedades personalizadas de CSS. Com o WordPress e o <code>theme.json<\/code>, voc\u00ea tem algumas maneiras de us\u00e1-las:<\/p>\n<ul>\n<li><strong>Predefini\u00e7\u00f5es:<\/strong> Voc\u00ea pode definir predefini\u00e7\u00f5es de cor, fonte e espa\u00e7amento.<\/li>\n<li><strong>Estilos de Bloco:<\/strong> <a href=\"https:\/\/kinqsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">Blocos Individuais<\/a> podem usar propriedades personalizadas para manter um estilo consistente.<\/li>\n<li><strong>Estilos globais:<\/strong> As propriedades personalizadas s\u00e3o de grande valia para o design de todo o site.<\/li>\n<\/ul>\n<p>Voc\u00ea pode criar propriedades totalmente personalizadas para qualquer finalidade que desejar. Vejamos um exemplo pr\u00e1tico de como usar as propriedades personalizadas em seu arquivo <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>Aqui, definimos uma predefini\u00e7\u00e3o de cor e usamos a propriedade <code>custom<\/code> para definir os valores de <code>line-height<\/code> para os cabe\u00e7alhos e o corpo das p\u00e1ginas. O WordPress gerar\u00e1 propriedades CSS para os elementos que voc\u00ea definir usando <code>custom<\/code>. Mais adiante, podemos atribuir essas propriedades personalizadas a v\u00e1rios estilos, configura\u00e7\u00f5es, Blocos e outros.<\/p>\n<h2>Os benef\u00edcios de usar as propriedades personalizadas de CSS<\/h2>\n<p>Talvez voc\u00ea j\u00e1 tenha ideias sobre como as propriedades personalizadas de CSS podem ajud\u00e1-lo a desenvolver temas. Mesmo assim, voc\u00ea deve observar muitos benef\u00edcios.<\/p>\n<p>J\u00e1 falamos sobre modularidade e reutiliza\u00e7\u00e3o. Todos os valores comuns que voc\u00ea definir como propriedades personalizadas promover\u00e3o a consist\u00eancia e reduzir\u00e3o a redund\u00e2ncia. Essa redund\u00e2ncia se traduzir\u00e1 em melhor <a href=\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-css\/\">desempenho potencial<\/a> para o seu tema.<\/p>\n<p>Para o usu\u00e1rio final, as propriedades personalizadas oferecem v\u00e1rias vantagens:<\/p>\n<ul>\n<li><strong>Personaliza\u00e7\u00e3o simplificada.<\/strong> Os usu\u00e1rios e propriet\u00e1rios de sites podem <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">personalizar um tema<\/a> sem a necessidade de conhecimentos complexos de CSS. Depois que voc\u00ea exp\u00f5e as vari\u00e1veis por meio de <code>theme.json<\/code>, os usu\u00e1rios podem acessar as configura\u00e7\u00f5es por meio do Editor de Site.<\/li>\n<li><strong>Melhor compatibilidade com o FSE.<\/strong> As propriedades personalizadas se alinham aos princ\u00edpios do FSE, permitindo que voc\u00ea crie designs de temas mais flex\u00edveis e din\u00e2micos.<\/li>\n<li><strong>Manuten\u00e7\u00e3o e atualiza\u00e7\u00f5es mais f\u00e1ceis.<\/strong> Se voc\u00ea precisar atualizar valores comuns em todo o seu tema, uma propriedade personalizada significa alter\u00e1-los em apenas um lugar. Isso simplifica a manuten\u00e7\u00e3o e torna as atualiza\u00e7\u00f5es e os ajustes mais f\u00e1ceis de gerenciar.<\/li>\n<\/ul>\n<p>De modo geral, as propriedades personalizadas podem melhorar o fluxo de trabalho de desenvolvimento do tema. Al\u00e9m disso, determin\u00e1-las \u00e9 mais simples do que usar vari\u00e1veis CSS t\u00edpicas.<\/p>\n<h2>Como definir propriedades personalizadas de CSS em theme.json<\/h2>\n<p>Vamos abordar os aspectos pr\u00e1ticos da defini\u00e7\u00e3o e do uso de propriedades personalizadas de CSS em <code>theme.json<\/code>. A primeira etapa \u00e9 aprender a escrev\u00ea-las.<\/p>\n<h3>Conven\u00e7\u00f5es de sintaxe e nomenclatura<\/h3>\n<p>O WordPress oferece a propriedade <code>custom<\/code> para ajudar nas defini\u00e7\u00f5es. Ela \u00e9 um pouco mais f\u00e1cil de usar que a propriedade <code>@<\/code> ou as defini\u00e7\u00f5es em pseudoclasses, e usa o formato padr\u00e3o de chave\/valor:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"custom\": {\n      \"property-name\": \"value\"\n    }\n  }\n}<\/code><\/pre>\n<p>Nos bastidores, o WordPress processar\u00e1 essa defini\u00e7\u00e3o e gerar\u00e1 uma propriedade personalizada de CSS usando h\u00edfens duplos:<\/p>\n<pre><code class=\"language-css\">--wp--custom--&lt;custom-element&gt;<\/code><\/pre>\n<p><code>--wp--custom--<\/code> sempre far\u00e1 parte de sua propriedade CSS e n\u00e3o usar\u00e1 mai\u00fasculas e min\u00fasculas. Por exemplo, se voc\u00ea definir <code>lineHeight<\/code> como uma propriedade personalizada, o WordPress a transformar\u00e1 em &#8220;kebab case:&#8221;<\/p>\n<pre><code class=\"language-css\">--wp--custom--line-height<\/code><\/pre>\n<p>Quando se trata de conven\u00e7\u00f5es de nomenclatura, voc\u00ea pode usar camel case se desejar, embora recomendemos kebab case para os nomes de suas propriedades personalizadas. Isso \u00e9 consistente com as conven\u00e7\u00f5es de nomenclatura do WordPress, melhora a legibilidade e reduz os erros de processamento.<\/p>\n<p><strong>Observa\u00e7\u00e3o<\/strong>: as propriedades personalizadas de CSS usam h\u00edfens duplos porque o <a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grupo de Trabalho de CSS da W3C<\/a> tamb\u00e9m quer incentivar voc\u00ea a usar o Sass (que usa cifr\u00f5es para definir propriedades). Dessa forma, voc\u00ea tem a op\u00e7\u00e3o de ambos para aprimorar seus designs.<\/p>\n<p>O WordPress j\u00e1 define algumas propriedades personalizadas \u2014 ou, pelo menos, os temas t\u00eam essa op\u00e7\u00e3o. Isso significa que voc\u00ea ver\u00e1 vari\u00e1veis CSS em <code>theme.json<\/code> sem uma declara\u00e7\u00e3o 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>Neste exemplo, definimos uma cor prim\u00e1ria usando uma cor predefinida existente. Em seguida, definimos algumas propriedades de espa\u00e7amento personalizadas e as configuramos usando <code>var()<\/code>.<\/p>\n<p>Isso significa que n\u00e3o precisamos codificar os valores em <code>theme.json<\/code>. Al\u00e9m disso, os usu\u00e1rios podem atualizar esses valores no Editor de Site e fazer com que se propaguem por todo o tema.<\/p>\n<h3>Predefini\u00e7\u00f5es vs propriedades personalizadas<\/h3>\n<p>Obviamente, o <code>theme.json<\/code> tamb\u00e9m permite estabelecer predefini\u00e7\u00f5es para cores, tamanhos de fonte e outros elementos comuns de tema. Por outro lado, voc\u00ea pode usar propriedades personalizadas para qualquer valor que queira reutilizar em todo o tema.<\/p>\n<p>A maior diferen\u00e7a aqui est\u00e1 nas conven\u00e7\u00f5es de nomenclatura e na acessibilidade. Os usu\u00e1rios n\u00e3o poder\u00e3o acessar as propriedades personalizadas no Editor de Sites sem que voc\u00ea trabalhe mais. Com as predefini\u00e7\u00f5es, o WordPress gerar\u00e1 CSS com apar\u00eancia semelhante \u00e0 forma como voc\u00ea processa as propriedades 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>Depois que o WordPress processa isso, voc\u00ea pode ver as diferen\u00e7as inerentes:<\/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>Observe que o aninhamento de outras propriedades usar\u00e1 h\u00edfens duplos, mesmo ap\u00f3s a convers\u00e3o de mai\u00fasculas e min\u00fasculas para mai\u00fasculas.<\/p>\n<h3>CSS global e espec\u00edfico do Bloco versus propriedades personalizadas de CSS<\/h3>\n<p>Com o WordPress cl\u00e1ssico, voc\u00ea usaria <a href=\"https:\/\/kinqsta.com\/pt\/blog\/css-wordpress\/\">CSS adicional e personalizado<\/a> no frontend para projetar elementos dentro do seu tema. Isso ainda acontece com <code>theme.json<\/code> e FSE, embora a abordagem seja diferente das propriedades personalizadas de CSS.<\/p>\n<p>Se voc\u00ea visitar o Editor de Sites e for \u00e0 tela <strong>Estilos<\/strong>, ver\u00e1 a se\u00e7\u00e3o <strong>CSS adicional<\/strong>. Ela funciona de forma semelhante ao painel CSS personalizado nas instala\u00e7\u00f5es cl\u00e1ssicas 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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/additional-css.png\" alt=\"Uma visualiza\u00e7\u00e3o parcial do Editor de Sites do WordPress mostrando links para as configura\u00e7\u00f5es de Blocos e CSS Adicional. O lado esquerdo da tela exibe uma vis\u00e3o parcial de um pr\u00e9dio com c\u00e9u azul ao fundo.\" width=\"1200\" height=\"587\"><figcaption id=\"caption-attachment-184926\" class=\"wp-caption-text\">A se\u00e7\u00e3o CSS Adicional no Editor de Sites do WordPress.<\/figcaption><\/figure>\n<p>Isso representa uma maneira de adicionar personaliza\u00e7\u00e3o global de CSS a um tema. No entanto, \u00e9 realmente uma maneira de dar aos usu\u00e1rios a capacidade de adicionar CSS. Voc\u00ea tamb\u00e9m pode us\u00e1-la para fazer pequenas altera\u00e7\u00f5es que n\u00e3o justifiquem uma folha de estilo inteira.<\/p>\n<p>Em <code>theme.json<\/code>, voc\u00ea usa a propriedade <code>css<\/code> para definir qualquer CSS extra que queira adicionar:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n    \"styles\": {\n      \"css\": \"margin: 0\"\n    }\n}<\/code><\/pre>\n<p>Observe que voc\u00ea n\u00e3o precisa usar ponto e v\u00edrgula no final das instru\u00e7\u00f5es de CSS. Voc\u00ea tamb\u00e9m pode definir CSS personalizado para Blocos:<\/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>Sempre que definir CSS como esse em <code>theme.json<\/code>, voc\u00ea o ver\u00e1 em qualquer campo <strong>CSS adicional<\/strong> do Editor de Sites. Entretanto, lembre-se de que nada do que voc\u00ea declarar usando <code>css<\/code> \u00e9 uma propriedade CSS personalizada.<\/p>\n<h3>Usando o seletor (&#038;) (E\u00a0comercial)<\/h3>\n<p>Assim como o Sass, o WordPress tamb\u00e9m suporta o seletor &#8220;E comercial&#8221;, com algumas diferen\u00e7as. Nesse caso, ele \u00e9 uma \u00f3tima maneira de direcionar elementos e propriedades aninhados. Isso pode ser relevante se voc\u00ea optar por declarar propriedades personalizadas de CSS para Blocos individuais.<\/p>\n<p>Por exemplo, veja o seguinte:<\/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>Isso define uma cor de texto e uma cor em segundo plano para o elemento de cabe\u00e7alho da tabela. Depois que o WordPress o processa, voc\u00ea obt\u00e9m um CSS limpo e simples:<\/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>Os seletores com E comercial s\u00e3o excelentes se voc\u00ea deseja estender o CSS que deseja. Uma maneira compreens\u00edvel de pensar no seletor \u00e9 que ele ajuda a separar seus elementos CSS. Veja o seguinte, por exemplo:<\/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>Isso adiciona um raio de borda a um avatar e gera o CSS como voc\u00ea esperaria:<\/p>\n<pre><code class=\"language-css\">.wp-block-image img {\n  border-radius: 999px;\n}<\/code><\/pre>\n<p>No entanto, sem o E comercial, o WordPress juntaria suas declara\u00e7\u00f5es:<\/p>\n<pre><code class=\"language-css\">\u2026\n\u200b\u200b.wp-block-imageimg\n\u2026<\/code><\/pre>\n<p>Usar o seletor &#8220;E comercial&#8221; para suas propriedades personalizadas de CSS ser\u00e1 algo que voc\u00ea far\u00e1 regularmente.<\/p>\n<h2>O papel da Kinsta no suporte ao desenvolvimento moderno de WordPress<\/h2>\n<p>Sua escolha de hospedagem \u00e9 t\u00e3o importante quanto qualquer linguagem de codifica\u00e7\u00e3o, pr\u00e9-processador ou outro elemento t\u00e9cnico. Sem um provedor de hospedagem de qualidade ao seu lado, voc\u00ea n\u00e3o poder\u00e1 se beneficiar do desempenho e do conjunto de ferramentas do <code>theme.json<\/code> ou do FSE.<\/p>\n<p>A Kinsta pode ser fundamental para todo o seu fluxo de trabalho, gra\u00e7as \u00e0s nossas ferramentas de desenvolvimento. Voc\u00ea pode come\u00e7ar com o <a href=\"https:\/\/kinqsta.com\/pt\/devkinsta\/\">DevKinsta<\/a> \u2014 nosso ambiente de desenvolvimento local que usa <a href=\"https:\/\/kinqsta.com\/pt\/blog\/que-e-docker\/\">cont\u00eaineres de Docker<\/a> para isolar sua instala\u00e7\u00e3o 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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface-1.png\" alt=\"A interface do DevKinsta exibindo as configura\u00e7\u00f5es de banco de dados e WordPress. Mostra detalhes de conex\u00e3o, incluindo host, porta, nome do banco de dados e vers\u00e3o do WordPress. A interface tamb\u00e9m mostra op\u00e7\u00f5es para habilitar o modo de depura\u00e7\u00e3o e atualiza\u00e7\u00f5es autom\u00e1ticas do WordPress.\" width=\"1200\" height=\"596\"><figcaption id=\"caption-attachment-184928\" class=\"wp-caption-text\">A interface principal do DevKinsta.<\/figcaption><\/figure>\n<p>Uma funcionalidade \u00fatil \u00e9 a capacidade do DevKinsta de enviar e receber dados entre sua m\u00e1quina local e os <a href=\"https:\/\/kinqsta.com\/pt\/blog\/ambiente-de-teste-kinsta\/\">ambientes de teste da 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:\/\/kinqsta.com\/wp-content\/uploads\/2024\/08\/push-pull.png\" alt=\"Visualiza\u00e7\u00e3o parcial da interface do DevKinsta exibindo informa\u00e7\u00f5es do site e op\u00e7\u00f5es de controle. A interface mostra bot\u00f5es para abrir o site, sincronizar, acessar o gerenciador de banco de dados e o admin do WordPress. Um menu suspenso revela op\u00e7\u00f5es para fazer push ou pull da Kinsta. O tipo de site est\u00e1 listado como WordPress, com informa\u00e7\u00f5es parciais vis\u00edveis sobre o host.\" width=\"1200\" height=\"354\"><figcaption id=\"caption-attachment-184931\" class=\"wp-caption-text\">As op\u00e7\u00f5es para fazer push ou pull da Kinsta dentro do DevKinsta.<\/figcaption><\/figure>\n<p>Isso permite que voc\u00ea teste seus temas em um ambiente semelhante ao de produ\u00e7\u00e3o antes de come\u00e7ar a distribu\u00ed-los. Ao trabalhar com propriedades personalizadas de CSS, voc\u00ea pode garantir que elas funcionem em diferentes contextos. A\u00a0<span style=\"margin: 0px;padding: 0px\"><a href=\"https:\/\/api-docs.kinqsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API da Kinsta<\/a> pode dar suporte ao seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-configurar-pipeline-ci-cd\/\">pipeline de CI\/CD<\/a> quando voc\u00ea estiver pronto para entrar em produ\u00e7\u00e3o<\/span>.<\/p>\n<p>Outros aspectos da arquitetura da Kinsta ajudar\u00e3o voc\u00ea em toda a sua configura\u00e7\u00e3o de desenvolvimento. Por exemplo, a Kinsta oferece suporte ao Git, o que facilita o controle de vers\u00e3o dos arquivos do seu tema, incluindo <code>theme.json<\/code>. Para iterar propriedades personalizadas ou simplesmente experimentar diferentes configura\u00e7\u00f5es, voc\u00ea vai querer saber que tem uma op\u00e7\u00e3o de revers\u00e3o.<\/p>\n<p>Por fim, se voc\u00ea optar por usar seu tema em um servidor Kinsta, nosso <a href=\"https:\/\/kinqsta.com\/pt\/blog\/edge-caching\/\">Edge Caching<\/a> aumenta o desempenho do <code>theme.json<\/code> em at\u00e9 <a href=\"https:\/\/kinqsta.com\/pt\/edge-caching\/\">80%<\/a>. Com um site que funciona rapidamente, independentemente do navegador do usu\u00e1rio, voc\u00ea garante que os elementos personalizadas adicionados sejam exibidos prontamente.<\/p>\n<h2>Resumo<\/h2>\n<p>Assim como o <code>theme.json<\/code> \u00e9 um poderoso arquivo de configura\u00e7\u00e3o para a cria\u00e7\u00e3o de temas flex\u00edveis e de f\u00e1cil manuten\u00e7\u00e3o no WordPress, as propriedades personalizadas de CSS s\u00e3o cruciais para o fluxo de trabalho. \u00c9 assim que voc\u00ea criar\u00e1 e declarar\u00e1 o CSS para elementos que o Editor de Sites n\u00e3o alcan\u00e7a. Elas tamb\u00e9m ser\u00e3o fundamentais se voc\u00ea criar seus pr\u00f3prios blocos ou simplesmente quiser desenvolver temas exclusivos para WordPress com o m\u00e1ximo de profundidade de personaliza\u00e7\u00e3o. Al\u00e9m disso, voc\u00ea tamb\u00e9m tem a op\u00e7\u00e3o de compartilhar esse CSS com os usu\u00e1rios por meio do Editor de Sites.<\/p>\n<p>As propriedades personalizadas de CSS far\u00e3o parte do seu fluxo de trabalho de desenvolvimento de temas? Caso positivo, como voc\u00ea as usar\u00e1? Compartilhe suas ideias na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os desenvolvedores de temas do WordPress podem usar um arquivo theme.json para simplificar um processo que costumava depender muito do PHP. No entanto, voc\u00ea ainda pode &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69877,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1039],"class_list":["post-69876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-design-sites-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>Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados de WordPress<\/title>\n<meta name=\"description\" content=\"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos 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:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress\" \/>\n<meta property=\"og:description\" content=\"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos temas de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-02T14:26:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-03T13:18:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos temas de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress\",\"datePublished\":\"2024-10-02T14:26:54+00:00\",\"dateModified\":\"2024-10-03T13:18:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\"},\"wordCount\":2714,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\",\"name\":\"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados de WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png\",\"datePublished\":\"2024-10-02T14:26:54+00:00\",\"dateModified\":\"2024-10-03T13:18:30+00:00\",\"description\":\"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos temas de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/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:\/\/kinqsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados de WordPress","description":"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos 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:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/","og_locale":"pt_PT","og_type":"article","og_title":"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress","og_description":"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos temas de WordPress.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-10-02T14:26:54+00:00","article_modified_time":"2024-10-03T13:18:30+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos temas de WordPress.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress","datePublished":"2024-10-02T14:26:54+00:00","dateModified":"2024-10-03T13:18:30+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/"},"wordCount":2714,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/","url":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/","name":"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados de WordPress","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png","datePublished":"2024-10-02T14:26:54+00:00","dateModified":"2024-10-03T13:18:30+00:00","description":"Veja como desenvolver propriedades personalizadas de CSS em theme.json para adicionar funcionalidades avan\u00e7adas aos temas de WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/10\/css-custom-properties-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/propriedades-personalizadas-css-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinqsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Desenvolvendo Propriedades Personalizadas de CSS com theme.json para Temas Aprimorados do WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/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:\/\/kinqsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/69876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=69876"}],"version-history":[{"count":7,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/69876\/revisions"}],"predecessor-version":[{"id":69898,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/69876\/revisions\/69898"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/translations\/nl"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69876\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/69877"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=69876"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=69876"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=69876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}