Share code phân trang trong wordpress đẹp

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.

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

Lời Kết

Chúc Các Bạn Thành Công Với ToiCode.Net Blog , các bạn có thể tìm thấy cho mình những thủ thuật hay nhất và cả một loạt những cách để bạn làm giàu ngay trên thế giới Internet rộng lớn này !