Trong bài học này, chúng ta sẽ tiến hành phân trang danh sách bài viết hay còn gọi là WordPress Pagination. Ngoài ra, chúng ta sẽ tạo một thanh phân trang tùy chỉnh chứ không dùng mặc định của WordPress.
Video WordPress Pagination – Phân trang danh sách bài viết
Hướng dẫn chi tiết
Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.
Phân trang đơn giản của WordPress
Điều hướng phân trang của chúng ta sẽ nằm trong điều kiện if và nằm ngoài vòng lặp while. Do đó, bạn cũng cần chỉnh lại vị trí của điều kiện if, bao bọc toàn bộ khối content của chúng ta. Xem code demo để hiểu rõ nhé.
Phân trang chỉ có nút Next và Previous
Nếu bạn chỉ muốn phân trang theo dạng 2 nút Next và Previous, các bạn chỉ cần sử dụng 2 template tag là previous_posts_link và next_posts_link ngay sau khi đóng vòng lặp while và trước khi kết thúc điều kiện if.
previous_posts_link(__('<-- Newer posts','glw'));
next_posts_link(__('Older posts -->','glw'));
Còn về việc vì sao previous link lại là tin mới nhất còn next link lại là bài viết cũ thì mọi người tự suy nghĩ nhé :v (gợi ý: danh sách bài viết được sắp xếp mặc định theo thời gian từ mới nhất đến cũ nhất).
"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
Phân trang bằng thanh menu có đánh số
Nếu bạn muốn phân trang dạng đánh số, các bạn sử dụng template tag the_posts_pagination. Kết quả sẽ được như bên dưới.
Như các bạn thấy, chúng ta đã có thanh phân trang dạng đánh số. Tuy nhiên, định dạng không được như chúng ta mong muốn. Tương tự như custom menu mà mình đã hướng dẫn, các bạn có thể chỉnh lại thanh phân trang hiển thị theo css mà chúng ta đã có trong template html. Mục tiêu của chúng ta là thanh phân trang như thế này.
Tùy chỉnh thanh phân trang
Tương tự như việc tùy chỉnh menu, chúng ta cũng bóc tách thanh phân trang thành từng phần nhỏ, tùy chỉnh từng phần nhỏ đó và lắp ráp lại thành kết quả cuối cùng.
<div class="rt-pagination pt-60 text-center">
<ul class="clearfix">
<li class="active"><a href="javascript:void(0)">01</a></li>
<li><a href="javascript:void(0)">02</a></li>
<li><a href="javascript:void(0)">03</a></li>
<li><a href="javascript:void(0)"><i class="zmdi zmdi-chevron-right"></i></a></li>
</ul>
</div>
- Kết quả cuối cùng sẽ là $pagination có kiểu dữ liệu chuỗi string.
- Thanh phân trang có cấu trúc như sau: bao bên ngoài là div và ul. Mỗi số trang sẽ là các thẻ li bao lấy thẻ a chứa đường dẫn trang.
- Đối với trang hiện tại (trang đang xem), chúng ta sẽ thêm class active cho thẻ li.
Từ những phân tích trên, chúng ta thấy div và ul là những thành phần gọi 1 lần, chứa dữ liệu tĩnh nên chỉ cần cộng chuỗi đơn giản là được. Đối với các thẻ li và a, dữ liệu sẽ thay đổi và lặp đi lặp lại nhiều lần nên chúng ta sẽ đặt chúng trong vòng lặp.
Các bạn tạo file pagination.php trong thư mục goclamweb/includes. Đừng quên include nó vào functions.php nhé. Chúng ta sẽ có hàm như sau
if(!function_exists('glw_custom_pagination')){
function glw_custom_pagination( WP_Query $wp_query = null, $echo = true ) {
if ( $wp_query === null ) {
global $wp_query;
}
$pages = paginate_links(array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var( 'paged' ) ),
'total' => $wp_query->max_num_pages,
'type' => 'array',
'show_all' => false,
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '<i class="zmdi zmdi-chevron-left"></i>',
'next_text' => '<i class="zmdi zmdi-chevron-right"></i>',
'add_args' => false,
'add_fragment' => ''
)
);
if ( is_array( $pages ) ) {
$pagination = '<div class="rt-pagination pt-60 text-center"><ul class="clearfix">';
foreach ($pages as $page) {
$pagination .= '<li'.(strpos($page,'current')!== false ? ' class="active" ':'').'>';
if(strpos($page,'current')!== false){
if(get_query_var('paged') > 1){
$pagination .= '<a>'. get_query_var('paged') .'</a>';
}else{
$pagination .= '<a>'. 1 .'</a>';
}
}else{
$pagination .= str_replace('class="page-numbers"', '', $page);
}
$pagination .= '</li>';
}
$pagination .= '</ul></div>';
if($echo === true){
echo $pagination;
}else{
return $pagination;
}
}
return null;
}
}
Một số hàm chúng ta cần quan tâm đến:
paginate_links: tạo ra các link phân trang. Hàm này cần truyền vào tham số có dạng mảng chứa các phần tử sau.
- base: cơ sở của đườgn dẫn phân trang
- format: định dạng của cấu trúc phân trang
- current: số trang hiện tại. Mặc định là 1
- total: số trang tối đa
- show_all: hiển thị tất cả các trang hay rút gọn nó. Mặc định là false (rút gọn)
- end_size: số trang sẽ hiển thị đầu và cuối danh sách. Mặc định là 1
- mid_size: số trang sẽ hiễn thị 2 bên trang hiện tại. Mặc định là 2.
- prev_next: có hiển thị nút Trang trước và Trang Sau hay không. Mặc định là true.
- prev_text: đoạn ký tự cho nút Trang trước. Mặc định là “<<Previous”
- next_text: đoạn ký tự cho nút Trang sau. Mặc định là “Next >>”
- type: điịnh dạng ủa giá trị trả về. Các giá trị có thể là ‘plain’, ‘array’ và ‘list’. Mặc định là ‘plain’
- add_array: mảng tham số truy vấn được thêm vào. Mặc định là false.
- add_fragment: chuỗi ký tự được thêm vào mỗi link page.
- before_page_number: chuỗi ký tự xuất hiện trước số trang
- after_page_number: chuỗi ký tự xuất hiện sau số trang
get_query_var(‘paged’): lấy giá trị của tham số trên đường dẫn. Chúng ta sẽ dùng hàm này lấy thứ tự của số trang hiện tại trên thanh url theo tham số paged.
Lưu ý: hàm glw_custom_pagination chỉ trả về dữ liệu. Để hiển thị thanh phân trang, chúng ta sẽ có 2 lựa chọn, nếu tham số $echo === true thì sẽ echo ra màn hình, còn không thì sẽ trả về thanh phân trang (có kiểu chuỗi).
Link tài liệu chính chủ WordPress về các hàm đã dùng trong bài học nếu muốn tìm hiểu sâu hơn
Code hoàn thành của bài học: Google Drive
Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Đừng quên Like, Share nếu thấy bài viết thú vị.
Liên hệ
