Criando um tema WordPress usando Underscores (_s)

Para acelerar e facilitar nossa tarefa de construir um tema, vale a pena conhecer o Underscores (_s), um gabarito criado pela equipe da Automattic que serve de base para a criação de novos temas para o WordPress.

Por que o Underscores (_s)?

Uma das atividades cotidianas para o desenvolvimento de um website no WordPress é a criação de um tema, que contém o visual das páginas e também reúne algumas funcionalidades.

Mas apesar da farta documentação e facilidade para entender a estrutura dos temas para WordPress, criar um tema do zero pode ser uma atividade extensa, que se toma muito tempo para desenvolver as partes mais básicas.

Para acelerar e facilitar nossa tarefa de construir um tema, vale a pena conhecer o Underscores (_s), um gabarito criado pela equipe da Automattic que serve de base para a criação de novos temas para o WordPress.

Desenvolvido em 2012, o Underscores é uma evolução do tema Toolbox, que era oferecido como tema inicial no serviço WordPress.com. Ainda hoje, o _s é base para uma série de temas produzidos pela própria Automattic, incluindo os temas disponibilizados no pacote de instalação e já está sendo atualizado para suportar o novo Gutenberg.

Além de uma base forte para teu tema, o Underscores ainda é recheado de ajustes e quitutes que aceleram o desenvolvimento e também dão uma melhorada no visual.

O que Underscores tem?

  • Um conjunto de modelos de página finamente desenvolvidos em HTML5, modernos e bem comentados.
  • Um modelo de página 404.
  • Código-exemplo para a implementação do recurso de cabeçalho personalizado, em inc/custom-header.php.
  • Conjunto de marcações personalizadas em inc/template-tags.php para manter seus modelos limpos e arrumados, evitando a redundância de código.
  • Alguns ajustes em inc/template-functions.php que podem aprimorar a experiência com teu tema.
  • Um conveniente script JS em js/navigation.js que transforma o menu principal e seus itens (abertos em telas maiores) para um simples botão que abre o menu, para telas menores.
  • Dois exemplos de leiaute CSS emlayouts/ para posicionar uma barra lateral à esquerda ou à direita.
  • Um folha de estilos CSS mínima, mas finamente organizada e detalhada em style.css que ajuda (e muito!) a montar o visual de nosso tema rapidamente.

E tudo isso licenciado sob GPLv2, ou seja, podemos usar livremente sem se preocupar com questões legais. 🙂

Como usar o Underscores?

Acho que a melhor maneira de começar e é meter a mão na massa. E como se não fosse sensacional ter todo esse código pronto, ainda é muito fácil personalizar o gabarito antes mesmo de baixá-lo.

1) Acessa a página do Underscores, em underscores.me. Clica em “Advanced options” para ver as “opções avançadas”.

2) Preenche com um nome para o tema, um “slug” (identificador único), nome do autor, endereço do autor na Web e um descritivo (no meu caso, “um tema cuera*”).

3) Aperta “Generate” para gerar teu novo tema baseado no _s e baixar o pacote.

Agora é só usar como um pacote de tema comum do WordPress, subindo o ZIP em Aparência > Temas no administrador. Em Aparência > Personalizar dá para ver as opções que estão ativadas por padrão e começar a ajustar o leiaute.

Em um próximo artigo pretendo detalhar as entranhas do tema, mas se quiseres saber mais sobre esse excelente starter theme, faz meu curso Criando temas WordPress com Underscores. Te inscreve aqui!