Code phân trang và cách sử dụng cho website WordPress

Code dưới đây sẽ giúp các bạn phân trang trong trang home, category, author, archive, taxonomy … code đơn giản ngắn gọn, không cần sử dụng plugin. Tùy chỉnh dễ dàng.

Cre: Lê Văn Toản

Qua bài code phân trang không cần plugin chúng ta đã có thể phân trang nhưng ko thể tùy chỉnh được nhiều. Code mới mình update này sẽ giúp chúng ta tùy chỉnh được nhiều hơn ví dụ như thay đổi được chữ next, prev …

Code phân trang wordpress

Thêm đoạn code sau vào file functions.php trong theme bạn đang sử dụng.

//Code phan trang
function wp_corenavi_table($custom_query = null) {
      global $wp_query;
      if($custom_query) $main_query = $custom_query;
      else $main_query = $wp_query;
      $big = 999999999;
      $total = isset($main_query->max_num_pages)?$main_query->max_num_pages:'';
      if($total > 1) echo '<div class="paginate_links">';
      echo paginate_links( array(
         'base'        => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
         'format'   => '?paged=%#%',
         'current'  => max( 1, get_query_var('paged') ),
         'total'    => $total,
         'mid_size' => '10',
         'prev_text'    => __('Trước','devvn'),
         'next_text'    => __('Tiếp','devvn'),
      ) );
      if($total > 1) echo '</div>';
}

Thêm phân trang vào chỗ muốn hiển thị phân trang

Thêm đoạn code sau vào chỗ mà bạn muốn hiển thị phân trang ví dụ trong trang category.php, taxonomy.php hay author.php … nhớ là phải thêm vào trong câu lệnh if(have_posts()) trong vòng loop nhé

<?php wp_corenavi_table();?>

Để giống trong hình bạn thêm đoạn css này vào file style.css nhé. Nếu không muốn giống như trong hình bạn có thể bỏ qua bước này và tự style cho nó đẹp hơn 

/*paginate_links*/
.paginate_links {
 overflow: hidden;
 text-align: center;
 display: table;
 margin: 30px auto;
}
.paginate_links .page-numbers{
 width: 32px;
 height: 32px;
 display: inline-block;
 float: left;
 margin: 0 5px 0 5px;
 padding-top: 7px;
 color: #007BB6;
 border: 1px solid #007BB6;
 margin-bottom: 5px;
}
.paginate_links .page-numbers:hover{
 background: #007BB6;
 color: #fff;
}
.paginate_links .page-numbers.prev,.paginate_links .page-numbers.next{
 background: transparent;
 width: auto;
 border: none;
}
.paginate_links .page-numbers.prev:hover,.paginate_links .page-numbers.next:hover{
 text-decoration: underline;
 color: #007BB6;
}
.paginate_links .page-numbers.current{
 background: #007BB6;
 color: #fff;
}
/*End paginate_links*/

Các bạn có thể thay đổi css tùy theo ý thích cho đẹp. Chúc các bạn thành công