Trang chủ WordpressHướng dẫn Wordpress Hướng dẫn Custom Post Type toàn tập – Phần 1

Hướng dẫn Custom Post Type toàn tập – Phần 1

bởi Thạch Phạm
0 bình luận 2,9K views

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay

Hướng dẫn Custom Post Type toàn tập

Cách đây mấy ngày mình có viết một bài cơ bản về Custom Post Type nhưng bản thân bài viết đó chỉ là bài dành cho những người không chuyên, không có nhu cầu tìm hiểu sâu vào để ứng dụng nó tốt hơn mà chỉ nhằm mục đích phổ biến Custom Post Type là gì và cách ứng dụng nó ra sao. Thực sự thì nội dung bài viết đó cũng thật sự chưa đầy đủ lắm vì khi sử dụng Custom Post Type thì bạn không chỉ tạo post type, custom taxonomies, custom post field mà còn phải làm thêm một số bước quan trọng khác nữa như tạo template cho trang lưu trữ và template hiển thị nội dung của custom post type đó. Vì vậy nếu bạn cần một cái nhìn khác toàn diện và sâu về Custom Post Type hơn thì ở bài viết này bạn sẽ thấy điều đó.

Về khái niệm Custom Post Type là như thế nào thì ở bài trước mình đã nói qua rồi nên ở đây mình không cần phải nói lại thêm, tuy nhiên mình xin bổ sung một chút khái niệm đó là nếu bạn tạo một custom post type theo đúng quy trình, không xảy ra lỗi thì bạn sẽ thấy được những kết quả như sau:

Khuyến mãi Black Friday
  • Xuất hiện thêm một menu với tên là tên của Custom Post Type mà bạn đang tạo, trong đó bao gồm Add New, All [type], [taxonomies]. Giống như hình này.
  • Khi bạn truy cập với đường dẫn là example.com/custom-post-type thì sẽ thấy danh sách các bài viết trong custom post type đó hiển thị ra. Chúng ta gọi đó là Custom Post Type Archive Template. Nó giống như ở trang chủ hiển thị các bài viết có type là post.
  • Bạn có thể dùng Category và Tag để phân loại các bài viết trong post type đó hoặc tạo một khái niệm phân loại nội dung mới (Custom Taxonomies).

Và trong mỗi custom post type khi bạn tạo ra thì bạn có thể sẽ có thể tùy biến một số tính năng như sau:

  • Áp dụng định dạng phân cấp (Hierarchical) cho post type.
  • Có thể áp dụng tính năng post formats của WordPress.
  • Tùy chọn tính năng rewrite URL của post type.
  • Có thể áp dụng custom post field, featured image, comment, post tag, categories,….hoặc thậm chí là các tính năng khác như tính năng bổ sung meta descriptions, title của Thesis, Genesis hay Headway.
  • Tùy chọn phân quyền cho nhóm thành viên đặc biệt mới có quyền truy cập vào các bài trong post type đó.

Thường thì khi sử dụng Custom Post Type thì người ta sẽ sử dụng thêm Custom Meta Boxes kết hợp với Custom Field để thêm vào một số dữ liệu cần thiết trong một post type. Ví dụ như nếu bạn tạo một post type mới tên là Coupon thì bạn sẽ cần tạo custom field là Coupon Code và Hạn sử dụng, sau đó áp dụng Custom Meta Boxes để tạo các hộp nhập dữ liệu đó ngay bên dưới bài viết mà không cần phải chọn field và điền value như cách sử dụng custom field thông thường. Lý do là khi bạn sử dụng custom field, bạn có thể tùy biến nó để hiển thị các dữ liệu này trong bài viết chuyên nghiệp hơn, đặc biệt là có thể tùy biến nó để hiển thị ở ngoài trang archive,….Nếu như bạn không hiểu thì cũng đừng lo lắng quá, cứ theo dõi bài này là bạn sẽ hiểu về nó một cách đầy đủ nhất.

Trong bài này chúng ta sẽ học được những gì?

Các khái niệm cơ bản đã được mình nói sơ qua nhưng điều quan trọng nhất là chúng ta nên thực hành vì nói thật nếu dùng ngôn ngữ (đặc biệt là tiếng Việt) để giải thích thì không thể nào giải thích đầy đủ được. Vì vậy ngay bây giờ, chúng ta sẽ cùng đi vào việc áp dụng tạo một custom post type chuyên nghiệp luôn nhé. Và đây là những việc mà chúng ta sẽ làm trong bài này:

  1. Cách tạo custom post type thông qua code.
  2. Cách tạo custom taxonomies thông qua code.
  3. Cách tạo custom post field và meta boxes.

Tạo file riêng để dùng cho Custom Post Type

Trước tiên, để tạo một custom post type thì bạn có thể viết code vào file functions.php. Nhưng nếu bạn muốn dễ quản lý sau này hơn thì mình khuyến khích là bạn nên tạo một file PHP mới, sau đó require vào file functions.php trong thư mục theme. Bây giờ hãy tiến hành tạo một file mới tên là create-post-type.php trong thư mục theme đang dùng

Hướng dẫn custom post type

Nội dung của file đó bạn nên đặt viết sẵn như sau, nhớ là không chứa thẻ đóng nhé.

<?php

sau đó viết đoạn code dưới đây vào cuối hoặc đầu file functions.php trong thư mục theme.

require (‘create-post-type.php’);

Ok, xong rồi, bây giờ tất cả code liên quan đến chức năng Custom Post Type mà cụ thể là tất cả code mình đề cập trong bài này đều sẽ được viết vào file create-post-type.php này.

Cách tạo custom post type

Công cụ tự tạo code

Nếu bạn không muốn tự gõ các dòng dưới thì có thể tham khảo 2 công cụ tự tạo code cho Wordpreess nhé.

Để tạo một custom post type thì bạn có thể viết đoạn code như thế này vào file create-post-type.php.


function create_post_type() {
$couponlabels = array (
//BEGIN – Việt Hóa menu custom post type
‘name’ => _x(‘Coupon’,’Mã giảm giá’),
‘singular_name’ => _x(‘Coupon’,’Mã giảm giá’),
‘add_new’ => __ (‘Thêm Coupon’),
‘add_new_item’ => __(‘Thêm coupon mới’),
‘edit_item’ => __(‘Sửa coupon’),
‘new_item’ => __(‘Thêm coupon mới’),
‘all_items’ => __(‘Tất cả coupon’),
‘view_item’ => __(‘Xem coupon’),
‘search_item’ => __(‘Tìm coupon’),
‘not_found’ => __(‘Hiện tại chưa có coupon nào’),
‘not_found_in_trash’ => __(‘Không có coupon nào trong sọt rác’),
‘menu_name’ => ‘Coupon’
//END – Việt hóa menu custom post type
);
$args = array(
‘labels’ => $couponlabels,
‘description’ => ‘Quản lý các mã giảm giá trên blog’,
//Cho phép hiển thị menu trong WordPress Dashboard – line 22.
‘public’ => true,
‘menu_position’ => 3,
‘has_archive’ => true,
//Xác định những chức năng được hỗ trợ trong custom post type – line 25
‘supports’ => array(‘title’,’editor’,’thumbnail’,’excerpt’,’comments’),
‘has_archive’ => true,
);
register_post_type (‘coupon_code’,$args);
}
add_action (‘init’,’create_post_type’);

Bạn để ý kỹ ngay đoạn 29 mà mình đã highlight lên, dòng đó là chúng ta sẽ gán giá trị của tên custom post type, hãy nhớ thật kỹ giá trị này để về sau chúng ta áp dụng nó cho các phần sau.

Giải thích:

  • 'labels' => $couponlabels: Tùy chọn tên hiển thị menu của post type này trong WordPress Dasboard, biến $couponlabels là biến mà mình đã tạo và gán các tham số cho nó ở ngay đầu đoạn code.
  • 'public' => true: Nếu gán giá trị là true thì nó sẽ hiển thị ra ngoài website và trong WordPress Dashboard, mặc định là False.
  • 'menu_position': Vị trí của menu post type trong WordPress Dashboard, nếu bạn không khai báo vị trí cho nó thì nó sẽ hiển thị tít phía dưới.
  • 'supports': Khai báo các chức năng mà nó được sử dụng trong post type này.

Tham khảo: WordPress Codex – Register Custom Post Type – Parameters

Sau khi lưu lại, bạn sẽ thấy trong trang quản trị WordPress sẽ xuất hiện thêm menu tên là Coupon như trong hình.

Hướng dẫn Custom Post Type

Ngay bây giờ các bạn có thể vào đó tạo một bài viết mới và bạn vẫn có thể xem được bài viết đó bằng cách nhấp vào nút View Post khi đăng bài xong. Nó giống như thế này

Hướng dẫn custom post type

Update Permalink

Nếu sau khi tạo bài viết mà bạn bị lỗi 404 khi xem bài viết đó thì hãy vào Setting -> Permalink và chọn cấu trúc permalink tùy thích rồi nhấn nút Update.

Nhưng bài này không chỉ có thể, chúng ta chỉ đi được khoảng 30% đoạn đường thôi và 70% còn lại đang đợi chúng ta giải quyết nó.  :bye:

Thay đổi các thông báo khi viết bài

tao-custom-post-type5

Khi viết bài thường thì chúng ta sẽ bắt gặp được một số thông báo sau khi thực hiện một hành động nào đó như Post updated, Post published,….Chúng ta hoàn toàn có thể tùy chỉnh các tin nhắn thông báo đó theo phong cách riêng của mình bằng cách sử dụng hook post_updated_messages của WordPress, viết đoạn code dưới đây vào file create-custom-post-type.php nhé

/Sửa tin nhắn thông báo
function my_updated_messages( $messages ) {
global $post, $post_ID;
$messages[‘coupon_code’] = array(
0 => ”,
1 => sprintf( __(‘Coupon đã được cập nhật. <a href="%s">Xem coupon</a>’), esc_url( get_permalink($post_ID) ) ),
2 => __(‘Custom field updated.’),
3 => __(‘Custom field deleted.’),
4 => __(‘Product updated.’),
5 => isset($_GET[‘revision’]) ? sprintf( __(‘Coupon đã được khôi phục bản lưu từ %s’), wp_post_revision_title( (int) $_GET[‘revision’], false ) ) : false,
6 => sprintf( __(‘Coupon đã được đăng. <a href="%s">Xem coupon</a>’), esc_url( get_permalink($post_ID) ) ),
7 => __(‘Coupon đã được lưu.’),
8 => sprintf( __(‘Coupon đã được gửi đi. <a target="_blank" href="%s">Xem coupon</a>’), esc_url( add_query_arg( ‘preview’, ‘true’, get_permalink($post_ID) ) ) ),
9 => sprintf( __(‘Bài viết đã được hẹn giờ: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Xem bài viết</a>’), date_i18n( __( ‘M j, Y @ G:i’ ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
10 => sprintf( __(‘Coupon đã được lưu nháp. <a target="_blank" href="%s">Xem coupon</a>’), esc_url( add_query_arg( ‘preview’, ‘true’, get_permalink($post_ID) ) ) ),
);
return $messages;
}
add_filter( ‘post_updated_messages’, ‘my_updated_messages’ );

Nhớ sửa lại tên custom post type ở đoạn thứ 4 nhé. Nếu bạn muốn áp dụng cho Post hay Page thì chỉ cần thay đổi giá trị của dòng này thành post hoặc page.

NguồnSet custom messages for post update/save

Hiển thị custom post type trong theme

Khi một custom post type được tạo ra thì nó chỉ hiển thị nội dung của 1 bài viết của post type đó khi ta truy cập với một liên kết nhất định, nhưng nó sẽ không thể hiển thị danh sách các bài đó ra ngoài theme giống như hiển thị danh sách bài viết mới. Như vậy để làm được điều này thì chúng ta sẽ có 3 phương thức như sau (nên làm hết cả 3):

  1. Tạo một Custom Page Template để hiển thị danh sách bài mới (ở đây là danh sách các coupon mới).
  2. Tạo một template single riêng cho nó để hiển thị nội dung bên trong (giống như file single.php cho nội dung bài viết).
  3. Tạo một template archive riêng để hiển thị danh sách bài mới. (là template của trang example.com/tên-post-type).

Bây giờ chúng ta sẽ đi lần lượt qua 3 phương thức này luôn nhé.

1. Tạo custom page template riêng

Bây giờ bạn cần tạo một file PHP mới với tên bất kỳ để làm Custom Page Template cho nó. Ví dụ ở đây mình sẽ tạo một file tên là coupon.php, và nội dung của nó là như sau:

<?php
/*
* Tạo page template hiển thị danh sách các coupon mới
Template Name: Coupon
*/
//Đoạn này để lấy các thông số trong file header.php ra, bao gồm các đoạn nhúng file CSS và JS. Bắt buộc phải nhập
get_header();
//End header
?>
<!—Lấy cấu trúc của theme đang dùng, đoạn này áp dụng cho theme TwentyTwelve—>
<div id="primary" class="site-content">
<div id="content" role="main">

<?php
//Khai báo tên post type sẽ được hiển thị và số bài hiển thị mỗi trang
$args = array(‘post_type’ => ‘coupon_code’,’posts_per_page’ => 10);
$loop = new WP_Query ($args);
while ( $loop->have_posts() ): $loop->the_post();
?>
<header class="entry-header">
<h1 class="entry-title"><a href="<?php the_permalink();?>" rel="bookmark" class="entry-title"><?php the_title();?></a></h1>
</header>
<?php
echo ‘<div class="entry-content">’;
the_content();
echo ‘</div>’;

endwhile;
?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Các bạn lưu ý là tại ngay mấy chỗ thẻ <div> thì các nếu các bạn đang làm tut này trên theme TwentyTwelve hoặc TwentyEleven thì có thể để giống vậy, nhưng nếu bạn đang dùng theme khác thì tốt nhất hãy xem cấu trúc HTML của các phần in bài viết để có thể sử dụng class cho chính xác, không thì lại lỗi theme thì vỡ mồm.

Còn đoạn 14 thì là chỗ để khai báo tên post type muốn gọi ra.

Bây giờ các bạn vào Page -> Add New để tạo một page mới, và ở phần Template thì các bạn chọn tên template mình vừa mới tạo, ở đây là template tên Coupon.

tao-custom-post-type6

Phần nội dung các bạn không cần nhập gì cả, cứ thế mà Publish lên. Sau đó các bạn truy cập vào trang vừa tạo sẽ thấy kết quả như thế này.

Hướng dẫn custom post type

Trường hợp bạn muốn bài viết này chỉ hiển thị một phần nội dung thôi thì thay đổi the_content(); ở dòng 25 trong đoạn code trên thành the_excerpt();. Lúc đó nó nội dung trang vừa mới tạo sẽ như thế này

Hướng dẫn custom post type

2. Tạo một template single riêng cho custom post type

Mặc định khi tạo một custom post type thì nó sẽ hiển thị nội dung của post type đó bằng file single.php trong theme, tức là chung một template với post. Nhưng nếu bạn muốn dùng một template single khác thì bạn copy file single.php kia ra 1 bản nữa và đổi tên cho nó theo câu trúc single-tên_post_type.php, ví dụ trong bài này tên post type Coupon là coupon_code thì file single của mình sẽ có tên là single-coupon_code.php.

Bây giờ nếu bạn muốn chỉnh sửa hay tùy biến gì thì cứ tùy biến ở file mới này. Như thế sẽ không ảnh hưởng đến cấu trúc nội dung của các posts.

3. Tạo một template Archive riêng cho custom post type

Giả sử bây giờ một permalink dẫn tới bài viết trong post type mới của mình là

http://customposttype.dev/coupon_code/coupon-hostgator-cho-nam-2013

Mình xóa đoạn coupon-hostgator-cho-nam-2013 đi thì thì đường dẫn sẽ còn là http://customposttype.dev/coupon_code <- đây là template Archive của post type.

Nếu bạn không thích cách hiển thị mặc định (lấy từ file archive.php trong theme) thì bạn copy file archive.php ra và sau đó đổi tên thành archive-tên_post_type.php, theo ví dụ của mình thì nó sẽ là archive-coupon_code.php. Ok, bây giờ bạn muốn chỉnh sửa gì thì cứ đè file archive vừa tạo mà chỉnh sửa nhé.

Lời kết

Đến đây vẫn chưa hết nội dung nói về Custom Post Type nhưng mình xin mạn phép viết tiếp ở phần sau vì bài khá dài. Trong bài này các bạn đã biết cách tạo một custom post type theo cách thủ công đó là sử dụng code trong WordPress và cách hiển thị nó lên theme. Nếu các bạn có thêm bất cứ thắc mắc nào trong lúc thực hành thì cứ hỏi bên dưới bài viết này và mình sẽ giúp bạn giải quyết nó.

Xem tiếp phần 2 – Hướng dẫn tạo Custom Taxonomy

Thực hành

Đọc xong gật gà gật gù thì cũng không có ích gì lắm, nếu bạn muốn một lần nữa thử sức mình để nắm rõ cách tạo custom post type và tùy biến nó thì hãy thử làm một bài tập sau, và các bạn có thể “nộp” cho mình ở khung comment phía dưới.

  • Tạo một custom post type tên là reviews với label hiển thị trên menu Dashboard là Đánh giá.
  • Tùy chọn permalink cho các bài viết trong post type này theo cấu trúc example.com/danh-gia/tên-bài-viết
  • Cho hiển thị các bài viết trong post type này ra trang chủ.
  • Tạo một page liệt kê danh sách bài viết mới trong post type nhưng chỉ hiển thị tiêu đề bài viết.
  • Tạo một template single hiển thị nội dung của post type này không hiển thị sidebar, nhưng các bài viết trong Posts vẫn giữ nguyên cấu trúc cũ.

Cách thức nộp bài: Nén thư mục theme lại thành .zip và upload lên gửi cho mình.

Chúc các bạn thành công!

5/5 - (2 bình chọn)
0 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.