HomeHướng dẫn WordPress

Hướng dẫn đưa category ra trang chủ

Like Tweet Pin it Share Share Email

vps vultr 728

Category hay tiếng Việt gọi là danh mục.

Đây là hình thức phân loại bài viết (post) trong WordPress. Ví dụ trên blog này mình có các category như hướng dẫn WordPress, plugin WordPress vân vân.

Vậy sau khi tạo category và phân loại bài viết, bạn đưa category ra trang chủ như thế nào?

Trong bài viết này mình sẽ hướng dẫn bạn một vài cách đưa category ra trang chủ. Từ đơn giản đến nâng cao.

1. Sử dụng menu

Đây là hình thức phổ biến nhất trong việc đưa category ra trang chủ. Mình đã có bài viết về cách sử dụng menu trong WordPress.

Trong quá trình tạo menu, bạn có thể sử dụng category như là thành phần của menu.

Nếu bạn chưa biết cách tạo menu, bạn có thể đọc lại bài viết đó.

2. Sử dụng category widget

WordPress cung cấp cho bạn Category Widget để hiển thị toàn bộ category trong website. Bạn có thể đặt widget ở những vị trí sidebar mà theme hỗ trợ.

cach-dua-category-ra-trang-chu-1

Giao diện cấu hình Category Widget

cach-dua-category-ra-trang-chu-2

Hiển thị category widget ở trang chủ

Với phương pháp này, bạn không kiểm soát việc hiển thị của chuyên mục. Ví dụ: bạn không muốn hiển thị một category A chẳng hạn. Với widget này, bạn không thể làm được như vậy

3. Sử dụng custom menu

Với phương pháp này, bạn sẽ sử dụng custom menu để hiển thị category.

Đầu tiên bạn cần tạo một custom menu. Cách tạo cũng giống như cách tạo menu thông thường.

cach-dua-category-ra-trang-chu-3

Tạo custom menu chứa category bạn muốn hiển thị

Sau khi tạo xong custom menu, bạn vào phần Giao diện -> Widget. Bạn kéo widget có tên Custom Menu (giao diện tiếng việt dịch là Tùy chọn) vào sidebar bạn muốn hiển thị. Lúc này bạn chọn custom menu bạn vừa tạo ở trên.

cach-dua-category-ra-trang-chu-4

Với phương pháp này, chúng ta gặp đôi chút khó khăn khi muốn hiển thị số bài post cho mỗi category. Để làm được như vậy, bạn vào Giao diện -> Sửa, chọn file functions.php. Và bổ sung đoạn code vào cuối file functions.

function custom_nav_args($args){
if($args['menu'] && $args['menu']->name == 'Category Nav') { // replace 'Category Nav' with your menu name
$args['walker'] = new Custom_Category_Menu_Walker();
}
return $args;
}
add_filter('wp_nav_menu_args', 'custom_nav_args');
class Custom_Category_Menu_Walker extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
if ($item->object == 'category') {
$category = get_category($item->object_id);
}
$item_output = '<a'. $attributes .'>';
$item_output .= apply_filters( 'the_title', $item->title, $item->ID ) . (!empty($category)?" ({$category->count})":"");
$item_output .= '</a>';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

Và đây là thành quả:

cach-dua-category-ra-trang-chu-5

Lời kết

Thông qua bài viết ngắn ngọn này, bạn đã biết cách đưa category ra màn hình trang chủ.

Nếu bạn có vấn đề gì, hãy để lại comment bên dưới.

getresponse_300x250

Đăng ký 30 ngày sử dụng miễn phí. Không ràng buộc. Không cần cung cấp thẻ visa. Xem cách đăng ký.

Bình luận (8)

Trả lời

Mình rất vui khi bạn đã quyết định để lại comment. Chú ý tất cả comment đều được kiểm duyệt cẩn thận nên đừng cố spam hoặc quảng cáo. Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Name. Xin cảm ơn.

Địa chỉ email của bạn sẽ không được tiết lộ Trường đánh dấu * là bắt buộc

Scroll Up