Campos personalizados do WordPress 101: dicas, truques e hacks

Você deseja aproveitar ao máximo os campos personalizados em seu site WordPress?

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

Neste artigo, mostraremos como usar os campos personalizados do WordPress com algumas dicas, truques e hacks.

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

O que são campos personalizados do WordPress?

Os campos personalizados do WordPress são metadados usados ​​para adicionar informações extras ao post 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 são as informações sobre esse conteúdo. Por exemplo, o título, autor, data, hora e muito mais. Essas informações são chamadas 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 postagem. Para visualizá-lo, 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 alternar para a guia 'Painéis' e ativar a opção 'Campos personalizados'.

Depois disso, basta clicar no botão 'Ativar e recarregar' para recarregar o editor de postagem.

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

Os campos personalizados podem ser usados ​​para adicionar qualquer informação relacionada à postagem, página ou outro tipo de conteúdo. Essas metainformações podem ser exibidas em seu tema.

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

Dito isso, vamos dar uma olhada em como adicionar e usar campos personalizados no WordPress.

Adicionando campos personalizados no WordPress

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

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

O campo será armazenado e exibido na caixa meta Campos personalizados da seguinte forma:

Você pode editar este campo personalizado sempre que quiser 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 sua postagem para armazenar suas configurações de campo personalizadas.

Exibindo campos personalizados em temas do WordPress

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

Não recomendamos a edição direta dos arquivos do tema, pois o menor erro pode danificar seu site. Uma maneira mais fácil de fazer isso é usando o WPCode.

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

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

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

Após a ativação, você precisará ir para Code Snippets » + Add Snippet no painel do WordPress e selecionar a opção 'Add Your Custom Code (New Snippet)'.

Agora você precisa copiar este código para adicionar aos seus arquivos de 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 'Code Preview' e alterar o Code Type para 'PHP Snippet'.

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 qualquer lugar do seu site.

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

Por exemplo, vamos escolher a aba 'Page Specific' e selecionar a opção 'Insert Before 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ê também pode usar esse campo personalizado em todos os outros posts do seu blog WordPress.

Você também pode ajustar facilmente o campo personalizado para diferentes postagens de blog. Basta criar uma nova postagem ou editar uma existente.

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

Quando terminar, basta clicar no botão 'Adicionar campo personalizado' para salvar suas alterações e, em seguida, publicar ou atualizar sua postagem.

Solução de problemas: não é possível encontrar o campo personalizado no menu suspenso na tela de edição de postagem

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

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

Para corrigir esse problema, você precisará adicionar o seguinte código ao arquivo functions.php do seu tema ou usar o 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, tente 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 sempre que escrever uma postagem.

Se você tiver muitos campos personalizados do WordPress ou vários autores escrevendo em seu site, essa não é a 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 aos seus campos personalizados?

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

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

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

A primeira coisa que você precisa fazer é instalar e ativar o plugin Advanced Custom Fields. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in 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.

Os campos personalizados avançados permitem criar todos os tipos de campos, incluindo texto, upload de imagem, número, menu suspenso, caixas de seleção 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 seus próprios requisitos.

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 obter instruções passo a passo detalhadas, você pode ver nosso guia sobre como adicionar caixas meta personalizadas em postagens e tipos de postagem do WordPress.

Como ocultar campos personalizados vazios com declarações condicionais

Até agora, abordamos 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 isso, modificaremos nosso código para verificar primeiro 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 seu próprio nome de campo personalizado.

Adicionando vários valores a um campo personalizado

Os campos personalizados podem ser reutilizados na mesma postagem para adicionar vários 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ó poderá mostrar um único valor.

Para exibir todos os valores de um campo personalizado, precisamos modificar o código e fazê-lo retornar 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 seu próprio nome de 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. Defini-lo como false permite que ele retorne os dados como uma matriz, que exibimos em um loop foreach .

Como pesquisar postagens por campo personalizado no WordPress

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

No entanto, o SearchWP muda isso melhorando sua pesquisa no WordPress. É o melhor plug-in de pesquisa do WordPress que vai além de usar o 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 pesquisa sem editar o código usando SearchWP. Basta instalar o plug-in e, em seguida, acessar SearchWP »Algoritmo na área de administração do WordPress.

Depois disso, você precisa ir para a guia 'Mecanismos' e ajustar o controle deslizante Relevância do atributo. Isso mudará a importância dada a cada atributo durante uma pesquisa.

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 pesquisar conteúdo no WordPress.

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

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

Exibindo postagens com uma chave personalizada específica

O WordPress permite que você exiba postagens com chaves personalizadas e seus valores. Por exemplo, se você estiver tentando criar uma página de arquivo personalizada para exibir todas as postagens com chaves personalizadas específicas, poderá usar a classe WP_Query para consultar as postagens correspondentes 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 por seus próprios valores.

Como adicionar o nome do autor convidado usando campos personalizados

Você deseja adicionar uma postagem de convidado, mas não deseja 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 o 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 obter mais detalhes, consulte nosso guia sobre como colar snippets 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 existir, substitui o nome do autor pelo nome do autor convidado.

Agora você precisará editar a postagem onde deseja exibir o nome do autor convidado. Vá para a caixa meta Campos personalizados, adicione o nome do autor convidado e, finalmente, clique no botão 'Adicionar campo personalizado'.

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

Como exibir colaboradores para um artigo usando campos personalizados

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

Uma maneira de resolver esse problema é usar o plug-in Co-Authors Plus. Para saber mais, consulte 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 na qual deseja exibir os coautores ou colaboradores. Em seguida, role para baixo até a caixa meta Campos personalizados e adicione os nomes dos autores como campos personalizados de coautoria.

Agora, você precisa adicionar este código aos seus arquivos de 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 parecia 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 única postagem?

Para exibir os campos personalizados fora do loop do WordPress, você pode adicionar o seguinte código aos seus arquivos de 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.

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

Há 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 deseja mostrar uma barra lateral diferente e, em seguida, adicionar a barra lateral como um campo personalizado.

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

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 em seu tema. Por exemplo, se você adicionar webpage como seu campo personalizado da 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

Deseja exibir metadados ou conteúdo adicional para seus usuários de 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 desejar.

Para obter mais detalhes, consulte 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 de feeds 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 snippet de código personalizado sem danificar 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 algum desses dois campos personalizados for encontrado com um valor “true”, o código adicionará o texto apropriado antes do título. Essa técnica pode ser usada de várias maneiras para encaixar o que você quiser.

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

Como definir a data de expiração das postagens no WordPress usando campos personalizados

Deseja 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 pesquisas ou ofertas por tempo limitado.

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

Outra opção é usar campos personalizados para expirar postagens automaticamente após um horário específico. Você precisará editar seus arquivos de 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 corresponder ao seu tema.

Depois de adicionar este código, você pode adicionar o campo personalizado de expiração à postagem que deseja expirar. 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 uma postagem individual usando CSS? O WordPress atribui automaticamente a cada postagem 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 usá-las para estilizar postagens de maneira diferente.

Primeiro, você precisa editar uma postagem que gostaria de estilizar de maneira diferente. Vá para a caixa Campos personalizados e adicione o campo personalizado pós-aula.

Em seguida, você precisa editar seus arquivos de tema do 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() .

Aqui está como ficou em nosso tema de demonstração:

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

Você deve alterar esta linha para incluir seu valor de 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 de postagem.

Agora você pode usar esta classe CSS para adicionar CSS personalizado e estilizar sua postagem de maneira diferente.

Esperamos que este artigo tenha ajudado você a aprender mais sobre os campos personalizados do WordPress. Você também pode querer ver nosso guia sobre como adicionar metacampos personalizados a taxonomias personalizadas no WordPress e os melhores plug-ins de construtor de páginas do WordPress para ajudá-lo a projetar seu site da maneira que desejar.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.