Hiển thị subcategories trên trang category WordPress

4 tháng ago, Hướng dẫn WordPress, Views

Giới thiệu

Khi xây dựng một trang web WordPress với nhiều nội dung, việc sử dụng categories (danh mục) để tổ chức bài viết là rất quan trọng. Tuy nhiên, nếu bạn có nhiều categories con (subcategories), việc hiển thị chúng một cách rõ ràng trên trang category có thể giúp người dùng dễ dàng tìm kiếm và điều hướng nội dung hơn. Bài viết này sẽ hướng dẫn bạn các cách khác nhau để hiển thị subcategories trên trang category trong WordPress.

Tại sao nên hiển thị Subcategories trên trang Category?

Hiển thị subcategories trên trang category mang lại nhiều lợi ích, bao gồm:

Cải thiện trải nghiệm người dùng: Người dùng có thể dễ dàng tìm thấy nội dung họ quan tâm mà không cần phải lướt qua nhiều trang.
Tăng cường SEO: Các subcategories hoạt động như các liên kết nội bộ, giúp tăng cường cấu trúc liên kết của trang web và cải thiện thứ hạng trên công cụ tìm kiếm.
Tổ chức nội dung tốt hơn: Giúp trang web trở nên gọn gàng và chuyên nghiệp hơn, đặc biệt là với các trang web có nhiều nội dung.

Các phương pháp hiển thị Subcategories

Có nhiều cách để hiển thị subcategories trên trang category của WordPress. Dưới đây là một số phương pháp phổ biến nhất:

Sử dụng Theme mặc định (nếu hỗ trợ)

Một số theme WordPress đã tích hợp sẵn tính năng hiển thị subcategories trên trang category. Kiểm tra tùy chỉnh theme của bạn để xem có tùy chọn này không. Thường thì bạn có thể tìm thấy nó trong phần Appearance > Customize, sau đó tìm các tùy chọn liên quan đến category hoặc archive pages.

Nếu theme của bạn hỗ trợ, bạn chỉ cần bật tùy chọn và lưu lại các thay đổi.

Sử dụng Code trong File Template

Phương pháp này đòi hỏi bạn phải chỉnh sửa trực tiếp các file template của theme. Hãy sao lưu theme trước khi thực hiện bất kỳ thay đổi nào.

Bước 1: Xác định File Template

File template chịu trách nhiệm hiển thị trang category thường là category.php hoặc archive.php. Nếu theme của bạn không có category.php, nó sẽ sử dụng archive.php để hiển thị các trang category.

Bước 2: Thêm Code

Mở file template đã xác định (ví dụ: category.php) và thêm đoạn code sau vào nơi bạn muốn hiển thị subcategories:


<?php
    $category = get_queried_object();
    $category_id = $category->term_id;

    $args = array(
        'child_of' => $category_id,
        'orderby' => 'name',
        'order' => 'ASC',
        'hide_empty' => 1,
        'title_li' => ''
    );

    $subcategories = get_categories( $args );

    if ( $subcategories ) {
        echo '<ul>';
        foreach( $subcategories as $subcategory ) {
            echo '<li><a href="' . esc_url( get_category_link( $subcategory->term_id ) ) . '">' . esc_html( $subcategory->name ) . '</a></li>';
        }
        echo '</ul>';
    }
?>

Đoạn code này sẽ:

Lấy thông tin category hiện tại.
Truy vấn các subcategories của category hiện tại.
Hiển thị danh sách các subcategories dưới dạng danh sách không thứ tự (<ul>).

Lưu ý: Chỉnh sửa code trực tiếp trong theme có thể gây ra lỗi nếu không cẩn thận. Luôn sao lưu theme trước khi thực hiện bất kỳ thay đổi nào.

Sử dụng Plugin

Sử dụng plugin là một cách đơn giản và an toàn để hiển thị subcategories trên trang category mà không cần chỉnh sửa code. Có nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện điều này.

Dưới đây là một số plugin phổ biến:

Category Order and Taxonomy Terms Order: Plugin này cho phép bạn sắp xếp thứ tự categories và subcategories một cách dễ dàng, đồng thời cung cấp các tùy chọn hiển thị linh hoạt.
List Category Posts: Plugin này cho phép bạn hiển thị danh sách bài viết từ một category cụ thể, bao gồm cả subcategories.
WooCommerce Category Accordion: (Nếu bạn sử dụng WooCommerce) Plugin này tạo ra một accordion menu cho các categories sản phẩm, giúp người dùng dễ dàng điều hướng.

Hướng dẫn sử dụng plugin (ví dụ: Category Order and Taxonomy Terms Order):

Cài đặt và kích hoạt plugin Category Order and Taxonomy Terms Order.
Đi đến Posts > Taxonomy Order.
Kéo và thả các categories để sắp xếp thứ tự hiển thị.
Kiểm tra cài đặt plugin để xem có các tùy chọn hiển thị subcategories không.

Tùy chỉnh hiển thị Subcategories

Sau khi hiển thị được subcategories, bạn có thể tùy chỉnh giao diện hiển thị để phù hợp với thiết kế của trang web. Dưới đây là một số tùy chỉnh phổ biến:

Sử dụng CSS

Bạn có thể sử dụng CSS để thay đổi kiểu dáng của danh sách subcategories, bao gồm màu sắc, font chữ, khoảng cách, và các hiệu ứng hover. Thêm CSS vào file style.css của theme (hoặc sử dụng một plugin CSS tùy chỉnh).

Ví dụ:


.category-subcategories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-subcategories li {
    margin-bottom: 5px;
}

.category-subcategories a {
    color: #333;
    text-decoration: none;
}

.category-subcategories a:hover {
    color: #007bff;
}

Đoạn CSS này sẽ:

Loại bỏ dấu chấm mặc định của danh sách.
Thiết lập khoảng cách giữa các mục trong danh sách.
Thay đổi màu sắc và loại bỏ gạch chân của liên kết.
Thay đổi màu sắc của liên kết khi di chuột qua.

Sử dụng Template Tags (trong code)

Bạn có thể tùy chỉnh code hiển thị subcategories để thêm các thông tin khác, chẳng hạn như số lượng bài viết trong mỗi subcategory. Sử dụng các template tags của WordPress để lấy thông tin và hiển thị chúng.

Ví dụ, để hiển thị số lượng bài viết trong mỗi subcategory, bạn có thể sửa đổi code như sau:


<?php
    $category = get_queried_object();
    $category_id = $category->term_id;

    $args = array(
        'child_of' => $category_id,
        'orderby' => 'name',
        'order' => 'ASC',
        'hide_empty' => 1,
        'title_li' => ''
    );

    $subcategories = get_categories( $args );

    if ( $subcategories ) {
        echo '<ul>';
        foreach( $subcategories as $subcategory ) {
            $count = $subcategory->category_count;
            echo '<li><a href="' . esc_url( get_category_link( $subcategory->term_id ) ) . '">' . esc_html( $subcategory->name ) . ' (' . $count . ') </a></li>';
        }
        echo '</ul>';
    }
?>

Trong đoạn code này, $subcategory->category_count trả về số lượng bài viết trong subcategory, và nó được hiển thị trong dấu ngoặc đơn bên cạnh tên của subcategory.

Kết luận

Hiển thị subcategories trên trang category là một cách hiệu quả để cải thiện trải nghiệm người dùng và SEO cho trang web WordPress của bạn. Bạn có thể sử dụng theme mặc định (nếu hỗ trợ), chỉnh sửa code template, hoặc sử dụng plugin để thực hiện điều này. Hãy lựa chọn phương pháp phù hợp với trình độ kỹ thuật và nhu cầu của bạn. Đừng quên tùy chỉnh giao diện hiển thị để phù hợp với thiết kế tổng thể của trang web.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa