Hướng dẫn tạo phân trang đơn giản trong wordpress

Hiện tại thì có rất nhiều cách hỗ trợ tạo phân trang cho worpsress như plugin hay code sử dụng bằng tay đều hỗ trợ bạn trong việc phân trang wordpress nhưng giao diện hiển thị không được đẹp bởi vậy để bạn hãy tự custom dễ hơn hãy tham khảo code dưới đây để tùy biến cho website mình một kiểu phân trang đẹp nhất nhé. Việc phân trang cho wordpress không quá khó bạn chỉ cần làm 3 bước đơn giản như sau là được.

Bước 1: Bạn mở file function.php của theme lên. Sau đó sao chép code phân trang sau đây và lưu lại

function page_nav() {
  
  if( is_singular() )
    return;
  
  global $wp_query;
  
  /** heloo quỳnh.vn Stop execution if there's only 1 page */
  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 );
  
  /** Add current page to the array */
  if ( $paged >= 1 )
    $links[] = $paged;
  
  /** Add the pages around the current page to the array */
  if ( $paged >= 3 ) {
    $links[] = $paged - 1;
    $links[] = $paged - 2;
  }
  
  if ( ( $paged + 2 ) <= $max ) {
    $links[] = $paged + 2;
    $links[] = $paged + 1;
  }
  
  echo '
<div class="navigation">
<ul>' . "\n";
  
  /** Previous Post Link */
  if ( get_previous_posts_link() )
    printf( '
<li>%s</li>
 
' . "\n", get_previous_posts_link('<< Trước') );
  
  /** Link to first page, plus ellipses if necessary */
  if ( ! in_array( 1, $links ) ) {
    $class = 1 == $paged ? ' class="active"' : '';
  
    printf( '<li%s><a href="%s">%s</a></li>
 
' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
  
    if ( ! in_array( 2, $links ) )
      echo '
<li>…</li>
 
';
  }
  
  /** Link to current page, plus 2 pages in either direction if necessary */
  sort( $links );
  foreach ( (array) $links as $link ) {
    $class = $paged == $link ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>
 
' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
  }
  
  /** Link to last page, plus ellipses if necessary */
  if ( ! in_array( $max, $links ) ) {
    if ( ! in_array( $max - 1, $links ) )
      echo '
<li>…</li>
 
' . "\n";
  
    $class = $paged == $max ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>
 
' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
  }
  
  /** Next Post Link */
  if ( get_next_posts_link() )
    printf( '
<li>%s</li>
 
' . "\n", get_next_posts_link('Sau >>') );
  
  echo '</ul>
</div>
 
' . "\n";
  
}

Bước 2: Sao chép đoạn code hiển thị phân <?php page_nav(); ?> ra nơi vị trí mà bạn muốn hiển thị ra ngoài nó cũng tương tự kiểu hiển thị bài viết liên quan trong wordpress.

Bước 3: Bạn hãy chèn Css vào trong code để hiển thị ra bên ngoài cho đẹp nhé. Tiếp tục bạn sao chép đoạn CSS này bỏ vào file style.css sau đó lưu lại và ra ngoài xem kết quả nhé bạn.

.navigation{margin-top: 25px; margin-bottom: 25px;text-align: center;}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #666;
  text-decoration:none;
}
.navigation li {
  display: inline;
}
  
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {

    font-size: 19px;
    padding: 5px 10px;
    color: #06B30E;
    font-weight: 300;
    line-height: 30px;

}
.navigation li a:hover,
.navigation li.active a {
  background-color: #ff9900;
  color: #fff!important;
}

Như thế là các bạn đã đưa phân trang ra ngoài cho trang web của mình rồi đó. Chúc các bạn thành công.