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

69 / 100

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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é.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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.

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.