Como desenvolvo temas para WordPress

Há diversas formas de se trabalhar com WordPress. Conheça minha metodologia de trabalho de criação e desenvolvimento com essa plataforma.

É 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

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.

Criação de design e identidade visual

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.

logo natalia mosca
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.

Front-end e back-end: Framework e boilerplate próprios

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)
  • Acessibilidade e UX
  • Otimização em geral (minificação do código, cache, economia de recursos etc)
  • Gulp e/ou webpack

Painel de personalização e configuração

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.

painel de personalização do WordPress
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!

Identidade visual

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 é:

  • Logo
  • 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.

edição de identidade visual no customizer
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.

Scripts e CSS adicional

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:

  • CSS adicional
  • 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.

Banners de publicidade

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
inserção de banners no painel do WordPress
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).

Destaques, widgets e Gutenberg

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.

widgets de blocos de posts no customizer
É 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.

Configurações adicionais

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

Opções de conteúdo

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
metaboxes do wordpress
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.

Plugins: usar ou não usar?

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).

Funções nativas para cada projeto

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.

opções de customização para AMP no customizer
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)
  • Shortcodes
  • Widgets
  • Paginação
  • Dados estruturados (schema)
  • Personalizações do site
  • Tema para AMP
  • Custom posts
  • Destaques na home
  • Área para anúncios
  • Botões de compartilhamento

Plugins complementares

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).

Os mais comuns são:

  • Anti-spam: Akismet
  • 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

Plugins que desenvolvi

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.

Hospedagem própria

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!

Quer um tema de WordPress?

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!

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Do que você está precisando?

Um site novo? Suporte para WordPress? Criação de logo? Outra coisa? Fale comigo!

Quero um orçamento

Leia também...

...alguns textos que têm a ver com o assunto:

Blog de Vídeos sobre Carros – Auto Vídeos

Saiba mais sobre o Auto Vídeos, blog de vídeos sobre carros. Criação e desenvolvimento de blog pela ANDALE!

Criação de site, logo, autoresponder e ebook para Cirurgiã-Dentista

A Cirurgiã-Dentista Dra. Natalia Mosca me contratou para a criação de logo, site, autoresponder e ebook para seu consultório. Confira!

Site sobre gestão hospitalar – GeHosp

Saiba mais sobre o GeHosp – Gestão Hospitalar! Fiz a criação e desenvolvimento de site responsivo, além de criação do logo.

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento