Code phân trang wordpress

Cập nhật lần cuối 21/07/2017 by trong WordPress vào 05/05/2015 có 515 Views

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.

Code phân trang wordpress

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 ^^

 

Code phân trang wordpress
5 (100%) 3 votes
  • Bình luận
Có thể bạn quan tâm
x