Os desenvolvedores de WordPress têm mais controle do que nunca, à medida que o ecossistema do WordPress continua a evoluir. A edição completa de sites (FSE) oferece a todos os usuários a possibilidade de criar um tema do zero, especialmente ao usar o arquivo theme.json.

Os desenvolvedores também podem aproveitar o arquivo theme.json. Esse arquivo de configuração permite a personalização granular do seu tema de WordPress sem o tédio e a complexidade de linguagens de programação mais complexas.

Neste guia abrangente, exploraremos o que o arquivo theme.json tem a oferecer, inclusive sua relação com a edição completa de sites. Ao final, você entenderá como aproveitar seus recursos para criar sites modernos e de alto desempenho, independentemente da sua capacidade de desenvolvimento.

Apresentando o arquivo theme.json

Em sua essência, o theme.json é um arquivo de configuração que define as configurações e os estilos do seu tema de WordPress. Ele usa JavaScript Object Notation (JSON), que são dados estruturados que herdam os pares chave-valor de sua linguagem principal para permitir que você escreva seu código.

Um trecho de código JSON definindo uma estrutura de glossário. Inclui uma entrada para SGML (Standard Generalized Markup Language) com detalhes como seu acrônimo, abreviação, definição e termos relacionados.
Exemplo de código JSON.

O arquivo theme.json é fundamental para o controle de vários aspectos do seu tema. Isso inclui paletas de cores, configurações de tipografia, opções de layout, estilos por Bloco, propriedades CSS personalizadas e muito mais. Daremos mais detalhes sobre esses aspectos ao longo do artigo.

Embora isso não pareça muito revolucionário até o momento, o site theme.json é importante para o futuro do desenvolvimento do WordPress. A próxima seção explica por quê.

Por que o theme.json é relevante para o desenvolvimento de temas de WordPress

A abordagem típica do WordPress para desenvolvimento de temas e criação de plugins geralmente girava em torno da edição de arquivos de template com PHP, usando o arquivo functions.php e outras tarefas técnicas.

O arquivo theme.json marca uma mudança significativa, especialmente para o desenvolvimento de temas. Há alguns motivos para isso:

  • O arquivo representa um local único e organizado para definir as configurações e os estilos do seu tema. Isso reduz a necessidade de um conjunto disperso de arquivos CSS e PHP.
  • Essa abordagem centralizada de declarar estilos e configurações em theme.json significa que o WordPress pode gerar CSS mais eficiente. Em comparação com o uso de uma framework como o jQuery, existe a possibilidade de um melhor desempenho.
  • Você tem mais controle do que nunca sobre o estilo do seu site e de Blocos individuais. Isso democratiza o desenvolvimento de temas para usuários com menos conhecimento técnico.
  • À medida que o FSE continuar a evoluir, o arquivo theme.json terá uma função crucial na interação entre os temas, os estilos globais e o Editor de Blocos.

A combinação de todos esses aspectos resulta em uma maneira padronizada de definir configurações e estilos para o seu tema. Para quem deseja entender e trabalhar com diferentes temas, a adoção do theme.json permitirá criar temas WordPress mais robustos, flexíveis e fáceis de usar. Melhor ainda, essas criações estarão alinhadas com a direção futura da plataforma.

Onde encontrar o arquivo theme.json

Em primeiro lugar, você não encontrará um arquivo theme.json em temas “tradicionais” ou “clássicos”. Para encontrar e usar esse arquivo, você precisa de um Tema de Bloco dedicado. Dito isso, você pode criar o arquivo em qualquer tema, desde que execute o WordPress 5.8 ou superior.

O local típico do arquivo theme.json é wp-content/themes/[your-theme]. Se o arquivo não estiver lá, você deve abrir seu editor de código favorito e criar o arquivo conforme necessário. Por enquanto não se preocupe com o conteúdo, pois falaremos sobre isso em breve.

Captura de tela mostrando um editor de código 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.
Editando o arquivo theme.json em um tema WordPress de Bloco.

Se você precisar criar um novo arquivo do zero, mas também quiser ver os detalhes do que ele contém antes de personalizar o seu, confira o tema Twenty Twenty-Four padrão.

Captura de tela mostrando o arquivo theme.json do tema Twenty Twenty-Four aberto em um editor de código.
Visualizando o arquivo theme.json do tema Twenty Twenty-Four no editor de código.

Como um Tema de Bloco, você terá um arquivo theme.json para visualizar. Pode ser útil deixá-lo aberto enquanto analisamos a estrutura nas próximas seções.

O que você precisa para trabalhar com o theme.json

É claro que nem todo mundo conseguirá abrir o arquivo de configuração e começar a trabalhar. Você ainda precisará de algumas habilidades e conhecimentos fundamentais para criar e personalizar um tema:

  • Conhecimento básico de JSON. Acreditamos que isso é algo que você pode aprender rapidamente, mas, ainda assim, a familiaridade com a sintaxe e a estrutura do JSON é crucial.
  • Compreender CSS. Você descobrirá que muitos objetos e propriedades do theme.json correspondem a seus equivalentes em CSS. Você se beneficiará de conhecimentos de CSS.
  • Conhecimento do Editor de Blocos do WordPress. Entender como os Blocos funcionam, juntamente com suas opções de personalização, ajudará você a criar.

Embora não seja estritamente necessário, recomendamos que você compreenda pelo menos os principais conceitos do FSE, o que o ajudará a aproveitar o arquivo theme.json de forma mais eficaz. Você também poderá descobrir como as suas edições afetarão os ajustes do usuário final. Além disso, haverá casos em que você ainda precisará usar HTML e JavaScript para concretizar sua visão.

Por fim, recomendamos a você alguns “extras” técnicos:

  • Um editor de código. Se você escolher um editor de qualidade que ofereça destaque e validação de sintaxe JSON, será mais agradável executar seu fluxo de trabalho.
  • Ambiente de desenvolvimento local. Usar uma ferramenta como o DevKinsta para trabalhar no seu tema permitirá experimentar e testar suas alterações rapidamente e sem afetar um site ativo.

Com essas ferramentas e conhecimentos, você estará bem equipado para começar a personalizar seu tema do WordPress usando theme.json.

Observando a anatomia, a estrutura e a hierarquia do theme.json

O arquivo theme.json obviamente terá uma estrutura que você precisa entender. Também tem uma hierarquia, juntamente com alguns elementos exclusivos que precisam de mais explicações.

Essa é provavelmente a parte mais complexa do uso do arquivo de configuração, mas mesmo assim você compreenderá os conceitos facilmente.

Vamos começar com a estrutura e, em seguida, passar para os outros elementos do theme.json.

Estrutura básica

Visto que o arquivo segue o formato JSON, você já deve entender o conceito geral da estrutura. Em primeiro lugar, todo o objeto do arquivo fica entre chaves, assim como alguns dos vários outros objetos dentro dele. Cada objeto consiste em pares de valor-chave; use aspas simples ou duplas para as chaves, e vírgulas para encerrar a linha.

O mínimo que um arquivo theme.json precisa é dos objetos version, settings e styles:

{
    "version": 2,
    "settings": {
      // Global settings go here
    },
    "styles": {
      // Global styles go here
    }
}

Os objetos settings e styles são simples, mas o version requer mais explicações. Esse valor será um número inteiro que corresponde à versão da API que você usa para ler o arquivo. A versão atual da API é 3, embora a versão 2 também seja comum, e você pode migrar de versões anteriores.

A maioria das estruturas do arquivo theme.json também inclui um schema. Em resumo, isso permite que você trabalhe com o preenchimento automático em editores de código e fornece validação para o arquivo. Você adicionará isto na parte superior do arquivo:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
    },
    "styles": {
    }
}

A partir daí, você adicionará várias propriedades e objetos a settings e styles para desenvolver o arquivo.

Hierarquia

O arquivo theme.json segue uma estrutura hierárquica e é apenas um nível da hierarquia geral de configurações e estilos em seu site. Se você tiver conhecimento de CSS, será mais fácil entender isso, pois esse arquivo tem complexidade semelhante à do CSS.

Em resumo, as personalizações que você faz em theme.json nem sempre são exibidas no frontend do seu site. As configurações do usuário têm prioridade sobre tudo. Isso significa que todas as alterações feitas na tela Aparência > Editor do WordPress serão exibidas no frontend:

A interface principal do Editor de Sites no WordPress.
A interface principal do Editor de Sites no WordPress.

Se você usar um tema filho (child theme) e incluir um arquivo theme.json, ele substituirá todas as alterações que não forem feitas com o Editor de Sites. Da mesma forma, tudo que você definir no arquivo de configuração do tema principal (parent theme) substituirá as configurações e os estilos padrão do WordPress. É nesse arquivo que vamos nos concentrar neste artigo, embora o WordPress também tenha seu próprio arquivo theme.json.

Embora não seja o foco deste artigo, você também pode substituir valores usando hooks e filtros. Esses filtros dinâmicos permitem criar plugins e temas que também alteram as configurações e os estilos do tema e da plataforma.

Gramática de blocos

Se você acessar o Bloco do WordPress ou o Editor de Sites, abrir um artigo ou uma página e alternar o Editor de código, verá que há muitos comentários HTML no conteúdo:

A interface do editor de código do WordPress dentro do Editor de Blocos. Ela exibe o código HTML da política de privacidade de um site. O código inclui cabeçalhos e parágrafos com detalhes sobre o endereço do site, políticas de comentários e uso do Gravatar.
A tela de edição de código no Editor de Blocos do WordPress.

Isso ocorre porque, em vez de usar arquivos PHP, os temas de bloco usam arquivos HTML juntamente com comentários e marcação de bloco para criar seu site. A combinação desses elementos resulta na “gramática do bloco” de que você precisa para escrever o arquivo theme.json.

Para os blocos que contêm conteúdo, como o bloco de parágrafo, você deve envolver esse conteúdo:

<!-- wp:paragraph -->
    <p>Content goes here!</p>
<!-- /wp:paragraph -->

Em outros casos, você só precisará de comentários de linha única ou que se fechem automaticamente. Com alguns blocos, você combinará tipos para criar layouts e designs. Você também pode aninhar esses comentários:

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Aqui, criamos um bloco Columns usando um comentário wrapper. Dentro dele, podemos começar a adicionar HTML para projetar essas colunas e incluir wrappers de colunas individuais. Isso seria trivial no frontend, pois você coloca geralmente os blocos uns dentro dos outros.

Para encontrar a marcação de um determinado bloco, você pode navegar pelo Manual do Block Editor até encontrar o que precisa. A maneira mais fácil, porém, é simplesmente adicionar o bloco ao WordPress, abrir o Editor de código e copiar a marcação de lá.

No que diz respeito às alterações que você fará nessa marcação, trataremos disso em uma seção posterior.

Como o theme.json e a edição completa do site do WordPress se combinam

Com base na discussão sobre hierarquia, você entenderá que o theme.json é uma grande parte do FSE. Ambos trabalham juntos para oferecer a você uma solução abrangente de temas para o WordPress. Por exemplo, a interface Global Styles é essencialmente a representação visual de suas configurações do theme.json.

O Editor de Sites do WordPress, com o lado esquerdo exibindo parte do conteúdo de um site usando texto em uma cor vermelho escuro. À direita, o painel de Estilos foca nas configurações de Cores. Ele inclui um seletor de paleta de cores e opções para personalizar as cores de vários elementos do site, como texto, fundo, links e botões. Um verificador de contraste também está visível, mostrando o código hex #A62B0C para o tema de cor selecionado.
A barra lateral do Site Editor, mostrando as opções de estilos globais de um tema.

Você pode modificar as configurações no painel Estilos Globais ou no arquivo de configuração, e o WordPress atualizará os valores correspondentes conforme necessário. Embora as configurações do Editor de Sites tenham precedência, o theme.json funcionará como base para os estilos próprios do seu tema. Para o usuário final, o Global Styles permite que ele substitua os padrões por suas próprias personalizações sem a necessidade de código ou de editar o arquivo theme.json.

Além disso, as propriedades personalizadas de CSS que você define em theme.json ficam disponíveis na interface Estilos Globais. Isso permite que os usuários aproveitem essas propriedades para criar um estilo mais consistente em um site. Isso se estende à capacidade de definir estilos e configurações de blocos específicos também, que você pode ajustar ainda mais no painel do WordPress.

Em resumo, o theme.json oferece controle mais granular sobre configurações, estilos e muito mais. É uma ferramenta de nível de desenvolvedor que oferece uma experiência mais direta e simplificada do que as abordagens clássicas. Por outro lado, a interface Estilos Globais oferece a todos a chance de personalizar um tema de acordo com suas preferências. À medida que você desenvolver mais os temas, verá como ambos funcionam em conjunto para ajudar a criar designs e layouts de sites.

Trabalhando com as propriedades do arquivo theme.json

Com uma compreensão dos conceitos básicos, você pode começar a trabalhar com os objetos e as propriedades em theme.json. Não conseguiremos cobrir todos os casos de uso ou eventualidades. No entanto, ao final deste tutorial, você será capaz de criar temas que ofereçam funcionalidade total e tenham ótima aparência no frontend.

Configurações

A propriedade settings permite controlar quais recursos você oferece no Editor de Sites e como eles se comportam. É uma propriedade de nível superior e, normalmente, você encontrará vários níveis de aninhamento.

Quando analisarmos os estilos e suas variações, você verá que há alguns cruzamentos entre essas opções, mas ambos os tipos têm uma função na criação do seu tema.

Você tem um número seleto de propriedades disponíveis:

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

O WordPress Theme Developer Handbook oficial (manual oficial do desenvolvedor de temas do WordPress) inclui uma referência para todas essas configurações (e estilos). No entanto, aqui está uma rápida visão geral de algumas das mais importantes, que precisam de mais esclarecimentos:

  • appearanceTools. Essa propriedade genérica habilita várias outras e serve para que você economize tempo. Ela definirá opções de borda, alturas de linha de tipografia, preenchimento, margens e muito mais.
  • blocks. Embora a maior parte do seu trabalho seja voltada para configurações e estilos globais, a propriedade blocks permite que você faça isso por bloco. Não abordaremos o conceito em mais detalhes aqui, mas o Theme Developer Handbook tem uma excelente documentação sobre essa faceta do theme.json.
  • custom. Essa propriedade exclusiva não tem funcionalidade, pois você decide o que ela faz. Você a usará para criar propriedades CSS personalizadas para o seu tema, e o escopo que você tem a oferecer é amplo.
  • useRootPaddingAwareAlignments. Novamente, essa é uma propriedade complexa que não abordaremos por completo. Basicamente, ela ajuda você a posicionar os estilos de preenchimento horizontal do seu tema e tem muito poder. Você a usaria quando quisesse permitir que itens de largura total se estendessem até as bordas da tela enquanto usasse o preenchimento no elemento raiz.

Observe que você não precisa adicionar nenhuma propriedade a theme.json com a qual não queira trabalhar. Por exemplo, se não quiser trabalhar com appearanceTools, você pode simplesmente deixá-lo de fora em vez de defini-lo com false.

Como definir configurações no theme.json

Quando se trata de definir configurações, cada propriedade tem várias subpropriedades de pares de valores-chave. Por exemplo, você pode criar paletas de cores desta forma:

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

Outras propriedades têm valores booleanos simples, que ativam ou desativam esses recursos no Site Editor:

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

Depois de definir suas configurações, você pode introduzir um estilo para elas. Vamos examinar isso agora.

Estilos e variações de estilo

Enquanto settings define o acesso a determinadas opções de estilo, a propriedade styles permite que você defina esses estilos globais para o seu tema. Novamente, trata-se de uma propriedade de nível superior que usará vários níveis de aninhamento. Você pode direcionar elementos específicos, blocos ou até mesmo usar propriedades CSS personalizadas.

É importante definir os estilos de tema aqui para que você possa acessá-los e personalizá-los no Editor de Sites. Você pode trabalhar com vários elementos:

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

No entanto, você não usará com frequência muitos deles como propriedades de nível secundário. Em vez disso, alguns deles funcionarão principalmente com blocos ou elementos. Por exemplo:

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

Para estilos globais, você trabalhará na raiz, que se correlaciona com a tag <body> da sua página. Para elementos específicos, você pode seguir uma estrutura semelhante à dos blocos, desta vez usando a propriedade elements:

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

Se você observar todas as alterações feitas no Editor de Sites, deverá vê-las no lugar. A marcação também gerará CSS para os estilos que você criar:

Uma página inicial de site com o título "A commitment to innovation and sustainability" e um botão "About us". A metade inferior mostra a estrutura HTML do site no painel DevTools do navegador Brave.
O frontend de um site mostrando o navegador DevTools, destacando o CSS gerado para um elemento.

Observe que você também pode estilizar pseudoclasses para elementos, como os estilos hover e focus:

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

Aplicar estilos é ainda mais detalhado do que isso, e esse é um dos aspectos positivos fantásticos do uso do theme.json.

Variações de estilo

Antes de prosseguirmos, você deve conhecer as variações de estilo. Você pode ver essas várias paletas de cores e estilos de tipografia na interface do FSE:

A interface do Editor de Sites do WordPress exibindo as variações de estilo de um tema no lado esquerdo, com várias opções de fontes e cores. A área principal de conteúdo exibe um cabeçalho "A commitment to innovation and sustainability" com um subtítulo, um botão "About us" e uma imagem heroica de um prédio moderno.
A barra lateral de estilos no Site Editor, mostrando diferentes variações.

Entretanto, isso não é algo que você codifica no theme.json. Em vez disso, você criará versões alternativas do arquivo, dará a elas um nome exclusivo e as armazenará no diretório styles de um tema:

A interface do macOS exibindo duas janelas. A janela em segundo plano mostra um explorador de arquivos com múltiplos arquivos JSON para diferentes esquemas de cores. A janela em primeiro plano mostra um editor de código aberto no arquivo green.json, que contém configurações de cores do tema para um esquema de cores verde.
Um editor de código exibindo arquivos JSON de variação de estilo.

Observe que o título dentro da marcação é único para cada arquivo JSON alternativo. No entanto, é um campo opcional — embora recomendemos seu uso para clareza e a melhor experiência.

Templates personalizados e partes de template

Assim como as variações de estilo, o theme.json permite que você registre templates personalizados e partes de template associadas. Registrar a marcação é simples:

"customTemplates": [
    {
        "name": "my-template",
        "title": "My Template",
        "postTypes": [
            "page",
            "post"
        ]
    }
]

A propriedade customTemplates requer que você defina três elementos:

  • name. Este corresponde a um template que você cria no diretório de templates do seu tema, como /template/my-template.html.
  • title. Esta é a versão legível do nome do template.
  • postTypes. Sem definição, o padrão é uma página, mas você pode especificar um array de tipos de post que o template é adequado.

Os usuários poderão selecionar quaisquer templates que você registrar dentro do Editor de Sites ou do Editor de Blocos:

O Editor de Blocos do WordPress mostrando detalhes de uma página publicada, incluindo status, data de publicação, link, autor e template. Há um menu suspenso aberto com opções para editar, trocar, mostrar ou criar um novo template.
Você pode optar por editar, trocar, criar ou exibir um template no Editor de Sites WordPress.

Quando se trata de partes de templates, você não precisa registrá-las, mas recomendamos que o faça. A estrutura é semelhante à do registro de templates:

…
"templateParts": [
    {
        "area": "header",
        "name": "header",
        "title": "Header"
    },
…

Aqui, o nome e o título correspondem às mesmas definições dos templates completos. A área está relacionada ao local ao qual a parte pertence: header, footer ou uncategorized são os padrões, mas você pode atribuir partes de template a qualquer área personalizada.

Recomendamos que você também analise como exibir essas partes de template, pois elas não serão exibidas sem alguma codificação extra. Mesmo assim, registrá-las é simples.

Padrões

Para finalizar, vamos discutir os padrões do Bloco. Você pode agrupar qualquer número deles em seu arquivo theme.json usando uma array de nível superior. Qualquer padrão adequado da Biblioteca de Padrões do WordPress está disponível para você incluir em seu arquivo:

A tela de pesquisa da Biblioteca de Padrões do WordPress exibindo uma grade de templates de design de sites. Os templates incluem vários designs de banners e cabeçalhos com imagens, texto e botões.
A Biblioteca de Padrões do WordPress.

Definir o array é simples: você usa a propriedade patternse o slug do padrão associado a partir da URL da biblioteca:

Um close-up da barra de endereços de um navegador destacando o slug na URL na barra de ferramentas. O resto da tela mostra um padrão de imagem heroica laranja completo com um grande cabeçalho, uma pequena descrição e um botão "Shop Now".
Selecionando o slug de um padrão a partir da URL dentro de um navegador web.

Com esse slug, você pode preencher a marcação patterns:

{
    "version": 3,
    "patterns": [
        "fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
    ]
}

Você poderá selecioná-los no diretório de padrões do Editor de Blocos:

A interface do Editor de Blocos do WordPress mostrando um menu lateral de blocos e padrões à esquerda, com uma pré-visualização de vários designs de banners à direita. O banner principal exibido apresenta o texto em negrito
O diretório de padrões do WordPress no Editor de Blocos.

Essa maneira simples de trazer os ativos da Pattern Library para seus temas é útil e valiosa. É mais um motivo pelo qual o arquivo theme.json está se tornando rapidamente a maneira favorita de criar entre os desenvolvedores de temas do WordPress.

O fluxo de trabalho para personalizar seu site WordPress usando theme.json

Depois que você entender os principais componentes do theme.json, desenvolver seu fluxo de trabalho para usá-lo é uma etapa importante. Ele representa uma nova maneira de desenvolver temas e, portanto, precisa ser tratado de forma diferente dos métodos clássicos.

Nossa abordagem seria configurar a URL do esquema, escolher uma versão da API e definir primeiro as configurações globais. Isso incluiria a paleta de cores, as opções de tipografia e as configurações de layout. Geralmente, a ativação do appearanceTools também seria benéfica:

"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
   "settings": {
"appearanceTools": true,
     "color": {
       "palette": [
         {
           "name": "Primary",
"slug": "primary",
           "color": "#0073aa"
         },
         {
      "name": "Secondary",
        "slug": "secondary",
           "color": "#23282d"
         }
       ]
     },
     "typography": {
"fluid": true,
       "fontSizes": [
         {
           "size": "13px",
           "slug": "small",
           "name": "Small"
         },
         {
"size": "16px",
           "slug": "normal",
           "name": "Normal"
…

Em seguida, você pode procurar criar propriedades CSS personalizadas usando os slugs que definiu. Por exemplo, você pode ter criado fonte personalizados:

…
"custom": {
    "fontWeight": {
        "light": 300,
        "regular": 400,
        "medium": 500,
        "bold": 700
    },
…

Quando você terminar de definir as configurações, é hora de especificar os estilos.

…
"styles": {
    "color": {
        "background": "var(--wp--preset--color--base)",
        "text": "var(--wp--preset--color--main)"
    },
…

A seguir, você personalizará os estilos de bloco, o que pode representar uma grande parte do seu arquivo theme.json.

…
"styles": {
    "block": {
        "core/separator": {
            "color": {
            "text": "var(--wp--preset--color--main)"
            },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
            }
        },
        "core/site-tagline": {
            "spacing": {
                "margin": {
                    "bottom": "20px"
                }
            },
            "typography": {
                "fontSize": "var(--wp--preset--font-size--small)"
            }
        },
        "core/site-title": {
            "typography": {
                "fontSize": "var(--wp--preset--font-size--medium)",
                "fontWeight": "var(--wp--custom--font-weight--semi-bold)",
                "lineHeight": "var(--wp--custom--line-height--none)"
        },
…

Por fim, você deverá criar todos os templates e partes de templates personalizados e registrá-los em theme.json. Esse também é o momento de registrar todos os padrões de blocos que você deseja usar e criá-los, se necessário.

Usando a Kinsta como parte do fluxo de trabalho de desenvolvimento e personalização de temas

Antes de colocar qualquer alteração no ar, você deverá testar tudo. Até agora, é provável que você tenha trabalhado em uma ferramenta de desenvolvimento local, como o DevKinsta:

A interface do DevKinsta para um único site. Ela mostra detalhes como a versão do WordPress, o servidor web, a versão do PHP e o tipo de banco de dados, juntamente com uma pré-visualização da página inicial do site.
A interface do DevKinsta.

No entanto, também é importante que você verifique seu desenvolvimento em um site ativo. A integração do DevKinsta com a Kinsta permite que você envie um site para um ambiente de teste padrão ou premium:

A interface do DevKinsta exibindo informações e controles do site. O menu suspenso do botão Sync está aberto, mostrando as opções "Push to Kinsta" e "Pull from Kinsta".
As opções de sincronização dentro da DevKinsta.

A partir daí, você pode testar seu tema em nossa melhor arquitetura de nuvem da categoria e desfrutar de controle total sobre as alterações que você envia para o ambiente de produção.

Você também pode aproveitar nossa solução completa de gerenciamento de backup, que permite restaurar backups automáticos diários nos ambientes de produção e de teste. Além disso, todos os nossos ambientes de teste vêm com DevTools para ajudar você a monitorar o desempenho do seu site antes de colocá-lo em produção.

Se você deve usar theme.json ou a edição completa do site no WordPress

Considerando o cruzamento entre theme.json e a edição completa do site, você pode se perguntar por que usar um em vez do outro. Na verdade, ambos se adaptam a cenários diferentes e devem ser usados em conjunto.

Por exemplo, o theme.json será a opção ideal para você nas seguintes situações:

  • Você desenvolve temas e cria um novo tema do zero.
  • JSON é uma linguagem que você entende e com a qual se sente confortável para trabalhar.
  • Você deseja um método programático para definir estilos e configurações padrão para o seu tema.
  • Os estilos e as configurações que você deseja implementar precisam de mais controle do que o que você pode encontrar por padrão no Site Editor.

É verdade que esse último ponto será de nicho, pois o FSE espelha quase exatamente a funcionalidade do theme.json. Dessa forma, a edição completa do site fará mais sentido para a maioria dos usuários nos seguintes cenários:

  • Você é proprietário de um site que deseja personalizar um tema existente.
  • Você não está familiarizado com JSON.
  • As interfaces visuais fazem mais sentido para o seu fluxo de trabalho de personalização e desenvolvimento.
  • Você deseja fazer ajustes rápidos sem a necessidade de codificação extensiva.

Na prática, o tema precisará de um arquivo de configuração para definir suas bases. A partir daí, a hierarquia assume o controle, e os proprietários do site podem usar o FSE para fazer outras personalizações.

Resumo

O arquivo de configuração theme.json é revolucionário para o desenvolvimento de temas do WordPress. Ele oferece um local centralizado para as configurações e os estilos do seu tema e permite que você crie temas mais flexíveis, fáceis de manter e personalizáveis.

Você usará o arquivo juntamente com o Site Editor no WordPress para chegar ao design final de um site. As opções que você define em theme.json servem como padrão, que o usuário final personalizará ainda mais. A boa notícia é que codificar esse arquivo é mais simples do que ajustar uma série de arquivos PHP e CSS – e é o futuro do design do WordPress.

Você tem alguma dúvida sobre o uso do arquivo theme.json no WordPress? Fale conosco na seção de comentários abaixo!

Jeremy Holcombe Kinsta

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.