Thêm numeric pagination trong theme WordPress
Thêm Phân Trang Số (Numeric Pagination) vào Theme WordPress
Phân trang số là một tính năng quan trọng giúp người dùng dễ dàng điều hướng qua các bài viết trên trang web WordPress của bạn, đặc biệt là trên các trang lưu trữ, danh mục và trang chủ. Thay vì chỉ có các liên kết “Bài viết cũ hơn” và “Bài viết mới hơn”, phân trang số hiển thị một dãy số cho phép người dùng truy cập trực tiếp đến bất kỳ trang nào trong danh sách bài viết. Điều này cải thiện trải nghiệm người dùng, giúp họ tìm kiếm thông tin một cách nhanh chóng và hiệu quả hơn.
Tại Sao Nên Sử Dụng Phân Trang Số?
Mặc dù các liên kết “Bài viết cũ hơn” và “Bài viết mới hơn” đủ để di chuyển giữa các trang, phân trang số mang lại nhiều lợi ích đáng kể:
- Cải thiện điều hướng trang web: Người dùng có thể nhanh chóng chuyển đến các trang cụ thể mà không cần phải nhấp liên tục qua các trang trước đó.
- Nâng cao trải nghiệm người dùng (UX): Điều hướng dễ dàng hơn dẫn đến trải nghiệm người dùng tốt hơn, khuyến khích họ khám phá thêm nội dung trên trang web của bạn.
- Tăng thời gian ở lại trang: Khi người dùng dễ dàng tìm thấy nội dung họ quan tâm, họ có nhiều khả năng ở lại trang web của bạn lâu hơn.
- Tốt cho SEO: Phân trang số giúp công cụ tìm kiếm thu thập dữ liệu và lập chỉ mục nội dung trang web của bạn một cách hiệu quả hơn.
Các Cách Thêm Phân Trang Số vào Theme WordPress
Có nhiều cách để thêm phân trang số vào theme WordPress của bạn, bao gồm:
- Sử dụng plugin WordPress.
- Chỉnh sửa trực tiếp các file theme (functions.php, index.php, archive.php, category.php, v.v.).
- Sử dụng thư viện bên ngoài (ví dụ: PWP_Pagination).
Chúng ta sẽ tập trung vào cách chỉnh sửa trực tiếp các file theme, vì nó cho phép bạn kiểm soát hoàn toàn cách phân trang hiển thị và hoạt động.
Thêm Phân Trang Số bằng Code (Chỉnh Sửa File Theme)
Cách này đòi hỏi bạn phải có kiến thức cơ bản về HTML, CSS và PHP. Luôn nhớ sao lưu theme của bạn trước khi thực hiện bất kỳ thay đổi nào để tránh mất dữ liệu.
Bước 1: Xác định File Cần Chỉnh Sửa
Bạn cần xác định các file nào trong theme của bạn hiển thị danh sách các bài viết mà bạn muốn thêm phân trang. Thường thì đó là các file sau:
index.php(Trang chủ)archive.php(Trang lưu trữ)category.php(Trang danh mục)tag.php(Trang thẻ)search.php(Trang tìm kiếm)
Tùy thuộc vào theme của bạn, các file này có thể có tên khác hoặc được cấu trúc khác nhau. Kiểm tra code của theme để xác định các file chính xác cần chỉnh sửa.
Bước 2: Thêm Code Phân Trang vào File Theme
Mở file bạn đã xác định ở bước 1 và tìm vị trí bạn muốn hiển thị phân trang (thường là sau vòng lặp hiển thị bài viết – the Loop). Thêm code PHP sau:
<?php
global $wp_query;
$big = 999999999; // cần cho việc thay thế chuỗi URL
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text' => __('« Previous'),
'next_text' => __('Next »'),
) );
?>
Giải thích code:
global $wp_query;: Truy cập đối tượng truy vấn WordPress toàn cục.$big = 999999999;: Một số lớn được sử dụng làm trình giữ chỗ trong URL.paginate_links(): Hàm WordPress tạo các liên kết phân trang.'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ): Tạo URL cơ sở cho các liên kết phân trang.'format' => '?paged=%#%': Định dạng URL cho các trang phân trang.'current' => max( 1, get_query_var('paged') ): Xác định trang hiện tại.'total' => $wp_query->max_num_pages: Tổng số trang.'prev_text' => __('« Previous'): Văn bản cho liên kết “Previous”.'next_text' => __('Next »'): Văn bản cho liên kết “Next”.
Bước 3: Tùy Chỉnh CSS (Tùy Chọn)
Code PHP trên sẽ tạo ra các liên kết phân trang, nhưng chúng có thể trông không đẹp mắt. Bạn cần thêm CSS để định dạng chúng. Mở file style.css của theme (hoặc một file CSS tùy chỉnh khác mà bạn sử dụng) và thêm các quy tắc CSS sau:
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination a,
.pagination span {
display: inline-block;
padding: 8px 12px;
margin: 0 5px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.pagination a:hover {
background-color: #f0f0f0;
}
.pagination .current {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
.pagination .prev,
.pagination .next {
padding: 8px 15px;
}
Bạn có thể tùy chỉnh các quy tắc CSS này để phù hợp với thiết kế của theme của bạn.
Bước 4: Thêm Code vào functions.php (Nếu Cần)
Trong một số trường hợp, bạn có thể cần thêm một đoạn code vào file functions.php của theme để đảm bảo phân trang hoạt động chính xác, đặc biệt là khi sử dụng truy vấn tùy chỉnh (custom queries). Thêm đoạn code sau vào functions.php:
function my_custom_pagination() {
global $wp_query;
$big = 999999999; // need an unlikely integer
$pages = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array',
'prev_text' => __('« Previous'),
'next_text' => __('Next »'),
) );
if( is_array( $pages ) ) {
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
foreach ( $pages as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}
Sau đó, bạn có thể gọi hàm này trong các file theme của bạn thay vì sử dụng paginate_links() trực tiếp.
Bước 5: Kiểm Tra và Gỡ Lỗi
Sau khi thêm code, hãy kiểm tra trang web của bạn để đảm bảo phân trang hoạt động chính xác. Nếu gặp sự cố, hãy kiểm tra lại code của bạn, đảm bảo bạn đã đặt code đúng vị trí và không có lỗi cú pháp. Sử dụng công cụ gỡ lỗi của trình duyệt để xác định các vấn đề.
Sử Dụng Plugin WordPress
Nếu bạn không muốn chỉnh sửa code của theme, bạn có thể sử dụng một plugin WordPress để thêm phân trang số. Có rất nhiều plugin phân trang miễn phí và trả phí có sẵn trên WordPress.org.
Một số plugin phân trang phổ biến bao gồm:
- WP-PageNavi
- Pagination by BestWebSoft
- Alphabetic Pagination
Để sử dụng plugin, hãy cài đặt và kích hoạt nó từ trang quản trị WordPress của bạn. Sau đó, làm theo hướng dẫn của plugin để cấu hình và hiển thị phân trang trên trang web của bạn.
Lưu Ý Quan Trọng
- Luôn sao lưu theme của bạn trước khi thực hiện bất kỳ thay đổi nào.
- Sử dụng child theme nếu bạn đang chỉnh sửa một theme có sẵn, để các thay đổi của bạn không bị mất khi theme được cập nhật.
- Kiểm tra code của bạn cẩn thận để tránh lỗi cú pháp.
- Sử dụng công cụ gỡ lỗi của trình duyệt để xác định các vấn đề.
Thêm phân trang số là một cách đơn giản nhưng 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. Hãy chọn phương pháp phù hợp với kỹ năng và nhu cầu của bạn để triển khai tính năng này một cách hiệu quả.
- Chặn referrer spam WordPress trong Google Analytics
- Hiệu ứng fade-in cho widget cuối sidebar WordPress
- Tạo sales funnel chuyển đổi cao WordPress
- Hướng dẫn thêm Twitter Cards vào WordPress cho người mới
- Khắc phục lỗi “Missing Temporary Folder” WordPress
- Thụt lề đoạn văn WordPress
- Mở liên kết ngoài tab mới WordPress
