Hướng dẫn phân trang trong wordpress

Cách phân trang trong wordpress không sử dụng plugin. Một trong số kỹ thuật khi lập trình theme wordpress đó chính là phân trang wordpress. Bạn không thể hiển thị tất cả bài viết trên 1 trang được nếu website bạn có 10 bài thì ok nhưng nếu 1000 bài trên 1 trang thì sao như vậy nó sẽ giảm tốc độ tải trang để load bài khiến website bạn chậm lại và không tối ưu cho SEO. Để phù hợp hơn bài viết này mình sẽ hướng dẫn cách phân trang trong wordpress giúp tối ưu website tối nhất.

1. Cách phân trang trong wordpress đơn giản.

Hiện tại có rất nhiều plugin 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 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 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;
 
  /** 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í bạn muốn hiển thị tương tự kiểu hiển thị bài viết liên quan trong wordpress. Chẳng hạn bạn muốn hiển thị phân trang trong category, tags, index chẳng hạn.

Bây giờ sau khi phân trang xong bạn quay ra trang hiển thị phân trang xem sao nhé. Nó vẫn chưa được đẹp đâu để hiển thị phân trang đẹp tiếp tục bạn sao chép đoạn CSS này bỏ vào file style.css để custom cho đẹp hơn nhé.

.navigation{margin-top: 25px; margin-bottom: 25px;}
.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 {
  border-radius: 3px;
  cursor: pointer;
  padding: 5px 10px;
}
.navigation li a:hover,
.navigation li.active a {
  background-color: #ff9900;
  color: #fff!important;
}

Cuối cùng sau khi đã thực hiện xong mình tải lại trang và đã có một template phân trang tuyệt đẹp. Khá đơn giản phải không bạn. À chú ý nếu chưa hiển thị phân trang ra bạn hãy xem số lượng bài viết hiển thị trên 1 trang ra sao nhé do chưa đủ bài viết nên phân trang không hiển thị bạn cần phải cài đặt chúng (xem ở mục 2).

Cách phân trang trong wordpress 1

2. Tùy chỉnh số lượng bài phân trên 1 trang wordpress.

Cũng nhiều bạn thắc mắc là làm sao em làm như vậy rồi mà không hiển thị ra phân trang do số lượng bài viết bạn ít và cài đặt số lượng bài trên 1 trang lại nhiều bởi vậy phân trang không hiển thị. Để tùy chỉnh số lượng bài viết hiển thị phân trang bạn vào Settings->Reading->Blog page show at most (chọn số bài cần hiển thị chẳng hạn 10 bài). Khi thực hiện xong bạn nhớ lưu lại nhé

Xem thêm: cách cài wordpress trên hosting nếu bạn chưa biết.

Cách phân trang trong wordpress 2

Ngoài cách phân trang này có nhiều bạn còn sử dụng plugin Page Navi để phân trang bạn cũng có thể tham khảo thêm để biết thêm những cách phân trang khác và đừng quên chia sẻ nếu bạn có những đoạn code phân trang wordpress hay hơn và tối ưu hơn nhé. Hãy thường xuyên theo dõi thủ thuật website để có kiến thức mới nhất khi sử dụng wordpress.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *