Hiển Thị Danh Sách Trang Con Trong WordPress: Hướng Dẫn Chi Tiết
WordPress là một nền tảng quản lý nội dung (CMS) mạnh mẽ, cho phép bạn dễ dàng tạo và quản lý các trang web có cấu trúc phức tạp. Một trong những tính năng quan trọng của WordPress là khả năng tạo ra các trang con (child pages) thuộc một trang cha (parent page). Việc hiển thị danh sách các trang con này trên trang cha hoặc ở các vị trí khác trên website là một yêu cầu phổ biến, giúp người dùng dễ dàng điều hướng và khám phá nội dung liên quan.
Bài viết này sẽ hướng dẫn chi tiết các phương pháp khác nhau để hiển thị danh sách trang con trong WordPress, từ cách sử dụng các hàm tích hợp sẵn của WordPress, tùy chỉnh bằng code, cho đến việc sử dụng các plugin hỗ trợ. Chúng ta sẽ xem xét ưu và nhược điểm của từng phương pháp để bạn có thể lựa chọn giải pháp phù hợp nhất với nhu cầu cụ thể của mình.
Sử Dụng Hàm `wp_list_pages()`
Hàm `wp_list_pages()` là một hàm tích hợp sẵn mạnh mẽ của WordPress, cho phép bạn hiển thị danh sách các trang, bao gồm cả trang con. Hàm này cung cấp nhiều tùy chọn để bạn có thể tùy chỉnh cách hiển thị danh sách, chẳng hạn như sắp xếp thứ tự, giới hạn số lượng trang, và loại trừ các trang cụ thể.
Để hiển thị danh sách trang con của trang hiện tại, bạn có thể sử dụng đoạn code sau trong template của trang cha:
<ul>
<?php
$args = array(
'child_of' => get_the_ID(),
'title_li' => ''
);
wp_list_pages( $args );
?>
</ul>
Trong đoạn code trên:
- `child_of` chỉ định ID của trang cha. Hàm `get_the_ID()` lấy ID của trang hiện tại.
- `title_li` đặt tiêu đề của danh sách. Trong trường hợp này, chúng ta đặt thành rỗng để không hiển thị tiêu đề.
Bạn có thể tùy chỉnh thêm các tham số khác của hàm `wp_list_pages()` để điều chỉnh cách hiển thị danh sách. Ví dụ:
- `sort_column`: Sắp xếp các trang theo tiêu đề, ngày tháng, hoặc thứ tự trang.
- `depth`: Chỉ định số lượng cấp độ trang con cần hiển thị.
- `exclude`: Loại trừ các trang cụ thể khỏi danh sách bằng cách chỉ định ID của chúng.
Ví dụ, để sắp xếp các trang con theo tiêu đề và chỉ hiển thị các trang con cấp 1, bạn có thể sử dụng đoạn code sau:
<ul>
<?php
$args = array(
'child_of' => get_the_ID(),
'title_li' => '',
'sort_column' => 'post_title',
'depth' => 1
);
wp_list_pages( $args );
?>
</ul>
Sử Dụng Shortcode
Nếu bạn không muốn chỉnh sửa trực tiếp các template của theme, bạn có thể sử dụng shortcode để hiển thị danh sách trang con. WordPress cung cấp một shortcode mặc định là `[wp_list_pages]`, nhưng nó không có nhiều tùy chọn như hàm `wp_list_pages()`. Để có được nhiều tùy chỉnh hơn, bạn có thể tạo một shortcode tùy chỉnh.
Đầu tiên, bạn cần thêm đoạn code sau vào file `functions.php` của theme hoặc trong một plugin tùy chỉnh:
<?php
function child_pages_shortcode( $atts ) {
$atts = shortcode_atts( array(
'parent' => get_the_ID(),
'title_li' => '',
'sort_column' => 'menu_order',
'depth' => 1
), $atts, 'child_pages' );
$args = array(
'child_of' => $atts['parent'],
'title_li' => $atts['title_li'],
'sort_column' => $atts['sort_column'],
'depth' => $atts['depth']
);
return '<ul>' . wp_list_pages( $args ) . '</ul>';
}
add_shortcode( 'child_pages', 'child_pages_shortcode' );
?>
Trong đoạn code trên:
- Chúng ta định nghĩa một hàm `child_pages_shortcode()` để xử lý shortcode.
- Hàm `shortcode_atts()` cho phép bạn định nghĩa các thuộc tính của shortcode và giá trị mặc định của chúng.
- Chúng ta sử dụng hàm `wp_list_pages()` để tạo danh sách trang con dựa trên các thuộc tính được truyền vào.
- Hàm `add_shortcode()` đăng ký shortcode với WordPress.
Sau khi thêm đoạn code này, bạn có thể sử dụng shortcode `[child_pages]` trong nội dung của trang hoặc bài viết để hiển thị danh sách trang con của trang hiện tại. Bạn cũng có thể tùy chỉnh các thuộc tính của shortcode để điều chỉnh cách hiển thị danh sách. Ví dụ:
[child_pages parent="10" sort_column="post_title" depth="2"]
Trong ví dụ này, chúng ta hiển thị danh sách trang con của trang có ID là 10, sắp xếp theo tiêu đề và hiển thị hai cấp độ trang con.
Sử Dụng Plugin
Nếu bạn không muốn chỉnh sửa code hoặc tạo shortcode tùy chỉnh, bạn có thể sử dụng các plugin WordPress chuyên dụng để hiển thị danh sách trang con. Có rất nhiều plugin miễn phí và trả phí có sẵn trên kho plugin của WordPress, cung cấp nhiều tính năng và tùy chọn khác nhau.
Một số plugin phổ biến để hiển thị danh sách trang con bao gồm:
- Page Menu Widget
- Subpages Widget
- Display Sub Pages
Các plugin này thường cung cấp giao diện người dùng thân thiện để bạn có thể dễ dàng cấu hình cách hiển thị danh sách trang con, chẳng hạn như sắp xếp thứ tự, giới hạn số lượng trang, và áp dụng các kiểu dáng CSS tùy chỉnh.
Để sử dụng một plugin, bạn chỉ cần cài đặt và kích hoạt nó từ trang quản trị WordPress. Sau đó, bạn có thể thêm widget hoặc shortcode của plugin vào trang hoặc bài viết mà bạn muốn hiển thị danh sách trang con.
Tùy Chỉnh CSS
Bất kể bạn sử dụng phương pháp nào để hiển thị danh sách trang con, bạn có thể tùy chỉnh giao diện của danh sách bằng CSS. WordPress cung cấp nhiều class CSS mặc định cho các thành phần của danh sách trang, cho phép bạn dễ dàng áp dụng các kiểu dáng tùy chỉnh.
Ví dụ, bạn có thể sử dụng các class sau để tùy chỉnh danh sách trang con:
- `page_item`: Áp dụng cho mỗi mục trong danh sách.
- `current_page_item`: Áp dụng cho trang hiện tại.
- `current_page_ancestor`: Áp dụng cho trang cha của trang hiện tại.
Bạn có thể thêm CSS tùy chỉnh vào file `style.css` của theme hoặc sử dụng trình tùy biến CSS trong WordPress để áp dụng các kiểu dáng cho danh sách trang con. Ví dụ, để thay đổi màu nền của trang hiện tại trong danh sách trang con, bạn có thể thêm đoạn CSS sau:
.page_item.current_page_item a {
background-color: #f0f0f0;
}
Kết luận
Việc hiển thị danh sách trang con trong WordPress là một cách hiệu quả để cải thiện khả năng điều hướng và trải nghiệm người dùng trên website của bạn. Bài viết này đã giới thiệu các phương pháp khác nhau để thực hiện việc này, từ sử dụng các hàm tích hợp sẵn của WordPress, tạo shortcode tùy chỉnh, cho đến sử dụng các plugin hỗ trợ. Hy vọng rằng bạn có thể áp dụng các kiến thức này để tạo ra một website WordPress thân thiện và dễ sử dụng hơn.
