Mặc định khi hiển thị ở trang chủ WordPress sẽ là Post hoặc Page nhưng đối với các trang web bán hàng thì nếu để hiện Post và Page trông sẽ không chuyên nghiệp.

Trước đây khi bắt đầu mới làm quen WordPress mình không biết làm thế nào để tạo Landing Page hiển thị các sản phẩm ở trang chủ sau khi tìm hiểu mới biết đến Custom Post Type.

Cách tạo Custom Post Type WordPress

Custom Post Type là gì?

Thật ra thì Custom Post Type cũng không khác mấy so với Post và Page trong WordPress. Nhưng nếu trong trường hợp bạn làm một trang web bán hàng có nhiều chủng loại sản phẩm khác nhau như Son môi, mặt nạ, kem dưỡng ẩm… thì lúc này sẽ phải tạo ra nhiều hơn 1 Post Type.

Hướng dẫn cách tạo Custom Post Type

Để tạo được bạn truy cập file functions.php và thêm đoạn code sau xuống dưới cùng
$labels = array(
'name' => _x( 'Sản Phẩm', 'Post Type General Name' ),
'singular_name' => _x( 'Sản Phẩm', 'Post Type Singular Name' ),
'menu_name' => __( 'Sản Phẩm' ),
'parent_item_colon' => __( 'Sản Phẩm' ),
'all_items' => __( 'Tất Cả Sản Phẩm' ),
'view_item' => __( 'Hiển Thị Sản Phẩm' ),
'add_new_item' => __( 'Thêm Sản Phẩm Mới' ),
'add_new' => __( 'Thêm Mới' ),
'edit_item' => __( 'Chỉnh Sửa Sản Phẩm' ),
'update_item' => __( 'Cập Nhật Sản Phẩm' ),
'search_items' => __( 'Tìm Sản Phẩm' ),
'not_found' => __( 'Not Found' ),
'not_found_in_trash' => __( 'Not found in Trash' ),
);

$args = array(
'label' => __( 'Sản Phẩm' ),
'description' => __( 'Sản Phẩm and Coupons' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail', 'revisions', 'custom-fields', ),
// Cài đặt taxonomies
'taxonomies' => array( 'classifier' ),
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 4,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'page',
);
//Đăng ký custom post type
register_post_type( 'san-pham', $args );
add_action( 'init', 'tao-custom-post-type', 0 );

Mình sẽ giải thích đoạn code trên như sau:

name: Sản phẩm dạng số nhiều

singular_name: Sản phẩm dạng số ít

menu_name: Tên hiển thị menu bên trái bạn thử thay bằng Tất Cả Sản Phẩm xem kết quả thế nào nhé

parent_item_colon: Tìm hiểu sau

all_items: Text hiển thị tất cả sản phảm trong menu

view_item: Tìm hiểu sau

add_new_item: Tiêu đề h1 của trang Add New

add_new: Text hiển thị Thêm Mới

edit_item: Text hiển thị chức năng chỉnh sửa

update_item: Tìm hiểu sau

search_items: Ô tìm kiếm sản phẩm

label: Tên mô tả

description: Mô tả cho thể loại sản phẩm

labels: gọi các label trong biến $label

supports: Tìm hiểu sau

taxonomies: Một mảng các Taxonomies

hierarchical: Tìm hiểu sau

public: Nếu có giá trị TRUE thì mới hiển thị trên menu, bạn thử bằng cách thêm FALSE xem kết quả nhé

show_ui: Nếu có giá trị TRUE thì sẽ hiển thị giao diện trong admin

show_in_menu: Nếu TRUE thì sẽ hiển thị trong Admin Menu

show_in_nav_menus: Nếu có giá trị TRUE thì nó sẽ hiển thị bên trang quản lý menu

show_in_admin_bar: Nếu có giá trị TRUE thì sẽ hiển thị một đường link trên thanh Admin Menu Bar

menu_position: Vị trí hiển thị trên Menu Bar bạn thử thay 1, 2, 3 vào xem kết quả như thế nào nhé

can_export: Cho phép sử dụng tool để export

has_archive: Hiển thị bài viết của thể loại này trong mục ngày tháng năm

exclude_from_search: Nếu có giá trị TRUE thì sẽ loại trừ các bài viết ra khỏi kết quả tìm kiếm bên ngoài frontend

publicly_queryable: Cấu hình đường dẫn Query String cho trang Search ngoài frontend

capability_type: Tìm hiểu sau

register_post_type: Tạo post type với slug tên là san-pham

add_action: Kích hoạt hàm tạo custom post type

Sau khi lưu lại và F5 bạn nhìn san menu phần quản trị WordPress sẽ được kết quả như sau:

custom post type

Xong rồi bây giờ thử thêm vài sản phẩm mới vào thôi!

Hiển thị custom post type ra trang chủ

Khi hiển thị trang chủ mặc định WordPress sẽ lấy các bài viết từ Post và Page ra ngoài nhưng
function add_my_post_types_to_query( $query ) {
if ( is_home() && $query->is_main_query() )
$query->set( 'post_type', array( 'post', 'san-pham' ) );
return $query;
}
add_action( 'pre_get_posts', 'add_my_post_types_to_query' );

san-pham là cái slug đã tạo ở trên, nếu bạn tạo là sanpham thì đoạn $query->set( ‘post_type’, array( ‘post’, ‘sanpham‘ ) ); cũng phải đặt là sanpham.

Quá đơn giản phải không nào! Mình đã từng đau đầu về cái Custom Post Type này suốt mấy ngày trời tìm hiểu về nó nhưng khi hiểu rồi bạn có thể dễ dàng tuỳ biến và chỉnh sửa hiển thị ở trang chủ.

Ngoài ra còn rất nhiều thủ thuật WordPress hay khác đang chờ mọi người tìm hiểu tại Quách Quỳnh Blog nữa đấy!