Hiển thị taxonomy terms sidebar WordPress

2 tháng ago, WordPress Plugin, 2 Views
Hiển thị taxonomy terms sidebar WordPress

Giới thiệu về Taxonomy và Tại sao nên Hiển thị chúng trong Sidebar

WordPress cung cấp một hệ thống phân loại mạnh mẽ gọi là Taxonomy, cho phép bạn tổ chức nội dung của mình một cách hiệu quả. Taxonomy không chỉ bao gồm Categories (Danh mục) và Tags (Thẻ), mà bạn còn có thể tạo các Taxonomy tùy chỉnh (Custom Taxonomies) để phù hợp với nhu cầu cụ thể của website.

Việc hiển thị các term (thuật ngữ) của Taxonomy trong sidebar (thanh bên) mang lại nhiều lợi ích:

  • Cải thiện Điều hướng: Giúp người dùng dễ dàng tìm kiếm và khám phá nội dung liên quan một cách nhanh chóng.
  • Tăng tính Khám phá: Khuyến khích người dùng khám phá các phần khác nhau của trang web mà họ có thể chưa từng biết đến.
  • Tối ưu hóa SEO: Cung cấp thêm các liên kết nội bộ, giúp bot tìm kiếm dễ dàng thu thập thông tin và lập chỉ mục trang web của bạn.

Bài viết này sẽ hướng dẫn bạn các cách khác nhau để hiển thị Taxonomy terms trong sidebar của trang web WordPress, từ sử dụng widget có sẵn đến viết code tùy chỉnh.

Sử dụng Widget Categories hoặc Tag Cloud mặc định của WordPress

WordPress cung cấp sẵn các widget Categories và Tag Cloud cho phép bạn hiển thị danh sách các category hoặc tag trong sidebar một cách nhanh chóng và dễ dàng. Tuy nhiên, các widget này chỉ hỗ trợ Categories và Tags mặc định, không hỗ trợ các custom taxonomy.

Cách sử dụng:

  1. Truy cập Appearance > Widgets trong bảng điều khiển WordPress.
  2. Tìm widget Categories hoặc Tag Cloud trong danh sách các widget có sẵn.
  3. Kéo và thả widget vào vị trí sidebar mong muốn.
  4. Cấu hình các tùy chọn hiển thị của widget (ví dụ: tiêu đề, số lượng category/tag hiển thị, kiểu hiển thị).
  5. Nhấn nút Save để lưu thay đổi.

Mặc dù đơn giản, phương pháp này có hạn chế là không hỗ trợ custom taxonomy và các tùy chỉnh nâng cao.

Sử dụng Plugin để Hiển thị Taxonomy Terms trong Sidebar

Có rất nhiều plugin WordPress miễn phí và trả phí được thiết kế để giúp bạn hiển thị Taxonomy terms trong sidebar một cách linh hoạt hơn. Các plugin này thường cung cấp nhiều tùy chọn cấu hình, cho phép bạn chọn Taxonomy nào muốn hiển thị, sắp xếp các term theo thứ tự nào, và tùy chỉnh giao diện của danh sách term.

Một số plugin phổ biến:

  • Custom Taxonomy Widget: Plugin này cho phép bạn chọn bất kỳ custom taxonomy nào để hiển thị trong sidebar.
  • Taxonomy List Widget: Cung cấp nhiều tùy chọn hiển thị, bao gồm hiển thị hierarchical taxonomy, đếm số lượng bài viết trong mỗi term, và tùy chỉnh CSS.
  • Advanced Sidebar Menu: Cho phép tạo menu sidebar động dựa trên taxonomy terms.

Cách cài đặt và sử dụng plugin:

  1. Truy cập Plugins > Add New trong bảng điều khiển WordPress.
  2. Tìm kiếm plugin bạn muốn sử dụng.
  3. Nhấn nút Install Now và sau đó Activate để kích hoạt plugin.
  4. Truy cập Appearance > Widgets.
  5. Tìm widget do plugin cung cấp và kéo thả vào vị trí sidebar mong muốn.
  6. Cấu hình các tùy chọn hiển thị của widget theo nhu cầu.
  7. Nhấn nút Save để lưu thay đổi.

Sử dụng plugin là một cách dễ dàng và nhanh chóng để hiển thị Taxonomy terms trong sidebar mà không cần phải viết code.

Viết Code Tùy Chỉnh để Hiển thị Taxonomy Terms

Nếu bạn muốn có toàn quyền kiểm soát giao diện và chức năng của danh sách Taxonomy terms trong sidebar, bạn có thể viết code tùy chỉnh. Phương pháp này đòi hỏi kiến thức về PHP và WordPress theme development.

Các bước thực hiện:

  1. Xác định Taxonomy cần hiển thị: Xác định slug (tên) của Taxonomy bạn muốn hiển thị trong sidebar.
  2. Tạo Widget tùy chỉnh: Bạn có thể tạo một widget tùy chỉnh bằng cách kế thừa lớp WP_Widget. Trong widget, bạn sẽ sử dụng hàm get_terms() để lấy danh sách các term của Taxonomy đã chọn.
  3. Hiển thị danh sách Term: Sử dụng vòng lặp để hiển thị danh sách các term, tạo các liên kết đến trang lưu trữ của từng term.
  4. Đăng ký Widget: Đăng ký widget tùy chỉnh của bạn để nó xuất hiện trong danh sách các widget có sẵn.

Ví dụ về code:

“`php
__( ‘Displays a custom taxonomy terms in the sidebar.’, ‘text_domain’ ), )
);
}

public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
$taxonomy = $instance[‘taxonomy’];

echo $args[‘before_widget’];
if ( ! empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

$terms = get_terms( array(
‘taxonomy’ => $taxonomy,
‘hide_empty’ => false,
) );

if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
echo ‘

‘;
} else {
echo ‘

No terms found.

‘;
}

echo $args[‘after_widget’];
}

public function form( $instance ) {
$title = isset( $instance[ ‘title’ ] ) ? $instance[ ‘title’ ] : __( ‘New title’, ‘text_domain’ );
$taxonomy = isset( $instance[ ‘taxonomy’ ] ) ? $instance[ ‘taxonomy’ ] : ‘category’;
?>

<label for="get_field_id( ‘title’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name=”get_field_name( ‘title’ ); ?>” type=”text” value=”” />

<label for="get_field_id( ‘taxonomy’ ); ?>”>
<input class="widefat" id="get_field_id( ‘taxonomy’ ); ?>” name=”get_field_name( ‘taxonomy’ ); ?>” type=”text” value=”” />
Enter the taxonomy slug.

<?php
}

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['taxonomy'] = ( ! empty( $new_instance['taxonomy'] ) ) ? strip_tags( $new_instance['taxonomy'] ) : 'category';
return $instance;
}
}

function register_custom_taxonomy_widget() {
register_widget( 'Custom_Taxonomy_Widget' );
}
add_action( 'widgets_init', 'register_custom_taxonomy_widget' );
“`

Giải thích:

  • Đoạn code trên định nghĩa một widget tùy chỉnh tên là Custom_Taxonomy_Widget.
  • Hàm widget() chịu trách nhiệm hiển thị nội dung của widget trong sidebar. Nó lấy danh sách các term từ taxonomy được chỉ định và hiển thị chúng dưới dạng danh sách liên kết.
  • Hàm form() tạo các trường nhập liệu trong bảng điều khiển widget, cho phép bạn nhập tiêu đề và slug của taxonomy.
  • Hàm update() xử lý việc lưu trữ các tùy chọn widget.
  • Cuối cùng, hàm register_custom_taxonomy_widget() đăng ký widget để nó xuất hiện trong danh sách các widget có sẵn.

Lưu ý: Bạn cần đặt code này vào một plugin hoặc vào file functions.php của theme con (child theme). Việc chỉnh sửa trực tiếp file functions.php của theme chính có thể gây mất các thay đổi khi theme được cập nhật.

Tùy chỉnh Giao diện của Danh sách Taxonomy Terms

Bất kể bạn sử dụng widget có sẵn, plugin hay code tùy chỉnh, bạn đều có thể tùy chỉnh giao diện của danh sách Taxonomy terms bằng CSS. Bạn có thể thay đổi màu sắc, font chữ, kích thước chữ, khoảng cách, và các thuộc tính CSS khác để phù hợp với thiết kế của trang web.

Cách tùy chỉnh CSS:

  • Sử dụng CSS tùy chỉnh trong theme: Thêm CSS tùy chỉnh vào file style.css của theme con hoặc sử dụng tùy chọn “Customize > Additional CSS” trong bảng điều khiển WordPress.
  • Sử dụng Plugin CSS: Sử dụng các plugin CSS để thêm CSS vào trang web một cách dễ dàng.
  • Sử dụng Chrome DevTools hoặc các công cụ tương tự: Kiểm tra mã HTML của danh sách Taxonomy terms trong sidebar và sử dụng Chrome DevTools (hoặc các công cụ tương tự) để tìm các class CSS cần chỉnh sửa.

Ví dụ:

“`css
/* Tùy chỉnh danh sách Taxonomy terms */
.widget ul {
list-style: none; /* Loại bỏ dấu đầu dòng */
padding: 0;
}

.widget ul li {
margin-bottom: 5px;
}

.widget ul li a {
color: #333; /* Thay đổi màu chữ */
text-decoration: none; /* Loại bỏ gạch chân */
}

.widget ul li a:hover {
color: #007bff; /* Thay đổi màu chữ khi di chuột */
}
“`

Đoạn CSS trên sẽ loại bỏ dấu đầu dòng, thêm khoảng cách giữa các mục trong danh sách, thay đổi màu chữ và loại bỏ gạch chân khỏi các liên kết, và thay đổi màu chữ khi di chuột.

Kết luận

Việc hiển thị Taxonomy terms trong sidebar là một cách tuyệt vời để cải thiện điều hướng, tăng tính khám phá và tối ưu hóa SEO cho trang web WordPress của bạn. Bạn có thể sử dụng widget có sẵn, plugin hoặc viết code tùy chỉnh để thực hiện việc này. Hãy chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của bạn, và đừng quên tùy chỉnh giao diện để phù hợp với thiết kế tổng thể của trang web.

Related Topics by Tag
, , , ,

..