Campos Personalizados do WordPress 101: Dicas, Truques e Hacks

Ao longo dos anos, recebemos muitas perguntas sobre campos personalizados e como os usuários podem aproveitá-los ao máximo em seus sites WordPress.

Campos personalizados são um recurso útil do WordPress que permite adicionar dados e informações extras às suas postagens e páginas. Muitos plugins e temas populares do WordPress usam campos personalizados para armazenar dados importantes.

Temos experiência com campos personalizados do WordPress. Neste artigo, mostraremos como usar campos personalizados do WordPress com algumas dicas, truques e hacks.

Como este é um artigo longo, adicionamos um índice para facilitar a navegação. Basta usar os links rápidos abaixo para pular para a seção que você deseja ler:

O que são Campos Personalizados do WordPress?

Campos personalizados do WordPress são metadados usados para adicionar informações extras à postagem ou página que você está editando.

Por padrão, quando você escreve uma nova postagem, página ou qualquer outro tipo de conteúdo, o WordPress salva esse conteúdo em duas partes diferentes.

A primeira parte é o corpo do seu conteúdo que você adiciona usando o editor de conteúdo do WordPress.

A segunda parte é a informação sobre esse conteúdo. Por exemplo, o título, autor, data, hora e muito mais. Essa informação é chamada de metadados.

Um site WordPress adiciona automaticamente todos os metadados necessários a cada postagem ou página que você cria. Você também pode criar e armazenar seus próprios metadados usando campos personalizados.

Por padrão, a opção de campos personalizados fica oculta na tela de edição de posts. Para visualizá-la, você precisa clicar no menu de três pontos no canto superior direito da tela e selecionar ‘Preferências’ no menu.

Isso abrirá um pop-up onde você precisa mudar para a aba ‘Painéis’ e, em seguida, habilitar a opção ‘Campos personalizados’.

Depois disso, basta clicar no botão ‘Habilitar e Recarregar’ para recarregar o editor de posts.

O editor de posts será recarregado e você poderá ver o painel de Campos Personalizados abaixo do editor de conteúdo.

Campos personalizados podem ser usados para adicionar qualquer informação relacionada ao post, página ou outro tipo de conteúdo. Essas meta informações podem então ser exibidas em seu tema.

No entanto, para fazer isso, você precisará editar os arquivos do seu tema WordPress.

Dito isso, vamos ver como adicionar e usar campos personalizados no WordPress.

Adicionando Campos Personalizados no WordPress

Primeiro, você precisa abrir um post ou página no editor de blocos para poder adicionar campos personalizados. Em seguida, você deve ir para a caixa de meta Campos Personalizados.

Em seguida, você precisa fornecer um Nome para seu campo personalizado e, em seguida, inserir seu Valor. Clique no botão 'Adicionar Campo Personalizado' para salvá-lo.

O campo será armazenado e exibido na caixa de meta Campos Personalizados assim:

Você pode editar este campo personalizado a qualquer momento e, em seguida, basta clicar no botão 'Atualizar' para salvar suas alterações. Você também pode excluí-lo se não quiser mais usá-lo.

Agora, você precisa salvar seu post para armazenar as configurações do seu campo personalizado.

Exibindo Campos Personalizados em Temas do WordPress

Para exibir seu campo personalizado em seu site, você precisará editar os arquivos do seu tema WordPress e os trechos de código.

Não recomendamos editar diretamente os arquivos do tema, pois o menor erro pode quebrar seu site. Uma maneira mais fácil de fazer isso é usando WPCode.

É o melhor plugin de trechos de código para WordPress que permite adicionar código personalizado e gerenciar trechos do seu painel do WordPress.

Se você nunca fez isso antes, também recomendamos a leitura do nosso guia sobre como copiar e colar código no WordPress.

Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, você precisará ir para Trechos de Código » + Adicionar Trecho no painel do WordPress e selecionar a opção ‘Adicionar Seu Código Personalizado (Novo Trecho)’.

Agora você precisa copiar este código para adicionar aos arquivos do seu tema:

<?php echo get_post_meta($post->ID, 'key', true); ?>

Não se esqueça de substituir key pelo nome do seu campo personalizado.

Em seguida, você deve inserir o código na área ‘Pré-visualização do Código’ e alterar o Tipo de Código para ‘Trecho PHP’.

Por exemplo, usamos este código em nosso tema de demonstração:

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

A partir daqui, você pode rolar para baixo até a seção Inserção.

Aqui, você pode selecionar onde o código será executado. Por padrão, o WPCode Inserirá Automaticamente o código e o executará em todos os lugares do seu site.

No entanto, você pode alterar isso e selecionar onde deseja que o campo personalizado apareça.

Por exemplo, escolheremos a aba ‘Específico da Página’ e selecionaremos a opção ‘Inserir Antes do Post’. Dessa forma, o campo personalizado aparecerá no início da postagem do blog.

Agora você pode salvar suas alterações e visitar a postagem onde adicionou o campo personalizado para vê-lo em ação.

Você pode usar este campo personalizado em todas as suas outras postagens de blog WordPress também.

Você também pode ajustar facilmente o campo personalizado para diferentes posts do blog. Simplesmente crie um novo post ou edite um existente.

Em seguida, vá para a caixa de meta Campos Personalizados, selecione seu campo personalizado no menu suspenso e insira seu Valor.

Assim que terminar, basta clicar no botão ‘Adicionar Campo Personalizado’ para salvar suas alterações e, em seguida, publicar ou atualizar seu post.

Solução de problemas: Não encontra o Campo Personalizado no menu suspenso na tela de edição de post

Por padrão, o WordPress carrega apenas 30 campos personalizados no menu suspenso na tela de edição de posts.

Se você estiver usando temas e plugins do WordPress que já utilizam campos personalizados, eles podem aparecer primeiro no menu suspenso, e você não conseguirá ver seu campo personalizado recém-criado.

Para corrigir este problema, você precisará adicionar o seguinte código ao arquivo functions.php do seu tema ou usando WPCode (recomendado):

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) {
    return 50;
}

O código acima alterará esse limite para 50. Se você ainda não conseguir ver seu campo personalizado, poderá tentar aumentar ainda mais esse limite.

Criando uma Interface de Usuário para Campos Personalizados Usando Campos Personalizados Avançados

Como você pode ver, depois de adicionar um campo personalizado, você terá que selecionar o campo e inserir seu valor toda vez que escrever um post.

Se você tem muitos campos personalizados do WordPress ou vários autores escrevendo em seu site, esta não é uma solução ideal.

Não seria bom se você pudesse criar uma interface de usuário onde os usuários pudessem preencher um formulário para adicionar valores a campos personalizados?

Na verdade, é isso que tantos plugins populares do WordPress já fazem.

Por exemplo, a caixa de título SEO e meta descrição dentro do popular plugin All in One SEO é uma caixa de metadados personalizada:

A maneira mais fácil de criar uma interface de usuário para adicionar campos personalizados é usando o plugin Advanced Custom Fields.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Advanced Custom Fields. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar a página ACF » Grupos de Campos e clicar no botão ‘Adicionar Novo’.

Um grupo de campos é como um contêiner com um conjunto de campos personalizados. Ele permite que você adicione vários painéis de campos personalizados.

Agora, você precisa fornecer um título para o seu grupo de campos e clicar no botão ‘+ Adicionar Campo’ no canto superior direito.

Agora você pode selecionar um tipo de campo.

Advanced Custom Fields permite que você crie todos os tipos de campos, incluindo texto, upload de imagem, número, dropdown, checkboxes e muito mais.

Em seguida, você pode rolar para baixo para ver outras opções para esse campo específico, como nome do campo, rótulo do campo e valor padrão. Você pode alterá-los de acordo com suas necessidades.

Você também pode adicionar vários campos ao seu grupo de campos, se desejar. Quando terminar, basta clicar no botão ‘Salvar Alterações’.

Em seguida, edite uma postagem ou crie uma nova, e você verá um novo painel com seus campos personalizados do WordPress abaixo do editor de conteúdo.

Para instruções detalhadas passo a passo, você pode ver nosso guia sobre como adicionar caixas de metadados personalizadas em postagens e tipos de postagem do WordPress.

Como Ocultar Campos Personalizados Vazios com Declarações Condicionais

Até agora, cobrimos como criar um campo personalizado e exibi-lo em seu tema.

Agora, vamos ver como verificar se o campo personalizado não está vazio antes de exibi-lo. Para fazer isso, modificaremos nosso código para primeiro verificar se o campo contém dados:

<?php 

$mood = get_post_meta($post->ID, 'Mood', true);

if ($mood) { ?>

<p>Today's Mood: <? echo $mood; ?></p>

<?php 

} else {
// do nothing;
}

?>

Não se esqueça de substituir Mood pelo nome do seu próprio campo personalizado.

Adicionando Múltiplos Valores a um Campo Personalizado

Campos personalizados podem ser reutilizados no mesmo post para adicionar múltiplos valores. Você só precisa selecionar o campo novamente e adicionar outro valor à caixa 'Valor'.

No entanto, o código que usamos nos exemplos acima só será capaz de mostrar um único valor.

Para exibir todos os valores de um campo personalizado, precisamos modificar o código e fazer com que ele retorne os dados em um array. Você precisará adicionar o seguinte código ao seu arquivo de tema:

<?php 
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) {
            echo '<li>'.$mood.'</li>';
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

Novamente, não se esqueça de substituir Mood pelo nome do seu próprio campo personalizado.

Neste exemplo, você notará que alteramos o último parâmetro da função get_post_meta para false. Este parâmetro define se a função deve retornar um único valor ou não. Definir como false permite que ela retorne os dados como um array, que então exibimos em um loop foreach.

Como Pesquisar Postagens por Campo Personalizado no WordPress

A busca padrão do WordPress não funciona com nenhum campo personalizado em seu site. Ela usa apenas o conteúdo para encontrar a postagem que você ou seus visitantes estão procurando em seu site.

No entanto, SearchWP muda isso melhorando sua busca no WordPress. É o melhor plugin de busca do WordPress que vai além do uso do conteúdo da postagem e indexa tudo, incluindo campos personalizados do WordPress, documentos PDF, tabelas personalizadas, texto, arquivos e muito mais.

Você pode ajustar o algoritmo de busca sem editar código usando o SearchWP. Simplesmente instale o plugin e depois vá para SearchWP » Algorithm na sua área de administração do WordPress.

Depois disso, você precisa ir para a aba ‘Engines’ e ajustar o controle deslizante de Relevância de Atributos. Isso mudará a importância dada a cada atributo durante uma busca.

Por exemplo, você pode definir o controle deslizante de Campos Personalizados para o máximo e ajustar os controles deslizantes para outros atributos de acordo. Dessa forma, o SearchWP dará preferência aos dados em campos personalizados ao procurar conteúdo no WordPress.

Outra vantagem de usar o SearchWP é que ele funciona com alguns dos plugins de campos personalizados mais populares, incluindo Advanced Custom Fields (ACF), Meta Box e Pods.

Para mais detalhes, você pode ler nosso guia amigável para iniciantes sobre como melhorar a busca do WordPress com SearchWP.

Exibindo Postagens com uma Chave Personalizada Específica

O WordPress permite que você exiba posts com chaves personalizadas e seus valores. Por exemplo, se você está tentando criar uma página de arquivo personalizada para exibir todos os posts com chaves personalizadas específicas, então você pode usar a classe WP_Query para consultar posts que correspondam a esses campos.

Você pode usar o seguinte código como ponto de partida:

$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
 
<?php 
// the query
$the_query = new WP_Query( $args ); ?>
 
<?php if ( $the_query->have_posts() ) : ?>
 
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
 
    <?php endwhile; ?>
    <!-- end of the loop -->
 
    <!-- pagination here -->
 
    <?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Não se esqueça de substituir os parâmetros meta_key e meta_value pelos seus próprios valores.

Como Adicionar Nome de Autor Convidado Usando Campos Personalizados

Você quer adicionar uma postagem de convidado, mas não quer adicionar um novo perfil de usuário apenas para essa postagem? Um método mais fácil é adicionar um nome de autor convidado como um campo personalizado.

Para fazer isso, você precisará adicionar o seguinte código ao arquivo functions.php do seu tema ou usar WPCode (recomendado):

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

Para mais detalhes, consulte nosso guia sobre colar trechos da web no WordPress.

Este código conecta uma função aos filtros the_author e get_the_author_display_name no WordPress.

A função primeiro verifica o nome do autor convidado. Se ele existir, então substitui o nome do autor pelo nome do autor convidado.

Agora, você precisará editar o post onde deseja exibir o nome do autor convidado. Vá para a caixa de meta Campos Personalizados, adicione o nome do seu autor convidado e, finalmente, clique no botão 'Adicionar Campo Personalizado'.

Para mais detalhes, veja nosso artigo sobre como reescrever nomes de autores convidados com campos personalizados no WordPress.

Como Exibir Colaboradores de um Artigo Usando Campos Personalizados

Em muitos blogs populares e sites de notícias, vários autores contribuem para a escrita de um único artigo. No entanto, o WordPress permite que apenas um autor seja associado a uma postagem.

Uma maneira de resolver esse problema é usando o plugin Co-Authors Plus. Para saber mais, veja nosso guia sobre como adicionar vários autores a uma postagem do WordPress.

Outro método é adicionar colaboradores como um campo personalizado.

Primeiro, você precisa editar a postagem onde deseja exibir coautores ou colaboradores. Em seguida, role para baixo até a caixa de meta de Campos Personalizados e adicione nomes de autores como campos personalizados de coautor.

Agora, você precisa adicionar este código aos arquivos do seu tema onde deseja mostrar os coautores:

<?php 
 
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

Para exibir os nomes dos autores separados por vírgulas, você pode adicionar o seguinte CSS personalizado:

.coauthors ul { 
display:inline;
}
.coauthors li { 
display:inline;
list-style:none;
}
.coauthors li:after { 
content:","
}
.coauthors li:last-child:after {
    content: "";
}
.coauthors li:first-child:after {
    content: ":";
}

É assim que ficou em nosso site de demonstração.

Como Exibir Campos Personalizados Fora do Loop no WordPress

E se você precisar mostrar campos personalizados na barra lateral de uma postagem individual?

Para exibir os campos personalizados fora do loop do WordPress, você pode adicionar o seguinte código aos arquivos do seu tema:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Não se esqueça de substituir key pelo nome do seu campo personalizado.

Exibir um Cabeçalho, Rodapé ou Barra Lateral Personalizado Usando Campos Personalizados

Geralmente, a maioria dos temas do WordPress usa o mesmo cabeçalho, rodapé e barra lateral em todas as páginas.

Existem também muitas maneiras de mostrar diferentes barras laterais, cabeçalhos ou rodapés para diferentes páginas do seu site. Você pode ver nosso guia sobre como exibir uma barra lateral diferente para cada postagem ou página do WordPress.

Uma maneira de fazer isso é usando campos personalizados. Basta editar a postagem ou página onde você deseja mostrar uma barra lateral diferente e, em seguida, adicionar a barra lateral como um campo personalizado.

Agora, você precisa editar o arquivo do seu tema do WordPress, como single.php, onde deseja exibir uma barra lateral personalizada. Você estará procurando pelo seguinte código:

<?php get_sidebar(); ?>

Substitua esta linha pelo seguinte código:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Este código simplesmente procura o campo personalizado da barra lateral e o exibe no seu tema. Por exemplo, se você adicionar webpage como seu campo personalizado de barra lateral, o código procurará um arquivo sidebar-webpage.php para exibir.

Você precisará criar o arquivo sidebar-webpage.php na pasta do seu tema. Você pode copiar o código do arquivo sidebar.php do seu tema como ponto de partida.

Manipulando o Conteúdo do Feed RSS com Campos Personalizados

Quer exibir metadados ou conteúdo adicionais para os usuários do seu feed RSS? Usando campos personalizados, você pode manipular seu feed RSS do WordPress e adicionar conteúdo personalizado aos seus feeds.

Primeiro, você precisa adicionar o seguinte código ao arquivo functions.php do seu tema ou usar o WPCode (recomendado):

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Agora, basta criar um campo personalizado chamado 'coolcustom' e adicionar qualquer valor que desejar. Você pode usá-lo para exibir anúncios, imagens, texto ou qualquer coisa que quiser.

Para mais detalhes, por favor, veja nosso guia sobre como copiar e colar código da web no WordPress.

Como Manipular o Título do Feed RSS com Campos Personalizados

Às vezes, você pode querer adicionar texto extra ao título de uma postagem para usuários do feed RSS. Por exemplo, isso pode ser útil se você estiver publicando uma postagem patrocinada ou uma postagem de convidado.

Primeiro, você precisa adicionar o seguinte código ao arquivo functions.php do seu tema ou usar o WPCode para adicionar o trecho de código personalizado sem quebrar seu site:

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

Em seguida, você precisa editar a postagem onde deseja exibir o texto extra no campo do título.

Em seguida, adicione guest_post e sponsored_post como campos personalizados.

Se um desses dois campos personalizados for encontrado com o valor “true”, o código adicionará o texto apropriado antes do título. Essa técnica pode ser usada de várias maneiras para se adequar ao que você quiser.

Quer aprender mais truques legais com feeds RSS? Veja nosso guia sobre como adicionar conteúdo e manipular seus feeds RSS do WordPress.

Como Definir Data de Expiração para Postagens no WordPress Usando Campos Personalizados

Quer definir uma data de expiração para algumas postagens em seu site WordPress? Isso é útil quando você deseja publicar conteúdo apenas por um período específico, como para pesquisas ou ofertas por tempo limitado.

Uma maneira de fazer isso é removendo manualmente o conteúdo da postagem ou usando um plugin como o Post Expirator.

Outra opção é usar campos personalizados para expirar posts automaticamente após um tempo específico. Você precisará editar os arquivos do seu tema e modificar o loop do WordPress assim:

<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) {
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else {
echo "Sorry this post expired!"
}
} else {
the_content();
}
endwhile;
endif;
?>

Observação: Você precisará editar este código para que corresponda ao seu tema.

Após adicionar este código, você pode adicionar o campo personalizado de expiração ao post que deseja que expire. Certifique-se de adicionar a hora neste formato: mm/dd/aaaa 00:00:00.

Como Estilizar Postagens Individuais Usando Campos Personalizados

Quer mudar a aparência de um post individual usando CSS? O WordPress atribui automaticamente a cada post sua própria classe, que você pode usar para adicionar CSS personalizado.

No entanto, usando campos personalizados, você pode adicionar suas próprias classes personalizadas e, em seguida, usá-las para estilizar posts de forma diferente.

Primeiro, você precisa editar um post que gostaria de estilizar de forma diferente. Vá para a caixa Campos Personalizados e adicione o campo personalizado post-class.

Em seguida, você precisa editar os arquivos do seu tema WordPress e adicionar este código no início do loop do WordPress:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Agora, você precisa encontrar a linha com a função post_class().

Veja como ficou em nosso tema de demonstração:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Você deve alterar esta linha para incluir o valor do seu campo personalizado assim:

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Agora, se você examinar o código-fonte da postagem usando a ferramenta Inspecionar, verá sua classe CSS de campo personalizado adicionada à classe da postagem.

Agora você pode usar esta classe CSS para adicionar CSS personalizado e estilizar seu post de forma diferente.

Esperamos que este artigo tenha ajudado você a aprender mais sobre campos personalizados do WordPress. Você também pode querer ver nosso guia sobre como adicionar campos personalizados automaticamente na publicação de posts e os melhores plugins de construtor de páginas do WordPress para ajudá-lo a projetar seu site da maneira que desejar.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.