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