Code phân trang 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.

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();?>

Style cho đẹp

Để 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*/

Chúc các bạn thành công ^^

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress