Como desenvolvo temas para WordPress - Fabio Lobo
Home › Blog › WordPress › Como desenvolvo temas para WordPress
Por Fabio Lobo, atualizado em 01/02/2021.
É comum muita gente não fazer a menor ideia de como é meu trabalho. Essa profissão é muito nova, e esse é um mercado que está em constante evolução – são muitas mudanças pra acompanhar.
Outra coisa a se levar em conta na área de criação e desenvolvimento de sites é que há muitas formas diferentes de se fazer o mesmo trabalho. Se você for pedir um orçamento para cinco desenvolvedores diferentes, não estranhe se os cinco tiverem uma metodologia completamente diferente.
Pensando nisso, nada mais justo que ter um post explicando, de maneira resumida, como é meu trabalho de criação e desenvolvimento de sites em WordPress.
Tentarei ser o menos técnico possível, passando exemplos reais para ilustrar cada etapa do trabalho. Vamos lá?!
Da criação ao código: tudo do zero
Criação de design e identidade visual
Front-end e back-end: Framework e boilerplate próprios
Painel de personalização e configuração
Scripts e CSS adicional
Destaques, widgets e Gutenberg
Plugins: usar ou não usar?
Funções nativas para cada projeto
Plugins complementares
Plugins que desenvolvi
Quer um tema de WordPress?
A não ser que o cliente queira utilizar um template pronto para WordPress, tudo que é solicitado para um projeto é feito do zero.
Não tenho uma estrutura ou modelo/template que é replicado em todos os projetos. Todo trabalho é feito, do início ao fim, de maneira exclusiva. Com isso, evito projetos engessados, genéricos.
Muita gente já me questionou sobre o tamanho do meu formulário de pedido de orçamento. E olha que já foi bem maior.
A explicação é bem simples: nenhum projeto é igual ao outro (e se for, normalmente o termo correto é "plágio"). Toda informação, cada detalhe, uma explicaçãozinha a mais faz toda a diferença tanto no preço quanto no planejamento do conceito em si.
Conforme comentei acima, sempre trabalho com criação de designs exclusivos. Portanto, saber o que o cliente precisa é imprescindível para entregar a solução certa.
Para a Natália Mósca realizei um dos projetos mais completos, com logo, site, e-books e autoresponders
Eis alguns dos trabalhos de web design que realizo:
Logo e identidade visual (marca, estilos, cores, tipografia etc)
Criação de layout (rascunho, wireframe e layout final, tudo com padronização de grids e estudos de acessibilidade e UX)
Materiais digitais (normalmente ebooks, banners e peças para redes sociais)
Se quiser saber mais sobre essa parte de identidade visual, você pode conferir meu texto sobre criação de logo e alguns sobre trabalhos que realizei.
Certamente você já ouviu falar de soluções como o Bootstrap por aí. E não duvido que você tenha visto muitos elogios à respeito, ou até mesmo lido que é algo vantajoso.
Vou me limitar a dizer que prefiro oferecer algo personalizado na medida para meus clientes. Falar mais do que isso poderia, digamos, ofender algumas pessoas da área.
Frameworks desse tipo são úteis para alguns tipos de projetos, é claro, mas não trabalho com eles por dois motivos: primeiro que normalmente é uma bala de canhão pra acertar uma formiga; segundo que tenho minha própria estrutura de código já planejada, otimizada e documentada para WordPress.
Até mesmo jQuery eu tento evitar ao máximo. Quanto mais leveza e objetividade, melhor.
Enfim, para esclarecer, essas opções são apenas facilitadores para designers e desenvolvedores, já que são bibliotecas com diversos códigos prontos para serem utilizados. Usar Bootstrap, jQuery e afins não trará benefício algum (como SEO) para seu site, e muitas vezes pode ser o contrário: prejudicial.
O que já vi de site com mais de 200kb de CSS porque o desenvolvedor não teve o cuidado de filtrar só o que seria necessário (o que resultaria em 10% desse total)… bom, essa é uma das minhas preocupações, e por isso tenho minhas próprias bibliotecas.
O que faz parte do meu trabalho de desenvolvimento:
HTML5 e CSS com metodologia BEM (Block Element Modifier)
SEO onpage (código em si, permalinks, otimização de imagens etc)
Soluções e plugins com a API do WordPress (mais segurança e estabilidade)
Otimização em geral (minificação do código, cache, economia de recursos etc)
Gulp e/ou webpack
Não utilizo de forma alguma page builders como WPBakery / Visual Composer e afins. Além de serem extremamente pesados, a cada atualização é um frio de barriga diferente: o que vai quebrar dessa vez?
Para todos os tipos de personalizações e configurações eu utilizo o que o WordPress tem a oferecer em sua API: o painel Personalizar (Customizer) e widgets.
Então, se o cliente precisa trocar elementos de lugar, alterar um título, cores ou até mesmo o logo, ele poderá fazer tudo facilmente pelo WordPress – com opção de visualizar as alterações em tempo real.
Um exemplo do Customizer, painel de personalização do WordPress.
Um exemplo prático disso é o tema que eu criei para projetos próprios, o Kju Theme. Você pode vê-lo em ação nos blogs Amo Vira Lata e FicaOn, que têm suas particularidades. Vou utilizá-lo como exemplo nos tópicos abaixo!
Desenvolvi alguns temas para agências de conteúdo. Em casos assim, um tema é utilizado em mais de um blog ou site. Então, é preciso alterar a cor e o logo em cada caso.
Normalmente, o que é personalizável em relação à identidade visual é:
Favicon (ícone do navegador)
Cores (links, detalhes de layout, fundos, texto)
No caso do Kju Theme, era preciso definir uma versão simplificada do logo para telas menores (nesse caso, apenas o ícone). Como os blogs também têm AMP, o logo menor também é utilizado nessa versão.
Alguns exemplos do painel de customização.
Quanto às cores, costumo criar padrões simples para não dificultar o entendimento, reduzir etapas e manter o design mais harmonioso. Então, opto por agrupar ao máximo as opções de cores.
Minha ideia é sempre desenvolver algo com opções o bastante para que nunca seja preciso sequer olhar o código do tema – muito menos alterá-lo.
Então, sempre disponibilizo campos para inserção de códigos no site:
Javascript e HTML no <head>
Javascript e HTML depois do <body>
Javascript e HTML antes do </body>
Assim é possível adicionar facilmente códigos como o do Google Analytics, meta tags e por aí vai.
Já para códigos de banners, tenho uma solução especial, cheia de opções.
Trabalho bastante com conteúdo e SEO, então opções para anúncios não podem faltar.
Depois de vários estudos e testes, criei um painel mais avançado para scripts de publicidade. Eis as possibilidades:
Javascript e HTML no <head>, depois do <body> e antes do </body>
No topo e no rodapé
Widgets (lateral e destaques, por exemplo)
Entre a lista de posts (home, categorias etc)
No início e no final do conteúdo
Dentro do conteúdo (após um número determinado de parágrafos – fixo ou que repete a cada número de parágrafos definido)
Nos comentários (após um número determinado de comentários)
Opção de exibir apenas em telas grandes ou pequenas
Opção de forçar exibição mesmo se o post em questão tiver anúncios desativados
Há também opções e áreas separadas para AMP, já que tanto estrutura como códigos são diferentes
Algumas das opções para inserção de banners no WordPress.
Além disso, também há um shortcode para definir se algum banner deve ser exibido apenas em algum tipo de página, como na home, em posts, em categorias etc. Assim é possível adicionar um banner no topo do site mas que só apareça em posts – e não na home e em outras páginas, por exemplo.
Outra opção de shortcode é a de definir as datas de início e fim de exibição de determinado banner. Assim, se você precisa exibir um banner durante dois meses, por exemplo, não vai precisar se preocupar em fazer a troca nas datas exatas.
Quanto à opção de desativar anúncios em determinados posts, comentarei sobre ela na parte de opções de conteúdo. Essa função foi criada tendo em vista que alguns sistemas de publicidade não podem ser exibidos em alguns tipos de conteúdo (como AdSense) – já outros não têm restrição (como Taboola).
A home de alguns projetos necessitam de uma estrutura mais dinâmica e com possibilidade de atualização constante.
Por exemplo, em um projeto com estrutura "magazine" (como um portal de notícias), às vezes é preciso trocar alguns elementos de lugar – como dar mais destaque a alguma categoria ou tag durante a cobertura de um evento.
A solução mais prática para deixar a página inicial de um site totalmente dinâmica é através de widgets. Assim, pelo painel de personalização, é possível arrastar e configurar cada bloco e conferir em tempo real as modificações.
É possível arrastar e configurar as opções desejadas e visualizar o resultado em tempo real.
Normalmente as opções são essas:
Destaques de posts e páginas na home (de maneira estática ou slideshow)
Áreas para posts recentes de categorias ou tags, com estrutura e ordenação diferentes (com possibilidade de inserir banners entre as áreas)
Áreas com conteúdo personalizável (chamadas, captura de e-mail, depoimentos etc)
Blocos e botões para Gutenberg
O último item da lista merece destaque: enquanto escrevo este post, o Gutenberg está disponível apenas para edição de conteúdo. Porém, ele está sendo trabalhado para ser utilizado também na parte de montagem do site – exatamente como um site builder.
Então, em breve deixarei de lado as widgets para criar blocos de Gutenberg para a home.
Por fim, sempre me preocupo em deixar o projeto o mais customizável possível. Minha intenção é que o cliente possa, de forma simples e rápida, ter controle sobre seu próprio site sem a necessidade de me pedir alterações ou suporte constante.
E isso vai de alterar o título da área de posts relacionados a mudar a estrutura do site. Alguns exemplos:
Edição de texto e títulos de áreas do site
Alteração da ordem e quantidade de elementos do site (como posts relacionados)
Opções de SEO, como dados estruturados (schema) e configurações de AMP
Alteração da estrutura do topo (como logo acima ou ao lado do menu)
Remoção da barra lateral (sidebar) ou rodapé em determinadas resoluções (ou em todas elas)
…e o que mais for preciso
O conteúdo em si também merece uma atenção especial. Em alguns casos, como em blogs de conteúdo voltados para monetização, o conteúdo merece praticamente 100% da atenção.
Uma das coisas que considero mais básica e que dificilmente você encontra em templates prontos é a padronização dos estilos do seu site com o editor visual e o Gutenberg. Ou seja, normalmente o que você vê no painel de edição de conteúdo é diferente de como ficará em seu site quando publicado.
Há muita diferença entre um projeto e outro em relação ao conteúdo. Normalmente as opções são essas:
Exibir ou ocultar anúncios de determinado post ou página
Exibir ou ocultar imagem destacada no início do conteúdo (em alguns casos ela serve como imagem de fundo no cabeçalho do texto)
Estruturas diferentes para páginas (com ou sem barra lateral, topo simplificado, landing page…)
Marcar post ou página como destaque na home
Editor visual e/ou Gutenberg com estilos de acordo com o site
Opções de custom post types e taxonomias
Opções de shortcodes, além de botões e blocos para Gutenberg
Exemplos de opções adicionais para posts no WordPress: "meta boxes".
Criar blocos e botões de conteúdo para Gutenberg já faz parte do meu dia-a-dia. No Kju Theme mesmo há opção de molduras e até mesmo algo mais interativo como checklists.
A resposta é simples: desde que seja realmente necessário, não há limites para utilização de plugins no WordPress.
Um dos maiores preconceitos de desenvolvedores é justamente com a "plugindependência" que um projeto em WordPress pode acabar tendo. Bom, com um pouquinho de conhecimento na área é possível entender que boa parte dos plugins são facilitadores para ambas as partes: cliente e desenvolvedor.
Se há um plugin pronto para o que você precisa, ótimo! Não tem por que reinventar a roda. O problema é sair instalando plugins sem critério algum, e aí seu projeto começará a ter problemas de desempenho e segurança – no mínimo.
Também não é obrigatório utilizar plugins no WordPress. Tudo pode ser desenvolvido "do zero", mas realmente não vejo motivo para tanto. É como eu disse acima: Não tem por que reinventar a roda.
O ideal é equilibrar: utilizar plugins consolidados para necessidades mais complexas (como cache, formulários de contato, meios de pagamento etc) e desenvolver diretamente no tema o que for mais específico ou simples (paginação, personalizações, custom posts etc).
Uma das vantagens de evitar plugins para coisas simples ou específicas de um projeto é não ser surpreendido por atualizações (ou falta de). Afinal, quando algo é nativo do tema (ou seja, está no código do site), não é dependente de plugins.
Por exemplo, alguns clientes utilizavam um plugin de AMP (AMP for WP – Accelerated Mobile Pages) com diversas opções de personalização, áreas para anúncios e tudo mais. Só que a cada atualização alguma coisa mudava completamente ou quebrava, e alguns detalhes começaram a prejudicar o SEO dos projetos.
Como solução, fiz uma dobradinha: instalei o plugin de AMP da Automattic pra gerar a estrutura AMP e desenvolvi o tema com todas as personalizações necessárias no painel de Personalização do WordPress (como cores, banners, menus etc). Resultado: nenhuma surpresa, código muito mais leve e customização mais fácil.
As opções de personalizar AMP funcionam exatamente como as da versão original do site, também com visualização em tempo real.
Muita coisa também pode ser feita sem plugins. Abaixo, alguns itens que desenvolvo exclusivamente para cada caso:
Gutenberg (botões e blocos)
Dados estruturados (schema)
Personalizações do site
Tema para AMP
Área para anúncios
Sempre busco por plugins com alto número de instalações e avaliações, além de atualizações frequentes (o que garante que o plugin ainda está ativo na comunidade).
AMP (Automattic)
Formulário de contato: Contact Form 7, Flamingo, WP Mail SMTP
Cache: Autoptimize, Redis Object Cache, Nginx Helper, WP Super Cache
Otimização de imagens: Imsanity, EWWW Image Optimizer
Segurança: iThemes Security, WPS Hide Login
SEO: Yoast, Redirection
Também criei alguns plugins: alguns para casos mais específicos, como um sistema gerador de nomes para cães, e outros que eu precisaria utilizar na maioria dos projetos, como uma página em manutenção.
Os plugins que são públicos estão no repositório do WordPress:
BRB – página de construção / manutenção / em breve
Timelinda – timeline simples para conteúdo
Outras opções foram desenvolvidas exclusivamente para clientes, então não estão disponíveis para download. Alguns exemplos:
Painel de personalização e banners para AMP para sites de conteúdo
Área para tabela de convênios (nome, endereço, contatos) com busca e paginação em AJAX
Área para publicação de landing pages com busca, categorização e call-to-action (pode ser visualizada aqui)
Área com gerador de nomes para cães com filtro para gênero e categoria (pode ser visualizado aqui)
Todas as opções são editáveis através do painel do WordPress.
Pra oferecer a solução completa, também trabalho com hospedagem de sites com a WOWF.
Por lá o trabalho é diferente em relação ao prestado por outras hospedagens. Eu ofereço um serviço mais voltado à consultoria, não só a hospedagem em si. Por isso, não há um cadastro direto para que o interessado já abra uma conta e hospede o site na hora – eu sempre faço uma pré-análise.
Além disso, trabalho com servidores mais "crus", sem painel de controle ou contas de FTP – isso possibilita que o servidor tenha desempenho bem superior aos que têm painel como cPanel, o que já é um baita diferencial.
Sendo assim, meu foco é com o cliente final, já que desenvolvedores, por exemplo, precisariam ter esse tipo de acesso. E como o WordPress já oferece um painel bem completo, essas opções realmente não fazem falta para quem só precisa ter controle de seu próprio site.
Se quiser saber mais sobre o projeto, leia esse post aqui!
Ufa! Se você leu até aqui, deve ter percebido que eu me preocupo com cada detalhe. E isso não é nem perfeccionismo – é o mínimo que um profissional pode fazer para entregar um projeto completo e que dê resultado.
E aí, está precisando de um serviço na área? Vamos conversar!
Cadastre-se grátis e receba posts, dicas e conteúdos por e-mail:
Seu E-mail Estou de acordo com a política de privacidade e aceito receber mensagens por e-mail desta empresa.
Acompanhe também pelo Google News!
Quanto custa um site completo e profissional?
Veja comparativo de preços de criação de site com hospedagem, domínio, WordPress e mais recursos. Saiba quanto custa um site após briefing e orçamento.