Workshop: Deploy descomplicado de aplicações em VPS 🚀

Como criar tema WordPress com Underscores (_s)

Publicado em 20/03/2018

Atualizado em 03/06/2024
pessoa usando computador. Imagem ilustrativa para texto Como criar tema WordPress com Underscores (_s)

Buenas, pessoal! A convite da KingHost, vou apresentar para vocês uma maneira rápida de desenvolver seu próprio tema WordPress, usando um gabarito (template) chamado Underscores (_S).

Quem é web designer ou web developer deve saber que uma das atividades do dia-a-dia no WordPress é a criação de um tema. Ele é uma série de arquivos que traduzem o visual das páginas e também definem as funcionalidades do teu novo website.

Mas mesmo com o acesso fácil à documentação e facilidade para entender a estrutura dos arquivos dos temas WordPress, criar um tema desde o início pode ser uma atividade cansativa e que vai tomar muito de nosso tempo.

O Underscores (_s)

Para acelerar esse processo, apresento o Underscores (_s), um gabarito criado pela equipe da Automattic que serve de base para a criação de novos temas para o WordPress.

Uma coisa importante: esse “tema inicial” (starter theme) é adequado para o trabalho de desenvolvedores, que já têm algum conhecimento de HTML, CSS e PHP. Para usar o Underscores, é preciso ter um leiaute já desenhado, de modo que vamos usá-lo de referência para construir nosso tema.

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, incluindo:

  • Arquivos de modelos de página desenvolvidos em HTML5, modernos e bem comentados;
  • Códigos-exemplo para a implementação de recursos já disponíveis no WordPress (e que alguns programadores inclusive não conhecem!) e exemplos de CSS para posicionar uma barra de widgets à esquerda ou à direita;
  • Um folha de estilos CSS mínima, mas finamente organizada e documentada, que vai ajudar-nos a montar o visual de nosso tema.
  • Para usar o Underscores é muito simples. Há uma página preparada pela Automattic em http://underscores.me. Lá, podemos personalizar o código desse tema inicial antes mesmo de baixá-lo, colocando nossos próprios dados, como nome do tema, “slug” (identificador único), nome do autor e outros. Vamos clicar em “Advanced Options” e preencher os campos.

undercores
Agora é só subir no Administrador do WordPress o ZIP gerado, como se faz com um pacote de tema comum. Em Aparência > Personalizar já será possível ver as opções que estão ativadas por padrão e começar a ajustar o leiaute.
Aproveito para deixar o convite para todos os interessados em saber mais de WordPress para participarem do evento WordCamp Porto Alegre 2018, no dia 5 de maio de 2018. Ele é evento oficial do WordPress e é organizado por um grupo de voluntários para promover e divulgar conhecimento sobre plataforma!

Boa sorte e até a próxima!

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Marco Andrei
Marco Andrei Kichalowsky
Webmaster, marqueteiro e viciado em WordPress, plataforma com qual trabalha desde 2004. Adora a Web, o Colorado, o Mac, a música e viajar para conhecer lugares, culturas e idiomas em todo o mundo.
Marco Andrei
Marco Andrei Kichalowsky
Webmaster, marqueteiro e viciado em WordPress, plataforma com qual trabalha desde 2004. Adora a Web, o Colorado, o Mac, a música e viajar para conhecer lugares, culturas e idiomas em todo o mundo.

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

A automação n8n permite conectar APIs, bancos de dados, aplicações SaaS e sistemas internos em fluxos visuais. A plataforma organiza gatilhos, regras, transformações e ações em uma sequência lógica, sem limitar a equipe a integrações prontas ou processos estritamente lineares. Em operações reais, uma automação pode receber dados por webhook, consultar uma API, validar informações,...
Edge Computing permite processar dados mais perto dos usuários, reduzindo atrasos e aumentando a eficiência de aplicações críticas. Veja como funciona, quais são seus benefícios e quando adotar essa arquitetura para escalar com mais performance. Aplicações modernas precisam responder cada vez mais rápido. Seja em plataformas SaaS, e-commerces, sistemas de monitoramento, APIs ou dispositivos conectados,...
Entenda a diferença entre escalabilidade horizontal e vertical, quando usar scale up e scale out, como funciona a expansão em VPS e cloud e qual modelo faz mais sentido para sua aplicação. Quando uma aplicação cresce, aumentar apenas CPU ou memória nem sempre resolve problemas de performance. Em muitos casos, o desafio está em escolher...
A inteligência artificial está mudando a forma como ambientes digitais são criados, configurados e administrados. Mais do que acelerar tarefas, ela automatiza processos e gera mais produtividade para os times. Criar sites pode ser uma operação lucrativa — até o momento em que o tempo gasto entre briefing, produção e publicação começa a comprometer margem,...

Mensagens para você