Decodificando o WordPress: Novas Opções de Configuração de Tema com o Arquivo Theme.JSON

Novas opções de configuração de temas no WordPress estão tornando mais fácil do que nunca modificar a aparência do seu site para suas necessidades específicas e únicas. Além disso, a capacidade de converter temas clássicos em temas de blocos está adicionando ainda mais funcionalidades amigáveis ao usuário.

Neste post do blog, o quarto da nossa série “Decodificando o WordPress”, discutiremos ambos os desenvolvimentos, incluindo o que são e como eles podem facilitar para você ter um site bonito e personalizado, seja você um desenvolvedor de WordPress iniciante ou intermediário.

Visão Geral dos Temas e Modelos do WordPress

Antes de abordarmos as novas opções para configurar seu tema utilizando as novas opções possibilitadas por um arquivo chamado theme.json, vamos nos familiarizar com o que realmente significa configurar um tema. Para ajudar nossa compreensão disso, vamos primeiro esclarecer a diferença entre um tema e um template no WordPress, já que frequentemente há alguma confusão sobre isso, especialmente se você for um iniciante.

Um tema é o design completo e a fundação para o visual e sensação coesos do seu site. Inclui coisas como paletas de cores, tipografia, layouts de página, margens, espaçamento entre linhas, cabeçalhos e rodapés, posicionamento de barras laterais e outros elementos. Quando você escolhe um tema e o instala, todos esses elementos são automaticamente instalados também. Existem praticamente inúmeros números de temas gratuitos e pagos disponíveis.

Um template, no entanto, é um layout de página única dentro de um tema do site. E embora modificações possam ser feitas em um template, elas são aplicadas apenas às páginas que utilizam esse template, e não a todo o site. Elementos como personalizar o layout do seu blog, construir páginas de aterrissagem, e dar a outros conteúdos uma aparência distinta são exemplos do que você pode alcançar por meio de templates.

Então, Quais São as Opções de Configuração de Tema?

As opções de configuração do tema são páginas de administração que vêm com alguns temas do WordPress. Essas páginas de administração permitem que você personalize as configurações do seu tema instalado sem a necessidade de modificar quaisquer arquivos do tema ou se envolver com a alteração de código. Algumas dessas páginas de administração podem oferecer algumas opções, enquanto outras podem ter muitas, muitas mais. Se você é um iniciante, a simplicidade relativa de uma página de administração versus a rota mais complicada pode ser uma economia de tempo — e de sanidade — bem-vinda.

Se seu objetivo é apenas melhorar ou alterar funcionalidades dentro de um tema, você pode simplificar bastante as coisas instalando um plugin em vez de reconfigurar todo o tema. No entanto, se você deseja modificar os estilos do tema e as configurações de blocos em todo o site, reconfigurar tudo por meio da personalização é o que você precisará fazer.

O que é JSON?

Para personalizar seu tema WordPress quando ele não inclui uma página admin, você precisará criar e adicionar um arquivo de configuração theme.json ao tema. Mas o que é JSON? A sigla significa Notação de Objeto JavaScript, que é um formato de intercâmbio de dados baseado em texto aberto que pode ser lido tanto por humanos quanto por máquinas e não está vinculado a nenhuma linguagem de programação específica. Seu uso mais comum é para a transmissão de dados em aplicações web.

theme.json foi adicionado ao WordPress na versão 5.8 e não funciona com versões anteriores do WordPress, a menos que você ative o Plugin Gutenberg. (O editor Gutenberg foi oficialmente lançado em 2018 junto com o WordPress 5.0.)

Algumas das opções de personalização que você pode escolher dentro de theme.json incluem:

• Habilitando ou desabilitando funcionalidades como capitulares, preenchimento de bloco, margens e alturas de linha personalizadas
• Adicionando múltiplas paletas de cores, gradientes e filtros duotone para fotos
• Modificando tamanhos de fonte
• Adicionando larguras padrão para o conteúdo
• Gerenciando propriedades de CSS (folha de estilo em cascata). CSS é usado para definir a aparência visual e formatação de documentos HTML.
• Atribuir partes de templates às áreas de partes de template

À medida que o desenvolvimento do Gutenberg avança, as opções disponíveis com theme.json no WordPress diferem entre a versão 5.8 (onde a versão 1 do theme.json é usada) até a versão 5.9+ (onde a versão 2 do theme.json é usada), bem como o plugin do Gutenberg.

Opções Explicadas

Com essas opções de personalização mais detalhadas agora ao alcance de desenvolvedores WordPress iniciantes e intermediários, vamos falar sobre o que elas são e por que elas podem ser benéficas para você.

Ativando ou desativando recursos como capitulares, preenchimento de bloco, margens e alturas de linha personalizadas

Iniciais maiúsculas (uma técnica de estilo na qual a primeira letra de um parágrafo tem um tamanho de fonte maior), preenchimento de bloco (o espaço dentro do bloco que fica entre o elemento/conteúdo e a borda do bloco, e que envolve todos os lados do elemento), margens e alturas de linha personalizadas podem dar às suas páginas uma aparência mais distintiva e até formal, dependendo de como você consegue estilizá-las.

Adicionando múltiplas paletas de cores, gradientes e filtros duotone para fotos

A paleta de cores certa – ou várias paletas – pode ajudar a definir e realçar a identidade comercializável tanto da sua marca quanto do seu site, e gradientes (fundos de duas cores que transitam uma para a outra) podem dar ao seu site uma identidade mais dinâmica do que usar apenas cores sólidas para as páginas do seu site. Filtros duotone podem ser aplicados a fotos que você carregou no seu site, e reduzem o número de cores na foto para apenas duas – uma para as partes escuras da foto, outra para as partes claras. Usando esses recursos dentro das configurações do tema do seu WordPress, os esquemas de cores do seu site podem ser formais, moderados ou vanguardistas – limitados apenas pela sua imaginação.

Alterando tamanhos de fonte

Às vezes, as fontes no tema escolhido podem se adequar à identidade, tom ou atitude específicos que você deseja transmitir, mas os tamanhos de fonte disponíveis podem não ser adequados. Eles podem ser muito pequenos ou muito grandes. Ao ter a opção de modificar os tamanhos, você pode personalizar cada aspecto da aparência do texto do seu site à imagem da sua marca.

Adicionando larguras padrão para o conteúdo

A largura do conteúdo é um recurso do tema pelo qual você pode definir a largura padrão ou máxima permitida (tamanho) para qualquer conteúdo no tema, como incorporações e imagens adicionadas às postagens. Quando você define larguras padrão, o WordPress pode dimensionar códigos de incorporação para tamanhos específicos no frontend e inserir imagens grandes sem quebrar a área principal do conteúdo.

Gerenciando propriedades customizadas de CSS (folha de estilo em cascata).

Se você passou algum tempo trabalhando com CSS, temos certeza que você está se perguntando por que você gostaria de escrever seu CSS personalizado no formato JSON radicalmente diferente. Em uma palavra: flexibilidade.

Vamos supor que você escolheu uma cor, verde floresta, para o seu site de que você realmente gosta. Com CSS, você teria que passar e adicionar o código da cor em todos os lugares onde deseja usar essa cor. Não é um grande problema, certo?

Agora, vamos supor que algumas semanas depois você encontre um tom de verde floresta um pouco mais escuro que prefira usar. Com CSS, você precisa voltar e encontrar/substituir todas as instâncias do código de cor “antigo” verde floresta pelo novo.

Mas, ao usar theme.json, você só precisaria atualizar a definição de cor uma vez, no arquivo JSON, para que ela mudasse em todo o seu site.

Atribuir partes de template às áreas de parte de template

Os modelos de página são arquivos que controlam a aparência de uma página específica e podem ser usados para aplicar layouts de página específicos a diferentes páginas do seu site. No WordPress, também existem partes de modelo, que funcionam como seções estruturais menores de um modelo de página.

Se você estiver olhando os arquivos do seu tema, geralmente verá partes do template para coisas como cabeçalhos ou rodapés. theme.json permite que você atribua partes do template às três áreas de colocação disponíveis em um template: Geral, Cabeçalho e Rodapé.

Converter ou Não Converter – Eis a Questão

Agora que você adquiriu um entendimento das opções de configuração de tema do WordPress disponíveis para você por meio do arquivo theme.json, queremos tocar em um último ponto: converter um tema clássico para um tema em blocos, e os problemas que você deve considerar ao converter.

Os temas em blocos no WordPress possuem uma série de benefícios, uma vez que foram construídos para melhorar tanto a escalabilidade quanto o desempenho.

• Os temas em blocos aumentam o desempenho de carregamento ao carregar os estilos apenas para os blocos que foram adicionados a uma página.
• Os temas em blocos não exigem que se enfileire manualmente as folhas de estilo tanto para o frontend como para os editores.
• theme.json lida com todos os aspectos de add_theme_support(), o que resulta em menos tempo manipulando PHP.
• Recursos de acessibilidade como Pular para o conteúdo, navegação por teclado e pontos de referência são gerados automaticamente sem adicionar código adicional.
• Com um tema em blocos, um usuário final pode editar todas as partes do seu site sem tocar em nenhum código.
• Ao usar a interface de Estilos, os usuários podem personalizar cores e tipografia para o site e para quaisquer blocos que possam usar.

Entretanto, converter um tema clássico para um tema de blocos não está isento de riscos.

• Converter um tema clássico para um tema de blocos pode afetar os temas filhos que esperam por um tema clássico. Considere os impactos potenciais — ou criar um novo projeto com um novo nome de tema — antes de converter.
• theme.json requer a versão 5.8 do WordPress ou posterior. Consequentemente, o suporte para o Internet Explorer 11 foi encerrado quando o WordPress 5.8 foi lançado. Assim, se o seu tema clássico suporta o IE11 — ou se você tem visitantes que usam o IE11 — converter para um tema de blocos pode impactar a experiência de seus visitantes.

Ajuda Profissional Disponível!

Embora personalizar seus temas do WordPress com opções através de um arquivo theme.json possa ser razoavelmente viável se você for um desenvolvedor de WordPress iniciante ou intermediário, talvez você ainda não esteja 100% seguro de que é um passo que se sente confortável para fazer sozinho. Não tenha medo, pois ao se inscrever nos três planos de hospedagem gerenciada do WordPress da DreamHost, você automaticamente ganha acesso ao nosso esquadrão de elite de especialistas em WordPress totalmente internos, que estão disponíveis 24/7 para ajudá-lo com isso e qualquer outro componente da sua jornada de desenvolvimento!