Twenty Twenty-One é o novo tema padrão do WordPress que vem com o WordPress 5.6. Se você estiver esperando por um tema WordPress completo, você pode ficar um pouco desapontado.

Twenty Twenty-One é um tema minimalista que parece e age como uma tela em branco altamente personalizável. Como seus predecessores, o novo tema padrão contará principalmente com o Editor de Blocos para a construção da página.

Neste post, vamos analisar as características mais interessantes do tema Twenty Twenty-One e mostraremos a você como personalizar o visual de um site WordPress com um simples tema filho (child theme) Twenty Twenty-One.

Pronto? Vamos mergulhar!

Twenty Twenty-One
Pré-visualização do tema Twenty Twenty-One (Fonte de imagem: Make WordPress Core)

Primeira impressão sobre o tema Twenty Twenty-One WordPress

Como o Twenty Twenty, o novo tema padrão que vem com o WordPress 5.6 não é construído do zero, mas é baseado em um tema vindo da comunidade.

Twenty Twenty-One foi desenvolvido sobre um novo tema da Automattic, o tema Seedlet, que fornece uma estrutura limpa e bem ordenada de propriedades personalizadas CSS aninhadas. Devido ao grande uso das propriedades do CSS na folha de estilo do tema, construir um tema filho (child theme) sobre o Twenty Twenty-One é rápido e fácil.

Tema do WordPress Seedlet
Tema do WordPress Seedlet

Twenty Twenty-One é um tema WordPress altamente acessível e minimalista com um layout de uma única coluna, uma barra lateral de rodapé e dois locais de menu: Navegação primária e navegação em Rodapé.

O novo tema utiliza uma pilha de fontes do sistema. Isto deve ter vários benefícios tanto para os usuários quanto para os desenvolvedores:

  • Antes de tudo, o uso de uma pilha de fontes do sistema traz benefícios ao UX e ao desempenho porque as fontes nativas já são suportadas pela maioria dos sistemas operacionais e não requerem tempo extra de carga.
  • Em segundo lugar, eles parecem neutros, de modo que podem ser facilmente fundidos em qualquer tipo de projeto.
  • Em terceiro lugar, como eles não exigem arquivos de fontes adicionais para serem carregados, é mais fácil para os usuários e desenvolvedores customizar o layout de um site usando o Twenty Twenty-One.

O tema Twenty Twenty-One utiliza uma paleta de cores mínima baseada em cores de fundo verde pastel e dois tons de cinza como cores de primeiro plano. O tema oferece várias paletas de cores adicionais em pastel.

Sobre este ponto, Mel Choyse-Dwan, líder de projeto temático padrão, explica:

Estaremos agrupando o tema com algumas paletas de cores adicionais, incluindo tanto um esquema de cores brancas quanto um esquema de cores pretas. Por que o verde pastel? Os pastéis e as cores em mudo estão bem dentro agora

Twenty Twenty-One cores
Twenty Twenty-One cores (Fonte de imagem: Make WordPress Core)

Como instalar Twenty Twenty-One

No momento desta redação, Twenty Twenty-One está em desenvolvimento ativo e ainda não está disponível para download no Diretório Temático WordPress. Mas você pode pegar uma versão in-progress do tema no Github.

O repositório Github será depreciado assim que o tema for fundido no núcleo, e você o encontrará no Theme Directory. Como o Twenty Twenty-One segue o cronograma de lançamento do WordPress 5.6, talvez você queira salvar as seguintes datas:

  • 20 de outubro de 2020: Beta 1
  • 27 de outubro de 2020: Beta 2
  • 2 de novembro de 2020: Beta 3
  • 12 de novembro de 2020: Beta 4
  • 17 de novembro de 2020: RC 1
  • 1 de dezembro de 2020: RC 2
  • 7 de dezembro de 2020: Dry run para lançamento do WordPress 5.6
  • 8 de dezembro de 2020: Data prevista para o lançamento do WordPress 5.6

Para colocar o tema Twenty Twenty-One em funcionamento, siga estes passos:

  1. Obtenha a arquivo zip da GitHub.
  2. Carregue seu pacote para sua instalação de desenvolvimento a partir do painel de controle do WordPress ou via SFTP.
  3. Navegue até Appearance → Temas e clique no botão Ativar na imagem de pré-visualização do tema.
  4. Ir para Appearance → Personalizar para configurar Twenty Twenty-One.

Agora você pode começar a executar seus testes em um site de teste ou em seu ambiente local.

questão do modo escuro
Twenty Twenty-One Issue #620 de Github

Não está pronto para realizar seus testes?

Não se preocupe, dissecamos o tema e lhe mostraremos o que você poderia esperar do Twenty Twenty-One.

Temas e Características do Bloco Twenty Twenty-One

Assim como o Twenty Twenty, o novo tema padrão do WordPress não é um tema completo, mas um tema minimalista que conta com o editor de blocos para a construção de páginas. O tema também tem como objetivo proporcionar grande acessibilidade. Nas palavras de Mel Choyce-Dwan:

Por fim, gostaríamos de fazer com que o tema cumpra as diretrizes relevantes do WCAG 2.1 nível AAA. Adoramos a idéia quando +make.wordpress.org/accessibility/ trouxe à tona, e gostaríamos de receber toda e qualquer orientação de nossa comunidade de especialistas para ajudar a tornar isto possível.

O tema suporta um bom número de características de tema e bloco, incluindo as seguintes:

Características do tema:

  • Links de alimentação automática
  • Etiqueta do título
  • Formatos postais
  • Miniaturas de postes
  • Elementos HTML5
  • Logotipo personalizado
  • Atualização seletiva para widgets
  • Antecedentes personalizados
  • Dois menus de navegação
  • Uma barra lateral

Características do bloco:

  • Estilos de blocos padrão
  • Estilos de redação
  • Estilos de editor escuro (fundo escuro)
  • Alinhar amplamente
  • Tamanhos de fonte em bloco
  • Paletas de cor de bloco
  • Pré-ajustes de gradiente de blocos
  • Conteúdo inicial
  • Emblemas responsivos
  • Altura de linha personalizada
  • Cor do link experimental
  • Espaçamento experimental personalizado
  • Unidades personalizadas (removidas no WordPress 5.6)

A lista a seguir inclui as características que podem ser mais relevantes na construção de um website baseado no Twenty Twenty-One.

Menus de navegação

Twenty Twenty-One suporta dois locais de menu, a Navegação Primária, localizada no canto superior direito do cabeçalho, e a Navegação Rodapé.

Twenty Twenty-Onea posições do menu
Twenty Twenty-Onea posições do menu

Se adicionado ao menu Rodapé, links sociais são automaticamente detectados e convertidos em ícones SVG para as mídias sociais suportadas.

Twenty Twenty-Onea ementa social
Twenty Twenty-One aementa social

Formatos postais

Twenty Twenty-One suporta nove formatos de postes: link, aparte, galeria, imagem, citação, status, vídeo, áudio, chat. Você pode escolher seu formato de postagem no painel Status & Visibilidade das configurações do editor.

Twenty Twenty-One suporta nove formatos postais
Twenty Twenty-One suporta nove formatos postais

Para ver como o tema Twenty Twenty-One lida com os formatos postais, navegue até a pasta de partes/excertos do modelo e escolha o modelo. Por exemplo, abra o arquivo excerpt-image.php em seu editor de código favorito. Nesse arquivo, você verá o seguinte código:

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

O código é auto-explicativo, mas vamos dar uma olhada mais de perto:

  • has_block determina se um poste ou uma corda contém um tipo específico de bloco (o bloco de imagem central neste exemplo).
  • twenty_twenty_one_print_first_instance_of_block é uma função Twenty Twenty-One modelo que imprime a primeira instância de um bloco no conteúdo e depois se rompe.

Portanto, se um visualizador de site requer um arquivo de postagens no formato ‘imagem’, o WordPress exibirá uma imagem no topo para cada postagem no arquivo. Seguindo a mesma lógica, você pode mergulhar em qualquer formato de postagem, verificando as partes correspondentes do modelo.

Identidade do site e logotipo personalizado

Twenty Twenty-One fornece suporte para um logotipo personalizado de 300×100 px. Você pode encontrar as configurações personalizadas do logotipo no painel Identidade do site.

Identidade do site em Twenty Twenty-One
Identidade do site em Twenty Twenty-One

Esta tela inclui:

  • Logotipo personalizado
  • Título do site
  • Etiqueta
  • Ícone do site

Tamanhos de fonte do editor

Twenty Twenty-One suporta os seguintes tamanhos de fonte:

  • Extra pequeno – 16
  • Pequeno – 18
  • Normal/Médio – 20
  • Grande – 24
  • Extra grande – 40
  • Enorme – 96
  • Gigantesco – 144

Na folha de estilo do tema, os tamanhos são definidos em unidades rem.

Twenty Twenty-One suporta sete tamanhos de fonte
Twenty Twenty-One suporta sete tamanhos de fonte

Configurações de cor

O Personalizador de Tema fornece um painel de Cores e Modo Escuro incluindo duas opções:

  • Um simples colhedor de cores com 10 paletas de cores predefinidas.
  • Uma caixa de seleção para ativar/desativar o modo escuro.

A imagem abaixo mostra uma cor de fundo amarelo claro com um texto cinza escuro.

Cores e configurações do Modo Escuro em Twenty Twenty-One
Cores e configurações do Modo Escuro em Twenty Twenty-One

A cor de fundo padrão é um verde pastel ("#d1e4dd"), mas os administradores do site podem facilmente alternar entre as seguintes alternativas de cor de fundo:

  • Preto = '#000000';
  • Cinza escuro = '#28303D';
  • Cinza = '#39414D';
  • Verde = '#D1E4DD';
  • Azul = '#D1DFE4';
  • Lilás = '#D1D1E4';
  • Vermelho = '#E4D1D1';
  • Laranja = '#E4DAD1';
  • Amarelo = '#EEEADD';
  • Branco = '#FFFFFF';

As mesmas cores estão disponíveis como paletas de cores de blocos nas configurações de blocos do editor.

Além disso, o Twenty Twenty-One suporta várias predefinições de gradiente para blocos que suportam esta característica. A imagem abaixo mostra os gradientes padrão nas configurações de blocos das Colunas.

Oito pré-ajustes de gradiente nas configurações de cores de um bloco
Oito pré-ajustes de gradiente nas configurações de cores de um bloco

Do ponto de vista da acessibilidade, o suporte ao Modo Escuro é uma novidade absoluta para um tema padrão.

Vamos mergulhar um pouco mais fundo!

Suporte ao Modo Escuro em Twenty Twenty-One Tema

Após uma discussão no canal #core-themes Slack, Mel Choyce-Dwan introduziu o suporte do Dark Mode para Twenty Twenty-One.

Habilitando o modo escuro em macOS
Habilitando o modo escuro em macOS

No início, não estava claro como este recurso poderia ter sido implementado em Twenty Twenty-One se adicionado como um recurso temático ou como um projeto separado de envio em um plugin.

Havia cinco opções possíveis para escolher:

  • Permitir que os proprietários do site desabilitem o suporte do modo escuro e que os visitantes do site alternem o modo escuro ligado/desligado enquanto visualizam o site.
  • Permitindo aos proprietários do site apenas desativar o suporte do modo escuro (sem opção para que os visitantes do site alternem o modo escuro ligado/desligado).
  • Permitindo o suporte em modo escuro como “sempre ligado” enquanto permite que os visitantes do site o alterem enquanto visualizam o site.
  • Possibilitando o suporte do modo escuro como “sempre ligado” e evitando que os visitantes do local alternem o modo escuro ligado/desligado.
  • Não suporta o modo escuro de forma alguma

Após uma discussão cuidadosa, o Dark Mode foi acrescentado ao tema. Agora:

  • O suporte ao Modo Escuro está disponível como um recurso opcional para os proprietários do site.
  • O botão de alternância foi removido da interface do editor e só está disponível no Customizer.
  • O botão de comutação do Modo Escuro está localizado no canto inferior direito (esquerda na RTL) e desaparece quando o visualizador do site desce a página.
  • Com o Modo Escuro ativado, os visualizadores do site podem ligá-lo/desligá-lo dependendo de suas preferências pessoais, e independentemente de suas configurações de SO/browser.
Modo escuro ativado no Customizer e desativado no site da frente
Modo escuro ativado no Customizer e desativado no site da frente

Mesmo que o Dark Mode seja considerado uma melhoria de acessibilidade, não é óbvio que as páginas de seu site seriam mais acessíveis em todos os contextos.

As maiores preocupações dizem respeito a logotipos escuros e imagens transparentes. A mudança de um modelo padrão de luz para uma cor de fundo escura pode levar a problemas de legibilidade que podem diminuir a usabilidade e arruinar a aparência de seu website.

Por exemplo, um logotipo escuro sobre um fundo claro pode desaparecer completamente se seus leitores habilitarem o Modo Escuro do lado deles. Preocupações semelhantes referem-se ao brilho e contraste da imagem e à opacidade das bordas, divisores e separadores.

Por esta razão, se você está planejando fornecer suporte no Modo Escuro para seu website, você também deve levar em conta como seu website ficará com um fundo escuro.

Modo escuro ativado no Customizer e ativado no site da frente
Modo escuro ativado no Customizer e ativado no site da frente

Os colaboradores do Theme estão cientes destas questões e a discussão continua no Github. Para uma visão mais próxima das questões de usabilidade do Modo Escuro e uma oportunidade de se envolver na discussão, verifique a lista completa de questões sobre o Github.

As preferências do Modo Escuro são armazenadas no LocalStorage e podem ser visualizadas nas ferramentas de desenvolvimento do navegador.

No Google Chrome, inicie o Chrome WebTools e clique na guia Application. Encontre a seção Armazenamento e expanda o menu Armazenamento Local.

Preferências do usuário do Modo Escuro no armazenamento local do Brave Browser
Preferências do usuário do Modo Escuro no armazenamento local do Brave Browser

Para ser honesto, o Modo Escuro não é uma coisa comum no contexto dos websites de hoje. Entretanto, como um novo tema padrão do WordPress agora suporta o modo escuro, poderíamos esperar uma mudança nesta área específica de acessibilidade, uma vez que o WordPress é o software CMS mais usado.

Os desenvolvedores que querem mergulhar mais profundamente no material técnico não devem perder este guia aprofundado sobre o modo escuro na web.

Estilos e propriedades personalizadas do CSS

Dito isto, agora é hora de explorar as características mais interessantes do Twenty Twenty-One para os desenvolvedores de temas.

Vamos começar com CSS Custom Properties.

Como mencionado acima, Twenty Twenty-One é baseado no Seedlet, um tema de duas colunas, com uma barra lateral de rodapé e três locais de menu. O estilo da Seedlet é completamente baseado nas propriedades personalizadas do CSS e isto facilita aos desenvolvedores de temas e usuários avançados a construção do tema filho (child theme) sobre o tema da Automattic.

O mesmo se aplica ao Twenty Twenty-One. O novo tema padrão vem com um layout de coluna única, uma barra lateral de rodapé e dois locais de menu. A folha de estilo reflete o sistema de propriedades personalizadas aninhadas fornecido pela Seedlet e isto faz do Twenty Twenty-One uma tela perfeita para construir um tema filho (child theme) e websites altamente personalizados.

As propriedades personalizadas do CSS (também conhecidas como variáveis CSS) são entidades especiais que contêm valores específicos que podem ser reutilizados em qualquer lugar em sua folha de estilo.

Portanto, se você precisar mudar um acento de cor específico em seu documento, você não precisa fazer uma pesquisa global para descobrir qualquer ocorrência dessa cor ao longo da folha de estilo. Você só precisa definir um valor de propriedade diferente dentro do bloco :root.

Propriedades personalizadas do CSS em Twenty Twenty-One
Propriedades personalizadas do CSS em Twenty Twenty-One

Como um exemplo de personalização simples, digamos que você queira definir uma cor de fundo personalizada. Você não precisa construir um tema filho (child theme) para isso. Você só precisa incluir duas declarações CSS no editor de código do painel CSS adicional:

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
Custom CSS em Twenty Twenty-One Customizador
Custom CSS em Twenty Twenty-One Customizador

As propriedades personalizadas do CSS são seguras de usar, pois são suportadas por todos os principais navegadores, como mostrado na imagem abaixo do Can I Use:

As propriedades personalizadas do CSS são suportadas pela maioria dos navegadores web modernos
As propriedades personalizadas do CSS são suportadas pela maioria dos navegadores web modernos

Se você quiser mergulhar mais fundo nas propriedades personalizadas do CSS, consulte a documentação MDN.

Padrões de Bloco Twenty Twenty-One

O Twenty Twenty-One fornece vários padrões para o Editor de Blocos. Em um post de blog anterior, definimos padrões de blocos como layouts de blocos predefinidos, permitindo aos usuários adicionar rapidamente estruturas complexas de blocos aninhados a suas páginas.

O WordPress 5.5 introduziu um punhado de padrões de blocos e mais deve vir com o WordPress 5.6. Além disso, o Twenty Twenty-One vem com seu próprio conjunto de padrões de blocos.

Em Twenty Twenty-One, os padrões de blocos são definidos no arquivo inc/block-patterns.php. Os padrões do Twenty Twenty-One variam de padrões simples como o padrão de Texto Grande, que contém um único elemento H2, a padrões mais complexos, tais como Imagens Sobrepostas e Texto e Mídia e Título do Artigo de Texto.

Mídia e Texto Artigo Padrão de bloco de título em Twenty Twenty-One
Mídia e Texto Artigo Padrão de bloco de título em Twenty Twenty-One

Atualmente, o tema oferece os seguintes padrões:

  • Texto grande
  • Área de Links: Um enorme texto seguido por redes sociais e links de endereços de e-mail.
  • Título do Artigo de Mídia e Texto: Um bloco de Mídia e Texto com uma grande imagem à esquerda e um cabeçalho à direita. O título é seguido por um separador e um parágrafo de descrição.
  • Sobreposição de imagens: Três imagens dentro de um bloco de colunas sobrepostas.
  • Vitrine de duas imagens: Um bloco de Mídia & Texto com uma imagem grande à esquerda e um bloco menor com uma moldura bordada à direita.
  • Sobreposição de imagens e textos: Um bloco de colunas sobrepostas com duas imagens e uma descrição de texto.
  • Lista de Portfólio: Uma lista de projetos com imagens em miniatura.
  • Informações de contato: Um bloco com 3 colunas exibindo informações de contato e links de mídia social.
Sobreposição de blocos de imagens em Twenty Twenty-One
Sobreposição de blocos de imagens em Twenty Twenty-One

A disponibilidade de tantos padrões de blocos é ótima tanto para usuários quanto para desenvolvedores. Os usuários poderão rápida e facilmente adicionar complexos blocos de código a seus posts e páginas, os desenvolvedores podem usar esses padrões como modelos úteis para construir quando codificarem seus próprios padrões.

A Experiência dos Blocos Twenty Twenty-One

Twenty Twenty-One Blocks é uma versão experimental em bloco separada do tema Twenty Twenty-One. Seu propósito é compartilhar e manter todos atualizados sobre o que está acontecendo no experimento de Edição do Site Completo, dando a todos uma chance de mergulhar nas novas características do FSE antes de se tornarem parte do WordPress Core.

É improvável que vejamos esta versão experimental se fundir no núcleo com o WordPress 5.6. De acordo com Carolina Nymark,

O tema precisará que o Gutenberg e a experiência de edição do site completo sejam ativados. Ele não fará parte do Core, mas uma vez concluído, estará disponível no diretório de temas.

No momento deste escrito, Blocos Twenty Twenty-One requer o plugin Gutenberg. Uma vez instalado e ativado tanto o tema quanto o plugin, um item do menu Editor de Sites aparece em seu menu de administração do WordPress (você não precisa mais ativar o experimento de Edição Completa do Site).

O item do menu do Editor do Site em Twenty Twenty-One Blocks experiment
O item do menu do Editor do Site em Twenty Twenty-One Blocks experiment

Agora, clique no novo item do menu Editor do site para abrir a interface completa de edição do site e começar a editar qualquer elemento da página usando o editor de blocos.

Edição completa do site em Twenty Twenty-One blocos
Edição completa do site em Twenty Twenty-One blocos

Aqui não vamos mergulhar nas coisas técnicas. Basta dizer que os temas clássicos e os temas baseados em blocos são estruturalmente diferentes.

A imagem abaixo mostra o conteúdo da pasta Twenty Twenty-One Blocos:

Pasta Twenty Twenty-One Blocos
Pasta Twenty Twenty-One Blocos

Você notaria o arquivo experimental-tema.json e as pastas de block-templates e block-parts de block-templates.

A principal diferença entre os temas tradicionais do WordPress e os temas baseados em blocos é que os temas baseados em blocos incluem modelos que são inteiramente compostos de blocos.

Por exemplo, abra as partes de bloco/ cabeçalhos.html em seu editor de código. Você deve ver o seguinte código:

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Como você pode ver, o arquivo clássico modelo header.php foi substituído por um arquivo . html contendo vários blocos.

Você pode pegar a versão in-progress do tema Twenty Twenty-One Blocks do projeto de Experimentos do Github.

Se você é um desenvolvedor de temas, a documentação oficial fornece tudo o que você precisa saber sobre temas baseados em blocos.

Se você gostaria de contribuir para a experiência de edição do site completo, envie seu feedback aqui.

Como construir um tema filho (Child Theme) no Twenty Twenty-One

Os temas padrão do WordPress são ótimos pontos de partida para aprender o básico do desenvolvimento de temas e começar a construir um tema filho (child theme) personalizado.

Os temas padrão seguem as diretrizes das normas oficiais codificação do WordPress e estão em conformidade com as normas da web.

Existe um lugar melhor para aprender a codificar?

O tema filho (child theme) é um ótimo recurso do WordPress que permite personalizar o layout, as funcionalidades e a estrutura de suas páginas. Com os exemplos a seguir, vamos mergulhar em cada aspecto da personalização de temas.

Criando um tema filho (child theme)

A construção de um tema filho do WordPress é um processo de 3 etapas:

1. Criar a Pasta Temática do seu tema filho (child theme)

Crie uma nova pasta em wp-content/temas e nomeie-a como quiser. Mas lembre-se de que deve ser um nome único. O manual tema filho (child theme) recomenda o uso do mesmo nome do parent theme, com -child anexado ao final.

Assim, poderíamos nomear a nova pasta twentytwentyone-child.

2. Criar um arquivo style.css

Agora vá para seu diretório tema filho (child theme) e crie um novo arquivo style.css incluindo o seguinte código:

/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

O cabeçalho de informações permite que o WordPress trate corretamente o seu tema filho (child theme).

  • Nome temático: O nome único para o tema.
  • Tema URI: Onde os usuários podem encontrar o código ou a documentação para o tema.
  • Descrição: Texto descritivo para ajudar os usuários a entender o que o tema faz.
  • Autor: Seu nome
  • Autor URI: O site do autor.
  • Modelo: A pasta onde o tema principal é armazenado. Use o nome da pasta e não o nome do tema. Sem esta linha, seu tema não funcionará como um tema filho (child theme).
  • Versão: O número da versão
  • Licença: A licença, que deve ser GNU.
  • Licença URI: O link para informações sobre a licença.

Abaixo desse texto, você pode acrescentar seus blocos de declarações CSS, como lhe mostrarei dentro de instantes.

3. Criar um arquivo functions.php

Com Twenty Twenty-One, você também precisará de um arquivo functions.php. Então, crie seu próprio no diretório do tema criança, abra-o em seu editor de código e adicione o seguinte código:

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Como o tema Twenty Twenty-One usa get_template_directory() para carregar sua folha de estilo, você precisa consultar a folha de estilo do tema filho (child theme) usando a ação wp_enqueue_scripts.

Depois disso, salve seus arquivos, abra seu painel do WordPress, navegue até Appearance -> Themes e ative seu tema filho (child theme) Twenty Twenty-One.

Vamos agora acrescentar nossas customizações.

Como Adicionar Estilos Personalizados

Quando se trata de personalizar o layout de seu site WordPress, você tem várias opções para adicionar seu código CSS personalizado. O painel CSS adicional do Customizer pode ser suficiente para pequenas mudanças.

Mas um tema filho (child theme) seria uma opção melhor se você tiver que fazer personalizações avançadas, ou se precisar exportar seu código para diferentes sites WordPress.

Vamos tentar com uma personalização simples: mudar a pilha de fontes padrão.

Digamos que você queira carregar uma pilha de fontes diferente, ou simplesmente adicionar sua fonte favorita às famílias de fontes padrão Twenty Twenty-One.

Como você faz isso?

Aqui vou mostrar como alterar a fonte padrão para os cabeçalhos H1, mas você pode alterar a família de fontes para qualquer elemento de texto de seu website.

Primeiro, abra o arquivo Thenty Twenty-One’s style.css e encontre o seguinte bloco de CSS:

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Como você pode ver, a família de fontes para os cabeçalhos é definida na variável --heading--font-family.

Agora vá até o bloco :root{} e encontre a seguinte declaração:

--heading--font-family: var(--global--font-primary);

--heading--font-family depende da variável --global--font-primary , que é definida no topo do bloco :root{}:

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

Agora sabemos o que mudar!

Copie a declaração --global--font-primary da folha de estilo do parent theme e cole-a no de seu tema filho style.css. Em seguida, mude o nome e o valor da propriedade, como mostrado abaixo:

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

Uma vez que você tenha declarado sua pilha de fontes personalizada, você pode usá-la onde quiser em sua folha de estilos. Cabeçalhos H1 em nosso exemplo:

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Salve o seu tema filho style.css e recarregue a página. Você deve ver o Ubuntu como a nova família de fontes padrão para os cabeçalhos de sua página.

Família de fontes padrão versus família de fontes personalizadas em Twenty Twenty-One
Família de fontes padrão versus família de fontes personalizadas em Twenty Twenty-One

Agora que você sabe como customizar o estilo Twenty Twenty-One com um tema filho (child theme), podemos explorar características mais avançadas.

Como adicionar novos padrões de blocos

Neste exemplo, vamos construir um padrão de blocos personalizados, incluindo um bloco de duas colunas com uma imagem arredondada à esquerda, um cabeçalho H4 e um parágrafo à direita.

Você pode construir seu padrão diretamente no Block Editor ou customizar o código de um padrão de bloco existente.

Se você optar por construir seu padrão no Editor de Blocos, basta adicionar os blocos necessários a um post ou rascunho de página, depois mudar para o Editor de Código e copiar o código correspondente.

Um bloco de duas colunas no Editor de Código
Um bloco de duas colunas no Editor de Código

Agora podemos registrar nosso padrão no arquivo functions.php do tema criança:

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

O código acima registra a categoria Padrões personalizados e o padrão de Autor Bio.

Observe o código que usamos para construir o elemento img:

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

A função get_stylesheet_directory_uri() fornece o URI do diretório do seu tema filho (child theme) (a imagem foi previamente adicionada à pasta de ativos do tema filho).

Salve suas mudanças e crie um novo post ou página.

Agora você deve encontrar o novo padrão no inseridor de blocos.

Um padrão de bloco personalizado adicionado ao Twenty Twenty-One
Um padrão de bloco personalizado adicionado ao Twenty Twenty-One

Personalização de um arquivo de modelo

Se você quiser criar um novo arquivo modelo para um arquivo específico, ou um único post/página, você precisará criar um novo modelo .php de acordo com a Hierarquia de Modelos do WordPress.

Mas se você quiser editar apenas um modelo existente (ou parte do modelo), basta copiar o modelo original do tema pai e colá-lo na posição correspondente do tema filho (leia mais sobre este tópico em nosso guia ampliado sobre o tema filho).

Digamos que você queira personalizar o texto “Orgulhosamente alimentado por WordPress”. Você tem várias opções para remover ou personalizar es salinha. Para nosso exemplo, vamos mudá-lo manualmente.

Para fazer isso, copie o arquivo de modelo de rodapé.php da pasta parent theme e cole-o na raiz do tema do seu tema filho. Quando terminar, abra o footer.php de seu tema filho em seu editor de código e encontre o seguinte código:

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Agora, você pode fazer suas mudanças. Digamos que você queira dar créditos ao seu web host, basta substituir o elemento a como mostrado abaixo:

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Para remover esse texto, basta comentar ou apagar o elemento div.powered-by:

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

E é isso aí. Agora, passando dos exemplos simples acima, você pode fazer personalizações mais excitantes e levar seu site com o tema Twenty Twenty-One para o próximo nível.

Resumo

O tema Twenty Twenty-One é a terceira tentativa de permitir que pessoas sem habilidades técnicas avançadas construam websites. É um tema WordPress minimalista, de bom desempenho e acessível, que também se enquadra em uma ampla gama de casos de uso. Os sites WordPress com o tema Twenty Twenty-One vêm em todas as formas e tamanhos. Para descobrir se um tema está usando o Twenty Twenty-One, confira nossa ferramenta prática de detecção de temas WordPress.

Projetado com o editor de blocos em mente, o novo tema padrão é fácil de ser personalizado tanto para usuários quanto para desenvolvedores.

Agora é a sua vez: Você já instalou o tema Twenty Twenty-One? Qual é a sua experiência com ele? Compartilhe suas idéias na seção de comentários!

Carlo Daniele Kinsta

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.