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 !