Chào mừng các bạn đến với series WordPress: Thiết Kế Theme ở WolfActive. Ở các phần trước của series, mình đã hướng dẫn các bạn về kiến thức cơ bản tạo ra một theme WordPress. Thì ở phần 9 này mình sẽ hướng dẫn các bạn về cách Custom Post Type (CPT) cơ bản nhất ở chính Theme của mình. Giờ thì chúng ta cùng tìm hiểu nhé.
Chuẩn bị
Đầu tiên để có thể Custom Post Type, chúng ta cần tạo một function trong file functions.php trên WordPress site của bạn. Như ở dưới mình tạo một function mới có tên wolfactive_post_types.
function wolfactive_post_types() {
--code here--
}Custom Post Type Trên WordPress
Vậy là chúng ta đã xong bước chuẩn bị trong việc tạo Custom Post Type cho riêng mình. Tiếp đến chúng ta sẽ đăng kí post type của mình trên WordPress. Vậy làm thế nào để có thể đăng kí post type của mình? Bạn yên tâm vì WordPress đã hỗ trợ các bạn việc này. Bạn chỉ việc sử dụng hàm mà WordPress cấp sẵn cho bạn, register_post_type(). Cách dùng như sau:
function wolfactive_post_types() {
register_post_type('Blog', array(
'public' => true,
'labels' => array(
'name' => 'Blogs',
)
));
}Ở đây bạn thấy, mình dùng như sau register_post_type(‘ Tên Custom Post Type ‘ , array ). Về tên Custom Post Type bạn có thể đặt tên tùy ý mà bạn muốn, kế tiếp mình dùng mảng để custom các tùy chọn cho tên Custom. Đến đây các bạn thấy mình để trạng thái của Custom của mình ở dạng ‘public’ => true để cho phép mình có thể hiển thị Post type của mình. Sau đó mình sử dụng ‘labels’ => array để thiết lập tên hiển thị trên task bar ở trang admin.
‘name’ => ‘Blogs’ để hiển thị tên trên taskbar như hình dưới
Như vậy mình đã hướng dẫn xong rồi đó. Kết thúc series rồi đó cảm ơn các bạn đẫ theo dõi…
Nói đùa vậy thôi chứ làm vậy thì tụi mình bị gọi là “làm không có tâm” mất danh dự lắm à nghen :)). Bây giờ kế tiếp, dù là chúng ta đã tạo ra một Blogs rồi, tuy nhiên ta vẫn còn một số điều như sau. Đầu tiên khi ta click vào Add New ta sẽ thấy như sau:
Như các bạn thấy trong hình, khi ta click vào Add new ta sẽ thấy là “Add New Post” chứ không phải là “Add New Blog” vậy chúng ta cần phải làm như sau:
'add_new_item' => 'Add New Blog',Bạn chỉ việc add đoạn code trên vào trong Array của label. Và kết quả sẽ thay đổi
Chưa dừng lại ở đây. Chúng ta sẽ tiếp tục thay đổi từ Edit Post sang Edit Blogs
'edit_item' => 'Edit Blog',
Kế đến mình sẽ thiết lập thêm một số dòng như sau:
function wolfactive_post_types() {
register_post_type('Blog', array(
'public' => true,
'labels' => array(
'name' => 'Blogs',
'add_new_item' => __('Add New Blog'),
'edit_item' => __('Edit Blog'),
'all_items' => __('All Blog'),
'singular_name' => __('All Blog'),
'view_item' => __('View Blogs'),
'search_items' => __('Search Blogs'),
'featured_image' => __('Image Blog'),
'set_featured_image' => __('Choose Image Blog'),
),
'menu_icon' => 'dashicons-book',
'supports' => array(
'title',
'thumbnail',
'custom-fields',
'editor',
),<br />));
}Giờ mình sẽ giải thích một số dòng ở đoạn code trên.
- all_items: thay đổi label hiển thị toàn bộ blog (mặc định là Views all Post/Page)
- singilar_name: tên đối tượng của post type, nếu bạn để mặc định thì sẽ là page/post
- view_item: đặt tên hiển thị là “View Blogs” (mặc định là View Post/Page)
- search_items: đổi tên hiển thị từ “search post/page”(mặc định) sang “search Blogs”
- featured_image: đổi tên tiêu đề mặc định sang Image Blog
- set_featured_image: đổi tên từ “Set featured image” sang “Choose Image Blog”
- supports: ở đây mình có tạo một array có title (tiêu đề content), thumbnail (hình ảnh đại diện), editor (phần viết content), custom-field (đăng kí để sử dụng custom-field).
- menu_icon: thiết lập icon hiển thị cho blog.
Các bạn có thể xem và lấy icon tại đây. Và xem thêm các trường có thể thay đổi khi bạn custom post type tại đây. Cuối cùng là kết quả của chúng ta:
Như vậy mình đã hướng dẫn các bạn về Custom Post Type trên WordPress, mặc dù là còn nhiều cái nữa nhưng mình sẽ cập nhật từ từ ở những bài kế tiếp. Bây giờ chúng ta sẽ display nó ra nhé.
Display Custom Post Type
Để các bạn có thể display được CPT, các bạn cần thực hiện một thao tác quen thuộc như display post mà mình đã hướng dẫn cho các bạn ở những phần trước. Đó chính là việc tạo một array thể có thể query bài viết. Cụ thể mình làm như sau:
$args = array(
'post_type' => 'Blog',
'posts_per_page' => 4,
);
$the_query = new WP_Query($args);Như vậy là chúng ta đã hoàn thành bước chuẩn bị xong bước đầu tiên. Ở đoạn code trên mình lấy post_type là Blog dựa theo tên mà bạn đặt khi ta viết hàm register_post_type ở bài trước. Ví dụ ở bài trước mình đã ghi là register_post_type(‘Blog’, array() ). Thì Blog sẽ là tên mình cần để post_type đến.
Lấy bài viết từ Custom Post Type
Việc lấy bài viết từ Custom Post Type cũng tương tự như các bạn lấy bài viết từ Post/Page từ trước đến giờ. Tuy nhiên ở đây cách viết của mình sẽ có thay đổi một tí so với những bài trước. Các bạn xem nhé.
<ul class="grid__item-background">
<?php
while($the_query->have_posts()) : $the_query->the_post();?>
<li class="grid__item">
<div class="wrapper__post-item">
<div class="post-item-contain">
<div class="post-item-image">
<div class="kenburns-top">
<?php echo get_the_post_thumbnail( get_the_ID(), 'medium', null );?>
</div>
</div>
<div class="wrapper-author--date">
<span class="wrapper__date-calendar"><i class="far fa-calendar-alt"></i><span><?php echo get_the_date() ?></span></span>
</div>
<div class="post-item-content">
<div class="wrapper-post--title">
<a href="<?php echo get_permalink(); ?>"><h2 class="post--title"><?php echo get_the_title() ?></h2></a>
</div>
<div class="read-more">
<a href="<?php echo get_permalink(); ?>">Đọc Tiếp</a>
</div>
</div>
</div>
</div>
</li>
<?php
endwhile;?>
</ul>Các bạn thấy mình có thay đổi một chút ở vòng lập while và đã bỏ điều kiện if đi. Thực sự chức năng giữa vòng lặp while mình viết ở bài này không khác gì ở bài trước, nó chỉ gọn hơn thôi. Và cách viết như vậy mình thấy các bạn sẽ ko phải xoay xở việc thiếu dấu “{}” này nữa.
Như vậy đã hướng dẫn cho các bạn về cách Custom Post Type rồi. Cũng rất đơn giản phải ko nào? Mọi người bắt tay vô làm thử nhé. Mọi thông tin góp ý hay thắc mắc bạn hãy để dưới phần bình luận kèm tên bài hoặc liên lạc trực tiếp fanpage nhé.