Como criar e usar campos personalizados no WordPress

Os campos personalizados do WordPress são uma ótima maneira de expandir o conteúdo típico de postagem ou página em seu site. São pedaços de metadados anexados a uma postagem ou página em seu site WordPress, o que significa que, usando esse método, você pode adicionar informações adicionais de qualquer tipo ao seu conteúdo.

Organizados em um formato de chave/valor, os campos personalizados são usados ​​para adicionar dados em várias postagens ou páginas. A chave é um nome que fornece consistência e identifica o campo específico, como “Item”. Isso é sempre o mesmo. Um valor é a informação que será exibida no campo. O valor será diferente entre as postagens, dependendo das informações inseridas.

Adicionando campos personalizados ao post

As etapas a seguir mostrarão como usar campos personalizados em suas postagens. Se você preferir usá-los em páginas, as mesmas ideias serão aplicadas, mas terão que ser implementadas em arquivos de modelo que são responsáveis ​​por construir páginas em vez de postagens.

1. Vá para a tela do editor de postagem e marque “Campos personalizados”.

2. Encontre a caixa Campos personalizados como parte de sua edição de postagem. Quando você estiver em uma página de postagem, verá uma nova seção na parte inferior com o título “Campos personalizados”.

Agora vamos dar uma olhada em um exemplo muito básico de campos personalizados do WordPress em ação. As coisas vão melhorar com este exemplo para um blog de fitness. Usaremos os campos personalizados para rastrear e listar vários tipos de atividade física nas postagens.

3. Adicione a chave, que neste caso é “Tipo de exercício”. Usaremos esta caixa para adicionar detalhes específicos à postagem. Clique em “Inserir novo” e digite a chave no campo.

4. Adicione o valor. Vamos com Zumba para este. Lembre-se de que isso só aparecerá nesta postagem específica. Em uma postagem diferente, você pode inserir um valor diferente, algo como “Elíptico” ou outro tipo de exercício.

5. Salve a postagem.

Neste momento, você não verá muito. Você ainda precisa adicionar alguma formatação para exibir as informações. Até agora, essas informações adicionais são armazenadas no banco de dados, para que possam ser chamadas para exibição. Para este tutorial, optei por exibir esses campos personalizados em postagens (em vez de páginas), então seguirei a maneira mais básica de formatar tudo.

Exibindo os campos personalizados no post

Usar modificações de modelo para adicionar os campos personalizados como dados recorrentes do site é uma maneira eficiente de fazer as coisas. Digamos que você comece exibindo os campos personalizados no início de sua postagem, mas depois decida que ficaria melhor na parte inferior. Ao usar modificações de modelo, essa alteração é fácil de fazer porque a alteração do modelo atualizará todo o site. Se você não usasse esse método e, em vez disso, salvasse as informações individualmente dentro de cada postagem, teria que editar cada postagem para fazer a alteração, tornando as alterações muito mais difíceis.

Para este exemplo, o campo personalizado será mostrado antes da postagem para que o leitor possa ver o tipo de exercício antes de ler a postagem inteira. Para exibi-lo dessa maneira, os dados serão chamados antes do loop do WordPress.

Observação: essas personalizações devem ser feitas em um tema filho, é claro, e usaremos o arquivo single.php . Como sempre, personalizações como essas são melhor testadas em um ambiente de desenvolvimento.

1. Abra o arquivo single.php e adicione este código fora do loop do WordPress:

 <?php the_meta(); ?>

Ele exibirá algo assim:

Se preferir que isso seja exibido em algum outro lugar da página, tente colocar esse snippet no loop ou após o loop. Por exemplo, colocando a função dentro da tag <main> , as informações do campo personalizado serão mostradas como parte do conteúdo principal.

 <div class="content-area"> <main class="site-main" role="main">

Essa abordagem também funcionará para mostrar outros campos personalizados que você criou.

Uma coisa a mencionar sobre este exemplo: o tema filho foi criado a partir do tema pai WordPress Twenty Fifteen, que é muito popular. Se você está experimentando onde exibir os campos personalizados, pode haver outros modelos necessários em seu tema filho além do arquivo single.php . Para mostrar as informações do post, um content.php foi adicionado ao tema filho. O snippet acima foi colocado no conteúdo da página para aparecer como parte da postagem.

2. Estilize os campos. Se você for ao inspetor, verá algumas novas classes adicionadas à página.

Aqui está a aparência do exemplo com os dois campos personalizados diferentes:

• Tipo de exercício: Zumba
• Hora do dia: Manhã

É muito simples trabalhar com uma lista. Com algum estilo, parecerá mais integrado ao estilo do site. Com apenas algumas modificações CSS simples, podemos ajustar a cor do texto e o estilo da lista.

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

Mais personalizações de campos personalizados

O estilo no exemplo anterior funcionará bem, mas há mais coisas que podemos fazer. Os exemplos a seguir mostrarão como os campos personalizados podem ser ajustados com opções de exibição adicionais para casos de uso específicos. Fazer com que o campo personalizado seja lido como parte da postagem e definir o contexto com um título útil será um ótimo complemento para a postagem. Se você está seguindo passo a passo, certifique-se de comentar o <?php the_meta(); ?> <?php the_meta(); ?> que você adicionou no exemplo anterior.

Para este exemplo, as coisas foram ligeiramente modificadas. A chave foi simplificada para “exercícios” para que possa ser adicionada ao modelo mais facilmente, e o trecho de código foi adicionado no arquivo content.php do tema filho para que apareça no conteúdo do post, em vez de antes ou depois dele .

 <?php $exercises = get_post_meta($post->ID, 'exercises', false); ?> <h3>Today's exercise:</h3> <ul> <?php foreach($exercises as $exercise) { echo '<li>'.$exercise.'</li>'; } ?> </ul>

O campo personalizado agora é mostrado abaixo do título “Exercício de hoje:” em um formato de lista. Isso foi definido como um <h3> , mas pode ser facilmente ajustado para ser outro título ou estilo de parágrafo. Se você não quiser em formato de lista, também pode ser estruturado da maneira que desejar.

Personalizado Condicional

Campos

Pode haver momentos em que o campo personalizado não é incluído. Digamos, por exemplo, que haja uma postagem sem um valor de exercício. Isso permitirá que você exiba informações de fallback, para que não sejam apenas deixadas em branco.

 <?php $exercises = get_post_meta($post->ID, 'exercises', true); ?> <h3>Today's exercise:</h3> <ul> <?php if ($exercises) { ?> <?php echo '<li>' .$exercises. '</li>'; ?> <?php } //if there is nothing for exercises then display else { ?> <li>Today was a rest day.</li>

O plug-in de campos personalizados avançados

Seguindo esse tutorial, você pode facilmente colocar os campos personalizados em funcionamento. Se você preferir usar um plug-in para adicionar campos personalizados, no entanto, também existem opções disponíveis para isso. Campos personalizados avançados é uma opção muito popular. Isso substitui a interface de campos personalizados padrão no WordPress. O produto final criado a partir deste tutorial também pode ser criado com este plugin.

Grupos de campos

O plug-in Advanced Custom Fields permite grupos de campos, que vale a pena mencionar porque estão intimamente relacionados ao tutorial acima. Essencialmente, criamos uma versão muito básica de um mini grupo de campo. Grupos de campos personalizados avançados contêm campos personalizados, regras de localização e opções de exibição. Cada grupo de campos usará suas regras de localização para exibir os campos quando necessário, no local correto. Assim como a maneira manual de fazer as coisas, essas opções de exibição permitem que você personalize a página da maneira que desejar. Existem muitos grupos de campos para escolher com este plug-in.

Isso mal arranha a superfície do que pode ser feito com este plugin. Para obter uma visão completa, visite o site Advanced Custom Fields.

Os campos personalizados são um recurso pronto para uso do WordPress. Fazendo apenas algumas modificações no modelo, você pode adicionar facilmente essa funcionalidade ao seu site. Essas etapas abrangem o básico e, com um pouco de experimentação, você terá uma compreensão clara de como implementar campos personalizados. Ao planejar seu próximo projeto, considere a flexibilidade que os campos personalizados oferecem. Eles podem acomodar vários tipos de conteúdo, facilitando a realização de alterações em todo o site.