Tìm hiểu về Custom Post Type trong WordPress: Tạo, Hiển thị và Meta Box

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

WordPress được xây dựng để tùy biến. Nó được tạo ra theo cái cách sao cho mỗi và mọi phần đều có thể tùy biến. Trong hướng dẫn này chúng ta sẽ khám phá một trong những tính năng mạnh mẽ nhất của WordPress được biết đến dưới tên gọi Custom Post Type và xem WordPress đạt đến một tầm cao mới như thế nào với sự xuất hiện của tính năng tuyệt vời này.

Custom Post Type Thật sự Là gì?

Giả sử bạn muốn blog của mình có một phần riêng cho Movie Reviews (Đánh giá Phim). Bằng cách sử dụng Custom Post Type, bạn có thể tạo một kiểu phần tử mới giống như Post và Page, nó sẽ chứa một tập hợp dữ liệu khác. Nó sẽ có một menu quản trị mới, các trang chỉnh sửa chuyên biệt, custom taxonomy và nhiều tiện ích cần thiết cho việc xuất bản.

Custom Post Type là một tập hợp các tùy chọn quản trị mới xuất hiện cùng với các Post Type mặc định như Post, Page, Attachment, vân vân. Một Custom Post Type có thể lưu trữ bất kỳ loại thông tin nào. Nó có một editor (trình soạn thảo) chuyên dụng, media uploader và sử dụng cấu trúc bảng sẵn có của WordPress để dễ dàng quản lý dữ liệu. Ưu điểm chính của việc tạo các Custom Post Type sử dụng WordPress API là nó tích hợp một cách trơn tru với các theme và template hiện có. Custom Post Type cũng thân thiện với SEO nhờ những permalink tiện lợi của chúng.

Tại sao Sử dụng Custom Post Type?

Custom Post Type giúp chúng ta giữ các Post Type khác nhau trong các nhóm khác nhau. Nó phân biệt các Post Type thông thường khỏi những Post Type khác. Chỉ đơn giản vậy thôi!

Hãy tạo một Plugin Sử dụng Custom Post Type

Ở đây chúng ta sẽ tạo một Plugin sử dụng Custom Post Type để hiển thị các Movie Review (Đánh giá Phim). Hãy bắt đầu nào.

Bước 1: Tạo Thư mục cho Plugin

Mở thư mục Plugin của bạn và tạo một thư mục mới gọi là Movie-Reviews.

Bước 2: Tạo Tập tin PHP

Mở thư mục và tạo một tập tin PHP có tên là Movie-Reviews.php.

Bước 3: Thêm Header

Mở tập tin và thêm header thích hợp ở trên cùng.


<?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
*/
?>

Bước 4: Đăng ký Hàm Tuỳ biến

Trước khi đóng lệnh PHP, hãy gõ dòng code sau để thực thi hàm tùy biến có tên là create_movie_review trong quá trình nạp mỗi khi trang được tạo ra.

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

Bước 5: Cài đặt Hàm

Cung cấp một cài đặt của hàm 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
		)
	);
}

Hàm register_post_type thực hiện hầu hết các công việc cho chúng ta. Ngay sau khi nó được gọi, nó chuẩn bị môi trường WordPress cho một Custom Post Type mới bao gồm các phần khác nhau trong admin. Hàm này nhận hai đối số: cái đầu tiên là một tên duy nhất của Custom Post Type và cái thứ hai là một mảng chứa các thuộc tính của Custom Post Type mới. Đây là một mảng khác chứa các nhãn khác nhau, xác định chuỗi văn bản được hiển thị trong các phần khác nhau của Custom Post Type, ví dụ: 'name' hiển thị tên của Custom Post Type trong dashboard, 'edit' và 'view' được hiển thị trong các nút Edit và View. Tôi nghĩ rằng phần còn lại là khá rõ.

Trong các đối số tiếp theo:

'public' => true xác định khả năng hiển thị của Custom Post Type cả trong phần admin và front-end.
'menu_position' => 15 xác định vị trí menu của Custom Post Type.
'supports' => array( 'title', 'editor', 'comments', 'thumbnail', 'custom-fields' ) xác định các tính năng của Custom Post Type sẽ được hiển thị.
'taxonomies' => array( '' ) tạo các custom taxonomy. Ở đây nó không được định nghĩa.
'menu_icon' => plugins_url( 'images/image.png', __FILE__ ) hiển thị biểu tượng menu trong phần admin.
'has_archive' => true cho phép lưu trữ Custom Post Type.

Xin vui lòng truy cập vào trang register_post_type của WordPress Codex để biết thêm chi tiết về các đối số khác nhau được sử dụng trong Custom Post Type.

Bước 6: Biểu tượng cho Custom Post Type

Lưu một biểu tượng 16x16 pixel trong thư mục plugin hiện tại của bạn. Nó được yêu cầu cho biểu tượng của Custom Post Type trong dashboard.

Bước 7: Kích hoạt Plugin

Sau khi kích hoạt plugin bạn có một Custom Post Type mới có một text editor, publish và featured image, comment và editor với các trường tuỳ biến.

Bước 8: Thêm một Phần tử mới

Nhấp vào tùy chọn Add New để chuyển đến editor của Custom Post Type. Nhập tiêu đề phim, đánh giá và thiết lập một featured image.

Bước 9: Xuất bản

Xuất bản bài post và nhấp vào View Movie Review để xem đánh giá phim đã tạo trong trình duyệt.

Tạo các trường Meta Box cho Custom Post Type

Cơ chế meta box sử dụng sự trợ giúp của hệ thống meta box tích hợp trong WordPress và giúp thêm các trường yêu cầu cụ thể cho Custom Post Type mà không yêu cầu các trường tùy biến mặc định trong editor.

Bước 1: Đăng ký Hàm Tùy biến

Mở tập tin Movie-Reviews.php và thêm code sau đây trước thẻ đóng PHP. Điều này sẽ đăng ký một hàm được gọi khi giao diện quản trị của WordPress được truy cập.

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

Bước 2: Cài đặt Hàm Tuỳ biến

Thêm một cài đặt hàm my_admin đăng ký một meta box và liên kết nó với Custom Post Type movie_reviews.


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

Ở đây add_meta_box là hàm được sử dụng để thêm các meta box vào Custom Post Type. Giải thích các thuộc tính:

movie_review_meta_box là thuộc tính id bắt buộc của HTML
Movie Review Details là văn bản có thể nhìn thấy trong tiêu đề của khu vực meta box
display_movie_review_meta_box là callback để hiển thị nội dung của meta box
movie_reviews là tên của Custom Post Type nơi mà meta box sẽ được hiển thị
normal xác định một phần của trang nơi sẽ hiển thị phần màn hình chỉnh sửa
high xác định mức độ ưu tiên trong ngữ cảnh mà các hộp sẽ hiển thị

Bước 3: Cài đặt Hàm `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
}
?>

Code này hiển thị nội dung của meta box. Ở đây chúng ta đã sử dụng một biến đối tượng có chứa thông tin của mỗi đánh giá phim được hiển thị trong editor. Sử dụng đối tượng này, chúng ta truy vấn post ID và sử dụng nó để truy vấn cơ sở dữ liệu để lấy tên và đánh giá của tác giả, từ đó hiển thị các trường trên màn hình. Khi một mục mới được thêm vào thì get_post_meta trả về một chuỗi rỗng, kết quả là hiển thị các trường rỗng trong meta box.

Bước 4: Đăng ký một Hàm Lưu Bài post

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

Hàm này được gọi khi bài viết được lưu trong cơ sở dữ liệu.

Bước 5: Cài đặt Hàm `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'] );
		}
	}
}

Hàm này được thực thi khi các bài post được lưu hoặc xóa khỏi admin. Ở đây sau khi kiểm tra kiểu dữ liệu đã nhận được, nếu đó là một Custom Post Type thì nó sẽ kiểm tra lại để xem liệu các phần tử meta box đã được gán các giá trị hay chưa và cuối cùng lưu các giá trị trong những trường đó.

Bước 6: Vô hiệu hoá Trường Tuỳ Biến Mặc định

Trong khi tạo Custom Post Type, chúng ta đã định nghĩa hàm create_movie_review. Loại bỏ phần custom-fields khỏi mảng supports bởi vì nó không còn cần thiết. Bây giờ, nếu bạn lưu tập tin và mở editor Movie Reviews bạn sẽ thấy hai trường trong meta box có tên Movie Director and Movie Rating. Tương tự, bạn cũng có thể thêm các phần tử khác.

Tạo một Template Tùy biến Riêng cho Custom Post Type

Cách thích hợp để hiển thị Custom Post Type là sử dụng các template tùy biến cho từng Custom Post Type. Ở đây chúng ta sẽ tạo ra một template hiển thị tất cả các đánh giá phim được nhập bằng cách sử dụng Custom Post Type Movie Review.

Bước 1: Đăng ký một Hàm để Sử dụng Template Riêng

Mở tập tin Movie-Reviews.php và thêm code sau đây trước thẻ đóng PHP. Điều này đăng ký một hàm sẽ được gọi khi giao diện quản trị WordPress được truy cập.

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

Bước 2: Cài đặt Hàm


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;
}

Ở đây là code tìm kiếm một template tương tự như single-(post-type-name).php trong thư mục theme hiện tại. Nếu nó không được tìm thấy thì nó sẽ tìm kiếm trong thư mục plugin cho template mà chúng ta cung cấp như là một phần của plugin. Hook template_include được sử dụng để thay đổi hành vi mặc định và áp dụng một template cụ thể.

Bước 3: Tạo Tập tin Template Single Page

Sau khi lưu tập tin plugin được mở trước đó, hãy tạo một tập tin PHP khác có tên single-movie_reviews.php và dán đoạn code sau vào đó.


<?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(); ?>

Ở đây chúng ta đã tạo ra một page template cơ bản bằng cách sử dụng vòng lặp. Hàm query_posts truy vấn các phần tử Custom Post Type và hiển thị chúng bằng cách sử dụng vòng lặp. Tất nhiên nó chỉ là một vòng lặp cơ bản và bạn có thể tinh chỉnh nó tuỳ theo bạn muốn. Bạn cũng có thể sử dụng các kiểu CSS thích hợp để định dạng các phần tử cho phù hợp.

Lưu ý: Bạn cần phải tạo page mới từ dashboard bằng cách sử dụng template vừa được tạo.

Bước 4: Hình ảnh

Bạn cần lưu hai hình ảnh của các biểu tượng hình sao 32x32 pixel trong thư mục plugin của bạn. Đặt tên cho chúng tương ứng là icon.png và grey.png. Như vậy, bây giờ các đánh giá phim được hiển thị trên một single page được sắp xếp theo ngày.

Trong hướng dẫn tiếp theo của tôi, tôi sẽ giới thiệu thêm các tính năng của Custom Post Type như tạo một archived page, tạo custom taxonomy, các cột tùy biến... Và đừng quên cho tôi biết những gợi ý hay của bạn.