Twenty Twenty é o novo tema padrão do WordPress que vem com a última versão do WordPress 5.3. Como o seu antecessor Twenty Nineteen, Twenty Twenty foi projetado com um foco especial em Gutenberg. Mas há uma grande diferença entre os dois: Twenty Twenty não é construído a partir do zero; ele é projetado sobre um tema existente da comunidade WordPress em vez disso.

Como adoramos tudo no WordPress, demos uma olhada no novo tema Twenty Twenty, espiando os arquivos de function.php, a folha de estilo e os templates.

Mesmo que Twenty Twenty esteja longe de ser um pouco estável – no momento em que este artigo foi escrito – com muitas questões ainda não corrigidas, hoje vamos compartilhar com você nossos primeiros pensamentos sobre o novo tema padrão do WordPress.

Vamos mergulhar no tema Twenty Twenty WordPress!

Twenty Twenty pré-visualização
Twenty Twenty pré-visualização do tema WordPress (Fonte da imagem: Make WordPress Core)

Introdução Rápida ao Tema Twenty Twenty

Twenty Twenty foram construídos sobre… Chaplin, um tema WordPress gratuito de Anders Norén, que também é Default Theme Design Lead do WordPress 5.3.

Chaplin está disponível para download no O repositório WordPress.org e, de acordo com Anders, foi construído com o Block Editor em mente:

Chaplin é um tema WordPress repleto de recursos que lhe dá controle total sobre as fontes HTML e cores do seu site. Ele é construído de raiz com o novo Block Editor em mente e facilita a criação de layouts de boa aparência em posts e páginas.

Tema do Chaplin WordPress
Tema do Chaplin WordPress

A mesma filosofia está por trás da Twenty Twenty: flexibilidade, clareza e legibilidade são as palavras-chave de foco para o novo tema.

Twenty Twenty vem com um layout de coluna única e três modelos de post/página, com o objetivo de dar Os designers e administradores do WordPress têm a liberdade de criar seus layouts personalizados diretamente no Editor de blocos, aproveitando as vantagens de alinhamentos amplos e completos para elementos de bloco como colunas, imagens e o bloco de grupo introduzido com Gutenberg 5.5.

Como o Anders explica:

Twenty Twenty é projetado com flexibilidade em seu núcleo. Se você quiser usá-lo para uma organização ou uma empresa, você pode combinar colunas, grupos e mídia com alinhamentos amplos e completos para criar layouts dinâmicos para mostrar seus serviços ou produtos. Se você quiser usá-lo para um blog tradicional, a coluna de conteúdo centralizado o torna perfeito para isso também.

Além disso, o Twenty Twenty vem com um novo tipo de letra: Inter. É um família de fontes livres e de código aberto projetada pela Rasmus Andersson especificamente para leitura de textos em caixas mistas e minúsculas, especialmente com tamanhos de fonte pequenos.

A família Inter typeface
A família Inter typeface

Inter dá uma personalidade mais forte aos grandes cabeçalhos, mas você vai obter o máximo dele quando usá-lo com tamanhos de texto alternados, como mostrado na prévia do tema do post do blog WordPress.org:

Twenty Twenty tipografias
Twenty Twenty tipografias: impacto e legibilidade

Mais do que um tema completo, Twenty Twenty é um tema que marca um novo e importante passo em direção à evolução futura da interface de edição do WordPress. Twenty Twenty dependem essencialmente do Block Editor para edição e layout do conteúdo, e do Theme Customizer para o cabeçalho, rodapé e customizações adicionais.

Com isso dito, está na hora de nós instalar este tema do WordPress e executá-lo.

Como instalar o Twenty Twenty

O próximo tema padrão seguirá o tema WordPress 5.3 plano de lançamento. Isso significa que, no momento em que este artigo foi escrito, Twenty Twenty ainda não estava disponível para download no diretório temático do WordPress.

De qualquer forma, você pode descarregar uma versão em andamento do Twenty Twenty no GitHub e instalá-la na versão estável atual do WordPress ou obtê-la com o WordPress 5.3. O repositório Github será depreciado assim que o tema for mesclado em núcleo. Enquanto isso, você pode querer gravar as seguintes datas do calendário de liberação do WordPress 5.3:

  • 23 de setembro de 2019: Beta 1
  • 30 de setembro de 2019: Beta 2
  • 7 de outubro de 2019: Beta 3
  • 15 de Outubro de 2019: Liberar candidato 1
  • 22 de Outubro de 2019: Liberar candidato 2
  • 29 de Outubro de 2019: Release candidate 3
  • 5 de Novembro de 2019: Release candidate 4 (se necessário)
  • 12 de novembro de 2019: Data prevista para o lançamento do WordPress 5.3.

Para começar com o Twenty Twenty, siga os passos abaixo:

  1. Obtenha o pacote zip de GitHub.
  2. Carregue o arquivo zip para sua instalação de desenvolvimento no diretório Painel WordPress ou via SFTP.
  3. Navegue até Aparência → Temas e clique no botão Ativar na imagem de visualização do tema.
  4. Vá até Aparência → Personalize para configurar o Twenty Twenty.

E é tudo! Agora você pode começar a executar seus testes no seu ou no seu site ou no seu ambiente local.

Uma questão em aberto no GitHub
Uma questão em aberto no GitHub

Agora que você está pronto para ir, vamos seguir em frente e mergulhar no tema Twenty Twenty WordPress.

Características do Tema dos Twenty Twenty

Twenty Twenty não é uma peça completa. Tema WordPress, mas um tema reduzido e minimalista com o objetivo de dar desenvolvedores e administradores do site a liberdade de construir layouts de conteúdo personalizados para seus posts e páginas. Como Twenty Nineteen, Twenty Twenty foram construídos para Gutenberg e dependem principalmente do ciclo de vida de Gutenberg (mais sobre este tópico em este vídeo de Matt Mullenweg na WCEU 2019).

O tema suporta uma série de características do tema como largura de conteúdo (580), links automáticos de alimentação, miniaturas de posts, tag de título e vários elementos HTML5 (formulário de pesquisa, formulário de comentário, lista de comentários, galeria e legenda).

Outras características adicionam opções ao Personalizador Temático. Estes incluem fundos personalizados e logótipo personalizado. Os fragmentos de código abaixo mostram estas funcionalidades activadas no ficheiro de funções do tema:

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);
// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);
O Personalizador Temático em Twenty Twenty
O Personalizador Temático em Twenty Twenty

Twenty Twenty também apoia alguns dos As características específicas do Gutenberg. Primeiro, o tema suporta alinhamentos largos e de largura total:

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

A paleta de cores do editor é ativada se o usuário definir uma cor de acento no Customizer (ativado por padrão):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}
Personalizando cores em Twenty Twenty
Personalizando cores em Twenty Twenty

O Twenty Twenty theme vem com quatro tamanhos de fonte de editor disponíveis no Block Editor:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );

 

Tamanhos de fonte no bloco do editor Configurações de texto
Tamanhos de fonte no bloco do editor Configurações de texto

E é tudo. O tema é bastante mínimo também em funcionalidade, mas é facilmente extensível com um tema de filho, e vamos mergulhar nisso em um minuto.

Como Personalizar a Aparência do Twenty Twenty

Twenty Twenty vem livre de qualquer sino e assobios, mas oferece grande flexibilidade quando usado em conjunto com o Gutenberg (ou com um bom page builder).

Personalização do Tema Twenty Twenty

A Identidade do Site manipula o título e o slogan do site, o logotipo e o ícone. Você pode ativar/desativar todos esses elementos na seção Identidade do Site do Personalizador:

Identidade do site nas configurações do Customizer
Identidade do site nas configurações do Customizer

A secção Modelo de Capa do Personalizador trata das definições de personalização para o modelo de página do Modelo de Capa. Pronto, vais encontrar:

  • Uma opção para ativar um efeito de paralaxe na imagem de fundo (Imagem de fundo fixa).
  • Selecionadores de cores para definir a cor de fundo personalizada e a cor do texto para a sobreposição de imagens em destaque.
  • Um controle deslizante para controlar a opacidade da sobreposição.
A seção Modelo de capa no customizador
A seção Modelo de capa no customizador

A Seção de Menus fornece cinco localizações de menu. Você pode incluir um menu horizontal regular no cabeçalho (Menu Horizontal da Área de Trabalho) e/ou um menu de navegação alternável (Menu Expandido da Área de Trabalho). O Menu Móvel é um menu específico para dispositivos móveis, e o Menu Rodapé e o Menu Social estão localizados no rodapé da página.

Localizações dos menus em Twenty Twenty
Localizações dos menus em Twenty Twenty

O rodapé manipula as localizações do Menu Rodapé e do Menu Social juntamente com duas áreas widget. A imagem seguinte mostra o rodapé do tema com todos os seus elementos no lugar:

Rodapé do modelo em Twenty Twenty
Rodapé do modelo em Twenty Twenty

Finalmente, a seção CSS adicional permite que você inclua seus estilos personalizados.

Modelos de Postos/Páginas Únicos

Quando se trata de post e layouts de página, você pode escolher entre três modelos diferentes. Além do modelo padrão, o Twenty Twenty fornece um modelo de capa e um modelo de largura total com o qual você pode jogar para personalizar a aparência do seu conteúdo.

Modelos de Postos/Páginas Únicos em Twenty Twenty
Modelos de Postos/Páginas Únicos em Twenty Twenty

O Editor de Bloco no Twenty Twenty

Devido à sua abordagem mínima, a aparência do Twenty Twenty depende principalmente do Block Editor. Fazemos os nossos testes no Twenty Twenty com a versão 6.4.0 do Gutenberg. Esta versão fornece um bom número de novos recursos, melhorias e correções de bugs que melhoraram significativamente a experiência de edição.

Alguns blocos são úteis, especialmente na construção de websites de página única. Blocos como Media & Texto e Capa foram melhorados e agora ficam ótimos quando se trata de apresentar produtos e/ou produtos profissionais portfólios:

mídia e texto
Bloco de mídia e texto (cheio com alinhamento)

Ainda assim, como o Gutenberg é um projecto de trabalho em curso, poderá querer dar uma vista de olhos a alguns dos mais populares plugins que permitem adicionar mais blocos ao editor.

Aqui está uma lista rápida de plugins que podem valer a pena tentar:

O Personalizador de Temas e o Editor de Blocos fazem um excelente trabalho quando se trata de personalização de aparência e layout, mas um tema infantil pode lhe dar maior controle sobre a aparência e a sensação das suas páginas.

Como Criar um Tema Filho para o Tema Twenty Twenty

Construir temas infantis para WordPress pode ser divertido e também uma boa maneira de começar uma carreira como profissional. O desenvolvedor do tema WordPress e o Twenty Twenty Twenty podem ser um ótimo tema para pais ao construir temas infantis no WordPress. Então, porque não tentas? 😉

Se você não sabe por onde começar com temas infantis, não deixe de conferir nosso guia estendido em Como criar um tema infantil no WordPress.

Agora, vamos construir o nosso primeiro tema infantil para o Twenty Twenty!

Criar um novo diretório em wp-content/themes e nomeá-lo algo como twentytwenty-child ou o que você gosta.

Navegue até wp-content/themes/twentytwenty-child e crie um novo arquivo style.css com o seguinte cabeçalho:

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

Em seguida, temos de incluir a folha de estilo do tema principal. No mesmo diretório, criar o seguinte arquivo functions.php:

<?php
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

Agora vá a Aparência → Temas e ative seu Tema Filho. Agora você pode começar com suas personalizações.

Ativar o tema filho
Ativar o tema filho

Você pode alterar quase tudo no Twenty Twenty, desde adicionar modelos personalizados até adicionar seus estilos personalizados ou alterar os estilos padrão do tema.

Aqui vou mostrar-lhe como criar um novo modelo personalizado para posts e páginas únicas.

Adicionando um modelo personalizado de lançamento/página no Twenty Twenty

Até agora, criámos um tema infantil para o Twenty Twenty e anexámos os estilos dos pais à folha de estilos do tema infantil. No exemplo abaixo, vamos nos livrar do cabeçalho e do rodapé, abrindo espaço para o corpo da página em um arquivo de modelo de post/página.

Passo 1

Copie e cole os seguintes arquivos do tema pai para o diretório do tema filho:

  • templates/template-full-width.php
  • header.php
  • footer.php

Passo 2

Renomeie template-fulll-width.php para template-canvas.php (ou o que quiser). Abra o arquivo, exclua o conteúdo atual e cole o seguinte:

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

O Nome do modelo define o nome do arquivo de modelo como você o verá no Editor de blocos, enquanto o Tipo de postagem do modelo define os tipos de postagem que suportam esse arquivo de modelo. A função get_template_part carrega o arquivo singular.php do tema pai (não precisamos de uma cópia deste arquivo em nosso tema filho).

Vá até o painel do WordPress e crie um novo post. Agora você deve encontrar um modelo de página adicional na seção Postar atributos.

Um novo modelo está disponível em Atributos postais
Um novo modelo está disponível em Atributos postais

Passo 3

E agora vem a parte divertida. Abrir header.php em seu favorito editor de texto e envolva o elemento de header dentro do seguinte comando se:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

Este código verifica se o modelo de página não for templates/template-canvas.php. Se o modelo de página for templates/template-canvas.php, então ele não incluirá o cabeçalho do site e o menu modal.

Da mesma forma, podemos remover o rodapé de uma página de postagem quando o modelo de página ativo é a nossa tela. Basta adicionar a mesma condição em footer.php como mostrado abaixo:

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

Você pode baixar o código deste exemplo aqui.

Agora crie uma nova mensagem ou página, selecione o modelo Tela nos atributos Post/Page e verifique a página no site principal.

Resumo

Twenty Twenty é um tema WordPress minimalista, com um layout de coluna única. A forma como vamos usá-lo depende principalmente da evolução do Block Editor. Como o Anders expressivamente diz:

“A promessa do Editor de Blocos é dar aos usuários a liberdade de projetar e estruturar seus sites como quiserem.

Seguinte Twenty Nineteen, o novo tema padrão Twenty Twenty é o segundo de uma nova geração de temas que visa “permitir a construção de sites sem edição manual de código”. Os sites WordPress com o tema Twenty Twenty vêm em todas as formas e tamanhos. Para descobrir se um tema está usando o Twenty Twenty, confira nossa ferramenta prática de detecção de temas WordPress.

Se pensa que o Gutenberg ainda não é completamente fiável para os seus projectos, pode adicionar os blocos que vai precisar com plugins como os listados acima. Ou, simplesmente, você pode abraçar um construtor de páginas de terceiros.

Até você agora: instale o novo tema padrão do WordPress, brinque com ele, e deixe-nos saber o que você pensa aqui nos 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.