
Hướng dẫn tạo custom pagination phân trang trong WordPress

Mặc dù WordPress đã có sẵn hàm hỗ trợ hiển thị phân trạng, tuy nhiên nó vẫn không đẹp và chưa hài lòng nhiều anh em coder. Để custom cũng không quá khó vì đã có rất nhiều code được chia sẻ trên mạng, tuy nhiên để code đẹp và phù hợp với theme thì không phải dễ. Trong bài viết này mình sẽ hướng dẫn bạn chi tiết cách custom pagination phân trang trong WordPress.
Tạo template phân trang bằng HTML bootstrap
Mình sẽ sử dụng HTML của boststrap để làm mẫu cho code phân trang. Trong phần này bạn chú ý đến class active
, nó sẽ là trang hiện tại.
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

Mẫu phân trang sử dụng Bootstrap
Bạn có thể sử dụng mẫu riêng của theme mình, tuy nhiên bạn phải chú ý đến cấu trúc, đặt biệt là các thẻ <li>
nhé.
Tạo hàm phân trang trong functions.php
Mình sẽ sử dụng hàm phân trang mà tuandc.com
đang sử dụng, mình sẽ giải thích trong code như sau:
function pagination_tdc() {
if( is_singular() )
return;
global $wp_query;
/** Ngừng thực thi nếu có ít hơn hoặc chỉ có 1 bài viết */
if( $wp_query->max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->max_num_pages );
/** Thêm page đang được lựa chọn vào mảng*/
if ( $paged >= 1 )
$links[] = $paged;
/** Thêm những trang khác xung quanh page được chọn vào mảng */
if ( $paged >= 3 ) {
$links[] = $paged - 1;
$links[] = $paged - 2;
}
if ( ( $paged + 2 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}
/** Hiển thị thẻ đầu tiên \n để xuống dòng code */
echo '<ul class="pagination">' . "\n";
/** Hiển thị link về trang trước */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link('Trước') );
/** Nếu đang ở trang 1 thì nó sẽ hiển thị đoạn này */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';
printf( '<li %s><a rel="nofollow" class="page larger" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
if ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}
/** Hiển thị khi đang ở một trang nào đó đang được lựa chọn */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s><a rel="nofollow" class="page larger" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}
/** Hiển thị khi đang ở trang cuối cùng */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li>…</li>' . "\n";
$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s><a rel="nofollow" class="page larger" href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}
/** Hiển thị link về trang sau */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link('Sau') );
echo '</ul>' . "\n";
}
Bạn có thể thấy mình đã lồng vào các thẻ <ul>
và <li>
và cả class active
nữa, nếu giao diện của bạn sử dụng pagination boststrap thì chỉ cần thay đổi hoặc thêm class phù hợp là đủ.
Hiển thị phân trang trên theme
Để hiển thị lên trang bạn chỉ cần gọi hàm <?php pagination_tdc(); ?>
. Tuy nhiên bạn lưu ý là nếu sử dụng query riêng thì lưu ý bỏ đi thông số posts_per_page
trong hàm WP_Query
đi nhé nếu không sẽ không hoặc động đúng đâu.
Chúc bạn thành công !
