Todos nós já vimos isso acontecer muitas vezes. Do que estou falando? O editor WordPress, repleto de HTML ou códigos de acesso para construir um layout de página personalizado. Isso pode ser ótimo se você for um desenvolvedor e o único trabalhando em uma página, mas e se a página que você construiu for para um cliente que deseja fazer alterações quando terminar?

Desastre! Basta pressionar uma tecla incorreta para arruinar completamente todo o seu trabalho duro e receber um e-mail urgente do seu cliente notificando que o céu caiu.

Felizmente, existem várias maneiras de criar layouts personalizados no WordPress que tornam a experiência de edição mais fácil para seus clientes e, ao mesmo tempo, oferecem a flexibilidade que um desenvolvedor exige.

Campos personalizados

Ao criar uma página no WordPress você deve ter notado a caixa de campos personalizados abaixo do editor. Essa caixa permite inserir um nome de campo e um valor associado a ele. O que você pode fazer com isso e por que é poderoso?

Digamos que você codificou um modelo de página personalizado para a página inicial do seu cliente e deseja tornar parte do texto editável. A maneira mais fácil de fazer isso seria editar o texto diretamente no arquivo de modelo, mas isso não é muito fácil de usar. Em vez disso, o uso de campos personalizados pode permitir que você exponha partes de um modelo de página personalizado aos seus clientes para edição, sem se preocupar com a possibilidade de eles quebrarem o layout. Veja como…

Adicione um campo personalizado

A primeira coisa que você precisa fazer é adicionar um novo campo personalizado. Na caixa de campos personalizados, selecione um nome existente ou insira um novo e insira o valor desejado. Neste exemplo, tornaremos editável o cabeçalho do nosso modelo de página personalizado. Esta é a aparência do nosso novo campo personalizado.

Edite o modelo da sua página

Agora que temos um campo personalizado, vamos adicioná-lo ao nosso modelo de página personalizado usando o código abaixo.

 <div class="my-heading"> <h1><?php echo get_post_meta( get_the_ID(), 'main-heading', true ); ?></h1> </div>

Nesse trecho, estamos usando a função get_post_meta para extrair nosso valor de campo personalizado do banco de dados WordPress e repeti-lo em uma tag h1. Nosso campo personalizado é denominado “cabeçalho principal”, portanto, troque-o na chamada de função se o seu for diferente.

Esta técnica usando campos personalizados pode ser repetida quantas vezes você desejar para permitir a edição em diferentes partes do seu layout.

Plug-in de campos personalizados avançados

Os campos personalizados funcionam bem, mas têm suas limitações. Por um lado, ao usar campos personalizados, você perde a capacidade de usar funções básicas do editor, como negrito e itálico. Eles também não são muito fáceis de usar se você estiver tentando tornar editável qualquer coisa além de texto, como uma imagem. É aí que entra um dos meus plug-ins favoritos, o plug-in Advanced Custom Fields (ACF).

O ACF permite que você faça coisas realmente incríveis, como substituir o editor padrão por suas próprias configurações de página personalizadas. Isso é o que estamos fazendo atualmente para muitas das páginas personalizadas do novo site WordPress do Connor Group. A página da equipe, por exemplo, mostra uma grade de miniaturas clicáveis ​​de funcionários que abrem para uma biografia de funcionário. Construímos uma interface simples usando ACF que permitirá à equipe de marketing do Connor Group adicionar ou remover funcionários facilmente à medida que eles entram e saem.

Adicionar esse tipo de funcionalidade é fácil de realizar criando grupos de campos usando a interface de arrastar e soltar do ACF. Cada grupo pode ter qualquer número de tipos de campos diferentes e até mesmo incluir grupos aninhados de campos repetidores que podem ser adicionados ou removidos como as configurações da página da equipe do Grupo Connor.

Grupos de campos podem ser adicionados a qualquer tela de pós-edição com base em um conjunto de regras definidas por você. Por exemplo, as configurações na captura de tela acima só são aplicadas à tela de edição da postagem quando a postagem atual que está sendo editada é a página Equipe.

Usando campos personalizados avançados em seu modelo de página

Usar valores ACF em seus modelos de página personalizados deve parecer familiar, pois é semelhante a usar os campos personalizados padrão do WordPress.

 <div class="meu-título">
    <h1><?php the_field( 'título' ); ?></h1>
</div>

Como você pode ver no exemplo acima, o código que usamos é muito semelhante ao código que usamos para os campos personalizados padrão. A única diferença é que estamos usando a função ACF the_field em vez da função get_post_meta do WordPress. Passar para essa função o nome do seu campo produzirá qualquer conteúdo que tenha sido inserido ou o URL de uma imagem se você estiver usando um campo de imagem.

Advanced Custom Fields é um plugin verdadeiramente poderoso que abre um mundo de possibilidades para desenvolvedores. Se ainda não o fez, sugiro que experimente. Na minha experiência, tem sido muito divertido implementar e a resposta dos nossos clientes tem sido extremamente positiva.

Construtores de páginas front-end

Os construtores de páginas front-end do WordPress são uma opção relativamente nova e intrigante. Embora você tenha que sacrificar alguma flexibilidade como desenvolvedor, há muitos cenários em que usar um pode economizar muito tempo e tornar a edição de uma página muito mais intuitiva para seus clientes.

Desenvolvimento Rápido

Usar um construtor de páginas permite que você faça o layout das páginas de forma visual e rápida. Desde a criação do nosso próprio construtor de páginas, houve muitos cenários em que nem sequer abrimos o Photoshop. Em vez disso, fazemos nossos modelos ao vivo no navegador, revisamos-os com o cliente e fazemos as alterações necessárias. Esse fluxo de trabalho pode não funcionar para todas as páginas que você cria, então cabe a você decidir qual solução é melhor no contexto do que seus clientes estão tentando alcançar.

Edição intuitiva

O objetivo de tudo isso é facilitar a edição para seus clientes e é exatamente isso que um construtor de páginas front-end pode fazer. Em vez de trabalhar no administrador do WordPress, seus clientes poderão apontar e clicar no conteúdo de suas páginas para editá-lo em uma interface front-end intuitiva.

Conclusão

Quando se trata de construir layouts personalizados no WordPress, às vezes tudo que você precisa é de uma solução simples como os campos personalizados integrados. Outras vezes, você pode precisar de algo mais robusto, como o plugin Advanced Custom Fields, ou algo mais intuitivo que permita um desenvolvimento rápido, como um construtor de páginas front-end. No final das contas, cada uma dessas soluções ajuda a conseguir o mesmo, tornar a edição de layouts personalizados no WordPress mais fácil para seus clientes.

Estas são três das minhas soluções favoritas que tenho em minha caixa de ferramentas de desenvolvimento WordPress para construir sites de clientes. Que soluções você descobriu que funcionam bem para você e seus clientes?