Pensamentos sobre como construir um site WordPress do zero (sem código)

Na última década, trabalhei com o WordPress (praticamente) diariamente. É a minha solução para criar sites para clientes de todos os tamanhos.

E, à medida que ganhei mais experiência com o CMS altamente popular, defendi a criação de temas do WordPress a partir do zero. Hoje em dia, eu uso um tema inicial bastante básico baseado em Underscores. Está configurado do jeito que eu gosto e me ajuda a iniciar novos projetos rapidamente.

Mas, assim como tudo no ecossistema WordPress, há muitas opções de como fazemos as coisas. A abordagem que eu prefiro não é para todos os desenvolvedores. Nem sempre é a solução mais realista para determinados clientes (especialmente aqueles com orçamento apertado).

Hoje, gostaria de compartilhar minhas experiências na construção de um site de uma maneira diferente: usando um plug-in do construtor de páginas do WordPress e um tema inicial “em branco” complementar. Vou preenchê-lo sobre os prós e contras do processo, juntamente com algumas dicas para tirar o máximo proveito dele. Vamos começar!

Histórico do projeto

Fui abordado por um cliente de longa data que queria um redesenho de seu site HTML mais antigo. Eles queriam os benefícios que acompanham o uso do WordPress, mas não tinham orçamento para uma construção personalizada completa.

A ideia de comprar um tema WordPress comercial específico do setor foi mencionada. Agora, não há nada inerentemente errado em comprar um tema e colocar algum conteúdo nele. Em muitos casos, funcionará bem.

Mas muitas vezes parece que há custos adicionais associados à reformulação da aparência e/ou funcionalidade para corresponder às especificações de um cliente (ou, pior ainda, às minhas expectativas). Mesmo assim, há muito o que você pode fazer sem destruir completamente o tema, o orçamento do cliente ou ambos.

Com isso em mente, comecei a procurar uma alternativa. Recentemente, comecei a brincar com o Beaver Builder, um popular plugin de construtor de páginas para WordPress (divulgação completa: eles não estão me pagando para dizer isso, apenas aconteceu de ser a ferramenta que usei. Existem outros produtos semelhantes no mercado vale a pena considerar também.)

Eles incluem um tema de estrutura (e um tema filho relacionado) com alguns de seus pacotes comerciais, o que permite que você crie essencialmente um site inteiro – cabeçalho, rodapé e conteúdo – usando uma combinação do WordPress Customizer e do construtor de páginas.

Como funcionou? Leia mais para descobrir…

O ponto de partida

As primeiras etapas do processo são bastante familiares para quem criou um site com o WordPress:

• Crie uma nova instalação do WordPress;
• Instale e ative o tema;
• Instale e ative o plugin do construtor de páginas;

A partir daí, você obtém uma lousa essencialmente em branco. Na verdade, não é muito diferente do que vejo ao ativar meu próprio tema inicial baseado em sublinhados.

A vantagem disso é que o tema não tem muitas noções preconcebidas sobre o que você quer construir. Isso significa que um designer poderia, em teoria, criar uma maquete de design e, posteriormente, dar vida a ela. Desde que eles entendam o que o tema pode e não pode fazer, isso é.

Mas, como veremos, existem algumas opções para quem quer algo um pouco mais pronto.

Usando o Personalizador do WordPress

O WordPress Customizer é uma ferramenta integrada que permite ajustar várias configurações relacionadas ao tema e ver os resultados em tempo real. O objetivo era trazer uma interface de usuário universal para a configuração do tema, em oposição aos painéis de opções sob medida que muitos temas implementaram.

Aqui, o Beaver Builder Theme acessa o personalizador e oferece muitas opções. Entre os destaques:

Predefinições

Escolha entre uma seleção de esquemas de cores pré-fabricados. Esses estilos podem ser substituídos por outras opções do Customizer ou CSS.

Cabeçalho

Há uma variedade de configurações aqui para layout, posicionamento do logotipo e navegação. A opção para um cabeçalho “pegajoso” está incluída, o que é um toque agradável. Os layouts cobrem vários cenários comuns.

Contente

Escolha cores de fundo e layouts de página para seu blog, postagem individual, arquivo de postagem e modelos WooCommerce.

Rodapé

O rodapé do site pode ser estilizado e widgets adicionados para lidar com vários tipos de conteúdo. Por padrão, existem algumas limitações aqui. Por exemplo, eu queria colocar links de perfil de mídia social integrados na área do widget de rodapé (eles são configurados para aparecer abaixo dos widgets) – o que não é suportado. Felizmente, um trecho de código que encontrei tornou possível por meio de um shortcode do WordPress.

Código

Se você deseja injetar CSS, JavaScript ou outro código específico em seu site, pode fazê-lo aqui. Isso pode ser útil se você quiser adicionar o Google Analytics ou o código de rastreamento de pixel.

O veredito

Ao todo, o Personalizador tinha opções suficientes para me ajudar a criar a aparência básica e o layout do meu site. Não é tão robusto quanto o que estou acostumado com um tema personalizado, mas isso é de se esperar. O ponto aqui é para desenvolvimento rápido e para evitar código.

O Beaver Builder Theme fez exatamente isso, pois consegui configurar as coisas do jeito que eu queria dentro de meia hora ou mais. Quaisquer deficiências são meio que o preço que você paga com um projeto de orçamento mais baixo.

Páginas de construção

Não vou gastar muito tempo entrando em detalhes aqui – por duas razões. Primeiro, minhas necessidades para as várias páginas do site não eram muito complicadas. Em segundo lugar, o próprio construtor de páginas é meio secundário em relação ao tema. Mas ainda há alguns itens que merecem destaque.

A página inicial foi construída rapidamente – e não do zero. Meu cliente gostou de um dos modelos de página pré-construídos do Beaver Builder. Configurá-lo era apenas uma questão de importar o modelo e, em seguida, hackear para personalizar as coisas que queríamos manter e remover as coisas que não queríamos. Além disso, havia alguns módulos extras para adicionar através do construtor de páginas. Recursos como carrosséis de postagem e animação on-scroll adicionaram alguma personalidade.

As páginas secundárias eram extremamente simples. Criei um módulo de título de página que usava um fundo de foto e o salvei para uso repetido em outras páginas. A partir daí, foi apenas uma questão de adicionar o restante do conteúdo e formatá-lo bem.

O único ponto de discórdia que eu tinha era integrar Gravity Forms. Como o construtor de páginas não usa o editor de blocos do WordPress Gutenberg nem o Editor Clássico (ambos os quais o plug-in de formulário popular suporta), tive que colocar manualmente um código de acesso em um módulo do Editor de texto. Este não foi um grande problema, mas pode ser difícil para um cliente que não está familiarizado com o processo.

O veredito

A construção da página foi praticamente como o esperado. A facilidade de uso é o ponto de venda desses plugins e este se encaixa na conta. Vários módulos eram fáceis de arrastar e soltar na página, e os layouts de várias colunas eram simples de configurar. Tudo era responsivo e também podia ser personalizado especificamente com base no tamanho da tela.

O número de módulos incluídos era sólido e cobria praticamente tudo o que o projeto exigia. Se alguns recursos mais sofisticados forem necessários, há vários pacotes complementares de terceiros disponíveis que podem ajudar.

Impressões gerais

Ao todo, devo dizer que esta foi uma experiência melhor do que as que normalmente tive com temas prontos. O fato de eu poder começar de algo básico e construir de acordo com as necessidades do projeto estava mais de acordo com o meu fluxo de trabalho preferido.

Verdade seja dita, eu tive que implementar alguns bits extras de código para conseguir tudo o que eu queria. O shortcode acima mencionado para links de perfil de mídia social e um pouco de JavaScript extra me ajudaram a completar o site. Ambos foram enfileirados por meio do arquivo functions.php do tema filho, permitindo que eles evitassem ser substituídos durante qualquer atualização futura do tema.

Achei essa opção viável para projetos simples. Existem alguns cenários, como o uso de campos personalizados ou conteúdo condicional, em que ainda pode fazer mais sentido usar um tema personalizado completo. Mas esses tipos de recursos geralmente são para orçamentos maiores de qualquer maneira.

Portanto, se você é um desenvolvedor que deseja desenvolver rapidamente um novo site econômico - mas sem as armadilhas de um tema de terceiros, esse pode ser o caminho a seguir. Apenas reconheça que você terá que viver dentro dos parâmetros do que está lá. Caso contrário, será hora de iniciar esse editor de código.

* Nota: As imagens deste post são meramente ilustrativas – não refletem o projeto real descrito.