Tùy biến phân trang không dùng Plugin cho WordPress

Tùy biến phân trang không dùng Plugin cho WordPress: Mặc định mỗi Theme WordPress sẽ có một phân trang cho các bài viết mặc định trên trang chủ. Tuy nhiên đôi khi với cái phân trang mặc định đó của Theme bạn không được ưng ý và bạn muốn thay đổi nó.Trong bài viết này Blog thủ thuật máy tính f4vnn sẽ giới thiệu với bạn và tùy biến phân trang không dùng Plugin cho WordPress để vừa với thẩm mỹ của bạn.

Tùy biến phân trang không dùng Plugin cho WordPress

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ì được nhưng nếu số lượng bài trên 1 trang quá nhiều 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.

• Code phân trang
• Css làm đẹp phân trang

Nào bắt tay vào việc thôi nào, bác bước thì các bạn cứ làm theo các hướng dẫn bên dưới là ok ngay thôi.

1] Code phân trang

Plugin trong việc phân trang wordpress có rất nhiều nhưng giao diện hiển thị không được đẹp bởi vì bạn sẽ rất khó để tùy chỉnh nó và đôi khi nó sẽ còn làm chậm web của bạn. 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ị. Ví dụ bạn muốn hiển thị phân trang trong category, tags, index chẳng hạn.

Bước 3: Để thêm phân trang cho Category thì bạn copy và dán đoạn code ở bước 2 vào trang archive.php để tạo phân trang cho Category nhé.

2] Code CSS làm đẹp cho phân trang

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 hoặc cũng có thể để vào Css bổ sung để custom cho đẹp hơn nhé.

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

Xong chỉ cần thế thôi, nếu bạn có biết thêm chút CSS thì có thể tùy biến để khác hơn một tí nhé. Và hiện tại Blog của mình cũng đang dùng phân trang này nên bạn khỏi lo là nó không hoạt động nhé.

Hy vọng với tùy biến phân trang không dùng Plugin cho WordPress mà Blog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.