Una Guia para Custom Port Types de WordPress: Creación, Muestra y Meta Boxes

WordPress está construido para personalización. Fue creado de tal forma que cada una de las secciones es personalizable. En este tutorial vamos a explorar una de las características mas poderosas de WordPress conocida como Custom Post Types y cómo WordPress alcanzó una nueva altura con la llegada de esta genial característica.

¿Qué son Realmente los Custom Post Types?

Supón que quieres que tu blog tenga una sección separada para reseñas de películas. Usando Custom Post Types puedes crear un nuevo tipo de elemento como Posts y Páginas, los cuales contenerán un diferente set de datos. Tendrá un nuevo menu de administración, páginas de dedicadas de edición, taxonomías personalizadas y muchas utilidades mas requeridas para una completa publicación.

Custom Post Types son un nuevo conjunto de opciones administrativas apareciendo junto con los tipos predeterminados de posts tales como Posts, Páginas, Adjuntos, etc. Un Custom Port Type puede almacenar cualquier tipo de información. Tiene un editor dedicado, cargador de medios y usa la existente estructura de tabla de WordPress para facilidad de manejo de datos. La principal ventaja de crear custom post types usando la API de WordPress es que se equipa bien a si mismo con temas existentes y plantillas. Los Custom Post Types son también amigables con el SEO por sus útiles enlaces permanentes.

¿Por qué usar Custom Post Types?

Custom Post Types nos ayudan a mantener diferentes tipos de posts en diferentes cubetas. Separa nuestros post regulares de otros. ¡Bastante simple!

Vamos a Crear un Plugin Custom Post Type

Aquí podremos crear un plugin de custom post type que mostrará reseñas de películas favoritas. Vamos a comenzar.

Paso 1: Crea el Directorio para el Plugin de WordPress

Abre tu directorio de plugins de WordPress y crea un nuevo directorio llamado Movie-Reviews.

Paso 2: Crea el Archivo PHP

Abre el directorio y crea un archivo PHP llamado Movie-Reviews.php.

Paso 3: Agregar Cabecera

Abre el archivo y agrega la cabecera apropiada en la parte de arriba.

1

2

<?php

3

/*

4

Plugin Name: Movie Reviews

5

Plugin URI: https://wp.tutsplus.com/

6

Description: Declares a plugin that will create a custom post type displaying movie reviews.

7

Version: 1.0

8

Author: Soumitra Chakraborty

9

Author URI: http://wp.tutsplus.com/

10

License: GPLv2

11

*/

12

?>

Paso 4: Función Personalizada de Registro

Antes de cerrar el comando PHP, escribe la siguiente linea de código para ejecutar la función personalizada llamada create_movie_review durante la fase de inicialización cada vez que la página es generada.

1

2

add_action( 'init', 'create_movie_review' );

Paso 5: Implementación de la Función

Provee una implementación de la función create_movie_review.

1

2

function create_movie_review() {

3

  register_post_type( 'movie_reviews',

4

		array(

5

			'labels' => array(

6

				'name' => 'Movie Reviews',

7

				'singular_name' => 'Movie Review',

8

				'add_new' => 'Add New',

9

				'add_new_item' => 'Add New Movie Review',

10

				'edit' => 'Edit',

11

				'edit_item' => 'Edit Movie Review',

12

				'new_item' => 'New Movie Review',

13

				'view' => 'View',

14

				'view_item' => 'View Movie Review',

15

				'search_items' => 'Search Movie Reviews',

16

				'not_found' => 'No Movie Reviews found',

17

				'not_found_in_trash' => 'No Movie Reviews found in Trash',

18

				'parent' => 'Parent Movie Review'

19

			),

20

21

			'public' => true,

22

			'menu_position' => 15,

23

			'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ),

24

			'taxonomies' => array( '' ),

25

			'menu_icon' => plugins_url( 'images/image.png', __FILE__ ),

26

			'has_archive' => true

27

		)

28

	);

29

}

La función register_post_type hace la mayor parte del trabajo para nosotros. Tan pronto como es llamada prepara el entorno WordPress para un nuevo custom post type incluyendo las diferentes secciones en el panel de administración. Esta función toma dos argumentos: el primero es un name único del custom post type y el segundo un array demostrando las propiedades del nuevo custom post type. Aquí está otro array conteniendo las diferentes etiquetas, las cuales indican las cadenas de texto a ser mostradas en las diferentes secciones del custom post type, por ejemplo, 'name' muestra el nombre del custom post type en el tablero, 'edit' y 'view' son mostrados en los botones Edit y View respectivamente. Creo que el resto es bastante auto-explicativo.

En los siguientes argumentos:

• 'public' => true determina la visibilidad del custom post type para el panel de administración y front-end.
• 'menu_position' => 15 determina la posición del menu del custom post type.
• 'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ) determina las características del custom post type las cuales serán mostradas.
• 'taxonomies' => array( '' ) crea taxonomías personalizadas. Aquí no está definido.
• 'menu_icon' => plugins_url( 'images/image.png', __FILE__ ) muestra el icono del menu de administración.
• 'has_archive' => true habilita el archivado del custom post type.

Por favor visita la página WordPress Codex register_post_type para mas detalles sobre los diferentes argumentos usados en custom post types.

Paso 6: Icono para Custom Post Type

Guarda una imagen icono de 16x16 pixeles en tu actual carpeta del plugin. Esto es requerido para el icono del custom post type en el panel.

Paso 7: Activa el Plugin

Activa el plugin y eso estado, ahora tienes un nuevo custom port type el cual tiene un editor de texto, controles de publicación y de imagen principal, control de comentario y el editor de campos personalizados.

Paso 8: Agrega un Nuevo Elemento

Clic en la opción Add New para ir al editor del custom post type. Provee un titulo de película, una reseña e imagen principal.

Paso 9: Publica

Haz la publicación y haz clic en View Movie Review para ver la reseña de la película creada en el navegador.

Creando Campos Meta Box para Custom Post Types

El mecanismo meta box usa la ayuda incluida en el sistema meta box de WordPress y ayuda a agregar campos requeridos específicamente para los custom post types, sin requerir los campos personalizados predeterminados en el editor.

Paso 1: Registrando la Función Personalizada

Abre el archivo Movie-Reviews.php y agrega el siguiente código antes de cerrar la etiqueta de PHP. Esto registra una función a ser llamada cuando la interfaz de administración de WordPress es visitada.

1

2

add_action( 'admin_init', 'my_admin' );

Paso 2: implementación de la Función Personalizada

Agrega una implementación a la función my_admin la cual registra una meta box y la asocia con el custom post type movie_reviews.

1

2

function my_admin() {

3

	add_meta_box( 'movie_review_meta_box',

4

		'Movie Review Details',

5

		'display_movie_review_meta_box',

6

		'movie_reviews', 'normal', 'high'

7

	);

8

}

Aquí add_meta_box es la función usada para agregar meta boxes a custom post types. Explicación de los atributos dados:

• movie_review_meta_box es el atributo id requerido en HTML
• Movie Review Details es el texto visible en la cabecera de la sección meta box
• display_movie_review_meta_box es el callback que renderiza los contenidos de la meta box
• movie_reviews es el nombre del custom post type donde la meta box es mostrada
• normal define la parte de la página donde la sección de la pantalla de editar debería de ser mostrada
• high define la prioridad dentro del contexto donde las cajas deberían mostrarse

Paso 3: Implementación de la función display_movie_review_meta_box

1

2

<?php

3

function display_movie_review_meta_box( $movie_review ) {

4

	// Retrieve current name of the Director and Movie Rating based on review ID

5

	$movie_director = esc_html( get_post_meta( $movie_review->ID, 'movie_director', true ) );

6

	$movie_rating = intval( get_post_meta( $movie_review->ID, 'movie_rating', true ) );

7

	?>

8

	<table>

9

		<tr>

10

			<td style="width: 100%">Movie Director</td>

11

			<td><input type="text" size="80" name="movie_review_director_name" value="<?php echo $movie_director; ?>" /></td>

12

		</tr>

13

		<tr>

14

			<td style="width: 150px">Movie Rating</td>

15

			<td>

16

				<select style="width: 100px" name="movie_review_rating">

17

				<?php

18

				// Generate all items of drop-down list

19

				for ( $rating = 5; $rating >= 1; $rating -- ) {

20

				?>

21

					<option value="<?php echo $rating; ?>" <?php echo selected( $rating, $movie_rating ); ?>>

22

					<?php echo $rating; ?> stars <?php } ?>

23

				</select>

24

			</td>

25

		</tr>

26

	</table>

27

	<?php

28

}

29

?>

Este código renderiza los contenidos de la meta box. Aquí hemos usado una variable objeto que contiene la información de cada una de las reseñas de películas mostradas en el editor. Usando este objecto hemos recuperado el post ID y lo hemos usado para solicitar a la base de datos que consiga el nombre del Director asociado y el Rating el cual renderizará los campos en la pantalla. Cuando una nueva entrada es agrega entonces get_post_meta devuelve una cadena vacía la cual resulta en mostrar campos vacíos en el meta box.

Paso 4: Registrando la Función para Guardar la Publicación

1

2

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

Esta función es llamada cuando las publicaciones son guardadas en la base de datos.

Paso 5: Implementación de la Función add_movie_review_fields

1

2

function add_movie_review_fields( $movie_review_id, $movie_review ) {

3

	// Check post type for movie reviews

4

	if ( $movie_review->post_type == 'movie_reviews' ) {

5

		// Store data in post meta table if present in post data

6

		if ( isset( $_POST['movie_review_director_name'] ) && $_POST['movie_review_director_name'] != '' ) {

7

			update_post_meta( $movie_review_id, 'movie_director', $_POST['movie_review_director_name'] );

8

		}

9

		if ( isset( $_POST['movie_review_rating'] ) && $_POST['movie_review_rating'] != '' ) {

10

			update_post_meta( $movie_review_id, 'movie_rating', $_POST['movie_review_rating'] );

11

		}

12

	}

13

}

Esta función es ejecutada cuando las publicaciones son guardadas o eliminadas del panel de administración. Aquí luego de revisar el tipo de datos de la publicación recibida, si es un Custom Post Type entonces revisa de nuevo para ver si a los elementos meta box se le han asignado valores y finalmente guarda los valores en esos campos.

Paso 6: Deshabilitando la Opción de Campos Predeterminados Personalizados

Mientas creamos el custom post type definimos una función create_movie_review. Remueve el elemento custom-fields del array supports porque ya no es requerido. Ahora si guardas el archivo y abres el editor Movie Reviews, te darás cuenta de dos campos en la meta vox llamados Movie Author y Movie Rating. Similarmente puedes agregar otros elementos también.

Creando una Plantilla Personalizada Dedicada para Custom Post Types

La forma adecuada de mostrar datos de custom post type es usando plantillas personalizadas para cada uno de los custom post types. Aquí crearíamos una plantilla la cual mostraría todas las Movie Reviews ingresadas usando el Custom Post Type Movie Review.

Paso 1: Registra una Función para Forzar la Plantilla Dedicada

Abre el archivo Movie-Reviews.php y agrega el siguiente código antes de la etiqueta de cierre de PHP. Esto registra una función a ser llamada cuando la interfaz de administración de WordPress es visitada.

1

2

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

Paso 2: Implementación de la función

1

2

function include_template_function( $template_path ) {

3

	if ( get_post_type() == 'movie_reviews' ) {

4

		if ( is_single() ) {

5

			// checks if the file exists in the theme first,

6

			// otherwise serve the file from the plugin

7

			if ( $theme_file = locate_template( array ( 'single-movie_reviews.php' ) ) ) {

8

				$template_path = $theme_file;

9

			} else {

10

				$template_path = plugin_dir_path( __FILE__ ) . '/single-movie_reviews.php';

11

			}

12

		}

13

	}

14

	return $template_path;

15

}

Aquí el código busca por una plantilla como single-(post-type-name).php en el directorio de tema actual. Si no es encontrado entonces busca dentro del directorio del plugin para la plantilla el cual suplimos como parte del plugin. El hook template_include fue usado para cambiar el comportamiento predeterminado y forzar una plantilla especifica.

Paso 3: Crea el Archivo de Plantilla de la Página Única

Luego de guardar el archivo plugin anteriormente abierto, crea otro archivo PHP llamado single-movie-reviews.php y pon el siguiente código.

1

2

<?php

3

 /*Template Name: New Template

4

 */

5

6

get_header(); ?>

7

<div id="primary">

8

	<div id="content" role="main">

9

	<?php

10

	$mypost = array( 'post_type' => 'movie_reviews', );

11

	$loop = new WP_Query( $mypost );

12

	?>

13

	<?php while ( $loop->have_posts() ) : $loop->the_post();?>

14

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

15

			<header class="entry-header">

16

17

				<!-- Display featured image in right-aligned floating div -->

18

				<div style="float: right; margin: 10px">

19

					<?php the_post_thumbnail( array( 100, 100 ) ); ?>

20

				</div>

21

22

				<!-- Display Title and Author Name -->

23

				<strong>Title: </strong><?php the_title(); ?><br />

24

				<strong>Director: </strong>

25

				<?php echo esc_html( get_post_meta( get_the_ID(), 'movie_director', true ) ); ?>

26

				<br />

27

28

				<!-- Display yellow stars based on rating -->

29

				<strong>Rating: </strong>

30

				<?php

31

				$nb_stars = intval( get_post_meta( get_the_ID(), 'movie_rating', true ) );

32

				for ( $star_counter = 1; $star_counter <= 5; $star_counter++ ) {

33

					if ( $star_counter <= $nb_stars ) {

34

						echo '<img src="' . plugins_url( 'Movie-Reviews/images/icon.png' ) . '" />';

35

					} else {

36

						echo '<img src="' . plugins_url( 'Movie-Reviews/images/grey.png' ). '" />';

37

					}

38

				}

39

				?>

40

			</header>

41

42

			<!-- Display movie review contents -->

43

			<div class="entry-content"><?php the_content(); ?></div>

44

		</article>

45

46

	<?php endwhile; ?>

47

	</div>

48

</div>

49

<?php wp_reset_query(); ?>

50

<?php get_footer(); ?>

Aquí hemos creado la plantilla básica de página usando el loop. La función query_posts recupera los elementos del custom post type y los muestra usando el loop. Por supuesto es solo un loop básico y puedes jugar con el como quieras. También puedes usar estilos CSS adecuados para dar format a los elementos.

Paso 4: Imágenes

Necesitas guardar toda imágenes de iconos de estrella de 32x32 pixeles en tu carpeta de plugin. Nómbralos icon.php y grey.png respectivamente. Eso es todo, ahora las reseñas de película son mostradas en una página única ordenadas por fecha.

En mi siguiente tutorial cubriría mas características de los Custom Post Types como la creación de una página archivada, creación de taxonomías personalizadas, columnas personalizadas, etc. Por favor siéntete libre de proveer tus valuables recomendaciones.