Aprenda criar campos personalizados no WordPress

O WordPress possui uma forma de adicionar informações extras em publicações. Dessa forma é possível incrementar suas postagens desde dados complementares quanto ações mais complexas.

Esses campos são chamado Campos Personalizados ou Custom Fields.

Você consegue criar campos personalizados direto no painel do WordPress. Basta ir em Posts > Adicionar Novo. E no final da página você terá uma tela assim:

Caso ela não esteja aparecendo, basta ir na parte superior a direita, e clicar em Opções de Tela. E depois marcar a opção Campos personalizados.

Com a opção do campo personalizado aparecendo, você terá o campo Nome (chave), e o Valor. Basta definir um nome e o seu valor correspondente e depois clicar em Adicionar campo personalizado.

Dessa forma você pode criar quantos campos personalizados quiser.

Quando for criar um novo post, existirá a opção da chave que você criou. Você poderá selecionar e adicionar um valor associado a ele.

Agora você precisa exibir essa informação nas suas publicações. Para isso você precisará acessar o arquivo que deseja exibir e dentro do Loop adicionar a função the_meta();

Vamos usar o código do tema twentyseventeen, mais precisamente no arquivo single.php

wp-content/themes/twentyseventeen/single.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

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

			<?php
			/* Start the Loop */
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/post/content', get_post_format() );
				
				the_meta();

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

				the_post_navigation( array(
					'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
					'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
				) );

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

• Veja que na linha 25 está a função the_meta();

Veja como é exibido:

O WordPress gerar uma lista não ordenada com todos os campos personalizado no post, onde você adicionar a função the_meta().

<ul class='post-meta'>
           <li><span class='post-meta-key'>Fonte:</span> Blog MX Cursos</li>
</ul>

Campo Personalizado Avançado

Vimos como criar um campo personalizado pelo painel nativamente e atribuir dinamicamente a um post. Já para informações complementares o processo é bem interessante. Muitas vezes você deseja personalizar mais a criação desses campos personalizados, principalmente se você precisa organizar a forma de publicar informações extras e precisa exibir em um momento especifico.

Podemos então criar essa opção para se exibido pelo tema e dessa forma exibir onde desejamos.

Vamos continuar utilizando o tema twentyseventeen, que vem por padrão no WordPress.

Nesse tema, existe uma pasta chamada inc. Iremos criar um arquivo nessa pasta com nome de custom-fields.php. 

wp-content/themes/twentyseventeen/inc/custom-fields.php

Depois do arquivo criado, vamos incluir no arquivo functions.php no tema. Iremos adicionar no final do arquivo:

require get_parent_theme_file_path( '/inc/custom-fields.php' );

Usamos a função get_parent_the_file_path para retornar o caminho do tema pai. Essa função é útil se você deseja trabalhar com temas filhos. Aliás, temos aqui no blog o artigo Criando e customizando Temas Filhos caso queira aprender mais sobre esse assunto.

No arquivo custom-fields.php, criaremos uma função que será responsável por exibir um campo de formulário na criação/edição do Post.

No nosso exemplo vamos colocar um campo para inserir o código do vídeo do youtube

<?php 

function create_form_custom_field($post) {
    
    $code_youtube = get_post_meta($post->ID, 'code_youtube', true);

    $html  = '<label for="code_youtube">Código Youtube: </label>';
    $html .= '<input type="text" name="code_youtube" value="'.$code_youtube.'" />';

    echo $html;
}

• Na linha 3, definimos um nome da função create_form_custom_field e como parâmetro irá receber a variável $post;
• Na linha 5 recuperamos o valor que está no campo personalizado. Para isso usamos a função get_post_meta . Ela recebe 3 parâmetros: O ID do post, O nome do campo, A forma que irá retornar. Se definir como true, retornará uma string. Se for false, retornará um array. Você irá usar true se existir apenas esse campo personalizado no post, mas se você precisa utilizar esse campo personalizado no post várias vezes, como um campo para autor e o post tem vários autores, nesse caso você insere como false, pois desta forma ele retornará todos os autores num array;
• Na linha 7 e 8 é criado uma variável para guardar o html com o campo de formulário que será exibido. Veja que no  campo input, tem o valor e é atribuído o valor que retorna do campo personalizado;
• Na linha 10 usamos o echo para exibir o conteúdo da variável.

Agora precisamos informar ao WordPress que queremos exibir essa informação do campo de edição do Post. Para isso precisamos definir o Meta Box, que será o box que irá conter os valores a serem exibidos para realizar a criação/edição no Post.

<?php 

function create_form_custom_field($post) {
    
    $code_youtube = get_post_meta($post->ID, 'code_youtube', true);

    $html  = '<label for="">Código Youtube: </label>';
    $html .= '<input type="text" name="code_youtube" value="'.$code_youtube.'" />';

    echo $html;
}

function add_custom_meta_box() {
    add_meta_box(
            'custom-field-code',
            'Configuração Extra',
            'create_form_custom_field',
            'post'
        );
}

• Na linha 13 criamos a função chamada add_custom_meta_box;
• Na linha 14 usamos a função add_meta_box; Ela recebe 7 parâmetros, os 4 últimos são opcionais. No nosso caso, vamos usar apenas 4 parâmetros, os outros deixaremos por padrão;
• Na linha 15 definimos o identificador do meta box que estamos criando;
• Na linha 16 definimos o título que será exibido nesse meta box;
• Na linha 17 definimos a função, no nosso caso add_custom_meta_box que será responsável por exibir os campos que serão exibidos;
• Na linha 18 definimos onde será exibido, no caso será no Post. Se você criar tipos personalizados poderá definir exibir nesses lugares. Temos um artigo abordando esse assunto: Como criar Custom Types no WordPress.

Definimos agora o meta box e precisamos informar isso ao WordPress para que ele seja exibido.

Para isso iremos usar action add_meta_boxes. Caso queira saber mais sobre actions (ganchos) WordPress, leia esse artigo: Entendendo e utilizando as actions (ganchos) no WordPress.

<?php 

function create_form_custom_field($post) {
    
    $code_youtube = get_post_meta($post->ID, 'code_youtube', true);

    $html  = '<label for="">Código Youtube: </label>';
    $html .= '<input type="text" name="code_youtube" value="'.$code_youtube.'" />';

    echo $html;
}

function add_custom_meta_box() {
    add_meta_box(
            'custom-field-code',
            'Configuração Extra',
            'create_form_custom_field',
            'post'
        );
}

add_action( 'add_meta_boxes', 'add_custom_meta_box');

• Na linha 22 usamos a função add_action. Utilizamos ainda add_meta_boxes, atribuindo a função que criamos, no caso add_custom_meta_box.

Pronto! Agora se você acessar no admin a parte de criar ou editar um post, será exibido o campo que criamos no final da página.

Salvando os Campos Personalizados

Já criamos como deve ser exibido o campo, criamos o metabox e informamos ao WordPress para exibir o campo que criamos.

Agora será necessário salvar esse valor que criamos para ser exibido no post.

<?php 

function create_form_custom_field($post) {
    
    $code_youtube = get_post_meta($post->ID, 'code_youtube', true);

    $html  = '<label for="">Código Youtube: </label>';
    $html .= '<input type="text" name="code_youtube" value="'.$code_youtube.'" />';

    echo $html;
}

function add_custom_meta_box() {
    add_meta_box(
            'custom-field-code',
            'Configuração Extra',
            'create_form_custom_field',
            'post'
        );
}

add_action( 'add_meta_boxes', 'add_custom_meta_box');

function save_form_custom_field($post_id) {

    if( isset($_POST['code_youtube'] ) ) {
        update_post_meta( $post_id, 'code_youtube', sanitize_text_field( $_POST['code_youtube'] ) );
    }
}

• Na linha 24 criamos uma função chamada save_form_custom_field e definimos um parâmetro chamado $post_id;
• Na linha 26 verificamos se existe o campo code_youtube que criamos.
• Na linha 27 usamos a função update_post_meta do WordPress para salvar a informação. Ele recebe 3 parâmetros: o primeiro o ID do post, segundo o nome da campo (chave) que será salva e o terceiro o valor que será salvo.

Agora precisamos informar ao WordPress que queremos usar essa função que criamos para salvar a informação quando for salvo o post.

Para isso usaremos add_action com chave save_post

<?php 

function create_form_custom_field($post) {
    
    $code_youtube = get_post_meta($post->ID, 'code_youtube', true);

    $html  = '<label for="">Código Youtube: </label>';
    $html .= '<input type="text" name="code_youtube" value="'.$code_youtube.'" />';

    echo $html;
}

function add_custom_meta_box() {
    add_meta_box(
            'custom-field-code',
            'Configuração Extra',
            'create_form_custom_field',
            'post'
        );
}

add_action( 'add_meta_boxes', 'add_custom_meta_box');

function save_form_custom_field($post_id) {

    if( isset($_POST['code_youtube'] ) ) {
        update_post_meta( $post_id, 'code_youtube', sanitize_text_field( $_POST['code_youtube'] ) );
    }
}

add_action( 'save_post', 'save_form_custom_field');

• Na linha 31 usamos a função add_action usando save_post e atribuímos a função que criamos, no caso save_form_custom_field.

Pronto! Agora os dados serão salvos ao salvar seus posts.

Agora precisamos exibir essa informação no post.

Acessaremos o arquivo single.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

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

			<?php
			/* Start the Loop */
			while ( have_posts() ) : the_post();
			?>
			
			<?php if($code_youtube = get_post_meta(get_the_ID(), 'code_youtube', true)) :  ?>
				<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $code_youtube; ?>" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
			<?php endif;?>

			<?php
				get_template_part( 'template-parts/post/content', get_post_format() );
				


				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

				the_post_navigation( array(
					'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
					'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
				) );

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

• Na linha 24 verificamos se existe o valor usando a função get_post_meta e já atribuindo a variável. Caso não exista, a função get_post_meta retorna um valor nulo;
• Na linha 25 exibimos o player do youtube, colocando apenas o a variável $code_youtube que foi definido anteriormente.

Pronto!

Dessa forma você pode personalizar seus posts de acordo com suas necessidades. Você pode criar por exemplo um site de imobiliária e adicionar as opções do imóvel com campos personalizados, como quantidade quartos, etc.

Gostou do post? Tem dúvidas? Deixe seu comentário abaixo e compartilhe este post.