Introdução aos campos personalizados do WordPress

Os campos personalizados do WordPress são um recurso realmente ótimo que geralmente é negligenciado. Eles permitem que você adicione 'metadados' a uma área de sua página ou postagem que se repete em todas as páginas ou postagens. Isso pode economizar muito tempo se você tiver um site no qual deseja publicar o mesmo tipo de informação em várias páginas.

Por exemplo, dê uma olhada em uma postagem de blog regular em seu site WordPress. É provável que, em algum lugar da página, você veja o nome do autor e uma data que mostra quando o artigo foi publicado. Isso é metadados e aparecerá em cada postagem em seu site.

Então, como você pode adicionar seus próprios metadados às suas postagens ou páginas? Fácil… usando um campo personalizado do WordPress!

É claro que você pode adicionar essas informações em cada postagem manualmente por meio do editor de página/post, mas isso é demorado e normalmente requer uma formatação cuidadosa para garantir que todas as postagens tenham a mesma aparência. Se você estiver publicando muito conteúdo, pode ser cansativo ter que fazer isso toda vez.

A página do WordPress e os editores de postagem oferecem muita funcionalidade e flexibilidade quando se trata do conteúdo principal que aparece em uma página ou postagem. Mas você sabia que o WordPress também oferece aos usuários uma maneira de adicionar conteúdo que fica 'fora' do post principal ou do conteúdo da página? Neste artigo, vamos mostrar rapidamente como usar os campos personalizados do WordPress, que ajudarão você a organizar melhor suas postagens e também adicionar informações úteis para seus leitores em um formato de ótima aparência.

Vamos começar!

O que são campos personalizados e metadados?

Conteúdos como postagens, páginas, usuários, comentários e tipos de postagem personalizados incluem metadados armazenados em seu banco de dados na tabela postmeta em um par chave/valor.

As informações que você costuma ver sob um título de postagem ou página, como o nome do administrador, a data ou o contador de comentários, são incluídas nos metadados da postagem.

O campo personalizado é um campo adicional onde você pode adicionar informações extras para sua postagem e também faz parte dos metadados da postagem.

Os campos personalizados se aplicam a páginas, postagens ou tipos de postagem personalizados e também consistem em pares de chave/valor. A chave é o 'nome' do elemento de metadados e o valor são os dados que se associam à chave e podem ser diferentes para cada postagem.

No WordPress, você pode adicionar campos personalizados usando o recurso de campo personalizado integrado ou pode dar um passo adiante usando um plug-in de campo personalizado que aprimorará ainda mais o controle disponível sobre um campo personalizado. Veremos as duas opções neste artigo.

Adicionar campos personalizados usando campos personalizados do WordPress

As configurações de campos personalizados do WordPress estão ocultas por padrão, o que explica por que você pode não saber que essa função existia. Para usá-lo, primeiro precisamos habilitá-lo.

Se você estiver usando o editor clássico do WordPress (ou seja, não o Gutenberg), abra um novo post e vá para o topo deste post. Você verá uma caixa no lado direito que diz 'Opções de tela'. Clique aqui e um menu suspenso com caixas de seleção aparecerá. Neste você deve ver um que diz 'Campos personalizados'. Marque esta opção para habilitá-los.

Se você estiver usando o Gutenberg, clique no ícone de 'três pontos' que aparece no canto superior direito de uma postagem. Um menu aparecerá e na parte inferior deste menu deverá dizer 'Opções'. Clique aqui e um novo menu pop-up com caixas de seleção aparecerá. Nesta lista, você deve ver um que diz 'Campos personalizados'. Marque esta caixa e feche o menu pop-up.

Próximas etapas – Adicionando seus campos personalizados

Adicionar seus campos personalizados é realmente muito fácil. Depois de habilitá-los conforme descrito acima, vá para a parte inferior da sua postagem e você verá uma nova seção chamada (você adivinhou) 'Campos personalizados'.

Você verá duas caixas na seção Campos personalizados, 'Nome' e 'Valor'. O campo Nome tem alguns padrões pré-preenchidos relacionados a campos existentes que foram adicionados ao seu site WordPress. No nosso caso, queremos adicionar nosso próprio novo campo. Para fazer isso, clique no texto 'Digite novo' que está localizado no campo Nome.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

Neste exemplo, queremos criar um link para um site externo que foi usado como fonte para um artigo que escrevemos. Chamaremos este campo de 'Fonte'. Clique no texto 'Digite novo' e digite 'Fonte' seguido de um URL para um site de sua escolha na seção Valor. Isso ficará assim:

Da próxima vez, você não precisará clicar no texto 'Inserir novo' e digitar manualmente 'Fonte'. Ele agora aparecerá na lista suspensa de valores.

Se você tiver acesso ao seu banco de dados (por exemplo: via phpMyAdmin) você pode abrir a tabela postmeta, filtrar a tabela pelo ID do post que você editou e você deverá ver o novo campo personalizado com seu valor.

Agora que confirmamos que o campo personalizado está armazenado corretamente para o post, vamos ver como podemos exibi-lo no front-end do nosso post onde os visitantes do nosso site poderão vê-lo!

Exibindo os valores dos campos personalizados

Para exibir nosso novo valor de campo personalizado em nossa postagem, precisamos adicionar algum código ao nosso arquivo de modelo de postagem única. Normalmente, isso pode ser encontrado no arquivo singular.php que está localizado na pasta principal do tema. No nosso caso (tema Twenty Twenty) ele está localizado no arquivo /wp-content/themes/twentytwenty/template-parts/content.php .

Usaremos a função principal get_post_meta que o WordPress fornece para recuperar o metacampo de uma postagem do banco de dados. A estrutura da função é a seguinte:

 get_post_meta( $post_id, $key, $single )

O único argumento necessário é o $post_id . O argumento $key é a meta-chave a ser recuperada e o argumento $single define se um único valor é retornado e é inútil se a $key não estiver definida.

Se apenas o $post_id for declarado, o resultado será um array com todas as chaves relacionadas ao post específico. Então, se você apenas inserir get_post_meta( $post_id ) , você obterá algo assim:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Se você usar get_post_meta( $post_id, 'filed1_key' ) você obterá algo como Array ( [0] => value1 ) e se você usar get_post_meta( $post_id, 'filed1_key', true ) como fizemos antes, você obterá apenas value1 .

Além disso, em alguns posts você pode não querer definir o campo fonte, então temos que incluir no código uma verificação para ver se o campo existe para o post.

Então, com tudo isso em mente, o código que precisamos usar seria o seguinte:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Vamos inserir o código logo após o conteúdo do post para que dentro da div HTML com a classe “entry-content”, o código fique assim:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Agora vamos ver o que conseguimos ao abrir uma nova postagem e dar uma olhada em como esse conteúdo apareceria no front-end.

Lembramos que se você estiver com dificuldades para localizar o arquivo de modelo correspondente à sua visualização de postagem única, poderá consultar o diagrama de hierarquia de modelos do WordPress.

Claramente, haverá algum trabalho a ser feito para estilizar essa saída. Isso está além do escopo deste artigo, mas é algo que abordaremos em um post futuro.

Adicionando campos personalizados usando um plug-in

O plug-in Advanced Custom Fields é um dos melhores plug-ins disponíveis que permite adicionar rapidamente campos personalizados ao seu site WordPress e fornece maior controle de seus dados de campo personalizados. Usando seu construtor, você pode criar facilmente campos personalizados que podem ser adicionados às suas postagens, usuários, taxonomias, mídia, comentários e até páginas de opções personalizadas.

Crie seus campos personalizados usando o ACF

Após instalar e ativar o plugin ACF vá em 'Campos Personalizados > Grupos de Campos' onde são mostrados os campos cadastrados.

Pressione o botão 'Adicionar Novo' para começar a criar seus campos. Estes também podem ser adicionados em grupos.

Há uma tonelada de opções fornecidas para você que melhorarão o comportamento de seus campos personalizados. Além da configuração básica que inclui o rótulo e o nome do campo, você também pode definir o tipo do campo, definir se o campo é obrigatório, alterar o valor padrão, o texto do placeholder e, claro, escolher os tipos de postagem onde será incluído por usando argumentos lógicos.

Além disso, há mais algumas configurações disponíveis que permitem alterar a aparência do campo (super útil) e uma lista de checkboxes para você definir o que deve ficar oculto nas telas de edição correspondentes.

Incrível, certo?

Além disso, no menu Ferramentas do ACF, você pode exportar ou importar grupos de campos em formato JSON para acelerar as coisas, caso já tenham sido criados em outro lugar.

Um exemplo trabalhado usando campos personalizados avançados

Digamos que criamos um tipo de postagem personalizada chamado 'Livros' e gostaríamos de adicionar alguns campos personalizados em cada postagem de livro, como Gênero, Autor do livro e Ano de publicação. As primeiras coisas que devemos fazer é criar o grupo de campos e os campos que o contêm assim:

Como você pode ver, nem todos os campos usam o mesmo tipo.

• O campo Autor é um campo de texto simples onde estaremos preenchendo o nome completo do autor.
• O campo Gênero é um campo de seleção e deve aceitar vários valores. Um livro pode estar relacionado a mais de um gênero.
• As escolhas pré-definidas para o gênero precisam ser inseridas na caixa Choices cada uma em sua própria linha.

O campo de capa deve ser um campo de seleção de valor único com as opções predefinidas também.

Agora vamos editar uma publicação de livro. Os campos aparecerão bem agrupados na barra lateral.

Se você deseja alterar a posição do grupo de campos, vá para as configurações correspondentes:

Preencha os campos, bem como algum conteúdo de teste para o artigo e atualize a postagem. Neste ponto, se você visitar a vista frontal do Book Post, notará que ainda nada é exibido em relação aos nossos campos personalizados.

Exiba seus campos personalizados do ACF

Você pode mostrar facilmente os campos personalizados no modelo do seu tema usando as funções amigáveis ​​que o plug-in ACF fornece. Dois deles são:

• get_field() – Retorna o valor de um campo específico.
• the_field() – Exibe o valor de um campo específico.

Estas são as funções mais usadas com o plugin ACF. Se você quiser ver a lista completa das funções do plugin, visite a documentação oficial para saber mais.

Portanto, para gerar seu campo personalizado no modelo de exibição de postagem, você precisará adicionar algum código, assim como fizemos ao usar os campos personalizados padrão do WordPress. Em vez disso, desta vez, usaremos as funções do plug-in ACF. Como estamos usando o tema Twenty Twenty, temos que editar o arquivo content.php na pasta twentytwenty/template-parts/ . Logo após o fechamento da seção interna, adicionamos as seguintes linhas:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Na vista frontal, agora podemos ver os campos personalizados.

No entanto, o campo de gênero não é exibido corretamente. Isso porque contém vários valores, portanto, a função get_field retorna um array. Para corrigir isso, teremos que converter o array em uma série de seus valores. Isso é fácil em PHP usando a função implode() .

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Se você deseja exibir seletivamente alguns campos, mas não todos eles em determinadas postagens, você pode fazer isso usando alguns códigos de acesso ACF. Para fazer isso, abra sua postagem e adicione um bloco Gutenberg de shortcode para cada campo e coloque um shortcode como este:

 [acf field="MY_CUSTOM_FIELD"/]

Substitua o MY_CUSTOM_FIELD pelo nome do campo e isso deve funcionar perfeitamente.

Como podemos ver, usar o plugin Advanced Custom Fields nos dá uma flexibilidade fantástica para criar campos personalizados e exibi-los onde quisermos.

Conclusão

A função Campos personalizados no WordPress é utilizada por desenvolvedores de todo o setor para fornecer melhor estrutura e legibilidade aos seus sites. É outra função de destaque do WordPress que mais uma vez ajuda a explicar por que o WordPress é tão popular. Espero que este artigo tenha fornecido as informações necessárias para adicionar seus próprios campos personalizados ao seu site. Feliz desenvolvimento!

Veja também

Tabelas de lista de administração do WordPress: adicionar filtros personalizados
Adicionando campos personalizados aos itens de menu do WordPress