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:

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)

Twenty Twenty-One é o novo tema padrão do WordPress que vem com o WordPress 5.6! 👁‍🗨 Aprenda todas as suas principais características neste guia detalhado!Click to Tweet

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:

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:

Características do bloco:

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:

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:

Tamanhos de fonte do editor

Twenty Twenty-One suporta os seguintes tamanhos de fonte:

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:

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:

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:

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

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:

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?

Precisa de uma hospedagem rápida, segura e de fácil desenvolvimento para os sites de seus clientes? Kinsta é construído pensando nos desenvolvedores do WordPress e fornece muitas ferramentas e um poderoso painel de controle. Confira nossos planos

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).

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 WordPress 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.

Veja o que há de novo na temática do WordPress, desde o Modo Escuro até temas baseados em blocos, nesta visão completa do Twenty Twenty-One 🌅Click to Tweet

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.

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!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 28 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.