Guia do tema Twenty Nineteen para o WordPress 5.04 min leitura

Dicas para você aproveitar melhor o potencial do tema Twenty Nineteen para o WordPress.

A cada ano é lançado uma nova versão do tema oficial do WordPress e o grande destaque do tema Twenty Nineteen é o seu suporte ao editor de blocos, também conhecido como Gutenberg, lançado na versão 5.0 do WP.

Uma curiosidade interessante √© que os nomes dos temas s√£o referentes aos anos em que v√£o ser utilizados, por exemplo, no final de 2018 foi lan√ßado o tema 2019 (Vinte Dezenove, em ingl√™s Twenty Nineteen). Esta nomenclatura √© utilizada desde 2010 (Twenty Ten), sendo que o √ļnico ano que n√£o houve lan√ßamento foi em 2018, pois o foco da comunidade era o desenvolvimento do Gutenberg.

Estrutura do tema Twenty Nineteen

Para ficar mais f√°cil de visualizar as principais √°reas da estrutura do tema, montei um wireframe simplificado do Twenty Nineteen.

Wireframe do tema Twenty Nineteen
Wireframe do tema Twenty Nineteen

A imagem destacada é opcional para posts e páginas, mas uma vez definida ela é sempre utilizada como plano de fundo do topo daquele post ou página.

Integração com o editor de blocos (a.k.a. Gutenberg)

O principal diferencial do Twenty Nineteen é o seu suporte nativo ao Gutenberg e um dos seus objetivos é ser referência da integração de temas com o editor de blocos.

Personalizando o tema

Infelizmente o Twenty Nineteen n√£o possui tantas op√ß√Ķes de personaliza√ß√£o quanto o seu antecessor, possibilitando apenas a personaliza√ß√£o do logo, √≠cone do site e cor (menu, links e filtro opcional nas imagens destacadas).

Como dificilmente se utiliza um tema sem nenhuma personaliza√ß√£o adicional, fiz uma lista das altera√ß√Ķes que fiz.

Habilitando configura√ß√Ķes adicionais de exibi√ß√£o

Se voc√™ instalar o plugin Jetpack, ele adiciona uma nova se√ß√£o dentro do “Apar√™ncia > Personalizar” chamada “Op√ß√Ķes de conte√ļdo”, onde √© poss√≠vel configurar a exibi√ß√£o do:

  • Blog: resumo ou post completo;
  • Post meta data (veja no wireframe) na listagem (archive) e no post (single): data, categoria, tag e autor;
  • Imagem em destaque: listagem, p√°gina e post.
Tela de configura√ß√Ķes do Jetpack para o tema
Seção adicionada pelo Jetpack no Personalizar

Remover arredondamento do logo

Por padr√£o a imagem enviada para ser utilizada como logo √© automaticamente “cortada” e transformada em um c√≠rculo. Pode ser que voc√™ n√£o queira este efeito, principalmente se for utilizar para enviar √≠cones de uma logo, que pode ficar cortado por conta disso. Para remover esse efeito, √© s√≥ utilizar o c√≥digo CSS abaixo (adicione dentro de: Personalizar > CSS personalizado):

/* Twenty Nineteen: Remove arredondamento do logo */ .site-logo .custom-logo-link { border-radius: 0; }
Code language: CSS (css)

Estilizando o menu do rodapé

Por padrão o menu do rodapé fica ao lado do crédito do WordPress e eu achei essa localização particularmente confusa.

/* Menu rodapé: move para abaixo do crédito do WP */ .footer-navigation { display: block; }
Code language: CSS (css)

Além disso eu também achei interessante dar um pouco mais de destaque aos links, então repliquei alguns dos estilos do menu do topo nele.

/* Menu rodapé: altera estilos dos links */ .footer-navigation .footer-menu li { font-weight: 700; margin-right: 0.5rem; font-size: 1.125em; line-height: 1.25; }
Code language: CSS (css)

Configura√ß√Ķes adicionais com plugin de terceiro

Para resolver a falta de op√ß√Ķes do tema, o desenvolvedor Oliver Campion criou o plugin Options for Twenty Nineteen que adiciona v√°rias possibilidades de configura√ß√Ķes adicionais atrav√©s da tela ‘personalizar’.

Tela do 'Personalizar' marcando os itens adicionados pelo plugin Options for Twenty Nineteen do WordPress
Configura√ß√Ķes adicionadas pelo plugin Options for Twenty Nineteen

O plugin √© gratuito, mas tamb√©m tem uma vers√£o paga, onde √© poss√≠vel fazer algumas configura√ß√Ķes adicionais (uma delas foi remover o arredondado do logo que expliquei acima como fazer).

Adapta√ß√Ķes que fiz no conte√ļdo

Dependendo do tema que se escolhe, √© necess√°rio fazer algumas adapta√ß√Ķes no conte√ļdo do tema para ajeitar o visual de alguns posts ou p√°ginas. No meu caso, precisei fazer as altera√ß√Ķes abaixo.

Posts – Imagem destacada

Eu adicionava manualmente as imagens destacadas no início de cada post, para que elas também fossem exibidas lá pois o tema não fazia isso automaticamente. Como este tema faz isso, precisei editar cada um dos posts para remover essa imagem.

Problemas encontrados

Durante o uso cheguei a encontrar vários problemas, mas a maioria deles já foram resolvidos. Segue o que encontrei até agora:

  • A p√°gina de arquivo n√£o suporta descri√ß√£o.

Similar Posts

2 Comments

Você tem algo construtivo sobre este texto para dizer? Então comente abaixo