{"id":69186,"date":"2024-08-05T04:26:15","date_gmt":"2024-08-05T07:26:15","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=69186&#038;preview=true&#038;preview_id=69186"},"modified":"2024-08-09T07:13:11","modified_gmt":"2024-08-09T10:13:11","slug":"theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/","title":{"rendered":"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional"},"content":{"rendered":"<p>Os desenvolvedores de WordPress t\u00eam mais controle do que nunca, \u00e0 medida que o ecossistema do WordPress continua a evoluir. A <a href=\"https:\/\/kinsta.com\/pt\/blog\/edicao-completa-sites-wordpress\/\">edi\u00e7\u00e3o completa de sites (FSE)<\/a> oferece a todos os usu\u00e1rios a possibilidade de criar um tema do zero, especialmente ao usar o arquivo <code>theme.json<\/code>.<\/p>\n<p>Os desenvolvedores tamb\u00e9m podem aproveitar o arquivo <code>theme.json<\/code>. Esse arquivo de configura\u00e7\u00e3o permite a personaliza\u00e7\u00e3o granular do seu tema de WordPress sem o t\u00e9dio e a complexidade de linguagens de programa\u00e7\u00e3o mais complexas.<\/p>\n<p>Neste guia abrangente, exploraremos o que o arquivo <code>theme.json<\/code> tem a oferecer, inclusive sua rela\u00e7\u00e3o com a edi\u00e7\u00e3o completa de sites. Ao final, voc\u00ea entender\u00e1 como aproveitar seus recursos para criar sites modernos e de alto desempenho, independentemente da sua capacidade de desenvolvimento.<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>Apresentando o arquivo theme.json<\/h2>\n<p>Em sua ess\u00eancia, o <code>theme.json<\/code> \u00e9 um arquivo de configura\u00e7\u00e3o que define as configura\u00e7\u00f5es e os estilos do seu tema de WordPress. Ele usa JavaScript Object Notation (JSON), que s\u00e3o dados estruturados que herdam os pares chave-valor de sua linguagem principal para permitir que voc\u00ea escreva seu c\u00f3digo.<\/p>\n<figure id=\"attachment_183346\" aria-describedby=\"caption-attachment-183346\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183346 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/json-code.png\" alt=\"Um trecho de c\u00f3digo JSON definindo uma estrutura de gloss\u00e1rio. Inclui uma entrada para SGML (Standard Generalized Markup Language) com detalhes como seu acr\u00f4nimo, abrevia\u00e7\u00e3o, defini\u00e7\u00e3o e termos relacionados.\" width=\"1200\" height=\"482\"><figcaption id=\"caption-attachment-183346\" class=\"wp-caption-text\">Exemplo de c\u00f3digo JSON.<\/figcaption><\/figure>\n<p>O arquivo <code>theme.json<\/code> \u00e9 fundamental para o controle de v\u00e1rios aspectos do seu tema. Isso inclui paletas de cores, configura\u00e7\u00f5es de tipografia, op\u00e7\u00f5es de layout, estilos por Bloco, propriedades CSS personalizadas e muito mais. Daremos mais detalhes sobre esses aspectos ao longo do artigo.<\/p>\n<p>Embora isso n\u00e3o pare\u00e7a muito revolucion\u00e1rio at\u00e9 o momento, o site <code>theme.json<\/code> \u00e9 importante para o futuro do desenvolvimento do WordPress. A pr\u00f3xima se\u00e7\u00e3o explica por qu\u00ea.<\/p>\n<h2>Por que o theme.json \u00e9 relevante para o desenvolvimento de temas de WordPress<\/h2>\n<p>A abordagem t\u00edpica do WordPress para <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-wordpress-react\/\">desenvolvimento de temas<\/a> e <a href=\"https:\/\/kinsta.com\/blog\/publish-plugin-wordpress-plugin-directory\/\">cria\u00e7\u00e3o de plugins<\/a> geralmente girava em torno da <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-templates-publicacao\/\">edi\u00e7\u00e3o de arquivos de template<\/a> com PHP, usando o arquivo <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-functions-php\/\">functions.php<\/a> e outras tarefas t\u00e9cnicas.<\/p>\n<p>O arquivo <code>theme.json<\/code> marca uma mudan\u00e7a significativa, especialmente para o desenvolvimento de temas. H\u00e1 alguns motivos para isso:<\/p>\n<ul>\n<li>O arquivo representa um local \u00fanico e organizado para definir as configura\u00e7\u00f5es e os estilos do seu tema. Isso reduz a necessidade de um conjunto disperso de arquivos CSS e PHP.<\/li>\n<li>Essa abordagem centralizada de declarar estilos e configura\u00e7\u00f5es em <code>theme.json<\/code> significa que o WordPress pode gerar CSS mais eficiente. Em compara\u00e7\u00e3o com o uso de uma <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/10\/04\/the-performance-impact-of-using-jquery-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">framework como o jQuery<\/a>, existe a possibilidade de um melhor desempenho.<\/li>\n<li>Voc\u00ea tem mais controle do que nunca sobre o estilo do seu site e de Blocos individuais. Isso democratiza o desenvolvimento de temas para usu\u00e1rios com menos conhecimento t\u00e9cnico.<\/li>\n<li>\u00c0 medida que o FSE continuar a evoluir, o arquivo <code>theme.json<\/code> ter\u00e1 uma fun\u00e7\u00e3o crucial na intera\u00e7\u00e3o entre os temas, os estilos globais e o Editor de Blocos.<\/li>\n<\/ul>\n<p>A combina\u00e7\u00e3o de todos esses aspectos resulta em uma maneira padronizada de definir configura\u00e7\u00f5es e estilos para o seu tema. Para quem deseja entender e trabalhar com diferentes temas, a ado\u00e7\u00e3o do <code>theme.json<\/code> permitir\u00e1 criar temas WordPress mais robustos, flex\u00edveis e f\u00e1ceis de usar. Melhor ainda, essas cria\u00e7\u00f5es estar\u00e3o alinhadas com a dire\u00e7\u00e3o futura da plataforma.<\/p>\n<h2>Onde encontrar o arquivo theme.json<\/h2>\n<p>Em primeiro lugar, voc\u00ea n\u00e3o encontrar\u00e1 um arquivo <code>theme.json<\/code> em temas &#8220;tradicionais&#8221; ou &#8220;cl\u00e1ssicos&#8221;. Para encontrar e usar esse arquivo, voc\u00ea precisa de um Tema de Bloco dedicado. Dito isso, voc\u00ea pode criar o arquivo em qualquer tema, desde que execute o WordPress 5.8 ou superior.<\/p>\n<p>O local t\u00edpico do arquivo <code>theme.json<\/code> \u00e9 <strong>wp-content\/themes\/[your-theme]<\/strong>. Se o arquivo n\u00e3o estiver l\u00e1, voc\u00ea deve abrir seu editor de c\u00f3digo favorito e criar o arquivo conforme necess\u00e1rio. Por enquanto n\u00e3o se preocupe com o conte\u00fado, pois falaremos sobre isso em breve.<\/p>\n<figure id=\"attachment_183342\" aria-describedby=\"caption-attachment-183342\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183342 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-editor.png\" alt=\"Captura de tela mostrando um editor de c\u00f3digo aberto no arquivo theme.json, com uma janela de explorador de arquivos no fundo, exibindo os arquivos functions.php, screenshot.png, style.css e theme.json.\" width=\"1200\" height=\"829\"><figcaption id=\"caption-attachment-183342\" class=\"wp-caption-text\">Editando o arquivo theme.json em um tema WordPress de Bloco.<\/figcaption><\/figure>\n<p>Se voc\u00ea precisar criar um novo arquivo do zero, mas tamb\u00e9m quiser ver os detalhes do que ele cont\u00e9m antes de personalizar o seu, confira o tema <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-twenty-twenty-four\/\">Twenty Twenty-Four<\/a> padr\u00e3o.<\/p>\n<figure id=\"attachment_183354\" aria-describedby=\"caption-attachment-183354\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four-json.png\" alt=\"Captura de tela mostrando o arquivo theme.json do tema Twenty Twenty-Four aberto em um editor de c\u00f3digo.\" width=\"1200\" height=\"773\"><figcaption id=\"caption-attachment-183354\" class=\"wp-caption-text\">Visualizando o arquivo theme.json do tema Twenty Twenty-Four no editor de c\u00f3digo.<\/figcaption><\/figure>\n<p>Como um Tema de Bloco, voc\u00ea ter\u00e1 um arquivo <code>theme.json<\/code> para visualizar. Pode ser \u00fatil deix\u00e1-lo aberto enquanto analisamos a estrutura nas pr\u00f3ximas se\u00e7\u00f5es.<\/p>\n<h2>O que voc\u00ea precisa para trabalhar com o theme.json<\/h2>\n<p>\u00c9 claro que nem todo mundo conseguir\u00e1 abrir o arquivo de configura\u00e7\u00e3o e come\u00e7ar a trabalhar. Voc\u00ea ainda precisar\u00e1 de algumas habilidades e conhecimentos fundamentais para criar e personalizar um tema:<\/p>\n<ul>\n<li><strong>Conhecimento b\u00e1sico de JSON.<\/strong> Acreditamos que isso \u00e9 algo que voc\u00ea pode aprender rapidamente, mas, ainda assim, a familiaridade com a sintaxe e a estrutura do JSON \u00e9 crucial.<\/li>\n<li><strong>Compreender CSS.<\/strong> Voc\u00ea descobrir\u00e1 que muitos objetos e propriedades do <code>theme.json<\/code> correspondem a seus equivalentes em CSS. Voc\u00ea se beneficiar\u00e1 de conhecimentos de CSS.<\/li>\n<li><strong>Conhecimento do Editor de Blocos do WordPress.<\/strong> Entender como os Blocos funcionam, juntamente com suas op\u00e7\u00f5es de personaliza\u00e7\u00e3o, ajudar\u00e1 voc\u00ea a criar.<\/li>\n<\/ul>\n<p>Embora n\u00e3o seja estritamente necess\u00e1rio, recomendamos que voc\u00ea compreenda pelo menos os principais conceitos do FSE, o que o ajudar\u00e1 a aproveitar o arquivo <code>theme.json<\/code> de forma mais eficaz. Voc\u00ea tamb\u00e9m poder\u00e1 descobrir como as suas edi\u00e7\u00f5es afetar\u00e3o os ajustes do usu\u00e1rio final. Al\u00e9m disso, haver\u00e1 casos em que voc\u00ea ainda precisar\u00e1 usar <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> para concretizar sua vis\u00e3o.<\/p>\n<p>Por fim, recomendamos a voc\u00ea alguns &#8220;extras&#8221; t\u00e9cnicos:<\/p>\n<ul>\n<li><strong>Um editor de c\u00f3digo.<\/strong> Se voc\u00ea escolher um <a href=\"https:\/\/kinsta.com\/pt\/blog\/php-editor\/\">editor de qualidade<\/a> que ofere\u00e7a destaque e valida\u00e7\u00e3o de sintaxe JSON, ser\u00e1 mais agrad\u00e1vel executar seu fluxo de trabalho.<\/li>\n<li><strong>Ambiente de desenvolvimento local.<\/strong> Usar uma ferramenta <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">como o DevKinsta<\/a> para trabalhar no seu tema permitir\u00e1 experimentar e testar suas altera\u00e7\u00f5es rapidamente e sem afetar um site ativo.<\/li>\n<\/ul>\n<p>Com essas ferramentas e conhecimentos, voc\u00ea estar\u00e1 bem equipado para come\u00e7ar a personalizar seu tema do WordPress usando <code>theme.json<\/code>.<\/p>\n<h2>Observando a anatomia, a estrutura e a hierarquia do theme.json<\/h2>\n<p>O arquivo <code>theme.json<\/code> obviamente ter\u00e1 uma estrutura que voc\u00ea precisa entender. Tamb\u00e9m tem uma hierarquia, juntamente com alguns elementos exclusivos que precisam de mais explica\u00e7\u00f5es.<\/p>\n<p>Essa \u00e9 provavelmente a parte mais complexa do uso do arquivo de configura\u00e7\u00e3o, mas mesmo assim voc\u00ea compreender\u00e1 os conceitos facilmente.<\/p>\n<p>Vamos come\u00e7ar com a estrutura e, em seguida, passar para os outros elementos do <code>theme.json<\/code>.<\/p>\n<h3>Estrutura b\u00e1sica<\/h3>\n<p>Visto que o arquivo segue o formato JSON, voc\u00ea j\u00e1 deve entender o conceito geral da estrutura. Em primeiro lugar, todo o objeto do arquivo fica entre chaves, assim como alguns dos v\u00e1rios outros objetos dentro dele. Cada objeto consiste em pares de valor-chave; use aspas simples ou duplas para as chaves, e v\u00edrgulas para encerrar a linha.<\/p>\n<p>O m\u00ednimo que um arquivo <code>theme.json<\/code> precisa \u00e9 dos objetos <code>version<\/code>, <code>settings<\/code> e <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 2,\n    \"settings\": {\n      \/\/ Global settings go here\n    },\n    \"styles\": {\n      \/\/ Global styles go here\n    }\n}<\/code><\/pre>\n<p>Os objetos <code>settings<\/code> e <code>styles<\/code> s\u00e3o simples, mas o <code>version<\/code> requer mais explica\u00e7\u00f5es. Esse valor ser\u00e1 um n\u00famero inteiro que corresponde \u00e0 vers\u00e3o da API que voc\u00ea usa para ler o arquivo. A vers\u00e3o atual da API \u00e9 <code>3<\/code>, embora a vers\u00e3o <code>2<\/code> tamb\u00e9m seja comum, e voc\u00ea pode <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/theme-json-migrations\/\" target=\"_blank\" rel=\"noopener noreferrer\">migrar de vers\u00f5es anteriores<\/a>.<\/p>\n<p>A maioria das estruturas do arquivo <code>theme.json<\/code> tamb\u00e9m <a href=\"https:\/\/schemas.wp.org\/trunk\/theme.json\" target=\"_blank\" rel=\"noopener noreferrer\">inclui um schema<\/a>. Em resumo, isso permite que voc\u00ea trabalhe com o preenchimento autom\u00e1tico em editores de c\u00f3digo e fornece valida\u00e7\u00e3o para o arquivo. Voc\u00ea adicionar\u00e1 isto na parte superior do arquivo:<\/p>\n<pre><code class=\"language-json\">{\n    \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n    \"version\": 2,\n    \"settings\": {\n    },\n    \"styles\": {\n    }\n}<\/code><\/pre>\n<p>A partir da\u00ed, voc\u00ea adicionar\u00e1 v\u00e1rias propriedades e objetos a <strong>settings<\/strong> e <strong>styles <\/strong>para desenvolver o arquivo.<\/p>\n<h3>Hierarquia<\/h3>\n<p>O arquivo <code>theme.json<\/code> segue uma estrutura hier\u00e1rquica e \u00e9 apenas um n\u00edvel da hierarquia geral de <strong>configura\u00e7\u00f5es<\/strong> e <strong>estilos<\/strong> em seu site. Se voc\u00ea tiver <a href=\"https:\/\/kinsta.com\/pt\/blog\/tecnicas-avancadas-de-css\/\">conhecimento de CSS<\/a>, ser\u00e1 mais f\u00e1cil entender isso, pois esse arquivo tem <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">complexidade semelhante \u00e0 do CSS<\/a>.<\/p>\n<p>Em resumo, as personaliza\u00e7\u00f5es que voc\u00ea faz em <code>theme.json<\/code> nem sempre s\u00e3o exibidas no frontend do seu site. As configura\u00e7\u00f5es do usu\u00e1rio t\u00eam prioridade sobre tudo. Isso significa que todas as altera\u00e7\u00f5es feitas na tela <strong>Apar\u00eancia &gt; Editor<\/strong> do WordPress ser\u00e3o exibidas no frontend:<\/p>\n<figure id=\"attachment_183351\" aria-describedby=\"caption-attachment-183351\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/site-editor-screen.png\" alt=\"A interface principal do Editor de Sites no WordPress.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183351\" class=\"wp-caption-text\">A interface principal do Editor de Sites no WordPress.<\/figcaption><\/figure>\n<p>Se voc\u00ea usar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">tema filho (child theme)<\/a>\u00a0e incluir um arquivo <code>theme.json<\/code>, ele substituir\u00e1 todas as altera\u00e7\u00f5es que n\u00e3o forem feitas com o Editor de Sites. Da mesma forma, tudo que voc\u00ea definir no arquivo de configura\u00e7\u00e3o do tema principal (parent theme) substituir\u00e1 as configura\u00e7\u00f5es e os estilos padr\u00e3o do WordPress. \u00c9 nesse arquivo que vamos nos concentrar neste artigo, embora o WordPress tamb\u00e9m tenha seu pr\u00f3prio arquivo <code>theme.json<\/code>.<\/p>\n<p>Embora n\u00e3o seja o foco deste artigo, voc\u00ea tamb\u00e9m pode substituir valores usando <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/07\/how-to-modify-theme-json-data-using-server-side-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">hooks e filtros<\/a>. Esses filtros din\u00e2micos permitem criar plugins e temas que tamb\u00e9m alteram as configura\u00e7\u00f5es e os estilos do tema e da plataforma.<\/p>\n<h3>Gram\u00e1tica de blocos<\/h3>\n<p>Se voc\u00ea acessar o Bloco do WordPress ou o Editor de Sites, abrir um artigo ou uma p\u00e1gina e alternar o Editor de c\u00f3digo, ver\u00e1 que h\u00e1 muitos coment\u00e1rios HTML no conte\u00fado:<\/p>\n<figure id=\"attachment_183341\" aria-describedby=\"caption-attachment-183341\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-block-editor.png\" alt=\"A interface do editor de c\u00f3digo do WordPress dentro do Editor de Blocos. Ela exibe o c\u00f3digo HTML da pol\u00edtica de privacidade de um site. O c\u00f3digo inclui cabe\u00e7alhos e par\u00e1grafos com detalhes sobre o endere\u00e7o do site, pol\u00edticas de coment\u00e1rios e uso do Gravatar.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183341\" class=\"wp-caption-text\">A tela de edi\u00e7\u00e3o de c\u00f3digo no Editor de Blocos do WordPress.<\/figcaption><\/figure>\n<p>Isso ocorre porque, em vez de usar arquivos PHP, os temas de bloco usam arquivos HTML juntamente com coment\u00e1rios e marca\u00e7\u00e3o de bloco para criar seu site. A combina\u00e7\u00e3o desses elementos resulta na &#8220;gram\u00e1tica do bloco&#8221; de que voc\u00ea precisa para escrever o arquivo <code>theme.json<\/code>.<\/p>\n<p>Para os blocos que cont\u00eam conte\u00fado, como o bloco de par\u00e1grafo, voc\u00ea deve envolver esse conte\u00fado:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:paragraph --&gt;\n    &lt;p&gt;Content goes here!&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n<\/code><\/pre>\n<p>Em outros casos, voc\u00ea s\u00f3 precisar\u00e1 de coment\u00e1rios de linha \u00fanica ou que se fechem automaticamente. Com alguns blocos, voc\u00ea combinar\u00e1 tipos para criar layouts e designs. Voc\u00ea tamb\u00e9m pode aninhar esses coment\u00e1rios:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n    \n\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;<\/code><\/pre>\n<p>Aqui, criamos um bloco Columns usando um coment\u00e1rio wrapper. Dentro dele, podemos come\u00e7ar a adicionar HTML para projetar essas colunas e incluir wrappers de colunas individuais. Isso seria trivial no frontend, pois voc\u00ea coloca geralmente os blocos uns dentro dos outros.<\/p>\n<p>Para encontrar a marca\u00e7\u00e3o de um determinado bloco, voc\u00ea pode navegar pelo <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manual do Block Editor<\/a> at\u00e9 encontrar o que precisa. A maneira mais f\u00e1cil, por\u00e9m, \u00e9 simplesmente adicionar o bloco ao WordPress, abrir o Editor de c\u00f3digo e copiar a marca\u00e7\u00e3o de l\u00e1.<\/p>\n<p>No que diz respeito \u00e0s altera\u00e7\u00f5es que voc\u00ea far\u00e1 nessa marca\u00e7\u00e3o, trataremos disso em uma se\u00e7\u00e3o posterior.<\/p>\n<h2>Como o theme.json e a edi\u00e7\u00e3o completa do site do WordPress se combinam<\/h2>\n<p>Com base na discuss\u00e3o sobre hierarquia, voc\u00ea entender\u00e1 que o <code>theme.json<\/code> \u00e9 uma grande parte do FSE. Ambos trabalham juntos para oferecer a voc\u00ea uma solu\u00e7\u00e3o abrangente de temas para o WordPress. Por exemplo, a interface Global Styles \u00e9 essencialmente a representa\u00e7\u00e3o visual de suas configura\u00e7\u00f5es do <code>theme.json<\/code>.<\/p>\n<figure id=\"attachment_183345\" aria-describedby=\"caption-attachment-183345\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183345 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/global-styles.png\" alt=\"O Editor de Sites do WordPress, com o lado esquerdo exibindo parte do conte\u00fado de um site usando texto em uma cor vermelho escuro. \u00c0 direita, o painel de Estilos foca nas configura\u00e7\u00f5es de Cores. Ele inclui um seletor de paleta de cores e op\u00e7\u00f5es para personalizar as cores de v\u00e1rios elementos do site, como texto, fundo, links e bot\u00f5es. Um verificador de contraste tamb\u00e9m est\u00e1 vis\u00edvel, mostrando o c\u00f3digo hex #A62B0C para o tema de cor selecionado.\" width=\"1200\" height=\"695\"><figcaption id=\"caption-attachment-183345\" class=\"wp-caption-text\">A barra lateral do Site Editor, mostrando as op\u00e7\u00f5es de estilos globais de um tema.<\/figcaption><\/figure>\n<p>Voc\u00ea pode modificar as configura\u00e7\u00f5es no painel Estilos Globais ou no arquivo de configura\u00e7\u00e3o, e o WordPress atualizar\u00e1 os valores correspondentes conforme necess\u00e1rio. Embora as configura\u00e7\u00f5es do Editor de Sites tenham preced\u00eancia, o <code>theme.json<\/code> funcionar\u00e1 como base para os estilos pr\u00f3prios do seu tema. Para o usu\u00e1rio final, o Global Styles permite que ele substitua os padr\u00f5es por suas pr\u00f3prias personaliza\u00e7\u00f5es sem a necessidade de c\u00f3digo ou de editar o arquivo <code>theme.json<\/code>.<\/p>\n<p>Al\u00e9m disso, as propriedades personalizadas de CSS que voc\u00ea define em\u00a0<code>theme.json<\/code> ficam dispon\u00edveis na interface Estilos Globais. Isso permite que os usu\u00e1rios aproveitem essas propriedades para criar um estilo mais consistente em um site. Isso se estende \u00e0 capacidade de definir estilos e configura\u00e7\u00f5es de blocos espec\u00edficos tamb\u00e9m, que voc\u00ea pode ajustar ainda mais no <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel do WordPress<\/a>.<\/p>\n<p>Em resumo, o\u00a0<code>theme.json<\/code> oferece controle mais granular sobre configura\u00e7\u00f5es, estilos e muito mais. \u00c9 uma ferramenta de n\u00edvel de desenvolvedor que oferece uma experi\u00eancia mais direta e simplificada do que as abordagens cl\u00e1ssicas. Por outro lado, a interface Estilos Globais oferece a todos a chance de personalizar um tema de acordo com suas prefer\u00eancias. \u00c0 medida que voc\u00ea desenvolver mais os temas, ver\u00e1 como ambos funcionam em conjunto para ajudar a criar designs e layouts de sites.<\/p>\n<h2>Trabalhando com as propriedades do arquivo theme.json<\/h2>\n<p>Com uma compreens\u00e3o dos conceitos b\u00e1sicos, voc\u00ea pode come\u00e7ar a trabalhar com os objetos e as propriedades em <code>theme.json<\/code>. N\u00e3o conseguiremos cobrir todos os casos de uso ou eventualidades. No entanto, ao final deste tutorial, voc\u00ea ser\u00e1 capaz de criar temas que ofere\u00e7am funcionalidade total e tenham \u00f3tima apar\u00eancia no frontend.<\/p>\n<h3>Configura\u00e7\u00f5es<\/h3>\n<p>A propriedade <code>settings<\/code> permite controlar quais recursos voc\u00ea oferece no Editor de Sites e como eles se comportam. \u00c9 uma propriedade de n\u00edvel superior e, normalmente, voc\u00ea encontrar\u00e1 v\u00e1rios n\u00edveis de aninhamento.<\/p>\n<p>Quando analisarmos os estilos e suas varia\u00e7\u00f5es, voc\u00ea ver\u00e1 que h\u00e1 alguns cruzamentos entre essas op\u00e7\u00f5es, mas ambos os tipos t\u00eam uma fun\u00e7\u00e3o na cria\u00e7\u00e3o do seu tema.<\/p>\n<p>Voc\u00ea tem um n\u00famero seleto de propriedades dispon\u00edveis:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"blocks\": {},\n        \"border\": {},\n        \"color\": {},\n        \"custom\": {},\n        \"dimensions\": {},\n        \"layout\": {},\n        \"position\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"useRootPaddingAwareAlignments\": false\n    }\n}<\/code><\/pre>\n<p>O <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/#settings-documentation\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Theme Developer Handbook<\/a> oficial (manual oficial do desenvolvedor de temas do WordPress) inclui uma refer\u00eancia para todas essas configura\u00e7\u00f5es (e estilos). No entanto, aqui est\u00e1 uma r\u00e1pida vis\u00e3o geral de algumas das mais importantes, que precisam de mais esclarecimentos:<\/p>\n<ul>\n<li><code>appearanceTools<\/code><strong>.<\/strong> Essa <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/appearance-tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">propriedade gen\u00e9rica<\/a> habilita v\u00e1rias outras e serve para que voc\u00ea economize tempo. Ela definir\u00e1 op\u00e7\u00f5es de borda, alturas de linha de tipografia, preenchimento, margens e muito mais.<\/li>\n<li><code>blocks<\/code><strong>.<\/strong> Embora a maior parte do seu trabalho seja voltada para configura\u00e7\u00f5es e estilos globais, a propriedade <code>blocks<\/code> permite que voc\u00ea fa\u00e7a isso por bloco. N\u00e3o abordaremos o conceito em mais detalhes aqui, mas o <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme Developer Handbook<\/a> tem uma excelente documenta\u00e7\u00e3o sobre essa faceta do <code>theme.json<\/code>.<\/li>\n<li><code>custom<\/code><strong>.<\/strong> Essa propriedade exclusiva n\u00e3o tem funcionalidade, pois voc\u00ea decide o que ela faz. Voc\u00ea a usar\u00e1 para criar <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/custom\/\" target=\"_blank\" rel=\"noopener noreferrer\">propriedades CSS personalizadas<\/a> para o seu tema, e o escopo que voc\u00ea tem a oferecer \u00e9 amplo.<\/li>\n<li><code>useRootPaddingAwareAlignments<\/code><strong>.<\/strong> Novamente, essa \u00e9 uma propriedade complexa que n\u00e3o abordaremos por completo. Basicamente, ela ajuda voc\u00ea a posicionar os <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/use-root-padding-aware-alignments\/\" target=\"_blank\" rel=\"noopener noreferrer\">estilos de preenchimento horizontal<\/a> do seu tema e tem muito poder. Voc\u00ea a usaria quando quisesse permitir que itens de largura total se estendessem at\u00e9 as bordas da tela enquanto usasse o preenchimento no elemento raiz.<\/li>\n<\/ul>\n<p>Observe que voc\u00ea n\u00e3o precisa adicionar nenhuma propriedade a <code>theme.json<\/code> com a qual n\u00e3o queira trabalhar. Por exemplo, se n\u00e3o quiser trabalhar com <code>appearanceTools<\/code>, voc\u00ea pode simplesmente deix\u00e1-lo de fora em vez de defini-lo com <code>false<\/code>.<\/p>\n<h4>Como definir configura\u00e7\u00f5es no theme.json<\/h4>\n<p>Quando se trata de definir configura\u00e7\u00f5es, cada propriedade tem v\u00e1rias subpropriedades de pares de valores-chave. Por exemplo, voc\u00ea pode criar <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/color\/\" target=\"_blank\" rel=\"noopener noreferrer\">paletas de cores<\/a> desta forma:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n          \"palette\": [\n            {\n              \"color\": \"#0073aa\",\n              \"name\": \"Primary\",\n              \"slug\": \"primary\"\n            },\n            {\n              \"color\": \"#23282d\",\n              \"name\": \"Secondary\",\n              \"slug\": \"secondary\"\n            }\n          ],\n\u2026<\/code><\/pre>\n<p>Outras propriedades t\u00eam valores booleanos simples, que ativam ou desativam esses recursos no Site Editor:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n            \"background\": true,\n            \"defaultPalette\": true,\n            \"link\": true,\n            \"text\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Depois de definir suas configura\u00e7\u00f5es, voc\u00ea pode introduzir um estilo para elas. Vamos examinar isso agora.<\/p>\n<h3>Estilos e varia\u00e7\u00f5es de estilo<\/h3>\n<p>Enquanto <code>settings<\/code> define o acesso a determinadas op\u00e7\u00f5es de estilo, a propriedade <code>styles<\/code> permite que voc\u00ea defina esses estilos globais para o seu tema. Novamente, trata-se de uma propriedade de n\u00edvel superior que usar\u00e1 v\u00e1rios n\u00edveis de aninhamento. Voc\u00ea pode direcionar elementos espec\u00edficos, blocos ou at\u00e9 mesmo usar propriedades CSS personalizadas.<\/p>\n<p>\u00c9 importante definir os estilos de tema aqui para que voc\u00ea possa acess\u00e1-los e personaliz\u00e1-los no Editor de Sites. Voc\u00ea pode trabalhar com <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/styles-reference\/\" target=\"_blank\" rel=\"noopener noreferrer\">v\u00e1rios elementos<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"styles\": {\n        \"border\": {},\n        \"color\": {},\n        \"dimensions\": {},\n        \"filter\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"css\": {}\n    }\n}<\/code><\/pre>\n<p>No entanto, voc\u00ea n\u00e3o usar\u00e1 com frequ\u00eancia muitos deles como propriedades de n\u00edvel secund\u00e1rio. Em vez disso, alguns deles funcionar\u00e3o principalmente com blocos ou elementos. Por exemplo:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"blocks\": {\n        \"core\/group\": {\n            \"color\": {\n                \"text\": \"#000000\",\n                \"background\": \"#ffffff\",\n                \"link\": \"#777777\"\n            }\n\u2026<\/code><\/pre>\n<p>Para estilos globais, voc\u00ea trabalhar\u00e1 na raiz, que se correlaciona com a tag <code>&lt;body&gt;<\/code> da sua p\u00e1gina. Para elementos espec\u00edficos, voc\u00ea pode seguir uma estrutura semelhante \u00e0 dos blocos, desta vez usando a propriedade <code>elements<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"elements\": {\n        \"button\": {\n            \"color\": {\n                \"text\": \"#ffffff\",\n                \"background\": \"#aa3f33\"\n            }\n\u2026<\/code><\/pre>\n<p>Se voc\u00ea observar todas as altera\u00e7\u00f5es feitas no Editor de Sites, dever\u00e1 v\u00ea-las no lugar. A marca\u00e7\u00e3o tamb\u00e9m gerar\u00e1 CSS para os estilos que voc\u00ea criar:<\/p>\n<figure id=\"attachment_183344\" aria-describedby=\"caption-attachment-183344\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183344 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/generate-css.png\" alt=\"Uma p\u00e1gina inicial de site com o t\u00edtulo \"A commitment to innovation and sustainability\" e um bot\u00e3o \"About us\". A metade inferior mostra a estrutura HTML do site no painel DevTools do navegador Brave.\" width=\"1200\" height=\"720\"><figcaption id=\"caption-attachment-183344\" class=\"wp-caption-text\">O frontend de um site mostrando o navegador DevTools, destacando o CSS gerado para um elemento.<\/figcaption><\/figure>\n<p>Observe que voc\u00ea tamb\u00e9m pode estilizar pseudoclasses para elementos, como os estilos hover e focus:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"elements\": {\n    \"button\": {\n        \"color\": {\n            \"text\": \"#ffffff\",\n            \"background\": \"#aa3f33\"\n        },\n        \":hover\": {\n            \"color\": {\n                \"background\": \"#822f27\"\n            }\n\u2026<\/code><\/pre>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/applying-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Aplicar estilos<\/a> \u00e9 ainda mais detalhado do que isso, e esse \u00e9 um dos aspectos positivos fant\u00e1sticos do uso do <code>theme.json<\/code>.<\/p>\n<h4>Varia\u00e7\u00f5es de estilo<\/h4>\n<p>Antes de prosseguirmos, voc\u00ea deve conhecer as varia\u00e7\u00f5es de estilo. Voc\u00ea pode ver essas v\u00e1rias paletas de cores e estilos de tipografia na interface do FSE:<\/p>\n<figure id=\"attachment_183352\" aria-describedby=\"caption-attachment-183352\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183352 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-variations-fse.png\" alt=\"A interface do Editor de Sites do WordPress exibindo as varia\u00e7\u00f5es de estilo de um tema no lado esquerdo, com v\u00e1rias op\u00e7\u00f5es de fontes e cores. A \u00e1rea principal de conte\u00fado exibe um cabe\u00e7alho \"A commitment to innovation and sustainability\" com um subt\u00edtulo, um bot\u00e3o \"About us\" e uma imagem heroica de um pr\u00e9dio moderno.\" width=\"1200\" height=\"571\"><figcaption id=\"caption-attachment-183352\" class=\"wp-caption-text\">A barra lateral de estilos no Site Editor, mostrando diferentes varia\u00e7\u00f5es.<\/figcaption><\/figure>\n<p>Entretanto, isso n\u00e3o \u00e9 algo que voc\u00ea codifica no <code>theme.json<\/code>. Em vez disso, voc\u00ea criar\u00e1 vers\u00f5es alternativas do arquivo, dar\u00e1 a elas um nome exclusivo e as armazenar\u00e1 no diret\u00f3rio <strong>styles<\/strong> de um tema:<\/p>\n<figure id=\"attachment_183355\" aria-describedby=\"caption-attachment-183355\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183355 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/variations-code.png\" alt=\"A interface do macOS exibindo duas janelas. A janela em segundo plano mostra um explorador de arquivos com m\u00faltiplos arquivos JSON para diferentes esquemas de cores. A janela em primeiro plano mostra um editor de c\u00f3digo aberto no arquivo green.json, que cont\u00e9m configura\u00e7\u00f5es de cores do tema para um esquema de cores verde.\" width=\"1200\" height=\"822\"><figcaption id=\"caption-attachment-183355\" class=\"wp-caption-text\">Um editor de c\u00f3digo exibindo arquivos JSON de varia\u00e7\u00e3o de estilo.<\/figcaption><\/figure>\n<p>Observe que o t\u00edtulo dentro da marca\u00e7\u00e3o \u00e9 \u00fanico para cada arquivo JSON alternativo. No entanto, \u00e9 um campo opcional \u2014 embora recomendemos seu uso para clareza e a melhor experi\u00eancia.<\/p>\n<h3>Templates personalizados e partes de template<\/h3>\n<p>Assim como as varia\u00e7\u00f5es de estilo, o <code>theme.json<\/code> permite que voc\u00ea registre templates personalizados e partes de template associadas. Registrar a marca\u00e7\u00e3o \u00e9 simples:<\/p>\n<pre><code class=\"language-json\">\"customTemplates\": [\n    {\n        \"name\": \"my-template\",\n        \"title\": \"My Template\",\n        \"postTypes\": [\n            \"page\",\n            \"post\"\n        ]\n    }\n]<\/code><\/pre>\n<p>A propriedade <code>customTemplates<\/code> requer que voc\u00ea defina tr\u00eas elementos:<\/p>\n<ul>\n<li><code>name<\/code><strong>.<\/strong> Este corresponde a um template que voc\u00ea cria no diret\u00f3rio de <strong>templates<\/strong> do seu tema, como\u00a0<strong>\/template\/my-template.html<\/strong>.<\/li>\n<li><code>title<\/code><strong>.<\/strong> Esta \u00e9 a vers\u00e3o leg\u00edvel do nome do template.<\/li>\n<li><code>postTypes<\/code><strong>.<\/strong> Sem defini\u00e7\u00e3o, o padr\u00e3o \u00e9 uma p\u00e1gina, mas voc\u00ea pode especificar um array de tipos de post que o template \u00e9 adequado.<\/li>\n<\/ul>\n<p>Os usu\u00e1rios poder\u00e3o selecionar quaisquer templates que voc\u00ea registrar dentro do Editor de Sites ou do Editor de Blocos:<\/p>\n<figure id=\"attachment_183353\" aria-describedby=\"caption-attachment-183353\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183353 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/template-site-editor.png\" alt=\"O Editor de Blocos do WordPress mostrando detalhes de uma p\u00e1gina publicada, incluindo status, data de publica\u00e7\u00e3o, link, autor e template. H\u00e1 um menu suspenso aberto com op\u00e7\u00f5es para editar, trocar, mostrar ou criar um novo template.\" width=\"1200\" height=\"576\"><figcaption id=\"caption-attachment-183353\" class=\"wp-caption-text\">Voc\u00ea pode optar por editar, trocar, criar ou exibir um template no Editor de Sites WordPress.<\/figcaption><\/figure>\n<p>Quando se trata de partes de templates, voc\u00ea n\u00e3o precisa registr\u00e1-las, mas recomendamos que o fa\u00e7a. A estrutura \u00e9 semelhante \u00e0 do registro de templates:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"templateParts\": [\n    {\n        \"area\": \"header\",\n        \"name\": \"header\",\n        \"title\": \"Header\"\n    },\n\u2026<\/code><\/pre>\n<p>Aqui, o nome e o t\u00edtulo correspondem \u00e0s mesmas defini\u00e7\u00f5es dos templates completos. A \u00e1rea est\u00e1 relacionada ao local ao qual a parte pertence: <code>header<\/code>, <code>footer<\/code> ou <code>uncategorized<\/code> s\u00e3o os padr\u00f5es, mas voc\u00ea pode atribuir partes de template a qualquer \u00e1rea personalizada.<\/p>\n<p>Recomendamos que voc\u00ea tamb\u00e9m analise como <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/template-parts\/#including-a-template-part\" target=\"_blank\" rel=\"noopener noreferrer\">exibir essas partes de template<\/a>, pois elas n\u00e3o ser\u00e3o exibidas sem alguma codifica\u00e7\u00e3o extra. Mesmo assim, registr\u00e1-las \u00e9 simples.<\/p>\n<h3>Padr\u00f5es<\/h3>\n<p>Para finalizar, vamos discutir os padr\u00f5es do Bloco. Voc\u00ea pode agrupar qualquer n\u00famero deles em seu arquivo <code>theme.json<\/code> usando uma array de n\u00edvel superior. Qualquer padr\u00e3o adequado da <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">Biblioteca de Padr\u00f5es do WordPress<\/a> est\u00e1 dispon\u00edvel para voc\u00ea incluir em seu arquivo:<\/p>\n<figure id=\"attachment_183348\" aria-describedby=\"caption-attachment-183348\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183348 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-library-wordpress.png\" alt=\"A tela de pesquisa da Biblioteca de Padr\u00f5es do WordPress exibindo uma grade de templates de design de sites. Os templates incluem v\u00e1rios designs de banners e cabe\u00e7alhos com imagens, texto e bot\u00f5es.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183348\" class=\"wp-caption-text\">A Biblioteca de Padr\u00f5es do WordPress.<\/figcaption><\/figure>\n<p>Definir o array \u00e9 simples: voc\u00ea usa a propriedade <code>patterns<\/code>e o slug do padr\u00e3o associado a partir da URL da biblioteca:<\/p>\n<figure id=\"attachment_183349\" aria-describedby=\"caption-attachment-183349\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183349 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-slug.png\" alt=\"Um close-up da barra de endere\u00e7os de um navegador destacando o slug na URL na barra de ferramentas. O resto da tela mostra um padr\u00e3o de imagem heroica laranja completo com um grande cabe\u00e7alho, uma pequena descri\u00e7\u00e3o e um bot\u00e3o \"Shop Now\".\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183349\" class=\"wp-caption-text\">Selecionando o slug de um padr\u00e3o a partir da URL dentro de um navegador web.<\/figcaption><\/figure>\n<p>Com esse slug, voc\u00ea pode preencher a marca\u00e7\u00e3o <code>patterns<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"patterns\": [\n        \"fullwidth-vertically-aligned-headline-on-right-with-description-on-left\"\n    ]\n}<\/code><\/pre>\n<p>Voc\u00ea poder\u00e1 selecion\u00e1-los no diret\u00f3rio de padr\u00f5es do Editor de Blocos:<\/p>\n<figure id=\"attachment_183347\" aria-describedby=\"caption-attachment-183347\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183347 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-directory.png\" alt=\"A interface do Editor de Blocos do WordPress mostrando um menu lateral de blocos e padr\u00f5es \u00e0 esquerda, com uma pr\u00e9-visualiza\u00e7\u00e3o de v\u00e1rios designs de banners \u00e0 direita. O banner principal exibido apresenta o texto em negrito \"LET 'EM ROLL BIG JOHN PATTON\" em um fundo laranja.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183347\" class=\"wp-caption-text\">O diret\u00f3rio de padr\u00f5es do WordPress no Editor de Blocos.<\/figcaption><\/figure>\n<p>Essa maneira simples de trazer os ativos da Pattern Library para seus temas \u00e9 \u00fatil e valiosa. \u00c9 mais um motivo pelo qual o arquivo <code>theme.json<\/code> est\u00e1 se tornando rapidamente a maneira favorita de criar entre os desenvolvedores de temas do WordPress.<\/p>\n<h2>O fluxo de trabalho para personalizar seu site WordPress usando theme.json<\/h2>\n<p>Depois que voc\u00ea entender os principais componentes do <code>theme.json<\/code>, desenvolver seu fluxo de trabalho para us\u00e1-lo \u00e9 uma etapa importante. Ele representa uma nova maneira de desenvolver temas e, portanto, precisa ser tratado de forma diferente dos m\u00e9todos cl\u00e1ssicos.<\/p>\n<p>Nossa abordagem seria configurar a URL do esquema, escolher uma vers\u00e3o da API e definir primeiro as configura\u00e7\u00f5es globais. Isso incluiria a paleta de cores, as op\u00e7\u00f5es de tipografia e as configura\u00e7\u00f5es de layout. Geralmente, a ativa\u00e7\u00e3o do <code>appearanceTools<\/code> tamb\u00e9m seria ben\u00e9fica:<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\"version\": 3,\n   \"settings\": {\n\"appearanceTools\": true,\n     \"color\": {\n       \"palette\": [\n         {\n           \"name\": \"Primary\",\n\"slug\": \"primary\",\n           \"color\": \"#0073aa\"\n         },\n         {\n      \"name\": \"Secondary\",\n        \"slug\": \"secondary\",\n           \"color\": \"#23282d\"\n         }\n       ]\n     },\n     \"typography\": {\n\"fluid\": true,\n       \"fontSizes\": [\n         {\n           \"size\": \"13px\",\n           \"slug\": \"small\",\n           \"name\": \"Small\"\n         },\n         {\n\"size\": \"16px\",\n           \"slug\": \"normal\",\n           \"name\": \"Normal\"\n\u2026<\/code><\/pre>\n<p>Em seguida, voc\u00ea pode procurar criar propriedades CSS personalizadas usando os slugs que definiu. Por exemplo, voc\u00ea pode ter criado fonte personalizados:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"custom\": {\n    \"fontWeight\": {\n        \"light\": 300,\n        \"regular\": 400,\n        \"medium\": 500,\n        \"bold\": 700\n    },\n\u2026<\/code><\/pre>\n<p>Quando voc\u00ea terminar de definir as configura\u00e7\u00f5es, \u00e9 hora de especificar os estilos.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"color\": {\n        \"background\": \"var(--wp--preset--color--base)\",\n        \"text\": \"var(--wp--preset--color--main)\"\n    },\n\u2026<\/code><\/pre>\n<p>A seguir, voc\u00ea personalizar\u00e1 os estilos de bloco, o que pode representar uma grande parte do seu arquivo <code>theme.json<\/code>.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"block\": {\n        \"core\/separator\": {\n            \"color\": {\n            \"text\": \"var(--wp--preset--color--main)\"\n            },\n        \"typography\": {\n            \"fontSize\": \"var(--wp--preset--font-size--large)\"\n            }\n        },\n        \"core\/site-tagline\": {\n            \"spacing\": {\n                \"margin\": {\n                    \"bottom\": \"20px\"\n                }\n            },\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--small)\"\n            }\n        },\n        \"core\/site-title\": {\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n                \"fontWeight\": \"var(--wp--custom--font-weight--semi-bold)\",\n                \"lineHeight\": \"var(--wp--custom--line-height--none)\"\n        },\n\u2026<\/code><\/pre>\n<p>Por fim, voc\u00ea dever\u00e1 criar todos os templates e partes de templates personalizados e registr\u00e1-los em <code>theme.json<\/code>. Esse tamb\u00e9m \u00e9 o momento de registrar todos os padr\u00f5es de blocos que voc\u00ea deseja usar e cri\u00e1-los, se necess\u00e1rio.<\/p>\n<h3>Usando a Kinsta como parte do fluxo de trabalho de desenvolvimento e personaliza\u00e7\u00e3o de temas<\/h3>\n<p>Antes de colocar qualquer altera\u00e7\u00e3o no ar, voc\u00ea dever\u00e1 testar tudo. At\u00e9 agora, \u00e9 prov\u00e1vel que voc\u00ea tenha trabalhado em uma ferramenta de desenvolvimento local, como o <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">DevKinsta<\/a>:<\/p>\n<figure id=\"attachment_183343\" aria-describedby=\"caption-attachment-183343\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/devkinsta.png\" alt=\"A interface do DevKinsta para um \u00fanico site. Ela mostra detalhes como a vers\u00e3o do WordPress, o servidor web, a vers\u00e3o do PHP e o tipo de banco de dados, juntamente com uma pr\u00e9-visualiza\u00e7\u00e3o da p\u00e1gina inicial do site.\" width=\"1200\" height=\"592\"><figcaption id=\"caption-attachment-183343\" class=\"wp-caption-text\">A interface do DevKinsta.<\/figcaption><\/figure>\n<p>No entanto, tamb\u00e9m \u00e9 importante que voc\u00ea verifique seu desenvolvimento em um site ativo. A <a href=\"https:\/\/kinsta.com\/pt\/docs\/devkinsta\/integracao-devkinsta\/#push-changes-to-staging\">integra\u00e7\u00e3o do DevKinsta<\/a> com a Kinsta\u00a0permite que voc\u00ea envie um site para um <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/ambientes-de-teste\/\">ambiente de teste<\/a> padr\u00e3o ou premium:<\/p>\n<figure id=\"attachment_183350\" aria-describedby=\"caption-attachment-183350\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183350 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/push-to-kinsta.png\" alt=\"A interface do DevKinsta exibindo informa\u00e7\u00f5es e controles do site. O menu suspenso do bot\u00e3o Sync est\u00e1 aberto, mostrando as op\u00e7\u00f5es \"Push to Kinsta\" e \"Pull from Kinsta\".\" width=\"1200\" height=\"417\"><figcaption id=\"caption-attachment-183350\" class=\"wp-caption-text\">As op\u00e7\u00f5es de sincroniza\u00e7\u00e3o dentro da DevKinsta.<\/figcaption><\/figure>\n<p>A partir da\u00ed, voc\u00ea pode testar seu tema em nossa melhor arquitetura de nuvem da categoria e desfrutar de controle total sobre as altera\u00e7\u00f5es que voc\u00ea envia para o ambiente de produ\u00e7\u00e3o.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode aproveitar nossa solu\u00e7\u00e3o completa de gerenciamento de backup, que permite restaurar backups autom\u00e1ticos di\u00e1rios nos ambientes de produ\u00e7\u00e3o e de teste. Al\u00e9m disso, todos os nossos ambientes de teste v\u00eam com DevTools para ajudar voc\u00ea a monitorar o desempenho do seu site antes de coloc\u00e1-lo em produ\u00e7\u00e3o.<\/p>\n<h2>Se voc\u00ea deve usar theme.json ou a edi\u00e7\u00e3o completa do site no WordPress<\/h2>\n<p>Considerando o cruzamento entre <code>theme.json<\/code> e a edi\u00e7\u00e3o completa do site, voc\u00ea pode se perguntar por que usar um em vez do outro. Na verdade, ambos se adaptam a cen\u00e1rios diferentes e devem ser usados em conjunto.<\/p>\n<p>Por exemplo, o <code>theme.json<\/code> ser\u00e1 a op\u00e7\u00e3o ideal para voc\u00ea nas seguintes situa\u00e7\u00f5es:<\/p>\n<ul>\n<li>Voc\u00ea desenvolve temas e cria um novo tema do zero.<\/li>\n<li>JSON \u00e9 uma linguagem que voc\u00ea entende e com a qual se sente confort\u00e1vel para trabalhar.<\/li>\n<li>Voc\u00ea deseja um m\u00e9todo program\u00e1tico para definir estilos e configura\u00e7\u00f5es padr\u00e3o para o seu tema.<\/li>\n<li>Os estilos e as configura\u00e7\u00f5es que voc\u00ea deseja implementar precisam de mais controle do que o que voc\u00ea pode encontrar por padr\u00e3o no Site Editor.<\/li>\n<\/ul>\n<p>\u00c9 verdade que esse \u00faltimo ponto ser\u00e1 de nicho, pois o FSE espelha quase exatamente a funcionalidade do <code>theme.json<\/code>. Dessa forma, a edi\u00e7\u00e3o completa do site far\u00e1 mais sentido para a maioria dos usu\u00e1rios nos seguintes cen\u00e1rios:<\/p>\n<ul>\n<li>Voc\u00ea \u00e9 propriet\u00e1rio de um site que deseja <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">personalizar um tema existente<\/a>.<\/li>\n<li>Voc\u00ea n\u00e3o est\u00e1 familiarizado com JSON.<\/li>\n<li>As interfaces visuais fazem mais sentido para o seu fluxo de trabalho de personaliza\u00e7\u00e3o e desenvolvimento.<\/li>\n<li>Voc\u00ea deseja fazer ajustes r\u00e1pidos sem a necessidade de codifica\u00e7\u00e3o extensiva.<\/li>\n<\/ul>\n<p>Na pr\u00e1tica, o tema precisar\u00e1 de um arquivo de configura\u00e7\u00e3o para definir suas bases. A partir da\u00ed, a hierarquia assume o controle, e os propriet\u00e1rios do site podem usar o FSE para fazer outras personaliza\u00e7\u00f5es.<\/p>\n<h2>Resumo<\/h2>\n<p>O arquivo de configura\u00e7\u00e3o <code>theme.json<\/code> \u00e9 revolucion\u00e1rio para o desenvolvimento de temas do WordPress. Ele oferece um local centralizado para as configura\u00e7\u00f5es e os estilos do seu tema e permite que voc\u00ea crie temas mais flex\u00edveis, f\u00e1ceis de manter e personaliz\u00e1veis.<\/p>\n<p>Voc\u00ea usar\u00e1 o arquivo juntamente com o Site Editor no WordPress para chegar ao design final de um site. As op\u00e7\u00f5es que voc\u00ea define em <code>theme.json<\/code> servem como padr\u00e3o, que o usu\u00e1rio final personalizar\u00e1 ainda mais. A boa not\u00edcia \u00e9 que codificar esse arquivo \u00e9 mais simples do que ajustar uma s\u00e9rie de arquivos PHP e CSS &#8211; e \u00e9 o futuro do design do WordPress.<\/p>\n<p>Voc\u00ea tem alguma d\u00favida sobre o uso do arquivo <code>theme.json<\/code> no WordPress? Fale conosco na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os desenvolvedores de WordPress t\u00eam mais controle do que nunca, \u00e0 medida que o ecossistema do WordPress continua a evoluir. A edi\u00e7\u00e3o completa de sites (FSE) &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69187,"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-69186","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>Liberando o Poder do theme.json - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!\" \/>\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\/pt\/blog\/theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional\" \/>\n<meta property=\"og:description\" content=\"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/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-08-05T07:26:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-09T10:13:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg\" \/>\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=\"23 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional\",\"datePublished\":\"2024-08-05T07:26:15+00:00\",\"dateModified\":\"2024-08-09T10:13:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\"},\"wordCount\":4144,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\",\"name\":\"Liberando o Poder do theme.json - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"datePublished\":\"2024-08-05T07:26:15+00:00\",\"dateModified\":\"2024-08-09T10:13:11+00:00\",\"description\":\"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Liberando o Poder do theme.json - Kinsta\u00ae","description":"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!","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\/pt\/blog\/theme-json\/","og_locale":"pt_PT","og_type":"article","og_title":"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional","og_description":"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!","og_url":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-08-05T07:26:15+00:00","article_modified_time":"2024-08-09T10:13:11+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"23 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional","datePublished":"2024-08-05T07:26:15+00:00","dateModified":"2024-08-09T10:13:11+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/"},"wordCount":4144,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/","url":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/","name":"Liberando o Poder do theme.json - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg","datePublished":"2024-08-05T07:26:15+00:00","dateModified":"2024-08-09T10:13:11+00:00","description":"Desenvolver temas com WordPress agora utiliza o arquivo theme.json. Este artigo aborda tudo sobre este importante arquivo de configura\u00e7\u00e3o!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/unleashing-the-power-of-themejson.jpg","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Liberando o Poder do theme.json: Personalizando seu Tema de WordPress como um Profissional"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=69186"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69186\/revisions"}],"predecessor-version":[{"id":69234,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69186\/revisions\/69234"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69186\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/69187"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=69186"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=69186"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=69186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}