{"id":40666,"date":"2020-11-18T01:52:49","date_gmt":"2020-11-18T09:52:49","guid":{"rendered":"https:\/\/kinsta.com\/?p=83720"},"modified":"2025-02-14T09:19:39","modified_gmt":"2025-02-14T12:19:39","slug":"twenty-twenty-one-tema","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/","title":{"rendered":"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress"},"content":{"rendered":"<p>Twenty Twenty-One \u00e9 o novo tema padr\u00e3o do WordPress que vem com o WordPress 5.6. Se voc\u00ea estiver esperando por um <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">tema WordPress<\/a> completo, voc\u00ea pode ficar um pouco desapontado.<\/p>\n<p>Twenty Twenty-One \u00e9 um tema minimalista que parece e age como uma tela em branco altamente personaliz\u00e1vel. Como seus predecessores, o novo tema padr\u00e3o contar\u00e1 principalmente com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Editor de Blocos<\/a> para a constru\u00e7\u00e3o da p\u00e1gina.<\/p>\n<p>Neste post, vamos analisar as caracter\u00edsticas mais interessantes do tema Twenty Twenty-One e mostraremos a voc\u00ea como personalizar o visual de um site WordPress com um simples tema filho (child theme) Twenty Twenty-One.<\/p>\n<p>Pronto? Vamos mergulhar!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<figure id=\"attachment_83746\" aria-describedby=\"caption-attachment-83746\" style=\"width: 1580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one.jpg\" alt=\"Twenty Twenty-One\" width=\"1580\" height=\"2048\"><figcaption id=\"caption-attachment-83746\" class=\"wp-caption-text\">Pr\u00e9-visualiza\u00e7\u00e3o do tema Twenty Twenty-One (Fonte de imagem: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n<h2>Primeira impress\u00e3o sobre o tema Twenty Twenty-One WordPress<\/h2>\n<p>Como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-tema\/\">Twenty Twenty<\/a>, o novo tema padr\u00e3o que vem com o WordPress 5.6 n\u00e3o \u00e9 constru\u00eddo do zero, mas \u00e9 baseado em um tema vindo da comunidade.<\/p>\n<p>Twenty Twenty-One foi desenvolvido sobre um novo tema da Automattic, o tema <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, que fornece uma estrutura limpa e bem ordenada de propriedades personalizadas CSS aninhadas. Devido ao grande uso das <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/#wordpress-and-css\">propriedades do CSS<\/a> na folha de estilo do tema, construir um tema filho (child theme) sobre o Twenty Twenty-One \u00e9 r\u00e1pido e f\u00e1cil.<\/p>\n<figure id=\"attachment_83739\" aria-describedby=\"caption-attachment-83739\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83739 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/seedlet.jpg\" alt=\"Tema do WordPress Seedlet\" width=\"600\" height=\"769\"><figcaption id=\"caption-attachment-83739\" class=\"wp-caption-text\">Tema do WordPress Seedlet<\/figcaption><\/figure>\n<p>Twenty Twenty-One \u00e9 um tema WordPress altamente acess\u00edvel e minimalista com um layout de uma \u00fanica coluna, uma barra lateral de rodap\u00e9 e dois <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhorar-a-navegacao-do-website\/\">locais de menu<\/a>: Navega\u00e7\u00e3o prim\u00e1ria e navega\u00e7\u00e3o em Rodap\u00e9.<\/p>\n<p>O novo tema utiliza uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-seguras-na-web\/\">pilha de fontes do sistema<\/a>. Isto deve ter v\u00e1rios benef\u00edcios tanto para os usu\u00e1rios quanto para os <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">desenvolvedores<\/a>:<\/p>\n<ul>\n<li>Antes de tudo, o uso de uma pilha de fontes do sistema traz benef\u00edcios ao UX e ao <a href=\"https:\/\/kinsta.com\/pt\/aprenda\/acelerar-o-seu-site-wordpress\/\">desempenho<\/a> porque as fontes nativas j\u00e1 s\u00e3o suportadas pela maioria dos sistemas operacionais e n\u00e3o requerem tempo extra de carga.<\/li>\n<li>Em segundo lugar, eles parecem neutros, de modo que podem ser facilmente fundidos em qualquer tipo de projeto.<\/li>\n<li>Em terceiro lugar, como eles n\u00e3o exigem arquivos de fontes adicionais para serem carregados, \u00e9 mais f\u00e1cil para os usu\u00e1rios e desenvolvedores customizar o layout de um site usando o Twenty Twenty-One.<\/li>\n<\/ul>\n<p>O tema Twenty Twenty-One utiliza uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/esquemas-de-cores-site\/\">paleta de cores m\u00ednima<\/a> baseada em cores de fundo verde pastel e dois tons de cinza como cores de primeiro plano. O tema oferece v\u00e1rias paletas de cores adicionais em pastel.<\/p>\n<p>Sobre este ponto, Mel Choyse-Dwan, l\u00edder de projeto tem\u00e1tico padr\u00e3o, explica:<\/p>\n<blockquote><p>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\u00e9is e as cores em mudo est\u00e3o bem dentro agora<\/p><\/blockquote>\n<figure id=\"attachment_83743\" aria-describedby=\"caption-attachment-83743\" style=\"width: 1640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-colors.jpg\" alt=\"Twenty Twenty-One cores\" width=\"1640\" height=\"600\"><figcaption id=\"caption-attachment-83743\" class=\"wp-caption-text\">Twenty Twenty-One cores (Fonte de imagem: <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n\n<h2>Como instalar Twenty Twenty-One<\/h2>\n<p>No momento desta reda\u00e7\u00e3o, Twenty Twenty-One est\u00e1 em desenvolvimento ativo e ainda n\u00e3o est\u00e1 dispon\u00edvel para download no Diret\u00f3rio Tem\u00e1tico WordPress. Mas voc\u00ea pode pegar uma vers\u00e3o in-progress do tema no <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">Github<\/a>.<\/p>\n<p>O reposit\u00f3rio Github ser\u00e1 depreciado assim que o tema for fundido no <a href=\"https:\/\/kinsta.com\/pt\/docs\/suporte\/escopo-do-suporte\/escopo-de-suporte-de-wordpress-gerenciado\/\">n\u00facleo<\/a>, e voc\u00ea o encontrar\u00e1 no Theme Directory. Como o Twenty Twenty-One segue o <a href=\"https:\/\/make.wordpress.org\/core\/5-6\/\">cronograma de lan\u00e7amento do WordPress 5.6<\/a>, talvez voc\u00ea queira salvar as seguintes datas:<\/p>\n<ul>\n<li>20 de outubro de 2020: Beta 1<\/li>\n<li>27 de outubro de 2020: Beta 2<\/li>\n<li>2 de novembro de 2020: Beta 3<\/li>\n<li>12 de novembro de 2020: Beta 4<\/li>\n<li>17 de novembro de 2020: RC 1<\/li>\n<li>1 de dezembro de 2020: RC 2<\/li>\n<li>7 de dezembro de 2020: Dry run para lan\u00e7amento do WordPress 5.6<\/li>\n<li>8 de dezembro de 2020: Data prevista para o lan\u00e7amento do WordPress 5.6<\/li>\n<\/ul>\n<p>Para colocar o tema Twenty Twenty-One em funcionamento, siga estes passos:<\/p>\n<ol>\n<li>Obtenha a arquivo zip da <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">GitHub<\/a>.<\/li>\n<li>Carregue seu pacote para sua instala\u00e7\u00e3o de desenvolvimento a partir do <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel de controle do WordPress<\/a> ou via <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-sftp\/\">SFTP<\/a>.<\/li>\n<li>Navegue at\u00e9 <strong>Appearance \u2192 Temas <\/strong>e clique no bot\u00e3o <strong>Ativar <\/strong>na imagem de pr\u00e9-visualiza\u00e7\u00e3o do tema.<\/li>\n<li>Ir para <strong>Appearance \u2192 Personalizar <\/strong>para configurar Twenty Twenty-One.<\/li>\n<\/ol>\n<p>Agora voc\u00ea pode come\u00e7ar a executar seus testes em um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">site de teste<\/a> ou em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/instalar-wordpress-localmente\/\">ambiente local<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Por favor, observe que Twenty Twenty-One ainda est\u00e1 em desenvolvimento ativo, <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">muitas quest\u00f5es<\/a> ainda n\u00e3o foram resolvidas e algumas caracter\u00edsticas podem mudar no futuro<\/p>\n<\/aside>\n\n<figure id=\"attachment_83731\" aria-describedby=\"caption-attachment-83731\" style=\"width: 1480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-issue.jpg\" alt=\"quest\u00e3o do modo escuro\" width=\"1480\" height=\"2728\"><figcaption id=\"caption-attachment-83731\" class=\"wp-caption-text\">Twenty Twenty-One <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">Issue #620<\/a> de Github<\/figcaption><\/figure>\n<p>N\u00e3o est\u00e1 pronto para realizar seus testes?<\/p>\n<p>N\u00e3o se preocupe, dissecamos o tema e lhe mostraremos o que voc\u00ea poderia esperar do Twenty Twenty-One.<\/p>\n<h2>Temas e Caracter\u00edsticas do Bloco Twenty Twenty-One<\/h2>\n<p>Assim como o Twenty Twenty, o novo tema padr\u00e3o do WordPress n\u00e3o \u00e9 um tema completo, mas um tema minimalista que conta com o editor de blocos para a constru\u00e7\u00e3o de p\u00e1ginas. O tema tamb\u00e9m tem como objetivo <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#how-to-make-your-website-more-accessible\">proporcionar grande acessibilidade<\/a>. Nas palavras de Mel Choyce-Dwan:<\/p>\n<blockquote><p>Por fim, gostar\u00edamos de fazer com que o tema cumpra as diretrizes relevantes do WCAG 2.1 n\u00edvel AAA. Adoramos a id\u00e9ia quando +make.wordpress.org\/accessibility\/ trouxe \u00e0 tona, e gostar\u00edamos de receber toda e qualquer orienta\u00e7\u00e3o de nossa comunidade de especialistas para ajudar a tornar isto poss\u00edvel.<\/p><\/blockquote>\n<p>O tema suporta um bom n\u00famero de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">caracter\u00edsticas de tema<\/a> e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">bloco<\/a>, incluindo as seguintes:<\/p>\n<p><strong>Caracter\u00edsticas do tema:<\/strong><\/p>\n<ul>\n<li>Links de alimenta\u00e7\u00e3o autom\u00e1tica<\/li>\n<li>Etiqueta do t\u00edtulo<\/li>\n<li>Formatos postais<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/regenerar-miniaturas\/\">Miniaturas<\/a> de postes<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/html-vs-html5\/#what-is-html5\">Elementos HTML5<\/a><\/li>\n<li>Logotipo personalizado<\/li>\n<li>Atualiza\u00e7\u00e3o seletiva para widgets<\/li>\n<li>Antecedentes personalizados<\/li>\n<li>Dois menus de navega\u00e7\u00e3o<\/li>\n<li>Uma barra lateral<\/li>\n<\/ul>\n<p><strong>Caracter\u00edsticas do bloco:<\/strong><\/p>\n<ul>\n<li>Estilos de blocos padr\u00e3o<\/li>\n<li>Estilos de reda\u00e7\u00e3o<\/li>\n<li>Estilos de editor escuro (fundo escuro)<\/li>\n<li>Alinhar amplamente<\/li>\n<li>Tamanhos de fonte em bloco<\/li>\n<li>Paletas de cor de bloco<\/li>\n<li>Pr\u00e9-ajustes de gradiente de blocos<\/li>\n<li>Conte\u00fado inicial<\/li>\n<li>Emblemas responsivos<\/li>\n<li>Altura de linha personalizada<\/li>\n<li>Cor do link experimental<\/li>\n<li>Espa\u00e7amento experimental personalizado<\/li>\n<li>Unidades personalizadas (removidas no WordPress 5.6)<\/li>\n<\/ul>\n<p>A lista a seguir inclui as caracter\u00edsticas que podem ser mais relevantes na constru\u00e7\u00e3o de um website baseado no Twenty Twenty-One.<\/p>\n<h3>Menus de navega\u00e7\u00e3o<\/h3>\n<p>Twenty Twenty-One suporta dois locais de menu, a <strong>Navega\u00e7\u00e3o Prim\u00e1ria<\/strong>, localizada no canto superior direito do cabe\u00e7alho, e a <strong>Navega\u00e7\u00e3o Rodap\u00e9<\/strong>.<\/p>\n<figure id=\"attachment_83737\" aria-describedby=\"caption-attachment-83737\" style=\"width: 1678px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83737 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/menu-locations.jpg\" alt=\"Twenty Twenty-Onea posi\u00e7\u00f5es do menu\" width=\"1678\" height=\"954\"><figcaption id=\"caption-attachment-83737\" class=\"wp-caption-text\">Twenty Twenty-Onea posi\u00e7\u00f5es do menu<\/figcaption><\/figure>\n<p>Se adicionado ao menu Rodap\u00e9, <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-midia-social-do-wordpress\/\">links sociais<\/a> s\u00e3o automaticamente detectados e convertidos em <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-arquivo-imagem\/#vector-image-file-formats\">\u00edcones SVG<\/a> para as m\u00eddias sociais suportadas.<\/p>\n<figure id=\"attachment_83742\" aria-describedby=\"caption-attachment-83742\" style=\"width: 1376px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83742 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/social-icons.jpg\" alt=\"Twenty Twenty-Onea ementa social\" width=\"1376\" height=\"1294\"><figcaption id=\"caption-attachment-83742\" class=\"wp-caption-text\">Twenty Twenty-One aementa social<\/figcaption><\/figure>\n<h3>Formatos postais<\/h3>\n<p>Twenty Twenty-One suporta nove formatos de postes: link, aparte, galeria, imagem, cita\u00e7\u00e3o, status, v\u00eddeo, \u00e1udio, chat. Voc\u00ea pode escolher seu formato de postagem no painel <strong>Status &#038; Visibilidade <\/strong>das configura\u00e7\u00f5es do editor.<\/p>\n<figure id=\"attachment_83738\" aria-describedby=\"caption-attachment-83738\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/post-formats.jpg\" alt=\"Twenty Twenty-One suporta nove formatos postais\" width=\"280\" height=\"329\"><figcaption id=\"caption-attachment-83738\" class=\"wp-caption-text\">Twenty Twenty-One suporta nove formatos postais<\/figcaption><\/figure>\n<p>Para ver como o tema Twenty Twenty-One lida com os formatos postais, navegue at\u00e9 a pasta de <em>partes\/excertos do modelo <\/em>e escolha o modelo. Por exemplo, abra o arquivo <em>excerpt-image.php <\/em>em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">editor de c\u00f3digo<\/a> favorito. Nesse arquivo, voc\u00ea ver\u00e1 o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">\/**\n * Show the appropriate content for the Image post format.\n *\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\n *\n * @package WordPress\n * @subpackage Twenty_Twenty_One\n * @since 1.0.0\n *\/\n\n\/\/ If there is no featured-image, print the first image block found.\nif (\n\t! twenty_twenty_one_can_show_post_thumbnail() &&\n\thas_block( 'core\/image', get_the_content() )\n) {\n\n\ttwenty_twenty_one_print_first_instance_of_block( 'core\/image', get_the_content() );\n}\n\nthe_excerpt();<\/code><\/pre>\n<p>O c\u00f3digo \u00e9 auto-explicativo, mas vamos dar uma olhada mais de perto:<\/p>\n<ul>\n<li><code>has_block<\/code> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_block\/\">determina<\/a> se um poste ou uma corda cont\u00e9m um tipo espec\u00edfico de bloco (o bloco de imagem central neste exemplo).<\/li>\n<li><code>twenty_twenty_one_print_first_instance_of_block<\/code> \u00e9 uma fun\u00e7\u00e3o Twenty Twenty-One modelo que imprime a primeira inst\u00e2ncia de um bloco no conte\u00fado e depois se rompe.<\/li>\n<\/ul>\n<p>Portanto, se um visualizador de site requer um arquivo de postagens no formato &#8216;imagem&#8217;, o WordPress exibir\u00e1 uma imagem no topo para cada postagem no arquivo. Seguindo a mesma l\u00f3gica, voc\u00ea pode mergulhar em qualquer formato de postagem, verificando as partes correspondentes do modelo.<\/p>\n<h3>Identidade do site e logotipo personalizado<\/h3>\n<p>Twenty Twenty-One fornece suporte para um logotipo personalizado de 300&#215;100 px. Voc\u00ea pode encontrar as configura\u00e7\u00f5es personalizadas do logotipo no painel <strong>Identidade do site.<\/strong><\/p>\n<figure id=\"attachment_83741\" aria-describedby=\"caption-attachment-83741\" style=\"width: 1894px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-identity.jpg\" alt=\"Identidade do site em Twenty Twenty-One\" width=\"1894\" height=\"1674\"><figcaption id=\"caption-attachment-83741\" class=\"wp-caption-text\">Identidade do site em Twenty Twenty-One<\/figcaption><\/figure>\n<p>Esta tela inclui:<\/p>\n<ul>\n<li>Logotipo personalizado<\/li>\n<li>T\u00edtulo do site<\/li>\n<li>Etiqueta<\/li>\n<li>\u00cdcone do site<\/li>\n<\/ul>\n<h3>Tamanhos de fonte do editor<\/h3>\n<p>Twenty Twenty-One suporta os seguintes <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-fontes-no-wordpress\/\">tamanhos de fonte<\/a>:<\/p>\n<ul>\n<li>Extra pequeno &#8211; 16<\/li>\n<li>Pequeno &#8211; 18<\/li>\n<li>Normal\/M\u00e9dio &#8211; 20<\/li>\n<li>Grande &#8211; 24<\/li>\n<li>Extra grande &#8211; 40<\/li>\n<li>Enorme &#8211; 96<\/li>\n<li>Gigantesco &#8211; 144<\/li>\n<\/ul>\n<p>Na folha de estilo do tema, os tamanhos s\u00e3o definidos em unidades <code>rem<\/code>.<\/p>\n<figure id=\"attachment_83735\" aria-describedby=\"caption-attachment-83735\" style=\"width: 572px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83735 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/font-sizes.png\" alt=\"Twenty Twenty-One suporta sete tamanhos de fonte\" width=\"572\" height=\"502\"><figcaption id=\"caption-attachment-83735\" class=\"wp-caption-text\">Twenty Twenty-One suporta sete tamanhos de fonte<\/figcaption><\/figure>\n<h3>Configura\u00e7\u00f5es de cor<\/h3>\n<p>O Personalizador de Tema fornece um painel de <strong>Cores e Modo Escuro <\/strong>incluindo duas op\u00e7\u00f5es:<\/p>\n<ul>\n<li>Um simples colhedor de cores com 10 paletas de cores predefinidas.<\/li>\n<li>Uma caixa de sele\u00e7\u00e3o para ativar\/desativar o modo escuro.<\/li>\n<\/ul>\n<p>A imagem abaixo mostra uma cor de fundo amarelo claro com um texto cinza escuro.<\/p>\n<figure id=\"attachment_83727\" aria-describedby=\"caption-attachment-83727\" style=\"width: 554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83727 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/colors.jpg\" alt=\"Cores e configura\u00e7\u00f5es do Modo Escuro em Twenty Twenty-One\" width=\"554\" height=\"658\"><figcaption id=\"caption-attachment-83727\" class=\"wp-caption-text\">Cores e configura\u00e7\u00f5es do Modo Escuro em Twenty Twenty-One<\/figcaption><\/figure>\n<p>A cor de fundo padr\u00e3o \u00e9 um verde pastel (<code>\"#d1e4dd\"<\/code>), mas os <a href=\"https:\/\/kinsta.com\/pt\/blog\/funcoes-usuario-wordpress\/\">administradores do site<\/a> podem facilmente alternar entre as seguintes alternativas de cor de fundo:<\/p>\n<ul>\n<li>Preto = <code>'#000000'<\/code>;<\/li>\n<li>Cinza escuro = <code>'#28303D'<\/code>;<\/li>\n<li>Cinza = <code>'#39414D'<\/code>;<\/li>\n<li>Verde = <code>'#D1E4DD'<\/code>;<\/li>\n<li>Azul = <code>'#D1DFE4'<\/code>;<\/li>\n<li>Lil\u00e1s = <code>'#D1D1E4'<\/code>;<\/li>\n<li>Vermelho = <code>'#E4D1D1'<\/code>;<\/li>\n<li>Laranja = <code>'#E4DAD1'<\/code>;<\/li>\n<li>Amarelo = <code>'#EEEADD'<\/code>;<\/li>\n<li>Branco = <code>'#FFFFFF'<\/code>;<\/li>\n<\/ul>\n<p>As mesmas cores est\u00e3o dispon\u00edveis como <strong>paletas de cores de blocos <\/strong>nas configura\u00e7\u00f5es de blocos do editor.<\/p>\n<p>Al\u00e9m disso, o Twenty Twenty-One suporta v\u00e1rias <strong>predefini\u00e7\u00f5es de gradiente <\/strong>para blocos que suportam esta caracter\u00edstica. A imagem abaixo mostra os gradientes padr\u00e3o nas configura\u00e7\u00f5es de blocos das Colunas.<\/p>\n<figure id=\"attachment_83752\" aria-describedby=\"caption-attachment-83752\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83752 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/color-gradients.png\" alt=\"Oito pr\u00e9-ajustes de gradiente nas configura\u00e7\u00f5es de cores de um bloco\" width=\"280\" height=\"765\"><figcaption id=\"caption-attachment-83752\" class=\"wp-caption-text\">Oito pr\u00e9-ajustes de gradiente nas configura\u00e7\u00f5es de cores de um bloco<\/figcaption><\/figure>\n<p>Do ponto de vista da acessibilidade, o suporte ao Modo Escuro \u00e9 uma novidade absoluta para um tema padr\u00e3o.<\/p>\n<p>Vamos mergulhar um pouco mais fundo!<\/p>\n<h2>Suporte ao Modo Escuro em Twenty Twenty-One Tema<\/h2>\n<p>Ap\u00f3s uma discuss\u00e3o no canal <a href=\"https:\/\/wordpress.slack.com\/archives\/C02RP4VMP\/p1603294484103600\">#core-themes<\/a> Slack, <a href=\"https:\/\/make.wordpress.org\/core\/2020\/10\/22\/twenty-twenty-one-dark-mode-discussion\/\">Mel Choyce-Dwan introduziu o suporte do Dark Mode<\/a> para Twenty Twenty-One.<\/p>\n<figure id=\"attachment_83732\" aria-describedby=\"caption-attachment-83732\" style=\"width: 1338px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83732 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-mac.jpg\" alt=\"Habilitando o modo escuro em macOS\" width=\"1338\" height=\"510\"><figcaption id=\"caption-attachment-83732\" class=\"wp-caption-text\">Habilitando o modo escuro em macOS<\/figcaption><\/figure>\n<p>No in\u00edcio, n\u00e3o estava claro como este recurso poderia ter sido implementado em Twenty Twenty-One se adicionado como um recurso tem\u00e1tico ou como um projeto separado de envio em um plugin.<\/p>\n<p>Havia cinco op\u00e7\u00f5es poss\u00edveis para escolher:<\/p>\n<ul>\n<li>Permitir que os propriet\u00e1rios do site desabilitem o suporte do modo escuro e que os visitantes do site alternem o modo escuro ligado\/desligado enquanto visualizam o site.<\/li>\n<li>Permitindo aos propriet\u00e1rios do site apenas desativar o suporte do modo escuro (sem op\u00e7\u00e3o para que os visitantes do site alternem o modo escuro ligado\/desligado).<\/li>\n<li>Permitindo o suporte em modo escuro como &#8220;sempre ligado&#8221; enquanto permite que os visitantes do site o alterem enquanto visualizam o site.<\/li>\n<li>Possibilitando o suporte do modo escuro como &#8220;sempre ligado&#8221; e evitando que os visitantes do local alternem o modo escuro ligado\/desligado.<\/li>\n<li>N\u00e3o suporta o modo escuro de forma alguma<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/10\/twenty-twenty-one-dark-mode-update\/\">Ap\u00f3s uma discuss\u00e3o cuidadosa<\/a>, o Dark Mode foi acrescentado ao tema. Agora:<\/p>\n<ul>\n<li><strong>O suporte ao Modo Escuro est\u00e1 dispon\u00edvel como um recurso opcional para os propriet\u00e1rios do site<\/strong>.<\/li>\n<li>O <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/pull\/622\">bot\u00e3o de altern\u00e2ncia<\/a> foi removido da interface do editor e s\u00f3 est\u00e1 dispon\u00edvel no Customizer.<\/li>\n<li>O bot\u00e3o de comuta\u00e7\u00e3o do Modo Escuro est\u00e1 localizado no canto inferior direito (esquerda na RTL) e desaparece quando o visualizador do site desce a p\u00e1gina.<\/li>\n<li>Com o Modo Escuro ativado, os visualizadores do site podem lig\u00e1-lo\/deslig\u00e1-lo dependendo de suas prefer\u00eancias pessoais, e <strong>independentemente de suas configura\u00e7\u00f5es de SO\/browser<\/strong>.<\/li>\n<\/ul>\n<figure id=\"attachment_83733\" aria-describedby=\"caption-attachment-83733\" style=\"width: 2410px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83733 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-off.jpg\" alt=\"Modo escuro ativado no Customizer e desativado no site da frente\" width=\"2410\" height=\"1194\"><figcaption id=\"caption-attachment-83733\" class=\"wp-caption-text\">Modo escuro ativado no Customizer e desativado no site da frente<\/figcaption><\/figure>\n<p>Mesmo que o Dark Mode seja considerado uma melhoria de acessibilidade, n\u00e3o \u00e9 \u00f3bvio que as p\u00e1ginas de seu site seriam mais acess\u00edveis em todos os contextos.<\/p>\n<p>As maiores preocupa\u00e7\u00f5es dizem respeito a logotipos escuros e imagens transparentes. A mudan\u00e7a de um modelo padr\u00e3o de luz para uma cor de fundo escura pode levar a problemas de legibilidade que podem diminuir a usabilidade e arruinar a apar\u00eancia de seu website.<\/p>\n<p>Por exemplo, um logotipo escuro sobre um fundo claro pode desaparecer completamente se seus leitores habilitarem o Modo Escuro do lado deles. Preocupa\u00e7\u00f5es semelhantes referem-se ao <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/618\">brilho e contraste da imagem<\/a> e \u00e0 <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">opacidade das bordas, divisores e separadores<\/a>.<\/p>\n<p>Por esta raz\u00e3o, se voc\u00ea est\u00e1 planejando fornecer suporte no Modo Escuro para seu website, voc\u00ea tamb\u00e9m deve levar em conta como seu website ficar\u00e1 com um fundo escuro.<\/p>\n<figure id=\"attachment_83734\" aria-describedby=\"caption-attachment-83734\" style=\"width: 2409px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83734 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-on.jpg\" alt=\"Modo escuro ativado no Customizer e ativado no site da frente\" width=\"2409\" height=\"1193\"><figcaption id=\"caption-attachment-83734\" class=\"wp-caption-text\">Modo escuro ativado no Customizer e ativado no site da frente<\/figcaption><\/figure>\n<p>Os colaboradores do Theme est\u00e3o cientes destas quest\u00f5es e a discuss\u00e3o continua no Github. Para uma vis\u00e3o mais pr\u00f3xima das quest\u00f5es de usabilidade do Modo Escuro e uma oportunidade de se envolver na discuss\u00e3o, verifique a <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">lista completa de quest\u00f5es sobre o Github<\/a>.<\/p>\n<p>As prefer\u00eancias do Modo Escuro s\u00e3o armazenadas no LocalStorage e podem ser visualizadas nas ferramentas de desenvolvimento do navegador.<\/p>\n<p>No <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/storage\/localstorage\">Google Chrome<\/a>, inicie o Chrome WebTools e clique na guia <strong>Application<\/strong>. Encontre a se\u00e7\u00e3o <strong>Armazenamento <\/strong>e expanda o menu Armazenamento Local.<\/p>\n<figure id=\"attachment_83723\" aria-describedby=\"caption-attachment-83723\" style=\"width: 1740px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83723 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/brave-browser-local-storage.jpg\" alt=\"Prefer\u00eancias do usu\u00e1rio do Modo Escuro no armazenamento local do Brave Browser\" width=\"1740\" height=\"1086\"><figcaption id=\"caption-attachment-83723\" class=\"wp-caption-text\">Prefer\u00eancias do usu\u00e1rio do Modo Escuro no armazenamento local do Brave Browser<\/figcaption><\/figure>\n<p>Para ser honesto, o Modo Escuro n\u00e3o \u00e9 uma coisa comum no contexto dos websites de hoje. Entretanto, como um novo tema padr\u00e3o do WordPress agora suporta o modo escuro, poder\u00edamos esperar uma mudan\u00e7a nesta \u00e1rea espec\u00edfica de acessibilidade, uma vez que o WordPress \u00e9 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/softwares-cms\/\">software CMS<\/a> mais usado.<\/p>\n<p>Os desenvolvedores que querem mergulhar mais profundamente no material t\u00e9cnico n\u00e3o devem perder este guia aprofundado sobre o <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">modo escuro na web<\/a>.<\/p>\n<h2>Estilos e propriedades personalizadas do CSS<\/h2>\n<p>Dito isto, agora \u00e9 hora de explorar as caracter\u00edsticas mais interessantes do Twenty Twenty-One para os desenvolvedores de temas.<\/p>\n<p>Vamos come\u00e7ar com CSS Custom Properties.<\/p>\n<p>Como mencionado acima, Twenty Twenty-One \u00e9 baseado no <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, um tema de duas colunas, com uma barra lateral de rodap\u00e9 e tr\u00eas locais de menu. O estilo da Seedlet \u00e9 completamente baseado nas propriedades personalizadas do CSS e isto facilita aos desenvolvedores de temas e usu\u00e1rios avan\u00e7ados a <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">constru\u00e7\u00e3o do tema filho (child theme)<\/a> sobre o tema da Automattic.<\/p>\n<p>O mesmo se aplica ao Twenty Twenty-One. O novo tema padr\u00e3o vem com um layout de coluna \u00fanica, uma barra lateral de rodap\u00e9 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.<\/p>\n<p>As <strong>propriedades personalizadas do CSS <\/strong>(tamb\u00e9m conhecidas como <strong>vari\u00e1veis CSS<\/strong>) s\u00e3o entidades especiais que cont\u00eam valores espec\u00edficos que podem ser reutilizados em qualquer lugar em sua folha de estilo.<\/p>\n<p>Portanto, se voc\u00ea precisar mudar um acento de cor espec\u00edfico em seu documento, voc\u00ea n\u00e3o precisa fazer uma pesquisa global para descobrir qualquer ocorr\u00eancia dessa cor ao longo da folha de estilo. Voc\u00ea s\u00f3 precisa definir um valor de propriedade diferente dentro do <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">bloco<\/a> <code>:root<\/code>.<\/p>\n<figure id=\"attachment_83728\" aria-describedby=\"caption-attachment-83728\" style=\"width: 1970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83728 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/css-custom-properties.jpg\" alt=\"Propriedades personalizadas do CSS em Twenty Twenty-One\" width=\"1970\" height=\"1108\"><figcaption id=\"caption-attachment-83728\" class=\"wp-caption-text\">Propriedades personalizadas do CSS em Twenty Twenty-One<\/figcaption><\/figure>\n<p>Como um exemplo de personaliza\u00e7\u00e3o simples, digamos que voc\u00ea queira definir uma cor de fundo personalizada. Voc\u00ea n\u00e3o precisa construir um tema filho (child theme) para isso. Voc\u00ea s\u00f3 precisa incluir duas declara\u00e7\u00f5es CSS no editor de c\u00f3digo do <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/#css\">painel <strong>CSS adicional<\/strong><\/a>:<\/p>\n<pre><code class=\"language-css\">:root {\n\t--global--color-beige: #e6d7c1;\n}\n\nbody {\n\tbackground-color: var(--global--color-beige);\n}<\/code><\/pre>\n<figure id=\"attachment_83722\" aria-describedby=\"caption-attachment-83722\" style=\"width: 1682px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83722 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/additional-css.jpg\" alt=\"Custom CSS em Twenty Twenty-One Customizador\" width=\"1682\" height=\"786\"><figcaption id=\"caption-attachment-83722\" class=\"wp-caption-text\">Custom CSS em Twenty Twenty-One Customizador<\/figcaption><\/figure>\n<p>As propriedades personalizadas do CSS s\u00e3o seguras de usar, pois s\u00e3o suportadas por todos os principais navegadores, como mostrado na imagem abaixo do <a href=\"https:\/\/caniuse.com\/css-variables\">Can I Use<\/a>:<\/p>\n<figure id=\"attachment_83724\" aria-describedby=\"caption-attachment-83724\" style=\"width: 1326px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83724 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/caniuse-css-custom-properties.jpg\" alt=\"As propriedades personalizadas do CSS s\u00e3o suportadas pela maioria dos navegadores web modernos\" width=\"1326\" height=\"610\"><figcaption id=\"caption-attachment-83724\" class=\"wp-caption-text\">As propriedades personalizadas do CSS s\u00e3o suportadas pela maioria dos navegadores web modernos<\/figcaption><\/figure>\n<p>Se voc\u00ea quiser mergulhar mais fundo nas propriedades personalizadas do CSS, consulte a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">documenta\u00e7\u00e3o MDN<\/a>.<\/p>\n<h2>Padr\u00f5es de Bloco Twenty Twenty-One<\/h2>\n<p>O Twenty Twenty-One fornece v\u00e1rios padr\u00f5es para o Editor de Blocos. Em um <a href=\"https:\/\/kinsta.com\/pt\/blog\/novo-wordpress-5-5\/#block-patterns\">post de blog anterior<\/a>, definimos padr\u00f5es de blocos como <strong>layouts de blocos predefinidos, permitindo aos usu\u00e1rios adicionar rapidamente estruturas complexas de blocos aninhados a suas p\u00e1ginas<\/strong>.<\/p>\n<p>O WordPress 5.5 introduziu um punhado de padr\u00f5es de blocos e mais deve vir com o WordPress 5.6. Al\u00e9m disso, o Twenty Twenty-One vem com seu pr\u00f3prio conjunto de padr\u00f5es de blocos.<\/p>\n<p>Em Twenty Twenty-One, os padr\u00f5es de blocos s\u00e3o definidos no arquivo <em>inc\/block-patterns.php<\/em>. Os <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/50\">padr\u00f5es<\/a><a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/50\"> do Twenty Twenty-One <\/a>variam de padr\u00f5es simples como o padr\u00e3o de <em>Texto Grande<\/em>, que cont\u00e9m um \u00fanico elemento H2, a padr\u00f5es mais complexos, tais como <em>Imagens Sobrepostas e Texto <\/em>e <em>M\u00eddia e T\u00edtulo do Artigo de Texto<\/em>.<\/p>\n<figure id=\"attachment_83744\" aria-describedby=\"caption-attachment-83744\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83744 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-media-and-text-block-pattern.jpg\" alt=\"M\u00eddia e Texto Artigo Padr\u00e3o de bloco de t\u00edtulo em Twenty Twenty-One\" width=\"580\" height=\"306\"><figcaption id=\"caption-attachment-83744\" class=\"wp-caption-text\">M\u00eddia e Texto Artigo Padr\u00e3o de bloco de t\u00edtulo em Twenty Twenty-One<\/figcaption><\/figure>\n<p>Atualmente, o tema oferece os seguintes padr\u00f5es:<\/p>\n<ul>\n<li><strong>Texto grande<\/strong><\/li>\n<li><strong>\u00c1rea de Links<\/strong>: Um enorme texto seguido por redes sociais e links de endere\u00e7os de e-mail.<\/li>\n<li><strong>T\u00edtulo do Artigo de M\u00eddia e Texto<\/strong>: Um bloco de M\u00eddia e Texto com uma grande imagem \u00e0 esquerda e um cabe\u00e7alho \u00e0 direita. O t\u00edtulo \u00e9 seguido por um separador e um par\u00e1grafo de descri\u00e7\u00e3o.<\/li>\n<li><strong>Sobreposi\u00e7\u00e3o de imagens<\/strong>: Tr\u00eas imagens dentro de um bloco de colunas sobrepostas.<\/li>\n<li><strong>Vitrine de duas imagens<\/strong>: Um bloco de <a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">M\u00eddia<\/a> &#038; Texto com uma imagem grande \u00e0 esquerda e um bloco menor com uma moldura bordada \u00e0 direita.<\/li>\n<li><strong>Sobreposi\u00e7\u00e3o de imagens e textos<\/strong>: Um bloco de colunas sobrepostas com duas imagens e uma descri\u00e7\u00e3o de texto.<\/li>\n<li><strong>Lista de Portf\u00f3lio<\/strong>: Uma lista de projetos com imagens em miniatura.<\/li>\n<li><strong>Informa\u00e7\u00f5es de contato<\/strong>: Um bloco com 3 colunas exibindo informa\u00e7\u00f5es de contato e links de m\u00eddia social.<\/li>\n<\/ul>\n<figure id=\"attachment_83745\" aria-describedby=\"caption-attachment-83745\" style=\"width: 792px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83745 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-overlapping-images-block-pattern.jpg\" alt=\"Sobreposi\u00e7\u00e3o de blocos de imagens em Twenty Twenty-One\" width=\"792\" height=\"1028\"><figcaption id=\"caption-attachment-83745\" class=\"wp-caption-text\">Sobreposi\u00e7\u00e3o de blocos de imagens em Twenty Twenty-One<\/figcaption><\/figure>\n<p>A disponibilidade de tantos padr\u00f5es de blocos \u00e9 \u00f3tima tanto para usu\u00e1rios quanto para desenvolvedores. Os usu\u00e1rios poder\u00e3o r\u00e1pida e facilmente adicionar complexos blocos de c\u00f3digo a seus posts e p\u00e1ginas, os desenvolvedores podem usar esses padr\u00f5es como modelos \u00fateis para construir quando codificarem seus pr\u00f3prios padr\u00f5es.<\/p>\n<h2>A Experi\u00eancia dos Blocos Twenty Twenty-One<\/h2>\n<p>Twenty Twenty-One Blocks \u00e9 uma vers\u00e3o experimental em bloco separada do tema Twenty Twenty-One. Seu prop\u00f3sito \u00e9 compartilhar e manter todos atualizados sobre o que est\u00e1 acontecendo no experimento de Edi\u00e7\u00e3o do Site Completo, dando a todos uma chance de mergulhar nas novas caracter\u00edsticas do FSE antes de se tornarem parte do WordPress Core.<\/p>\n<p>\u00c9 <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/07\/block-based-themes-and-wordpress-5-6\/\">improv\u00e1vel que vejamos<\/a> esta vers\u00e3o experimental se fundir no n\u00facleo com o WordPress 5.6. <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/23\/developing-the-full-site-editing-version-of-twenty-twenty-one\/\">De acordo com Carolina Nymark<\/a>,<\/p>\n<blockquote><p>O tema precisar\u00e1 que o Gutenberg e a experi\u00eancia de edi\u00e7\u00e3o do site completo sejam ativados. Ele n\u00e3o far\u00e1 parte do Core, mas uma vez conclu\u00eddo, estar\u00e1 dispon\u00edvel no diret\u00f3rio de temas.<\/p><\/blockquote>\n<p>No momento deste escrito, <strong>Blocos <\/strong> <strong>Twenty Twenty-One requer o plugin Gutenberg<\/strong>. Uma vez instalado e ativado tanto o tema quanto o plugin, um item do menu Editor de Sites aparece em seu menu de administra\u00e7\u00e3o do WordPress (voc\u00ea n\u00e3o precisa mais ativar o experimento de Edi\u00e7\u00e3o Completa do Site).<\/p>\n<figure id=\"attachment_83740\" aria-describedby=\"caption-attachment-83740\" style=\"width: 519px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-editor-menu-item.jpg\" alt=\"O item do menu do Editor do Site em Twenty Twenty-One Blocks experiment\" width=\"519\" height=\"438\"><figcaption id=\"caption-attachment-83740\" class=\"wp-caption-text\">O item do menu do Editor do Site em Twenty Twenty-One Blocks experiment<\/figcaption><\/figure>\n<p>Agora, clique no novo item do menu <strong>Editor do site <\/strong>para abrir a interface completa de edi\u00e7\u00e3o do site e come\u00e7ar a editar qualquer elemento da p\u00e1gina usando o editor de blocos.<\/p>\n<figure id=\"attachment_83736\" aria-describedby=\"caption-attachment-83736\" style=\"width: 2260px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83736 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/full-site-editing.jpg\" alt=\"Edi\u00e7\u00e3o completa do site em Twenty Twenty-One blocos\" width=\"2260\" height=\"1278\"><figcaption id=\"caption-attachment-83736\" class=\"wp-caption-text\">Edi\u00e7\u00e3o completa do site em Twenty Twenty-One blocos<\/figcaption><\/figure>\n<p>Aqui n\u00e3o vamos mergulhar nas coisas t\u00e9cnicas. Basta dizer que os temas cl\u00e1ssicos e os temas baseados em blocos s\u00e3o estruturalmente diferentes.<\/p>\n<p>A imagem abaixo mostra o conte\u00fado da pasta Twenty Twenty-One Blocos:<\/p>\n<figure id=\"attachment_83747\" aria-describedby=\"caption-attachment-83747\" style=\"width: 1266px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twentytwentyone-blocks.jpg\" alt=\"Pasta Twenty Twenty-One Blocos\" width=\"1266\" height=\"700\"><figcaption id=\"caption-attachment-83747\" class=\"wp-caption-text\">Pasta Twenty Twenty-One Blocos<\/figcaption><\/figure>\n<p>Voc\u00ea notaria o arquivo <em>experimental-tema.json <\/em>e as pastas de <em>block-templates <\/em>e <em>block<\/em><em>-parts de block-templates<\/em>.<\/p>\n<p>A principal diferen\u00e7a entre os temas tradicionais do WordPress e os temas baseados em blocos \u00e9 que os temas baseados em blocos incluem modelos que s\u00e3o inteiramente compostos de blocos.<\/p>\n<p>Por exemplo, abra as <em>partes de bloco\/ cabe\u00e7alhos.html <\/em>em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">editor de c\u00f3digo<\/a>. Voc\u00ea deve ver o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;\n\n&lt;!-- wp:columns {\"align\":\"wide\"} --&gt;\n&lt;div class=\"wp-block-columns alignwide\"&gt;&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:site-title \/--&gt;\n\n&lt;!-- wp:site-tagline \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:navigation {\"orientation\":\"horizontal\",\"itemsJustification\":\"right\"} --&gt;\n&lt;!-- wp:navigation-link {\"label\":\"Home\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Blog\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Work\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Contact\",\"url\":\"#\"} \/--&gt;\n&lt;!-- \/wp:navigation --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;<\/code><\/pre>\n<p>Como voc\u00ea pode ver, o <a href=\"https:\/\/kinsta.com\/pt\/blog\/adicionar-codigo-ao-cabecalho-e-rodape-do-wordpress\/\">arquivo cl\u00e1ssico modelo <em>header.php<\/em><\/a><i> <\/i>foi substitu\u00eddo por um arquivo <em>. html <\/em>contendo v\u00e1rios blocos.<\/p>\n<p>Voc\u00ea pode pegar a vers\u00e3o in-progress do tema Twenty Twenty-One Blocks do projeto de <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\">Experimentos<\/a> do Github.<\/p>\n<p>Se voc\u00ea \u00e9 um desenvolvedor de temas, a <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/designers-developers\/developers\/themes\/block-based-themes.md\">documenta\u00e7\u00e3o oficial<\/a> fornece tudo o que voc\u00ea precisa saber sobre temas baseados em blocos.<\/p>\n<p>Se voc\u00ea gostaria de contribuir para a experi\u00eancia de edi\u00e7\u00e3o do site completo, envie seu feedback <a href=\"https:\/\/make.wordpress.org\/test\/handbook\/full-site-editing-outreach-experiment\/\">aqui<\/a>.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-One blocos \u00e9 um tema experimental e n\u00e3o deve ser usado na produ\u00e7\u00e3o! Brinque com ele em um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">ambiente de teste<\/a>.<\/span><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><\/p>\n<\/aside>\n<\/span><\/p>\n<h2>Como construir um tema filho (Child Theme) no Twenty Twenty-One<\/h2>\n<p>Os temas padr\u00e3o do WordPress s\u00e3o \u00f3timos pontos de partida para aprender o b\u00e1sico do <a href=\"https:\/\/kinsta.com\/pt\/blog\/salario-de-um-desenvolvedor-wordpress\/\">desenvolvimento de temas<\/a> e come\u00e7ar a construir um <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">tema filho (child theme) personalizado<\/a>.<\/p>\n<p>Os temas padr\u00e3o seguem as diretrizes das <a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/\">normas oficiais codifica\u00e7\u00e3o do WordPress<\/a> e est\u00e3o em conformidade com as <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_standards\">normas da web<\/a>.<\/p>\n<p>Existe um lugar melhor para <a href=\"https:\/\/kinsta.com\/pt\/blog\/linguagens-de-script\/\">aprender a codificar<\/a>?<\/p>\n<p>O tema filho (child theme) \u00e9 um \u00f3timo recurso do WordPress que permite personalizar o layout, as funcionalidades e a estrutura de suas p\u00e1ginas. Com os exemplos a seguir, vamos mergulhar em cada aspecto da personaliza\u00e7\u00e3o de temas.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Criando um tema filho (child theme)<\/h3>\n<p>A constru\u00e7\u00e3o de um tema filho do WordPress \u00e9 um processo de 3 etapas:<\/p>\n<h4>1. Criar a Pasta Tem\u00e1tica do seu tema filho (child theme)<\/h4>\n<p>Crie uma nova pasta em <em>wp-content\/temas <\/em>e nomeie-a como quiser. Mas lembre-se de que deve ser um nome \u00fanico. <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">O manual tema filho (child theme)<\/a> recomenda o uso do mesmo nome do parent theme, com <strong>-child <\/strong>anexado ao final.<\/p>\n<p>Assim, poder\u00edamos nomear a nova pasta <strong>twentytwentyone-child<\/strong>.<\/p>\n<h4>2. Criar um arquivo style.css<\/h4>\n<p>Agora v\u00e1 para seu diret\u00f3rio tema filho (child theme) e crie um novo arquivo <em>style.css <\/em>incluindo o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">\/*\nTheme Name: My Twenty Twenty One Child Theme\nTheme URI: https:\/\/example.com\nDescription: A child theme for Twenty Twenty One.\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nTemplate: twentytwentyone\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/code><\/pre>\n<p>O cabe\u00e7alho de informa\u00e7\u00f5es permite que o WordPress trate corretamente o seu tema filho (child theme).<\/p>\n<ul>\n<li>Nome tem\u00e1tico: O nome \u00fanico para o tema.<\/li>\n<li>Tema URI: Onde os usu\u00e1rios podem encontrar o c\u00f3digo ou a documenta\u00e7\u00e3o para o tema.<\/li>\n<li>Descri\u00e7\u00e3o: Texto descritivo para ajudar os usu\u00e1rios a entender o que o tema faz.<\/li>\n<li>Autor: Seu nome<\/li>\n<li>Autor URI: O site do autor.<\/li>\n<li>Modelo: A pasta onde o tema principal \u00e9 armazenado. Use o nome da pasta e n\u00e3o o nome do tema. Sem esta linha, seu tema n\u00e3o funcionar\u00e1 como um tema filho (child theme).<\/li>\n<li>Vers\u00e3o: O n\u00famero da vers\u00e3o<\/li>\n<li>Licen\u00e7a: A licen\u00e7a, que <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/wordpress-licensing-the-gpl\/\">deve ser GNU<\/a>.<\/li>\n<li>Licen\u00e7a URI: O link para informa\u00e7\u00f5es sobre a licen\u00e7a.<\/li>\n<\/ul>\n<p>Abaixo desse texto, voc\u00ea pode acrescentar seus blocos de declara\u00e7\u00f5es CSS, como lhe mostrarei dentro de instantes.<\/p>\n<h4>3. Criar um arquivo functions.php<\/h4>\n<p>Com Twenty Twenty-One, voc\u00ea tamb\u00e9m precisar\u00e1 de um arquivo <em>functions.php. <\/em>Ent\u00e3o, crie seu pr\u00f3prio no diret\u00f3rio do tema crian\u00e7a, abra-o em seu editor de c\u00f3digo e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/* enqueue scripts and style from parent theme *\/\n   \nfunction twentytwentyone_styles() {\n\twp_enqueue_style( 'child-style', get_stylesheet_uri(),\n\tarray( 'twenty-twenty-one-style' ), wp_get_theme()-&gt;get('Version') );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');<\/code><\/pre>\n<p>Como o tema Twenty Twenty-One usa <code>get_template_directory()<\/code> para carregar sua folha de estilo, voc\u00ea precisa consultar a folha de estilo do tema filho (child theme) usando a a\u00e7\u00e3o <code>wp_enqueue_scripts<\/code>.<\/p>\n<p>Depois disso, salve seus arquivos, abra seu painel do WordPress, navegue at\u00e9 <strong>Appearance -&gt; Themes <\/strong>e ative seu tema filho (child theme) Twenty Twenty-One.<\/p>\n<p>Vamos agora acrescentar nossas customiza\u00e7\u00f5es.<\/p>\n<h3>Como Adicionar Estilos Personalizados<\/h3>\n<p>Quando se trata de personalizar o layout de seu site WordPress, voc\u00ea tem v\u00e1rias op\u00e7\u00f5es para <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">adicionar seu c\u00f3digo CSS personalizado<\/a>. O painel <strong>CSS adicional <\/strong>do Customizer pode ser suficiente para pequenas mudan\u00e7as.<\/p>\n<p>Mas um tema filho (child theme) seria uma op\u00e7\u00e3o melhor se voc\u00ea tiver que fazer personaliza\u00e7\u00f5es avan\u00e7adas, ou se precisar exportar seu c\u00f3digo para diferentes sites WordPress.<\/p>\n<p>Vamos tentar com uma personaliza\u00e7\u00e3o simples: mudar a pilha de fontes padr\u00e3o.<\/p>\n<p>Digamos que voc\u00ea queira carregar uma pilha de fontes diferente, ou simplesmente <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-modernas\/\">adicionar sua fonte favorita<\/a> \u00e0s fam\u00edlias de fontes padr\u00e3o Twenty Twenty-One.<\/p>\n<p>Como voc\u00ea faz isso?<\/p>\n<p>Aqui vou mostrar como alterar a fonte padr\u00e3o para os cabe\u00e7alhos H1, mas voc\u00ea pode alterar a fam\u00edlia de fontes para qualquer elemento de texto de seu website.<\/p>\n<p>Primeiro, abra o arquivo Thenty Twenty-One&#8217;s <em>style.css <\/em>e encontre o seguinte bloco de CSS:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n\tclear: both;\n\tfont-family: var(--heading--font-family);\n\tfont-weight: var(--heading--font-weight);\n}<\/code><\/pre>\n<p>Como voc\u00ea pode ver, a fam\u00edlia de fontes para os cabe\u00e7alhos \u00e9 definida na vari\u00e1vel <code>--heading--font-family<\/code>.<\/p>\n<p>Agora v\u00e1 at\u00e9 o bloco <code>:root{}<\/code> e encontre a seguinte declara\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-css\">--heading--font-family: var(--global--font-primary);<\/code><\/pre>\n<p><code>--heading--font-family<\/code> depende da vari\u00e1vel <code>--global--font-primary<\/code> , que \u00e9 definida no topo do bloco <code>:root{}<\/code>:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif);\n\t...\n}<\/code><\/pre>\n<p>Agora sabemos o que mudar!<\/p>\n<p>Copie a declara\u00e7\u00e3o <code>--global--font-primary<\/code> da folha de estilo do parent theme e cole-a no de seu tema filho <em>style.css<\/em>. Em seguida, mude o nome e o valor da propriedade, como mostrado abaixo:<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Cantarell, \"Helvetica Neue\", sans-serif);\n\n\t--global--font-family-child: var(--global--font-primary-child);\n}<\/code><\/pre>\n<p>Uma vez que voc\u00ea tenha declarado sua pilha de fontes personalizada, voc\u00ea pode us\u00e1-la onde quiser em sua folha de estilos. Cabe\u00e7alhos H1 em nosso exemplo:<\/p>\n<pre><code class=\"language-css\">h1,\n.h1 {\n\tfont-family: var(--global--font-family-child);\n}<\/code><\/pre>\n<p>Salve o<em>\u00a0<\/em>seu tema filho <em>style.css <\/em>e recarregue a p\u00e1gina. Voc\u00ea deve ver o Ubuntu como a nova fam\u00edlia de fontes padr\u00e3o para os cabe\u00e7alhos de sua p\u00e1gina.<\/p>\n<figure id=\"attachment_83729\" aria-describedby=\"caption-attachment-83729\" style=\"width: 2612px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83729 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-font-family.png\" alt=\"Fam\u00edlia de fontes padr\u00e3o versus fam\u00edlia de fontes personalizadas em Twenty Twenty-One\" width=\"2612\" height=\"1576\"><figcaption id=\"caption-attachment-83729\" class=\"wp-caption-text\">Fam\u00edlia de fontes padr\u00e3o versus fam\u00edlia de fontes personalizadas em Twenty Twenty-One<\/figcaption><\/figure>\n<p>Agora que voc\u00ea sabe como customizar o estilo Twenty Twenty-One com um tema filho (child theme), podemos explorar caracter\u00edsticas mais avan\u00e7adas.<\/p>\n<h3>Como adicionar novos padr\u00f5es de blocos<\/h3>\n<p>Neste exemplo, vamos construir um padr\u00e3o de blocos personalizados, incluindo um bloco de duas colunas com uma imagem arredondada \u00e0 esquerda, um cabe\u00e7alho H4 e um par\u00e1grafo \u00e0 direita.<\/p>\n<p>Voc\u00ea pode construir seu padr\u00e3o diretamente no Block Editor ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">customizar o c\u00f3digo<\/a> de um padr\u00e3o de bloco existente.<\/p>\n<p>Se voc\u00ea optar por construir seu padr\u00e3o no Editor de Blocos, basta adicionar os blocos necess\u00e1rios a um post ou rascunho de p\u00e1gina, depois mudar para o Editor de C\u00f3digo e copiar o c\u00f3digo correspondente.<\/p>\n<figure id=\"attachment_83725\" aria-describedby=\"caption-attachment-83725\" style=\"width: 1058px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83725 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/code-editor-2.png\" alt=\"Um bloco de duas colunas no Editor de C\u00f3digo\" width=\"1058\" height=\"528\"><figcaption id=\"caption-attachment-83725\" class=\"wp-caption-text\">Um bloco de duas colunas no Editor de C\u00f3digo<\/figcaption><\/figure>\n<p>Agora podemos registrar nosso padr\u00e3o no arquivo <em>functions.php do <\/em>tema crian\u00e7a<em>:<\/em><\/p>\n<pre><code class=\"language-php\">add_action( 'init', function(){\n\n\tregister_block_pattern_category( \n\t\t'custom-patterns', \n\t\tarray( 'label' =&gt; esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );\n\n\tregister_block_pattern(\n\t'twentytwentyone-child\/custom-bio-pattern',\n\tarray(\n\t\t'title'\t\t\t=&gt; __( 'Author Bio', 'twentytwentyone-child' ),\n\t\t'description'\t=&gt; _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),\n\t\t'content'\t\t=&gt; '&lt;!-- wp:columns {\"verticalAlignment\":null} --&gt; &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"33.33%\"} --&gt; &lt;div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"&gt;&lt;!-- wp:image {\"id\":29,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} --&gt; &lt;figure class=\"wp-block-image size-large is-style-rounded\"&gt;&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;&lt;\/figure&gt; &lt;!-- \/wp:image --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt; &lt;!-- wp:column {\"width\":\"66.66%\"} --&gt; &lt;div class=\"wp-block-column\" style=\"flex-basis:66.66%\"&gt;&lt;!-- wp:heading {\"level\":4} --&gt; &lt;h4&gt;About Kinsta&lt;\/h4&gt; &lt;!-- \/wp:heading --&gt; &lt;!-- wp:paragraph --&gt; &lt;p&gt;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\u2019s our promise. We don\u2019t settle and are here to stay.&lt;\/p&gt; &lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt;&lt;\/div&gt; &lt;!-- \/wp:columns --&gt;',\n\t\t'categories'\t=&gt; array( 'custom-patterns' ),\n\t)\n\t);\n});<\/code><\/pre>\n<p>O c\u00f3digo acima registra a categoria <strong>Padr\u00f5es personalizados <\/strong>e o padr\u00e3o de <strong>Autor Bio<\/strong>.<\/p>\n<p>Observe o c\u00f3digo que usamos para construir o elemento <code>img<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;<\/code><\/pre>\n<p>A <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_directory_uri\/\">fun\u00e7\u00e3o<\/a> <code>get_stylesheet_directory_uri()<\/code> fornece o URI do diret\u00f3rio do seu tema filho (child theme) (a imagem foi previamente adicionada \u00e0 pasta de <em>ativos <\/em>do tema filho).<\/p>\n<p>Salve suas mudan\u00e7as e crie um novo post ou p\u00e1gina.<\/p>\n<p>Agora voc\u00ea deve encontrar o novo padr\u00e3o no inseridor de blocos.<\/p>\n<figure id=\"attachment_83730\" aria-describedby=\"caption-attachment-83730\" style=\"width: 2306px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83730 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-pattern.jpg\" alt=\"Um padr\u00e3o de bloco personalizado adicionado ao Twenty Twenty-One\" width=\"2306\" height=\"908\"><figcaption id=\"caption-attachment-83730\" class=\"wp-caption-text\">Um padr\u00e3o de bloco personalizado adicionado ao Twenty Twenty-One<\/figcaption><\/figure>\n<h3>Personaliza\u00e7\u00e3o de um arquivo de modelo<\/h3>\n<p>Se voc\u00ea quiser criar um novo arquivo modelo para um arquivo espec\u00edfico, ou um \u00fanico post\/p\u00e1gina, voc\u00ea precisar\u00e1 criar um novo modelo <em>.php de <\/em>acordo com a <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/#how-wordpress-chooses-template-files\">Hierarquia de Modelos<\/a> do WordPress.<\/p>\n<p>Mas se voc\u00ea quiser editar apenas um modelo existente (ou parte do modelo), basta copiar o modelo original do tema pai e col\u00e1-lo na posi\u00e7\u00e3o correspondente do tema filho (leia mais sobre este t\u00f3pico em nosso <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/#the-files-in-a-wordpress-child-theme\">guia ampliado sobre o tema filho<\/a>).<\/p>\n<p>Digamos que voc\u00ea queira personalizar o texto &#8220;Orgulhosamente alimentado por WordPress&#8221;. Voc\u00ea tem v\u00e1rias op\u00e7\u00f5es para <a href=\"https:\/\/kinsta.com\/pt\/blog\/remover-powered-by-wordpress\/\">remover ou personalizar es salinha<\/a>. Para nosso exemplo, vamos mud\u00e1-lo manualmente.<\/p>\n<p>Para fazer isso, copie o arquivo de modelo de <em>rodap\u00e9.php <\/em>da pasta parent theme e cole-o na raiz do tema do seu tema filho. Quando terminar, abra o <code>footer.php<\/code> de seu tema filho em seu editor de c\u00f3digo e encontre o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Agora, voc\u00ea pode fazer suas mudan\u00e7as. Digamos que voc\u00ea queira dar cr\u00e9ditos ao seu web host, basta substituir o elemento <code>a<\/code> como mostrado abaixo:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"https:\/\/kinsta.com\/\"&gt;Kinsta&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Para remover esse texto, basta comentar ou apagar o elemento <code>div.powered-by<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!-- &lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt; --&gt;<\/code><\/pre>\n<p>E \u00e9 isso a\u00ed. Agora, passando dos exemplos simples acima, voc\u00ea pode fazer personaliza\u00e7\u00f5es mais excitantes e levar seu site com o tema Twenty Twenty-One para o pr\u00f3ximo n\u00edvel.<\/p>\n\n<h2>Resumo<\/h2>\n<p>O tema Twenty Twenty-One \u00e9 a terceira tentativa de permitir que pessoas sem habilidades t\u00e9cnicas avan\u00e7adas construam websites. \u00c9 um tema WordPress minimalista, de bom desempenho e acess\u00edvel, que tamb\u00e9m se enquadra em uma ampla gama de casos de uso. Os sites WordPress com o tema Twenty Twenty-One v\u00eam em todas as formas e tamanhos. Para descobrir se um tema est\u00e1 usando o Twenty Twenty-One, confira nossa ferramenta <a href=\"https:\/\/kinsta.com\/pt\/ferramentas\/detector-tema-wordpress\/\">pr\u00e1tica de detec\u00e7\u00e3o de temas WordPress<\/a>.<\/p>\n<p>Projetado com o editor de blocos em mente, o novo tema padr\u00e3o \u00e9 f\u00e1cil de ser personalizado tanto para usu\u00e1rios quanto para desenvolvedores.<\/p>\n<p>Agora \u00e9 a sua vez: Voc\u00ea j\u00e1 instalou o tema Twenty Twenty-One? Qual \u00e9 a sua experi\u00eancia com ele? Compartilhe suas id\u00e9ias na se\u00e7\u00e3o de coment\u00e1rios!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty-One \u00e9 o novo tema padr\u00e3o do WordPress que vem com o WordPress 5.6. Se voc\u00ea estiver esperando por um tema WordPress completo, voc\u00ea pode &#8230;<\/p>\n","protected":false},"author":36,"featured_media":40670,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[30,128],"topic":[1036],"class_list":["post-40666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpress","tag-wordpresstheme","topic-temas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress<\/title>\n<meta name=\"description\" content=\"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress\" \/>\n<meta property=\"og:description\" content=\"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-18T09:52:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-14T12:19:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"384\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress\",\"datePublished\":\"2020-11-18T09:52:49+00:00\",\"dateModified\":\"2025-02-14T12:19:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\"},\"wordCount\":5021,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg\",\"keywords\":[\"WordPress\",\"wordpresstheme\"],\"articleSection\":[\"Melhores Tutoriais WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\",\"name\":\"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg\",\"datePublished\":\"2020-11-18T09:52:49+00:00\",\"dateModified\":\"2025-02-14T12:19:39+00:00\",\"description\":\"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg\",\"width\":768,\"height\":384,\"caption\":\"twenty-twenty-one-tema-pt\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress","description":"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/","og_locale":"pt_PT","og_type":"article","og_title":"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress","og_description":"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","og_url":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2020-11-18T09:52:49+00:00","article_modified_time":"2025-02-14T12:19:39+00:00","og_image":[{"width":768,"height":384,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"28 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress","datePublished":"2020-11-18T09:52:49+00:00","dateModified":"2025-02-14T12:19:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/"},"wordCount":5021,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg","keywords":["WordPress","wordpresstheme"],"articleSection":["Melhores Tutoriais WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/","url":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/","name":"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg","datePublished":"2020-11-18T09:52:49+00:00","dateModified":"2025-02-14T12:19:39+00:00","description":"O tema Twenty Twenty-One \u00e9 o tema surdo-padr\u00e3o que est\u00e1 sendo introduzido com o WordPress 5.6. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/11\/twenty-twenty-one-tema-pt-1.jpg","width":768,"height":384,"caption":"twenty-twenty-one-tema-pt"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-one-tema\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"Twenty Twenty-One: Se Aprofundando no Novo Tema Padr\u00e3o do WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/40666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=40666"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/40666\/revisions"}],"predecessor-version":[{"id":55038,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/40666\/revisions\/55038"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/translations\/se"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/40666\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/40670"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=40666"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=40666"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=40666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}