{"id":72060,"date":"2025-06-12T04:32:12","date_gmt":"2025-06-12T07:32:12","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=72060&preview=true&preview_id=72060"},"modified":"2025-06-16T12:33:49","modified_gmt":"2025-06-16T15:33:49","slug":"temas-hibridos","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/temas-hibridos\/","title":{"rendered":"Temas H\u00edbridos do WordPress: Uma Abordagem para Usu\u00e1rios e Desenvolvedores"},"content":{"rendered":"

O WordPress 5.9<\/a> introduziu uma nova maneira de criar sites: Edi\u00e7\u00e3o Completa do Site (Full Site Editing \u2013 FSE)<\/a>. Esse foi um marco para os usu\u00e1rios do WordPress, pois mudou completamente a maneira como os temas do WordPress s\u00e3o criados e funcionam.<\/p>\n

A introdu\u00e7\u00e3o do FSE tamb\u00e9m trouxe uma distin\u00e7\u00e3o entre os temas que oferecem suporte total aos novos recursos de constru\u00e7\u00e3o de sites \u2014 conhecidos como Temas de Blocos \u2014 e os temas tradicionais baseados em PHP, que agora chamamos de Temas Cl\u00e1ssicos.<\/p>\n

Com o tempo, muitos recursos criados para os Temas de Blocos foram incorporados aos Temas Cl\u00e1ssicos. Isso resultou em uma terceira categoria de temas: os Temas H\u00edbridos, que ainda s\u00e3o constru\u00eddos com a l\u00f3gica e a estrutura dos Temas Cl\u00e1ssicos, mas com suporte a v\u00e1rios recursos projetados para os Temas de Blocos.<\/p>\n

Este artigo explora os Temas H\u00edbridos, suas principais caracter\u00edsticas, como os desenvolvedores podem aprimor\u00e1-los e quando optar por eles em vez dos Temas de Blocos.<\/p>\n

Vamos ao que interessa!<\/p>\n

\"Uma
O Twenty Twenty-Two foi o primeiro tema do WordPress a oferecer suporte \u00e0 Edi\u00e7\u00e3o Completa do Site.<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Temas Cl\u00e1ssicos ou H\u00edbridos?<\/h2>\n

Antes da introdu\u00e7\u00e3o dos Temas de Blocos com o Twenty Twenty-Two<\/a> e o WordPress 5.9, n\u00e3o existia o conceito de Temas Cl\u00e1ssicos. Esse termo surgiu para diferenci\u00e1-los dos Temas de Blocos. Temas Cl\u00e1ssicos s\u00e3o todos os temas do WordPress que n\u00e3o oferecem suporte aos recursos de blocos.<\/p>\n

\"Pr\u00e9via
Uma pr\u00e9via do tema Twenty Twenty-One H\u00edbrido.<\/figcaption><\/figure>\n

Hoje em dia, n\u00e3o \u00e9 f\u00e1cil encontrar Temas Cl\u00e1ssicos \u201cpuros\u201d, porque desde o 5.9 esses temas foram aprimorados com muitos recursos desenvolvidos originalmente para Temas de Blocos, aproximando cada vez mais as experi\u00eancias de edi\u00e7\u00e3o e design das duas categorias.<\/p>\n

Dito isso, a forma como voc\u00ea trabalha com Temas H\u00edbridos ainda \u00e9 diferente da dos Temas de Blocos.<\/p>\n

Recursos b\u00e1sicos dos Temas H\u00edbridos<\/h2>\n

Com os Temas H\u00edbridos, seu site pode aproveitar os recursos de edi\u00e7\u00e3o do editor de blocos do WordPress, mantendo a compatibilidade com plugins tradicionais e funcionalidades como widgets, menus e templates de p\u00e1gina.<\/p>\n

O Customizador do WordPress<\/h3>\n

Os Temas H\u00edbridos geralmente oferecem suporte ao Customizador do WordPress<\/a>, um ambiente de configura\u00e7\u00e3o visual que permite ajustar a apar\u00eancia do site e visualizar as altera\u00e7\u00f5es em tempo real.<\/p>\n

O tema padr\u00e3o Twenty Twenty-One<\/a> \u00e9 um bom exemplo de tema h\u00edbrido que fornece as configura\u00e7\u00f5es mais comuns do Customizador, incluindo: Identidade do Site, Cores e Modo Escuro, Imagem de Fundo, Menus, Widgets, Configura\u00e7\u00f5es da P\u00e1gina Inicial, entre outros.<\/p>\n

\"O
O Customizador com o tema Twenty Twenty-One.<\/figcaption><\/figure>\n

Os temas podem registrar controles espec\u00edficos no Customizador, ent\u00e3o os recursos dispon\u00edveis variam conforme o tema. A imagem a seguir mostra o Customizador do Neve<\/a>, um tema h\u00edbrido leve da ThemeIsle.<\/p>\n

\"Visualiza\u00e7\u00e3o
Visualiza\u00e7\u00e3o do Customizador do tema Neve para WordPress<\/figcaption><\/figure>\n

Os temas tamb\u00e9m podem registrar recursos avan\u00e7ados que permitem controle detalhado sobre elementos espec\u00edficos do design. O tema Neve, por exemplo, oferece um construtor completo de cabe\u00e7alho e rodap\u00e9 dentro do Customizador.<\/p>\n

\"Neve
Neve possui um construtor de cabe\u00e7alho no Customizador<\/figcaption><\/figure>\n

Widgets em blocos<\/h3>\n

Os Temas H\u00edbridos permitem personalizar as \u00e1reas de widget usando blocos, gra\u00e7as ao editor de widgets baseado em blocos<\/a>. Esse recurso foi introduzido no WordPress 5.8<\/a> e pode ser utilizado com qualquer Tema Cl\u00e1ssico que use widgets.<\/p>\n

\"A
A tela de Widgets no tema Twenty Twenty-One<\/figcaption><\/figure>\n

A interface do Editor de Widgets \u00e9 semelhante \u00e0 do Editor de Artigos. A imagem abaixo mostra um bloco de imagem na \u00e1rea de widget do rodap\u00e9 no tema Twenty Twenty-One.<\/p>\n

\"Captura
O editor de widgets traz recursos de bloco para widgets cl\u00e1ssicos<\/figcaption><\/figure>\n

Widgets cl\u00e1ssicos como Categorias, Arquivos, Posts Recentes ou Coment\u00e1rios Recentes ainda s\u00e3o suportados em Temas H\u00edbridos. O Editor de Widgets complementa os widgets cl\u00e1ssicos do WordPress, permitindo que os usu\u00e1rios criem os seus pr\u00f3prios com a interface baseada em blocos.<\/p>\n

Livro de Estilos e Padr\u00f5es de Blocos<\/h3>\n

Com as mudan\u00e7as recentes introduzidas no WordPress 6.8<\/a>, Temas H\u00edbridos que oferecem suporte a estilos do editor<\/a> podem usar o Livro de Estilos (Style Book)<\/strong> \u2014 uma interface visual<\/a> que permite aos usu\u00e1rios visualizar qualquer bloco dispon\u00edvel em seus sites, sem precisar inseri-los diretamente no conte\u00fado.<\/p>\n

Voc\u00ea pode acessar o Livro de Estilos nos Temas H\u00edbridos em: Apar\u00eancia > Design > Estilos.<\/strong><\/p>\n

A imagem a seguir mostra o Style Book do tema h\u00edbrido Kadence.<\/p>\n

\"Livro
Livro de Estilos no tema h\u00edbrido Kadence.<\/figcaption><\/figure>\n

Na mesma interface, voc\u00ea pode navegar e gerenciar Padr\u00f5es (Patterns).<\/p>\n

\"Padr\u00f5es
Padr\u00f5es do tema Blocksy.<\/figcaption><\/figure>\n

Para Temas H\u00edbridos que oferecem suporte a padr\u00f5es, eles ficam dispon\u00edveis para uso no Editor de Artigos<\/a>, que est\u00e1 habilitado por padr\u00e3o em todas as instala\u00e7\u00f5es do WordPress desde a vers\u00e3o 5.0 (a menos que tenha sido desabilitado com o plugin Classic Editor<\/a>).<\/p>\n

\"Se\u00e7\u00e3o
Se\u00e7\u00e3o de Padr\u00f5es no inseridor de blocos do Editor de Artigos com o tema Twenty Twenty-One.<\/figcaption><\/figure>\n

Estrutura de temas: vis\u00e3o geral para desenvolvedores<\/h2>\n

Temas Cl\u00e1ssicos e Temas de Blocos n\u00e3o se diferenciam apenas em termos de funcionalidades para o usu\u00e1rio final \u2014 eles tamb\u00e9m possuem estruturas distintas do ponto de vista do desenvolvimento.<\/p>\n

Temas cl\u00e1ssicos<\/h3>\n

Os Temas Cl\u00e1ssicos dependem de alguns arquivos-chave, sendo o principal o style.css<\/code>, que fornece os metadados do tema<\/a> e define a apar\u00eancia visual do site no front-end.<\/p>\n

Al\u00e9m da folha de estilos, esses temas normalmente incluem um arquivo functions.php<\/code><\/a>, respons\u00e1vel por construir a funcionalidade do tema e oferecer suporte a recursos adicionais.<\/p>\n

Temas Cl\u00e1ssicos utilizam templates PHP para definir a estrutura da p\u00e1gina e suas \u00e1reas principais: cabe\u00e7alho, corpo, barras laterais e rodap\u00e9. Quando um usu\u00e1rio acessa uma p\u00e1gina ou post, o WordPress escolhe qual template aplicar com base em um sistema de regras conhecido como hierarquia de templates<\/a>. Os templates mais comuns incluem index.php<\/code>, page.php<\/code>, single.php<\/code>, entre outros.<\/p>\n

Esses temas tamb\u00e9m fazem uso de fun\u00e7\u00f5es PHP espec\u00edficas (como hooks de a\u00e7\u00f5es e filtros<\/a>), que s\u00e3o executadas em momentos determinados do ciclo de vida do WordPress. Isso permite que os desenvolvedores ampliem as funcionalidades usando c\u00f3digo PHP no functions.php de um tema filho (child theme)<\/a>.<\/p>\n

Como voc\u00ea pode imaginar, personalizar um Tema Cl\u00e1ssico pode ser especialmente dif\u00edcil para usu\u00e1rios sem conhecimento em programa\u00e7\u00e3o.<\/p>\n

Temas de bloco<\/h3>\n

Os Temas de Blocos tamb\u00e9m usam o arquivo style.css<\/code> para fornecer os metadados do tema ao WordPress, mas dependem fortemente do arquivo theme.json<\/code><\/a>, que define estilos globais e configura\u00e7\u00f5es do tema. Ele cont\u00e9m um objeto JSON<\/a> com propriedades que determinam os estilos iniciais<\/a>, layout e apar\u00eancia das p\u00e1ginas do site.<\/p>\n

Esses temas utilizam templates e partes de templates (template parts<\/em>), mas de forma estruturalmente diferente dos templates em PHP dos temas cl\u00e1ssicos. Nos Temas de Blocos, os templates s\u00e3o arquivos HTML contendo marca\u00e7\u00e3o espec\u00edfica e objetos JSON embutidos.<\/p>\n

Por exemplo, veja um trecho do template home.html<\/code> do tema padr\u00e3o Twenty Twenty-Five<\/a>:<\/p>\n

<!-- wp:template-part {\"slug\":\"header\"} \/-->\n\n<!-- wp:group {\"tagName\":\"main\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|60\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<main class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/hidden-blog-heading\"} \/-->\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/template-query-loop\"} \/-->\n<\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {\"slug\":\"footer\"} \/--><\/code><\/pre>\n
Esse template \u00e9 composto por elementos estruturados na forma de tags HTML e coment\u00e1rios. Os coment\u00e1rios fazem refer\u00eancia a elementos t\u00edpicos de um tema de blocos, como partes de template e padr\u00f5es \u2014 todos compostos por blocos ou elementos aninhados.<\/p>\n
Adicionando recursos de blocos a Temas H\u00edbridos<\/h2>\n
Como mencionamos acima, com Temas Cl\u00e1ssicos \u00e9 necess\u00e1rio adicionar c\u00f3digo personalizado para alterar o layout ou a funcionalidade de um site, geralmente modificando arquivos de template ou o functions.php<\/code>. Em contraste, Temas de Blocos d\u00e3o aos usu\u00e1rios n\u00e3o desenvolvedores mais controle sobre o layout e apar\u00eancia do site.<\/p>\n
Temas H\u00edbridos oferecem menos recursos de blocos que os Temas de Blocos, mas ainda podem proporcionar maior controle de layout e estilo por meio de padr\u00f5es e estilos globais.<\/p>\n
Vamos explorar alguns recursos poderosos de blocos que voc\u00ea pode integrar ao seu tema cl\u00e1ssico e aprender a implement\u00e1-los com efic\u00e1cia.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Estilos Globais<\/h3>\n
O WordPress 5.8<\/a> introduziu os Estilos Globais (Global Styles), uma interface visual que permite aos usu\u00e1rios controlar a apar\u00eancia do site a partir de um \u00fanico local e, aos desenvolvedores, controlar os estilos por meio do arquivo theme.json<\/code>.<\/p>\n
Para ativar esse recurso em seu tema h\u00edbrido, basta adicionar um arquivo theme.json<\/code> na raiz do tema. Veja a seguir como adicionar alguns recursos com esse arquivo.<\/p>\n
Tipografia<\/h4>\n
Digamos que voc\u00ea queira adicionar suporte a tr\u00eas fam\u00edlias de fontes ao seu tema cl\u00e1ssico. Neste exemplo, usaremos o Twenty Twenty-One<\/a>.<\/p>\n
Primeiro, crie uma pasta fonts<\/code> em assets<\/code> e carregue algumas fontes de sua escolha. Estamos adicionando tr\u00eas fontes: Manrope<\/code>, Fira Code<\/code>e Beiruti<\/code>. Voc\u00ea pode obter essas fontes no tema Twenty Twenty-Five<\/a>.<\/p>\n
\"Tr\u00eas
Adicionamos tr\u00eas fontes e um arquivo theme.json adicionados ao tema Twenty Twenty-One<\/figcaption><\/figure>\n
Abra seu editor de texto e crie o seguinte theme.json<\/code>:<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"768px\",\n\t\t\t\"wideSize\": \"1024px\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Manrope\",\n\t\t\t\t\t\"slug\": \"manrope\",\n\t\t\t\t\t\"fontFamily\": \"Manrope, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"200 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Manrope\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Fira Code\",\n\t\t\t\t\t\"slug\": \"fira-code\",\n\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\", monospace\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\"\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Beiruti\",\n\t\t\t\t\t\"slug\": \"beiruti\",\n\t\t\t\t\t\"fontFamily\": \"Beiruti, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/beiruti\/Beiruti-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Beiruti\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n
A propriedade settings.typography.fontFamilies<\/code> permite que voc\u00ea registre qualquer n\u00famero de fam\u00edlias de fontes personalizadas<\/a>. Para cada fonte, voc\u00ea precisar\u00e1 declarar as seguintes propriedades:<\/p>\n