O guia essencial para campos personalizados do WordPress

Se há um recurso sobre o WordPress que o diferencia de outros sistemas de gerenciamento de conteúdo (CMS) por aí, é a personalização. Os campos personalizados no WordPress são uma parte interna do CMS que permite expandir não apenas os metadados e as informações que você exibe, mas também alterar completamente a funcionalidade e a utilidade de uma postagem ou página. Queremos ajudá-lo a entender os fundamentos. Vamos discutir o que é um campo personalizado, por que eles são úteis e fornecer alguns exemplos do mundo real de como eles são usados.

Inscreva-se no nosso canal no Youtube

O que são campos personalizados do WordPress?

Resumindo, os campos personalizados do WordPress oferecem uma maneira de adicionar elementos específicos às páginas. Pode ser um tipo específico de imagem, assinatura ou biografia do autor, talvez uma classificação ou mesmo algo como, como diz a entrada do Codex nos campos personalizados, humor, leitura no momento, ouvindo ou caixas de previsão do tempo.

Esses campos constituem o que é chamado de metadados para sua postagem (basicamente qualquer coisa que não esteja incluída no conteúdo principal de seu artigo). Por padrão, o WordPress tem metacaixas para informações genéricas, como tags, categorias, permalink, imagens em destaque, etc. Se você quiser adicionar mais, você usará campos personalizados.

Você pode até adicionar informações que cada um dos redatores de sua equipe precisa preencher para publicar uma postagem.

Você pode criar um campo obrigatório que não permitirá que a postagem seja publicada até que certos critérios sejam marcados. Portanto, lembre-se de que esses campos personalizados não são apenas para informações no front-end. Eles também podem ser úteis para o back-end.

Adicionando campos personalizados a uma postagem do WordPress

Por padrão, os campos personalizados do WordPress estão desabilitados no editor de página e postagem. Se você estiver usando o Editor de bloco, é fácil habilitá-los. Basta clicar no ícone de engrenagem no canto superior direito da tela. Selecione Opções .

Em seguida, opte por ativar os Campos personalizados perto da parte inferior da tela que aparece. Você terá que recarregar a página, então certifique-se de salvar seu trabalho primeiro.

Depois de habilitado e recarregado, suas metacaixas de campos personalizados aparecerão na parte inferior da tela. Abaixo da parte do editor de conteúdo da tela.

Embora os campos personalizados do WordPress sejam incrivelmente poderosos, os padrões são limitados a um valor de texto. É preciso PHP e desenvolvimento para torná-los mais robustos. Felizmente, existem plug-ins que funcionam para você e vamos orientar você sobre como colocá-los em funcionamento. Se tudo que você precisa é um campo de texto em algumas postagens e não quer um plugin, fique à vontade para pular abaixo sobre como adicionar os campos personalizados do WordPress ao front end do seu tema. Isso se aplica aos campos padrão, bem como aos gerados por plug-ins como Campos personalizados avançados.

Usando o plugin de campos personalizados avançados

Como a maioria das coisas no WordPress, você tem duas opções de implementação. Você pode editar manualmente os arquivos PHP para adicionar a funcionalidade de campo personalizado ou pode usar um plug-in. Nesse caso, é altamente recomendável seguir o caminho do plug-in. Se, no entanto, você sentir a necessidade de editar o PHP e entrar no código, poderá fazê-lo em Aparência - Editor de temas . Aqui está a página WP Codex em campos personalizados para você começar. Ele se vincula a várias tags de modelo e ganchos de que você precisará para fazê-lo funcionar.

Mas, novamente, sugerimos usar o plugin Advanced Custom Fields em vez de ajustar o código. O plugin permite tudo o que você deseja de campos personalizados (e mais alguns), então não sentimos a necessidade de reinventar a roda. Quando funciona, funciona. Use-o.

Depois que o ACF for instalado e ativado, você notará uma entrada Custom Fields na barra lateral esquerda do painel de administração do WordPress. Ele vem com três opções: Grupos de campos , Adicionar novo e Ferramentas .

Os grupos de campo podem ser considerados conjuntos. Tudo o que você deseja que apareça na mesma caixa, você incluirá no mesmo grupo. Adicionar novo permitirá que você adicione um novo grupo e um novo campo personalizado. Enquanto Tools é onde você importa e exporta diferentes conjuntos existentes de campos personalizados de outros sites WordPress.

Os fundamentos do ACF

Criar os próprios campos é bastante simples. Vá para a janela Adicionar novo .

Não importa o que aconteça, os campos personalizados ACF serão incluídos em um Grupo de campos . Isso significa apenas os campos específicos contidos na mesma caixa. Assim, você pode nomeá-lo como quiser que apareça no editor de postagem. Cada vez que você quiser adicionar uma entrada individual ao grupo, clique no botão Adicionar campo . Faça isso toda vez que quiser um campo diferente na mesma caixa-meta. As regras de localização determinam onde e quando a caixa aparecerá. Neste exemplo, como o tipo de postagem é igual a postagem , isso significa que ele aparecerá apenas em postagens. Não páginas ou outros tipos de postagem personalizados.

Em seguida, você pode escolher as configurações para o próprio campo. O que vai fazer e a função que vai servir no site.

Você basicamente escolhe o seu posicionamento (abaixo do conteúdo da postagem no editor, barra lateral, acima do conteúdo, etc.), bem como o posicionamento do texto e dos próprios campos. A área Hide on Screen é a mais interessante. Dependendo de como você precisa usar seus campos personalizados, você pode excluir qualquer e todas as outras metacaixas de seus rascunhos. Selecione as condições para a aparência deste campo personalizado e, em seguida, determine quais outras caixas aparecem com ele, se houver. Muitas vezes você nem vai se preocupar com isso.

Criação de campos personalizados com ACF

Depois de nomear seu Grupo de campo, você pode clicar no botão Adicionar campo . Você pode ter qualquer número de campos no mesmo grupo, mas certifique-se de mantê-los todos relacionados entre si. Você pode criar quase qualquer tipo de campo de entrada que imaginar com o ACF.

Para este exemplo, vamos fingir que estamos executando um site WordPress de cultura pop que olha para filmes e deseja que os campos personalizados mostrem uma classificação, para listar se o filme está sendo transmitido e, em caso afirmativo, onde encontrá-lo.

Eles estariam todos no mesmo Grupo de campo, mas em campos diferentes. Como você pode ver acima, o link Is It Streaming? campo é configurado para ser um botão de opção com um seletor sim / não que é necessário antes da publicação. Além disso, queremos que um campo condicional apareça se o campo estiver marcado como Sim. Isso é feito simplesmente pressionando Adicionar campo novamente.

Com a alternância Lógica condicional ativada, você só precisa selecionar a qual campo está sujeito e qual deve ser o valor. Nesse caso, é streaming? precisa ser igual a Sim.

No editor de postagem, a entrada dos campos personalizados terá a seguinte aparência:

E quando você publicar sua postagem, os metadados inseridos farão parte da postagem. Mas ainda há um problema. Você não pode ver isso, nem seus visitantes.

Como exibir campos personalizados no front-end do WordPress

Mesmo que você tenha feito tudo isso perfeitamente, os dados inseridos não serão exibidos no front-end do seu site sem alguns ajustes. Afinal, onde isso iria aparecer? Muitas vezes, seu tema terá uma maneira de exibir metadados e campos personalizados, mas eles diferem tema por tema. Verifique suas opções de tema para a documentação.

Outra maneira de exibir campos personalizados no front end são os códigos de acesso ACF integrados. Embora não haja nenhum customizador ou construtor integrado no ACF, você pode usar o seguinte código de acesso apenas para campos de texto .

Mas, como está limitado a campos de texto, pode ter uso limitado para muitas pessoas. Você também pode entrar no PHP e usar o código ACF, como em seus exemplos de documentação. Você também pode atualizar para o ACF Pro e obter acesso ao bloco de Gutenberg embutido que exibe o campo personalizado exatamente como você o estiliza no construtor.

Mas, como dissemos, muitos temas vêm embalados com integração de campos personalizados atualmente, e mostraremos como isso é tratado no Divi.

Como exibir campos personalizados no front-end usando Divi

Primeiro, lembre-se de que muitos módulos Divi podem renderizar códigos de acesso. Muitas vezes, seus campos personalizados de texto criados no ACF podem simplesmente ser inseridos usando seus códigos de acesso, como mencionamos acima.

Para o nosso exemplo acima, que usa lógica condicional e botões de opção, usaremos o recurso de conteúdo dinâmico do Divi. É super fácil de usar também. Mostraremos isso por meio do Divi Theme Builder, mas você pode usá-lo literalmente em qualquer módulo que ofereça suporte no Divi builder regular. Clique em Preto + e selecione o módulo desejado. Para isso, é o Módulo de Texto .

Em seguida, encontre a parte do módulo em que deseja inserir o campo personalizado. Procure o ícone Conteúdo Dinâmico à direita de qualquer lugar que ofereça suporte ao recurso.

Clique para selecionar no menu suspenso todos os tipos de conteúdo dinâmico disponíveis, incluindo todos os campos personalizados. Eles podem estar no fundo do poço.

Divi oferece a opção de adicionar rótulos de antes / depois ao conteúdo do campo. Queremos que o nosso leia naturalmente como parte da postagem, então este filme está disponível para transmissão online? será colocado antes do valor quando o campo for renderizado. Além disso, adicionamos um espaço à direita no final para separar nosso rótulo do valor ACF.

Como você só pode ter um conteúdo dinâmico por área do módulo, repita esse processo para os outros campos. Observe, entretanto, que embora o campo personalizado seja condicional, o módulo Divi não é . Portanto, se você usar um rótulo antes / depois em um campo condicional, ainda verá esse rótulo. Se você deixá-los em branco, nenhum valor será renderizado.

Além disso, a opção Habilitar HTML bruto permitirá que qualquer código que você coloque no campo ACF seja renderizado, como links para as várias plataformas, etc.

Empacotando

Como você pode ver, apesar de parecer muito complicado, os campos personalizados do WordPress são um recurso que não requer um desenvolvedor para acertar. Basta instalar o ACF e começar a personalizar como você e sua equipe inserem as informações. Seja um site de avaliações, mercado de comércio eletrônico ou até mesmo um blog amigável onde você deseja compartilhar o que está acontecendo em sua vida, ser capaz de ajustar e aperfeiçoar os metadados de seus posts e páginas pode elevar seu site a novos níveis.

Para que você usa os campos personalizados do WordPress?

Imagem apresentada por SurfsUp / shutterstock.com