Um Guia para o Custom Post Types do Word Press: Criação, Exibição e Meta Boxes

() translation by (you can also view the original English article)

O WordPress foi construído para personalização. Foi criado de tal maneira que cada uma das seções seja customizável. Nesse tutorial eu explorarei uma das mais poderosas características do WordPress conhecida como Custom Post Type e como o WordPress atingiu um novo patamar com o advento desse recurso maravilhoso.

O Que Realmente São Custom Post Types?

Suponha que você quer ter uma seção separada no seu blog para Resenhas de Filmes. Usando o Custom Post Types você pode criar um novo tipo de item, como Postagens e Páginas, que contenham um tipo diferente de dados. Ele terá um novo menu de administração, dedicado a edição de páginas, taxonomia personalizada e muitos outros utilitários necessários para uma publicação completa.

Custom Post Types são um novo conjunto de opções administrativas que aparecem junto com as postagens personalizadas padrão. tais como Postagens, Páginas, Anexos, etc. O Custom Post Type pode armazenar qualquer tipo de informação. Tem um editor dedicado, carregador de mídia e usa o estrutura de tabela existente no WordPress para um gerenciamento fácil dos dados. A maior vantagem em criar tipos de postagens personalizadas usando o API do WordPress é que ele se equipa bem com os temas e modelos existentes. O Custom Post Types também são SEO amigáveis por causa dos seus permalinks elegantes.

Porque usar Custom Post Types?

O Custom Post Types nos ajuda a manter os diferentes tipos de postagens em diferentes recipientes. Ele separa as postagens regulares das outras. Simples o suficiente!

Vamos Criar um Plugin para Custom Post Type.

Aqui nós vamos criar um plugin de postagem personalizada que vai mostrar nossas resenhas de filmes favoritas. Vamos começar.

Passo 1: Criando um Diretório de Plugin no WordPress.

Abra o seu diretório de Plugin do WordPress e crie um novo diretório chamado Resenhas-Filme.

Passo 2: Crie um arquivo PHP

Abra o diretório e crie um arquivo PHP chamado Resenhas-Filme.php.

Passo 3: Adicione Cabeçalho

Abra o arquivo e adicione o cabeçalho apropriado no topo.

<?php
/*
Plugin Name: Movie Reviews
Plugin URI: https://wp.tutsplus.com/
Description: Declares a plugin that will create a custom post type displaying movie reviews.
Version: 1.0
Author: Soumitra Chakraborty
Author URI: http://wp.tutsplus.com/
License: GPLv2
*/
?>

Passo 4: Registre a Função Customizada

Antes de fechar o comando PHP, digite a seguinte linha de código para executar a função personalizada nomeie create_movie_review durante a fase de inicialização toda vez que a página é gerada.

1	add_action( 'init', 'create_movie_review' );

Passo 5: Implementação da Função

Provê a implementação da função create_movie_review.

function create_movie_review() {
  register_post_type( 'movie_reviews',
		array(
			'labels' => array(
				'name' => 'Movie Reviews',
				'singular_name' => 'Movie Review',
				'add_new' => 'Add New',
				'add_new_item' => 'Add New Movie Review',
				'edit' => 'Edit',
				'edit_item' => 'Edit Movie Review',
				'new_item' => 'New Movie Review',
				'view' => 'View',
				'view_item' => 'View Movie Review',
				'search_items' => 'Search Movie Reviews',
				'not_found' => 'No Movie Reviews found',
				'not_found_in_trash' => 'No Movie Reviews found in Trash',
				'parent' => 'Parent Movie Review'
			),

			'public' => true,
			'menu_position' => 15,
			'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ),
			'taxonomies' => array( '' ),
			'menu_icon' => plugins_url( 'images/image.png', __FILE__ ),
			'has_archive' => true
		)
	);
}

A função register_post_type faz a maior parte do trabalho para nós. Assim que é chamada ela prepara o ambiente do WordPress para um novo tipo de postagem personalizada incluindo diferentes seções no administrador. Essa função requer dois argumentos: o primeiro é um name único do tipo de postagem personalizada e o segundo é uma ordem demonstrando as propriedades o novo tipo de postagem personalizada. Aqui está outra matriz contendo os diferentes rótulos, que indicam os caracteres de texto a serem mostrados nas diferentes seções do tipo de postagem personalizada, ex. 'name' mostra o tipo de postagem personalizada nome no painel, 'edit' e 'view' são mostrados nos botões editar e exibir respectivamente. Eu acho que o restante é bem autoexplicativo.

Nos próximos argumentos:

'public' => true determina a visibilidade do tipo de postagem personalizada tanto no painel administrador como no front end.
'menu_position' => 15 determina a posição do tipo de postagem personalizada.
'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ) determina as características do tipo de postagem personalizada que serão mostradas.
'taxonomies' => array( '' ) cria uma taxonomia personalizada. Aqui não está definida.
'menu_icon' => plugins_url( 'images/image.png', __FILE__ ) mostra o ícone do menu administrador
'has_archive' => true habilita o arquivamento do tipo de postagem personalizada.

Por favor visite a página do Codex do WordPress register_post_type para mais detalhes dos diferentes argumentos usados em tipos de postagem personalizada.

Passo 6: Ícone para Tipo de Postagem Customizada

Salve uma imagem de ícone de 16x16 pixel na sua pasta de plugin atual. Isso é necessário para o ícone do tipo de postagem personalizada no painel de controle.

Passo 7: Ativando o Plugin

Ative o plugin e é isso, você tem um novo tipo de postagem personalizada que tem um editor de texto, publicação e controle de imagem em destaque, controle de comentários e editor de campo personalizado.

Passo 8: Adicionando um Item Novo

Clique na opção Add New para ir ao editor tipo de postagem personalizada. Fornece um título do filme, uma resenha e configura a imagem em destaque.

Passo 9: Publicar

Publique o post e clique no Ver Resenha de Filme para ver a resenha de filme que criou no navegador.

Criando Campo de Meta Box para o Custom Post Types

O mecanismo de meta box usa a ajuda do sistema de meta box construído dentro do WordPress e ajuda a adicionar campos necessários especificamente para os tipos de postagens personalizadas, sem precisar de campos de personalização padrões no editor.

Passo 1: Registrando a Função Personalizada

Abrir o arquivo Movie-Reviews.php e acrescenta o seguinte código antes da tag de fim do PHP. Isso registra a função a ser chamada quando a interface de administrador do WordPress é visitada.

1	add_action( 'admin_init', 'my_admin' );

Passo 2: Implementação da Função Customizada

Adicione uma implementação da função my_admin que registra um meta box e associa com o tipo de postagem personalizada movie_reviews.

function my_admin() {
	add_meta_box( 'movie_review_meta_box',
		'Movie Review Details',
		'display_movie_review_meta_box',
		'movie_reviews', 'normal', 'high'
	);
}

Aqui add_meta_box é a função usada para adicionar os meta boxes aos tipos de postagem personalizada. Explicação dos atributos dados:

movie_review_meta_box é um atribituto HTML id obrigatório.
Movie Review Details é o texto visível no cabeçalho da seção meta box.
display_movie_review_meta_box é o callback que processa o conteúdo da meta box.
movie_reviews é o nome do tipo de postagem personalizada onde a meta box será exibida.
normal define a parte da página onde a seção de edição de tela será mostrada.
high define a prioridade dentro do contexto onde as caixas devem mostrar.

Passo 3: Implementação da Função `display_movie_review_meta_box`

<?php
function display_movie_review_meta_box( $movie_review ) {
	// Retrieve current name of the Director and Movie Rating based on review ID
	$movie_director = esc_html( get_post_meta( $movie_review->ID, 'movie_director', true ) );
	$movie_rating = intval( get_post_meta( $movie_review->ID, 'movie_rating', true ) );
	?>
	<table>
		<tr>
			<td style="width: 100%">Movie Director</td>
			<td><input type="text" size="80" name="movie_review_director_name" value="<?php echo $movie_director; ?>" /></td>
		</tr>
		<tr>
			<td style="width: 150px">Movie Rating</td>
			<td>
				<select style="width: 100px" name="movie_review_rating">
				<?php
				// Generate all items of drop-down list
				for ( $rating = 5; $rating >= 1; $rating -- ) {
				?>
					<option value="<?php echo $rating; ?>" <?php echo selected( $rating, $movie_rating ); ?>>
					<?php echo $rating; ?> stars <?php } ?>
				</select>
			</td>
		</tr>
	</table>
	<?php
}
?>

Esse código processa o conteúdo da meta box. Aqui nós usamos uma variável de objeto que contém a informação de cada uma das resenhas de filme exibidas no editor. Usando esse objeto nós recuperamos a post ID e usamos isso para perguntar ao banco de dados e conseguir o nome do Diretório associado e a Classificação que por sua vez processa os campos na tela. Quando uma nova entrada é adicionada o get_post_meta retorna uma string vazia que resulta em mostrar campos vazios na meta box.

Passo 4: Registrando uma Função Postagem Salva

1	add_action( 'save_post', 'add_movie_review_fields', 10, 2 );

Essa função é chamada quando a postagem é salva na base de dados.

Passo 5: Implementação da Função add_movie_review_fields

function add_movie_review_fields( $movie_review_id, $movie_review ) {
	// Check post type for movie reviews
	if ( $movie_review->post_type == 'movie_reviews' ) {
		// Store data in post meta table if present in post data
		if ( isset( $_POST['movie_review_director_name'] ) && $_POST['movie_review_director_name'] != '' ) {
			update_post_meta( $movie_review_id, 'movie_director', $_POST['movie_review_director_name'] );
		}
		if ( isset( $_POST['movie_review_rating'] ) && $_POST['movie_review_rating'] != '' ) {
			update_post_meta( $movie_review_id, 'movie_rating', $_POST['movie_review_rating'] );
		}
	}
}

Essa função é executada quando as postagens são salvas ou apagadas a partir do painel administrador. Aqui, depois de checar o tipo de dado de postagem recebido, se é um Custom Post Type então ele verifica de novo para ver se os elementos meta box estão com valores atribuídos e finalmente armazena os valores nesses campos.

Passo 6: Desabilitando a Opção Campos Personalizados Padrão

Quando criamos o tipo de postagem personalizada, nós definimos a função create_movie_review. Remover o elemento custom-fields da ordem no supports porque ele não é mais necessário. Agora, se você salvar o arquivo e abrir o editor Resenha de Filmes você observará que dois campos na meta box chamados Autor do Filme e Classificação do Filme. De forma semelhante você pode acrescentar outros elementos também.

Criando um Modelo Personalizado Dedicado para o Custom Post Types

A maneira apropriada para exibir os dados do tipo de postagem personalizada é usando um modelo customizado para cada tipo de postagem personalizada. Aqui nós vamos criar um modelo que exibe todas as Resenhas de Filme que entraram usando o Custom Post Type Resenha de Filme.

Passo 1: Registre a Função para Forçar o Modelo Dedicado

Abra o arquivo Movie-Reviews.php e acrescente o seguinte código antes da tag final do PHP. Isso registra a função a ser chamada quando a interface de administrador do WordPress é visitada.

1	add_filter( 'template_include', 'include_template_function', 1 );

Passo 2: Implementação da função.

function include_template_function( $template_path ) {
	if ( get_post_type() == 'movie_reviews' ) {
		if ( is_single() ) {
			// checks if the file exists in the theme first,
			// otherwise serve the file from the plugin
			if ( $theme_file = locate_template( array ( 'single-movie_reviews.php' ) ) ) {
				$template_path = $theme_file;
			} else {
				$template_path = plugin_dir_path( __FILE__ ) . '/single-movie_reviews.php';
			}
		}
	}
	return $template_path;
}

Aqui o código procura por um modelo como single-(nome do tipo de postagem).php no diretório tema atual. Se ele não é encontrado então ele procura pelo modelo dentro diretório do plugin, que nós fornecemos como parte do plugin. O gancho template_include foi usado para alterar o comportamento padrão e reforçar um modelo específico.

Passo 3: Criando o Arquivo da Página Única de Modelo

Após salvar o arquivo de plugin aberto anteriormente, crie outro arquivo PHP com nome single-movie_reviews.php e coloque o seguinte código nele.

<?php
 /*Template Name: New Template
 */

get_header(); ?>
<div id="primary">
	<div id="content" role="main">
	<?php
	$mypost = array( 'post_type' => 'movie_reviews', );
	$loop = new WP_Query( $mypost );
	?>
	<?php while ( $loop->have_posts() ) : $loop->the_post();?>
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<header class="entry-header">

				<!-- Display featured image in right-aligned floating div -->
				<div style="float: right; margin: 10px">
					<?php the_post_thumbnail( array( 100, 100 ) ); ?>
				</div>

				<!-- Display Title and Author Name -->
				<strong>Title: </strong><?php the_title(); ?><br />
				<strong>Director: </strong>
				<?php echo esc_html( get_post_meta( get_the_ID(), 'movie_director', true ) ); ?>
				<br />

				<!-- Display yellow stars based on rating -->
				<strong>Rating: </strong>
				<?php
				$nb_stars = intval( get_post_meta( get_the_ID(), 'movie_rating', true ) );
				for ( $star_counter = 1; $star_counter <= 5; $star_counter++ ) {
					if ( $star_counter <= $nb_stars ) {
						echo '<img src="' . plugins_url( 'Movie-Reviews/images/icon.png' ) . '" />';
					} else {
						echo '<img src="' . plugins_url( 'Movie-Reviews/images/grey.png' ). '" />';
					}
				}
				?>
			</header>

			<!-- Display movie review contents -->
			<div class="entry-content"><?php the_content(); ?></div>
		</article>

	<?php endwhile; ?>
	</div>
</div>
<?php wp_reset_query(); ?>
<?php get_footer(); ?>

Nós criamos uma página básica de modelo usando o loop. A função query_posts recupera os elementos do tipo de postagem personalizada e os exibe usando o loop. É claro que é apenas um loop básico e você pode brincar com ele conforme quiser. Você pode usar também os estilos CSS adequados para formatar os elementos adequadamente.

Nota: Você precisa criar uma nova página a partir do painel de controle usando o modelo recém criado.

Passo 4: Imagens

Você vai precisar salvar duas imagens de ícones de estrela de 32x32 pixel na sua pasta plugin. Dê o nome de icon.png e grey.png respectivamente. Isso é tudo, agora as resenhas de filmes são mostradas em uma única página filtradas por data.

No meu próximo tutorial eu vou abranger mais recursos do Custom Post Types como criando um página arquivada, criando taxonomias customizadas, personalizando colunas, etc. Sinta-se livre para fornecer suas valiosas sugestões.