No WordPress existem milhares de maneiras de expandir a funcionalidade padrão do CMS, tais como Custom Fields (Campos personalizados) ou a utilização de Post Meta.

Os Custom Fields são mais maleáveis e aparecem na área de criar artigos. Seu problema está justamente na facilidade de adicionar conteúdo, pois caso o usuário não entenda o que fazer com eles, seus campos se tornam inúteis.

Custom Fields (Campos Personalizados)

Custom Fields (Campos Personalizados)

Por outro lado, Post Meta (metadados do artigo) não vêm embutidos no WordPress por padrão, algum desenvolvedor deverá criar seu conteúdo. Sendo assim, temos maior controle sobre o que o usuário pode (ou não) adicionar.

Juntamente com os campos de Post Meta, devemos criar também uma caixa chamada de Meta Box, que irá aparecer abaixo dos campos do post contendo os campos para que o usuário possa preencher. Normalmente é um formulário simples com quantos campos você precisar para atingir um objetivo maior no seu tema.

Meta Box em tema WordPress

Meta Box em tema WordPress

Além disso, o usuário pode optar por não ver a Meta Box do seu tema caso não queira. Para isso, basta clicar em “Opções de tela” e desmarcar a caixa de checkbox referente.

Opções de tela do WordPress

Opções de tela do WordPress

Com Meta Box e Post Meta você pode fazer praticamente tudo o que vier em sua mente e que esteja relacionado a um artigo em questão. Por exemplo:

  • Adicionar CSS específico para aquele artigo;
  • Criar um modelo de página idêntico ao modelo de páginas do WordPress;
  • Exibir texto adicional;
  • Configurar conteúdo para membros logados;
  • Seguir o que seu coração ou imaginação mandarem e adicionar o que quiser…

Neste artigo você vai aprender a criar uma Meta Box em tema WordPress utilizando o arquivo functions.php (isso também pode ser feito por um plugin específico).

Mas primeiro…

Antes de continuar a ler este artigo, saiba que ele faz parte de uma série de artigos chamada “Como criar um tema WordPress“, portanto, é interessante que você leia primeiro os artigos anteriores para entender melhor sobre o que estamos falando:

  1. Estrutura de arquivos de um tema WordPress
  2. Arquivo functions.php de um tema WordPress
  3. PHP, HTML e CSS em temas WordPress
  4. Paginação em temas WordPress
  5. Formulário de pesquisa para temas WordPress
  6. Criando o template de comentários WordPress
  7. Menu em temas WordPress
  8. Page templates no WordPress (Modelos de página)
  9. Custom Post Types no WordPress

Estamos criando um tema simples para exibir tudo o que estamos demonstrando nessa série de artigos. Na maioria deles você terá uma opção para baixar o tema (chamado de Tutsup Básico) para entender melhor o que estamos descrevendo.

A proposta

Como nossa Meta Box terá que fazer algo útil (não faz sentido adicionar algo que não faça nada), vou criar uma função no tema que cria conteúdo apenas para membros, ou seja, apenas para usuários logados.

Também vou deixar a possibilidade do usuário adicionar uma mensagem adicional no artigo, apenas para exemplificar como adicionar vários campos.

A proposta é adicionar um campo onde o usuário possa marcar apenas uma opção para que o conteúdo se torne “privado” (apenas para usuários logados).

Meta Box em tema WordPress

Meta Box em tema WordPress

Registrando a Meta Box

Para registrar uma Meta Box, precisamos utilizar a função add_meta_box do WordPress.

Veja:

// Cria a meta_box
function tutsup_metabox() {
	
	// Tipos de post para a metabox
	$screens = array( 'post', 'page', 'tutsup_filmes' );

	foreach ( $screens as $screen ) {

		add_meta_box(
			'tutsup_meta_box',          // ID da Meta Box 
			'Configure seu conteúdo',   // Título
			'tutsup_metabox_callback',  // Função de callback
			$screen,                    // Local onde ela vai aparecer
			'normal',                   // Contexto
			'high'                      // Prioridade
		);
		
	} // foreach
	
} // Cria a meta_box
add_action( 'add_meta_boxes', 'tutsup_metabox', 1 );

Nela você precisa enviar os campos descritos nos comentários do código acima, além de uma função de callback, que será onde criaremos o HTML da nossa Meta Box.

Função de callback da Meta Box

Nossa função de callback da Meta Box terá o seguinte:

// Essa é a função que vai exibir os dados para o usuário
function tutsup_metabox_callback( $post ) {

	// Adiciona um campo nonce para verificação posterior
	wp_nonce_field( 'tutsup_custom_metabox', 'tutsup_custom_metabox_nonce' );

	// Configura os campos
	$_tp_post_privado = get_post_meta( $post->ID, '_tp_post_privado', true );
	$_tp_post_privado ? $privado_checked = 'checked' : $privado_checked = null;
	
	$_tp_mensagem = get_post_meta( $post->ID, '_tp_mensagem', true );

	echo '<input ' . $privado_checked . ' type="checkbox" name="_tp_post_privado" value="Sim" /> Conteúdo para membros (Usuários logados)<br><br>';
	
	echo 'Exibir mensagem:<br>';
	echo '<textarea name="_tp_mensagem" class="widefat">' . esc_html( $_tp_mensagem ) . '</textarea>';
}

Pronto, nesse momento você já deverá visualizar sua Meta Box nos posts, páginas e nosso Custom Post (tutsup_filmes).

Validando os campos e salvando os dados

Agora é necessário validar os campos para ver se tudo foi enviado conforme planejamos e salvar os dados na base de dados.

Podemos fazer isso com a seguinte função:

function tutsup_save_custom_metabox_data( $post_id ) {

	// Verifica o campo nonce
	if ( ! isset( $_POST['tutsup_custom_metabox_nonce'] ) ) {
		return;
	}

	// Verifica se o campo nonce é válido
	if ( ! wp_verify_nonce( $_POST['tutsup_custom_metabox_nonce'], 'tutsup_custom_metabox' ) ) {
		return;
	}

	// Se o formulário ainda não foi enviado (estiver fazendo autosave) 
	// não faremos nada
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	// Verifica as permissões do usuário (mínimo: editar post).
	if ( isset( $_POST['post_type'] ) && 'contato' == $_POST['post_type'] ) {

		if ( ! current_user_can( 'edit_post', $post_id ) ) {
			return;
		}
	}

	/* Perfeito, agora vamos aos campos. */
	$_tp_post_privado = isset( $_POST['_tp_post_privado'] ) ? $_POST['_tp_post_privado'] : null;
	$_tp_post_privado = sanitize_text_field( $_tp_post_privado );
	
	$_tp_mensagem = isset( $_POST['_tp_mensagem'] ) ? $_POST['_tp_mensagem'] : null;

	// Atualiza os dados no BD
	update_post_meta( $post_id, '_tp_post_privado', $_tp_post_privado );
	update_post_meta( $post_id, '_tp_mensagem', $_tp_mensagem );
}
add_action( 'save_post', 'tutsup_save_custom_metabox_data' );

Pronto, agora temos nossos dados salvos na base de dados.

Alterando o tema

Como estamos criando uma parte da função que cria conteúdo apenas para membros, precisaremos alterar um pouco nosso tema.

Optei por fazer a alteração apenas no meu loop principal (loop-index.php), veja:

<?php
if ( is_single() ) {
	
	// Post meta
	$metadados = get_post_meta( $post->ID );
	
	// Configura o conteúdo para membros
	if ( isset( $metadados['_tp_post_privado'] ) && isset( $metadados['_tp_post_privado'][0] ) ) {
	
		// Verifica se _tp_post_privado é igual a sim
		if ( $metadados['_tp_post_privado'][0] == 'Sim' ) {
		
			// Verifica se o usuário está logado
			if ( ! is_user_logged_in() ) {
			
				$login = '<a href="' . wp_login_url() . '">login</a>';
				$registre_se = '<a href="' . wp_registration_url() . '">registre-se</a>';
				
				echo "Conteúdo exclusivo para usuários. Faça $login ou $registre_se para acessar.";
				
				// Argumentos do formulário de login
				$login_args = array(
						'echo'           => true,
						'redirect'       => site_url( $_SERVER['REQUEST_URI'] ), 
						'form_id'        => 'loginform',
						'label_username' => __( 'Username' ),
						'label_password' => __( 'Password' ),
						'label_remember' => __( 'Remember Me' ),
						'label_log_in'   => __( 'Log In' ),
						'id_username'    => 'user_login',
						'id_password'    => 'user_pass',
						'id_remember'    => 'rememberme',
						'id_submit'      => 'wp-submit',
						'remember'       => true,
						'value_username' => NULL,
						'value_remember' => false
				);
				
				// Mostra o formulário de login
				wp_login_form( $login_args );
				
				// Retorna para não exibir nada do post
				return;
				
			} // Verifica se o usuário está logado
			
		} // Verifica se _tp_post_privado é igual a sim
		
	} // Configura o conteúdo para membros
	
	// Configura a mensagem (se existir)
	if ( isset( $metadados['_tp_mensagem'] ) && isset( $metadados['_tp_mensagem'][0] ) ) {
	
		// Verifica se _tp_mensagem tem algum valor
		if ( ! empty( $metadados['_tp_mensagem'][0] ) ) {
		
			echo '<p>' . $metadados['_tp_mensagem'][0] . '</p>';
			
		} // Verifica se _tp_mensagem tem algum valor
		
	} // Configura a mensagem (se existir)
	
} // is_single()
?>

No exemplo acima, estou apenas verificando se os dados de Post Meta estão configurados, se eles têm o valor que preciso e criando a ação.

Por exemplo, se o campo para conteúdo privado estiver marcado e tiver o valor “Sim”, não exibimos o conteúdo se o usuário não estiver logado. Ao invés disso, exibimos apenas uma mensagem e os campos de usuário e senha.

Também verificamos se a mensagem está configurada; se sim, exibimos seu conteúdo.

Download

Caso queira baixar o código completo de nosso tema experimental até o momento, segue o link para download:

Descompacte a pasta dentro de wp-content/themes.

Concluindo

Meta Boxes e Post Meta são excelentes maneiras de salvar conteúdo no WordPress para alterar a estrutura padrão do CMS, utilize com sabedoria.

Não deixe de seguir os outros tutoriais sobre “Criar temas WordPress“.

Em caso de dúvidas, pergunte nos comentários.