O WordPress 5.9 introduziu uma nova maneira de criar sites: Edição Completa do Site (Full Site Editing – FSE). Esse foi um marco para os usuários do WordPress, pois mudou completamente a maneira como os temas do WordPress são criados e funcionam.
A introdução do FSE também trouxe uma distinção entre os temas que oferecem suporte total aos novos recursos de construção de sites — conhecidos como Temas de Blocos — e os temas tradicionais baseados em PHP, que agora chamamos de Temas Clássicos.
Com o tempo, muitos recursos criados para os Temas de Blocos foram incorporados aos Temas Clássicos. Isso resultou em uma terceira categoria de temas: os Temas Híbridos, que ainda são construídos com a lógica e a estrutura dos Temas Clássicos, mas com suporte a vários recursos projetados para os Temas de Blocos.
Este artigo explora os Temas Híbridos, suas principais características, como os desenvolvedores podem aprimorá-los e quando optar por eles em vez dos Temas de Blocos.
Vamos ao que interessa!
Temas Clássicos ou Híbridos?
Antes da introdução dos Temas de Blocos com o Twenty Twenty-Two e o WordPress 5.9, não existia o conceito de Temas Clássicos. Esse termo surgiu para diferenciá-los dos Temas de Blocos. Temas Clássicos são todos os temas do WordPress que não oferecem suporte aos recursos de blocos.
Hoje em dia, não é fácil encontrar Temas Clássicos “puros”, porque desde o 5.9 esses temas foram aprimorados com muitos recursos desenvolvidos originalmente para Temas de Blocos, aproximando cada vez mais as experiências de edição e design das duas categorias.
Dito isso, a forma como você trabalha com Temas Híbridos ainda é diferente da dos Temas de Blocos.
Recursos básicos dos Temas Híbridos
Com os Temas Híbridos, seu site pode aproveitar os recursos de edição do editor de blocos do WordPress, mantendo a compatibilidade com plugins tradicionais e funcionalidades como widgets, menus e templates de página.
O Customizador do WordPress
Os Temas Híbridos geralmente oferecem suporte ao Customizador do WordPress, um ambiente de configuração visual que permite ajustar a aparência do site e visualizar as alterações em tempo real.
O tema padrão Twenty Twenty-One é um bom exemplo de tema híbrido que fornece as configurações mais comuns do Customizador, incluindo: Identidade do Site, Cores e Modo Escuro, Imagem de Fundo, Menus, Widgets, Configurações da Página Inicial, entre outros.
Os temas podem registrar controles específicos no Customizador, então os recursos disponíveis variam conforme o tema. A imagem a seguir mostra o Customizador do Neve, um tema híbrido leve da ThemeIsle.
Os temas também podem registrar recursos avançados que permitem controle detalhado sobre elementos específicos do design. O tema Neve, por exemplo, oferece um construtor completo de cabeçalho e rodapé dentro do Customizador.
Widgets em blocos
Os Temas Híbridos permitem personalizar as áreas de widget usando blocos, graças ao editor de widgets baseado em blocos. Esse recurso foi introduzido no WordPress 5.8 e pode ser utilizado com qualquer Tema Clássico que use widgets.
A interface do Editor de Widgets é semelhante à do Editor de Artigos. A imagem abaixo mostra um bloco de imagem na área de widget do rodapé no tema Twenty Twenty-One.
Widgets clássicos como Categorias, Arquivos, Posts Recentes ou Comentários Recentes ainda são suportados em Temas Híbridos. O Editor de Widgets complementa os widgets clássicos do WordPress, permitindo que os usuários criem os seus próprios com a interface baseada em blocos.
Livro de Estilos e Padrões de Blocos
Com as mudanças recentes introduzidas no WordPress 6.8, Temas Híbridos que oferecem suporte a estilos do editor podem usar o Livro de Estilos (Style Book) — uma interface visual que permite aos usuários visualizar qualquer bloco disponível em seus sites, sem precisar inseri-los diretamente no conteúdo.
Você pode acessar o Livro de Estilos nos Temas Híbridos em: Aparência > Design > Estilos.
A imagem a seguir mostra o Style Book do tema híbrido Kadence.
Na mesma interface, você pode navegar e gerenciar Padrões (Patterns).
Para Temas Híbridos que oferecem suporte a padrões, eles ficam disponíveis para uso no Editor de Artigos, que está habilitado por padrão em todas as instalações do WordPress desde a versão 5.0 (a menos que tenha sido desabilitado com o plugin Classic Editor).
Estrutura de temas: visão geral para desenvolvedores
Temas Clássicos e Temas de Blocos não se diferenciam apenas em termos de funcionalidades para o usuário final — eles também possuem estruturas distintas do ponto de vista do desenvolvimento.
Temas clássicos
Os Temas Clássicos dependem de alguns arquivos-chave, sendo o principal o style.css, que fornece os metadados do tema e define a aparência visual do site no front-end.
Além da folha de estilos, esses temas normalmente incluem um arquivo functions.php, responsável por construir a funcionalidade do tema e oferecer suporte a recursos adicionais.
Temas Clássicos utilizam templates PHP para definir a estrutura da página e suas áreas principais: cabeçalho, corpo, barras laterais e rodapé. Quando um usuário acessa uma página ou post, o WordPress escolhe qual template aplicar com base em um sistema de regras conhecido como hierarquia de templates. Os templates mais comuns incluem index.php, page.php, single.php, entre outros.
Esses temas também fazem uso de funções PHP específicas (como hooks de ações e filtros), que são executadas em momentos determinados do ciclo de vida do WordPress. Isso permite que os desenvolvedores ampliem as funcionalidades usando código PHP no functions.php de um tema filho (child theme).
Como você pode imaginar, personalizar um Tema Clássico pode ser especialmente difícil para usuários sem conhecimento em programação.
Temas de bloco
Os Temas de Blocos também usam o arquivo style.css para fornecer os metadados do tema ao WordPress, mas dependem fortemente do arquivo theme.json, que define estilos globais e configurações do tema. Ele contém um objeto JSON com propriedades que determinam os estilos iniciais, layout e aparência das páginas do site.
Esses temas utilizam templates e partes de templates (template parts), mas de forma estruturalmente diferente dos templates em PHP dos temas clássicos. Nos Temas de Blocos, os templates são arquivos HTML contendo marcação específica e objetos JSON embutidos.
Por exemplo, veja um trecho do template home.html do tema padrão Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Esse template é composto por elementos estruturados na forma de tags HTML e comentários. Os comentários fazem referência a elementos típicos de um tema de blocos, como partes de template e padrões — todos compostos por blocos ou elementos aninhados.
Adicionando recursos de blocos a Temas Híbridos
Como mencionamos acima, com Temas Clássicos é necessário adicionar código personalizado para alterar o layout ou a funcionalidade de um site, geralmente modificando arquivos de template ou o functions.php. Em contraste, Temas de Blocos dão aos usuários não desenvolvedores mais controle sobre o layout e aparência do site.
Temas Híbridos oferecem menos recursos de blocos que os Temas de Blocos, mas ainda podem proporcionar maior controle de layout e estilo por meio de padrões e estilos globais.
Vamos explorar alguns recursos poderosos de blocos que você pode integrar ao seu tema clássico e aprender a implementá-los com eficácia.
Estilos Globais
O WordPress 5.8 introduziu os Estilos Globais (Global Styles), uma interface visual que permite aos usuários controlar a aparência do site a partir de um único local e, aos desenvolvedores, controlar os estilos por meio do arquivo theme.json.
Para ativar esse recurso em seu tema híbrido, basta adicionar um arquivo theme.json na raiz do tema. Veja a seguir como adicionar alguns recursos com esse arquivo.
Tipografia
Digamos que você queira adicionar suporte a três famílias de fontes ao seu tema clássico. Neste exemplo, usaremos o Twenty Twenty-One.
Primeiro, crie uma pasta fonts em assets e carregue algumas fontes de sua escolha. Estamos adicionando três fontes: Manrope, Fira Codee Beiruti. Você pode obter essas fontes no tema Twenty Twenty-Five.
Abra seu editor de texto e crie o seguinte theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}A propriedade settings.typography.fontFamilies permite que você registre qualquer número de famílias de fontes personalizadas. Para cada fonte, você precisará declarar as seguintes propriedades:
-
name: Nome legível da família tipográfica (obrigatório). -
slug: Identificador usado para gerar a propriedade CSS--wp--preset--font-family--{slug}(obrigatório). -
fontFamily: Valor CSS usado na propriedadefont-family(obrigatório). -
fontFace: Array opcional com fontes mapeadas para a regra@font-face.
Após salvar o theme.json, acesse o painel do WordPress, crie um novo artigo ou página, adicione um parágrafo e abra a barra lateral do bloco. Clique nas opções de Tipografia e selecione a fonte. As fontes adicionadas devem aparecer como opções disponíveis.
As propriedades globais de estilo variam de acordo com o tema. Além detypography, as propriedades comumente suportadas permitem que você controle a paleta de cores, o layout e os estilos personalizados. Os exemplos a seguir foram testados no Twenty Twenty-One.
Paleta de cores, gradientes e filtros de duotons
Você pode adicionar suporte a cores personalizadas usando a propriedade settings.color no nível do tema ou do bloco individual. Por exemplo, o código a seguir adiciona duas cores à paleta padrão:
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}Você pode usar a propriedade settings.color.palette para registrar quantas cores quiser.
Você também pode adicionar suporte a gradientes e filtro duotone:
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Layout
Você também pode personalizar as configurações de layout padrão. A propriedade settings.layout permite que você defina a largura padrão do conteúdo e a largura do alinhamento amplo. Aqui está um exemplo:
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}Para obter uma visão geral mais detalhada de theme.json, confira nosso tutorial abrangente sobre theme.json e a documentação oficial do WordPress.
Variações de estilo de bloco
Introduzidas pela primeira vez no WordPress 5.3, as variações de estilo de bloco permitem que os desenvolvedores criem estilos alternativos para blocos específicos.
Em suma, os estilos de bloco são classes CSS adicionadas ao elemento de cobertura de um bloco no formato .is-style-{name}.
As variações de estilo de bloco aparecem na aba Estilos da barra lateral dos blocos e podem ser aplicadas com um clique.
Você pode registrar suas variações de estilo de bloco de diversas maneiras.
Primeiro, você pode registrar estilos de bloco usando a função PHP register_block_style(). Por exemplo, você pode registrar a seguinte variação de estilo no arquivo de funções do seu tema:
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' ); register_block_style() aceita dois argumentos:
$block_name: o nome de um tipo de bloco ou um array de tipos de blocos.$style_properties: um array contendo as propriedades de estilo. Neste exemplo, usamosname,labeleinline_style.
O código acima gera uma variação de estilo de bloco com uma única propriedade CSS. Assim que esse código for adicionado ao arquivo functions.php do seu tema (ou tema filho – child theme), um botão será exibido no painel de estilos do bloco para que o usuário possa aplicar o estilo com apenas um clique.
A mesma variação de estilo do bloco é exibida no frontend com o tema Twenty Twenty-One.
Você pode adicionar os estilos diretamente no PHP, como no exemplo acima, mas o código pode rapidamente se tornar difícil de manter à medida que os estilos se tornam mais complexos. Nesses casos, você pode registrar a variação no PHP e definir os estilos no arquivo theme.json.
No exemplo a seguir, criamos uma variação de estilo azul-escuro para o bloco de Título.
Primeiro, registre a variação de estilo no arquivo functions.php do tema:
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}Em seguida, defina os estilos de variação em seu arquivo theme.json:
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}Agora, os usuários do seu tema podem escolher entre duas variações de estilo para o bloco Titulo, conforme mostrado na imagem a seguir.
Variações de bloco
As variações de bloco são versões alternativas de qualquer bloco registrado. Enquanto as variações de estilo de bloco (ou estilos de bloco) são versões personalizadas de um estilo de bloco que os usuários podem adicionar ao conteúdo com um único clique, as variações de bloco são versões alternativas das configurações de um bloco. Elas permitem que os usuários insiram rapidamente um bloco com configurações pré-configuradas sem precisar definir as mesmas configurações para cada instância de bloco.
A API Block Variations permite que os Temas Híbridos registrem variações de blocos via JavaScript. Nos casos mais simples, criar um script e enfileirá-lo pode resolver o problema, mas se você trabalha muito com JavaScript e blocos do Gutenberg, talvez queira incorporar ferramentas de build ao seu fluxo de trabalho. (Leitura sugerida).
Suponha que você deseje criar uma variação de bloco com um conjunto de opções pré-configuradas para que sua variação possa ser inserida rapidamente em seus artigos ou páginas com o mínimo de configuração adicional necessária.
A primeira etapa é criar um arquivo JavaScript vazio e carregá-lo no editor. Você precisará enfileirá-lo no arquivo functions.php do seu tema usando wp_enqueue_script() e o hook de ação enqueue_block_editor_assets.
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );No código acima, usamos ?cache_bust=' . time() para adicionar um carimbo de data/hora exclusivo à URL do block-variations.js (por exemplo, block-variations.js?cache_bust=1698765432). Isso é particularmente útil durante o desenvolvimento, pois garante que o navegador, o servidor ou o CDN sempre carreguem a versão mais recente do script, evitando que uma versão desatualizada em cache bloqueie a exibição das alterações.
Em seguida, você precisa registrar sua variação de bloco no seu script usando a função registerBlockVariation fornecida pela API Block Variations.
Aqui está a assinatura da função:
const registerBlockVariation = ( blockName, variation )blockName: o nome do bloco (ou seja,core/query.)variation: um objeto que descreve uma variação para o tipo de bloco.
O objeto variation pode incluir qualquer um dos seguintes parâmetros:
name: (string) um identificador exclusivo da variação.title: (string) um título de variação legível por humanos.description: (string) uma descrição detalhada.category: (string) uma categoria usada nas interfaces de pesquisa.keywords: (Array) um array de termos que ajudam os usuários a descobrir a variação.icon: (WPIcon) um ícone a ser exibido no inseridor de blocos.isDefault: (boolean) indica se a variação atual é a padrão. O padrão éfalse.isActive: (Function/Array) uma função ou um array de atributos de bloco usada para determinar se a variação está ativa quando o bloco é selecionado. SemisActive, o WordPress não saberia distinguir a sua variação de um bloco padrão ou de outras variações, o que causaria um comportamento inconsistente no editor.attributes: (Object) valores de atributos que substituem os padrões do bloco.innerBlocks: (Array[]) configuração inicial do bloco aninhado.example: (Object) dados estruturados para a prévia do bloco. Defina comoundefinedpara desativar a prévia.scope: (WPBlockVariationScope[]) A lista de escopos em que a variação é aplicável. Quando não fornecida, ela assume todos os escopos disponíveis. As opções disponíveis sãoblock,inserteretransform. O padrão éblockeinserter.
Agora você pode adicionar o JavaScript ao arquivo block-variations.js:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );Esse código adiciona um novo tipo de bloco com um ícone de avião ao inseridor de blocos. Quando você clica no avião, uma nova variação do bloco de título é adicionada à página com suas configurações personalizadas. Definimos o nível do cabeçalho (H2), centralizamos o texto, configuramos um placeholder e definimos as cores de texto e fundo do cabeçalho.
Observação: Para que esse código funcione conforme o esperado, certifique-se de que o tema híbrido que você usa oferece suporte a recursos do editor, como 'editor-color-palette', editor-styles e outros. Para obter uma lista mais abrangente de suportes, consulte a API Block Variations.
Padrões de blocos
Padrões de blocos são grupos de blocos pré-construídos que você pode adicionar ao seu conteúdo e personalizar usando a interface do editor de blocos.
Temas em blocos geralmente fornecem um número variável de padrões de blocos que você pode adicionar ao seu conteúdo diretamente a partir do inseridor de blocos. Temas híbridos podem adicionar suporte a padrões para que usuários de temas clássicos também possam se beneficiar desse recurso poderoso.
Você pode criar uma pasta patterns na raiz do seu tema e incluir seus padrões de bloco, ou pode registrá-los no arquivo functions.php do seu tema ou em outros arquivos .php.
Para manter a organização, você pode criar um arquivo inc/block-patterns.php e incluí-lo no functions.php do seu tema com o seguinte código:
require get_template_directory() . '/inc/block-patterns.php';Uma vez feito isso, você pode criar seu padrão no editor, copiar o código e registrar seu padrão e sua categoria de padrão em inc/block-patterns.php usando as funções register_block_pattern_category e register_block_pattern():
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}Você pode visualizar seu padrão no painel do WordPress em Aparência > Design > Padrões > My Hybrid Theme e usá-lo no seu conteúdo.
Você também pode duplicar e exportar seu padrão e importá-lo para outros sites WordPress.
Partes do modelo
Embora os Temas Híbridos usem os templates e partes de template clássicos em PHP, você pode adicionar suporte para partes de templates em blocos no arquivo functions.php do seu tema:
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );Depois de adicionar suporte a partes de template, você pode incluir qualquer parte de template em qualquer arquivo de template do seu tema híbrido usando a função block_template_part.
VVamos ver um exemplo prático. Comece criando uma pasta /parts na raiz do seu tema e fazendo upload de um arquivo footer.html dentro dela. Para este exemplo, copiamos o rodapé do tema Twenty Twenty-Five:
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Agora você pode incluir essa parte de template em um template clássico com a função block_template_part:
<?php block_template_part( 'footer' ); ?> Você pode, por exemplo, incluí-la no arquivo footer.php do Twenty Twenty-One. A imagem a seguir mostra o resultado na tela.
Você também pode incluir partes de template em um template de bloco usando o seguinte código:
<!-- wp:template-part {"slug":"footer"} /-->
Você pode, por exemplo, copiar o código do template page.html do Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Salve esse template na sua pasta /templates e nomeie-o como page.html. O WordPress o carregará automaticamente de acordo com a hierarquia de templates. Esse template incluirá automaticamente as partes header.html e footer.html da pasta /parts do seu tema híbrido.
Quando escolher Temas Híbridos em vez de Temas em Blocos
Um tema híbrido pode ser a melhor opção nos seguintes cenários:
- Quando você deseja usar alguns recursos modernos dos temas de bloco sem reestruturar completamente um site existente.
Os temas híbridos permitem que você aproveite os recursos de blocos, como o editor de blocos, estilos globais e padrões de blocos. Os temas híbridos também são compatíveis com as APIs do editor de blocos, como a API Block Bindings, API Interactivity e API HTML. Isso significa que você pode criar sites modernos sem precisar passar por uma migração complexa. - Quando você deseja manter a compatibilidade com plugins ou widgets clássicos, mas não quer abrir mão de alguns recursos avançados dos temas de bloco.
Versões antigas de alguns plugins podem ter problemas de compatibilidade com Temas em Blocos, como versões mais antigas de Contact Form 7, NextGEN Gallery, Custom Post Type UI e outros plugins. Embora seja recomendável atualizar os plugins para as versões mais recentes para evitar vulnerabilidades de segurança, alguns sites WordPress ainda utilizam versões antigas. Se você ainda não está pronto para atualizar todos os seus plugins, pode considerar instalar um tema híbrido. - Quando você está tentando encontrar o melhor equilíbrio entre design e desempenho.
Alguns Temas Híbridos populares são otimizados para velocidade e podem oferecer desempenho significativamente melhor do que Temas em Blocos. Ainda assim, eles oferecem a abordagem sem código ou com pouco código dos Temas em Blocos, proporcionando uma experiência de design superior aos Temas Clássicos. Temas Híbridos otimizados para desempenho, como Neve ou Kadence, permitem criar sites modernos sem comprometer o desempenho. - Quando você quer uma transição suave para o Full Site Editing (FSE).
Às vezes, a transição da lógica antiga para a nova pode levar tempo, especialmente ao trabalhar em equipe em sites grandes, e a curva de aprendizado pode ser uma preocupação. Um tema híbrido permite que sua equipe experimente a funcionalidade de blocos enquanto mantém ferramentas de design familiares, como o Personalizador e os templates clássicos em PHP.
No entanto, também há cenários em que os temas híbridos não são a melhor opção. Por exemplo:
-
Quando ferramentas de design do site têm prioridade sobre o desempenho geral.
Se você deseja usar recursos específicos do Full Site Editing, como o Editor do Site, edição completa de templates via blocos e a interface de Estilos Globais, um tema híbrido não é uma opção, pois esses recursos não são suportados ou são apenas parcialmente suportados por Temas Híbridos. -
Com sites WordPress headless baseados na REST API do WordPress.
Nesse cenário, Temas em Blocos são preferíveis, pois os dados de blocos são facilmente expostos via REST API (consulte, por exemplo, o endpoint/wp/v2/blocks) ou WPGraphQL, onde Temas Híbridos podem adicionar complexidade desnecessária. -
Quando se prefere uma abordagem totalmente sem código para construção de sites.
Temas Híbridos não oferecem suporte à criação ou edição de templates via Editor do Site. Embora seja possível adicionar suporte a partes de template, esse suporte é atualmente limitado, e o gerenciamento de templates é feito principalmente com PHP. -
Em resumo, não existe uma regra fixa para escolher entre temas híbridos e Temas em Blocos. Isso depende de muitos fatores, como as habilidades da sua equipe, o tipo de site que está sendo construído, exigências de desempenho, necessidade de compatibilidade retroativa e muito mais.
O resultado final é que não existe uma regra fixa para escolher entre temas híbridos e Temas em Blocos. Isso depende de muitos fatores, como as habilidades da sua equipe, o tipo de site que está sendo construído, exigências de desempenho, necessidade de compatibilidade retroativa e muito mais.
Resumo
O Full Site Editing e os Temas em Blocos mudaram radicalmente a forma como criamos sites WordPress. A filosofia baseada em blocos oferece aos usuários mais poder para criar layouts complexos e ajustar todos os aspectos de um site.
Mas, se você ainda não está pronto para dar esse salto — seja porque seu site pode não ser totalmente compatível com Temas em Blocos, ou porque exige recursos específicos de um tema clássico — os Temas Híbridos são uma opção que permite aproveitar o melhor dos dois mundos: utilizar recursos avançados dos Temas em Blocos enquanto mantém a compatibilidade com plugins e funcionalidades dos Temas Clássicos.
Sem falar no desempenho. Temas em Blocos podem consumir mais recursos devido à renderização intensiva de blocos e uso extensivo de JavaScript. Já os Temas Híbridos otimizados para desempenho podem deixar seu site mais leve e rápido, reduzindo a carga de JavaScript necessária.
Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.
