Cách thêm phân trang số vào chủ đề WordPress của bạn
Bạn có muốn thêm phân trang số vào chủ đề WordPress của mình không?
Theo mặc định, các chủ đề WordPress thêm liên kết Tiếp theo/Trước đó ở cuối trang lưu trữ. Thách thức là những thứ đó không thân thiện với người dùng. Đây là lý do tại sao nhiều blog phổ biến sử dụng phân trang số để giúp khách truy cập điều hướng các trang lưu trữ của họ dễ dàng hơn.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm phân trang số trong chủ đề WordPress của bạn.
Tại sao thêm phân trang số trong chủ đề WordPress của bạn?
Hầu hết các chủ đề đều có trang lưu trữ hiển thị danh sách các bài đăng. Khi bạn xuất bản nhiều bài đăng trên blog WordPress hơn, trang lưu trữ của bạn sẽ trải rộng trên nhiều trang.
Liên kết phân trang giúp khách truy cập di chuyển giữa các trang lưu trữ và thường xuất hiện ở cuối trang web WordPress của bạn.
Một số chủ đề WordPress sử dụng liên kết ‘Bài đăng cũ hơn’ và ‘Bài đăng mới hơn’ để phân trang. Tuy nhiên, điều này chỉ cho phép khách truy cập tiến và lùi một trang.
Nó cũng không hiển thị vị trí hiện tại của khách truy cập trong kho lưu trữ. Điều này có thể gây khó khăn hơn cho khách truy cập khi điều hướng kho lưu trữ blog của bạn.
Đó là nơi phân trang số xuất hiện.
Thay vì hiển thị các liên kết 'Cũ hơn' và 'Mới hơn', phân trang số hiển thị một chuỗi số cho phép khách truy cập chuyển đến một trang cụ thể trong kho lưu trữ.
Phân trang số cũng có thể sử dụng các điểm đánh dấu hoặc các màu khác nhau để hiển thị số trang hiện tại, do đó khách truy cập luôn biết chính xác vị trí của chúng trong kho lưu trữ.
Tại WPBeginner, chúng tôi sử dụng phân trang số và đánh dấu số trang hiện tại bằng màu cam. Chúng tôi cũng cung cấp các liên kết trực tiếp đến 4 trang xung quanh trang hiện tại của khách truy cập.
Chúng tôi thậm chí còn có liên kết đến trang cuối cùng trong kho lưu trữ của mình, vì vậy khách truy cập có thể nhanh chóng và dễ dàng xem các bài đăng sớm nhất của chúng tôi, như bạn có thể thấy trong hình ảnh sau đây.
Theo kinh nghiệm của chúng tôi, kiểu phân trang số này giúp điều hướng trang web của bạn dễ dàng hơn so với các liên kết 'Bài đăng cũ hơn' và 'Bài đăng mới hơn' mặc định.
Nếu chủ đề WordPress của bạn có phân trang ‘Cũ hơn’ và ‘Mới hơn’ thì chúng tôi luôn khuyên bạn nên thay thế nó bằng phân trang số.
Trong hướng dẫn này, chúng tôi sẽ đề cập đến hai cách khác nhau để thêm phân trang số vào chủ đề WordPress của bạn. Nếu bạn muốn chuyển thẳng sang một phương pháp cụ thể thì bạn có thể sử dụng các liên kết bên dưới.
Phương pháp 1. Cách thêm phân trang số trong WordPress bằng WP-PageNavi
Phương pháp 2. Cách thêm phân trang số theo cách thủ công trong chủ đề WordPress của bạn
Phương pháp 1. Cách thêm phân trang số trong WordPress bằng WP-PageNavi
Cách dễ nhất để thêm phân trang số trong WordPress là sử dụng plugin WP-PageNavi.
Để sử dụng plugin này, bạn vẫn cần thực hiện một số thay đổi đối với mã chủ đề của mình, nhưng nó dễ dàng hơn nhiều so với phương pháp mã đầy đủ vì WP-PageNavi cung cấp cho bạn toàn quyền kiểm soát việc phân trang trang web của bạn.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WP-PageNavi. Để biết thêm chi tiết, vui lòng xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt plugin, hãy đi tới Cài đặt » PageNavi để định cấu hình cài đặt plugin.
Tại đây, bạn có thể thay thế bất kỳ văn bản phân trang mặc định nào bằng cách diễn đạt của riêng bạn. Ví dụ: bạn có thể thay đổi văn bản mà trang web của bạn sử dụng cho các liên kết ‘Trang đầu tiên’ và ‘Trang cuối cùng’.
Bạn cũng có thể tùy chỉnh các liên kết phân trang số.
Trong phần ‘Số trang cần hiển thị’, bạn có thể chọn số lượng trang mà plugin sẽ hiển thị trong phần phân trang trên trang web của bạn.
Điều này được đặt thành 5 theo mặc định, có nghĩa là WP-PageNavi sẽ hiển thị các liên kết trực tiếp tới 5 trang.
Như bạn có thể thấy trong ảnh chụp màn hình bên dưới, nếu bạn đang ở trang 4 thì bạn sẽ thấy các liên kết đến trang 2, 3, 4, 5 và 6.
Bạn có thể muốn hiển thị nhiều trang hơn hoặc ít trang hơn. Để thực hiện thay đổi này, chỉ cần nhập số mới vào trường 'Số trang cần hiển thị'.
Theo mặc định, plugin sẽ hiển thị một số số lớn hơn. Điều này cho phép khách truy cập di chuyển tiếp theo nhiều trang chỉ bằng một cú nhấp chuột.
Theo mặc định, plugin hiển thị ba số lớn hơn, mỗi số tăng thêm 10. Ví dụ: 10, 20 và 30.
Bạn muốn sử dụng một khoảng thời gian khác, chẳng hạn như 5 hoặc 20? Sau đó, chỉ cần nhập khoảng thời gian mới vào trường 'Hiển thị số trang lớn hơn theo bội số'.
Mỗi trang web WordPress đều khác nhau, vì vậy bạn nên thử các cài đặt khác nhau để xem cài đặt phân trang nào phù hợp nhất với mình.
Nếu bạn đã thực hiện bất kỳ thay đổi nào đối với cài đặt WP-PageNavi thì đừng quên cuộn xuống cuối trang và nhấp vào nút Lưu Thay đổi.
Tiếp theo, bạn cần thêm thẻ mẫu vào chủ đề WordPress của mình. Để thực hiện việc này, chúng tôi khuyên bạn nên tạo chủ đề con rồi chỉnh sửa mã của chủ đề con.
Bằng cách tạo chủ đề con, bạn vẫn có thể cập nhật chủ đề WordPress của mình một cách an toàn mà không làm mất phân trang số tùy chỉnh. Để tìm hiểu thêm, hãy xem hướng dẫn từng bước của chúng tôi về cách tạo chủ đề con WordPress.
Bất kể bạn chọn chỉnh sửa chủ đề gốc hay chủ đề con, bạn sẽ cần một ứng dụng khách FTP. Nếu đây là lần đầu tiên bạn sử dụng FTP thì bạn có thể xem hướng dẫn đầy đủ của chúng tôi về cách kết nối với trang web của bạn bằng FTP.
Khi bạn kết nối với tài khoản lưu trữ WordPress của mình qua FTP, bạn đã sẵn sàng chỉnh sửa mã chủ đề WordPress của mình.
Các bước này sẽ khác nhau tùy thuộc vào chủ đề WordPress của bạn. Tuy nhiên, thông thường bạn sẽ cần chỉnh sửa mã trong tệp index.php hoặc archive.php, cùng với bất kỳ tệp mẫu lưu trữ nào khác trong chủ đề WordPress của bạn.
Chỉ cần mở các tệp này rồi tìm kiếm các thẻ previous_posts_link và next_posts_link.
Nếu bạn tìm thấy những thẻ này, hãy thay thế chúng bằng đoạn mã sau:
<?php wp_pagenavi(); ?>
Một số chủ đề có thể không có thẻ previous_posts_link hoặc next_posts_link.
Nếu bạn không thể tìm thấy các thẻ này trong chủ đề của mình thì hãy tìm the_posts_navigation. Ví dụ: bạn sẽ tìm thấy nội dung sau trong tệp archive.php của chủ đề Twenty Twenty-One:
<?php /*twenty_twenty_one_the_posts_navigation();*/
Sau đó, bạn có thể tiếp tục và thay thế dòng này bằng đoạn mã sau:
<?php wp_pagenavi(); ?>
Sau khi thực hiện những thay đổi này, hãy lưu và sau đó đóng mọi tệp chủ đề WordPress đang mở.
Bây giờ, nếu bạn truy cập trang lưu trữ WordPress, bạn sẽ thấy phân trang số mới trực tiếp trên trang web của mình.
Tại thời điểm này, bạn có thể muốn thay đổi màu sắc và kiểu dáng của phân trang số để nó phù hợp hơn với chủ đề hoặc thương hiệu trang web của bạn.
Bạn có thể làm điều này bằng cách chỉnh sửa mã của plugin.
Tuy nhiên, chúng tôi khuyên bạn nên dán mã WP-PageNavi vào tệp style.css của chủ đề, sau đó thực hiện các thay đổi bên trong tệp chủ đề. Điều này có nghĩa là bạn sẽ không mất các tùy chỉnh của mình khi cập nhật plugin WP-PageNavi.
Để sao chép mã plugin của bạn, hãy đi tới Cài đặt » PageNavi. Sau đó, bạn có thể tìm thấy phần ‘Sử dụng pagenavi-css.css’ và nhấp vào nút radio ‘Không’ bên cạnh phần đó.
Đừng quên nhấp vào nút ‘Save Changes’ để lưu các thay đổi của bạn.
Tiếp theo, đi tới Plugins » Trình chỉnh sửa tệp plugin.
Sau đó, bạn có thể mở menu thả xuống ‘Chọn plugin để chỉnh sửa’ và chọn ‘WP-Page Navi’. Sau đó, bạn đã sẵn sàng nhấp vào ‘Chọn.’
Trong menu bên phải, nhấp vào tệp pagenavi-css.css.
Sau đó, hãy tiếp tục và sao chép tất cả mã trong tệp này.
Tiếp theo, chỉ cần truy cập Giao diện » Trình chỉnh sửa tệp chủ đề.
Trong menu bên phải, nhấp vào tệp style.css của chủ đề của bạn.
Bây giờ bạn có thể dán mã pagenavi-css.css của mình vào tệp style.css của chủ đề và bắt đầu thực hiện các thay đổi của mình.
Hãy xem một ví dụ. Đây là phiên bản sửa đổi của mã phân trang số mà bạn có thể thêm vào tệp style.css của chủ đề:
wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #FFF;
text-decoration: none;
background-color:#6FB7E9;
border: 1px solid #B2D1E5;
padding: 5px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #E9F2F9;
background-color:#6FB7E9;
}
.wp-pagenavi span.current {
font-weight: bold;
background-color:#3C8DC5;
}
Trong hình ảnh sau đây, bạn có thể thấy cách phân trang số này sẽ trông như thế nào trên trang web của bạn.
Bạn nên thử các phong cách khác nhau để xem phong cách nào trông đẹp nhất trên trang web WordPress của bạn.
Khi bạn hài lòng với giao diện phân trang số của mình, hãy nhấp vào nút Cập nhật tệp để lưu các thay đổi của bạn.
Phương pháp 2. Cách thêm phân trang số theo cách thủ công trong chủ đề WordPress của bạn
Một tùy chọn khác là thêm phân trang số theo cách thủ công trong chủ đề WordPress của bạn bằng mã.
Nhiều chủ đề WordPress đi kèm với các liên kết ‘Cũ hơn’ và ‘Mới hơn’ được tích hợp sẵn hoặc phân trang số mặc định. Ví dụ: chủ đề Astra phổ biến sẽ tự động thêm phân trang số của riêng nó vào các trang lưu trữ của bạn, như bạn có thể thấy trong hình ảnh sau đây.
Bạn có thể sử dụng phương pháp này để tùy chỉnh phân trang tích hợp của chủ đề. Ví dụ: bạn có thể thay đổi kiểu dáng để phù hợp hơn với trang web của mình.
Để thêm phân trang số theo cách thủ công, hãy mở tệp tin.php của chủ đề của bạn. Tại đây, bạn có thể sử dụng ứng dụng khách FTP hoặc trình quản lý tệp của cPanel lưu trữ WordPress của mình. Nếu bạn đang sử dụng FTP thì bạn có thể xem hướng dẫn đầy đủ của chúng tôi về cách kết nối với trang web của bạn bằng FTP.
Khi bạn đã kết nối thành công với trang web của mình, hãy mở tệp tin.php và thêm mã sau:
function wpbeginner_numeric_posts_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() );
/** 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() );
echo '</ul></div>' . "\n";
}
Mã này lấy số lượng trang, sẵn sàng để bạn hiển thị trong chủ đề WordPress của mình.
Các bước tiếp theo sẽ khác nhau tùy thuộc vào chủ đề của bạn.
Nếu chủ đề của bạn không tích hợp sẵn một số dạng phân trang mặc định thì bạn chỉ cần thêm thẻ mẫu sau vào index.php, archive.php, Category.php hoặc bất kỳ trang nào khác mà bạn muốn hiển thị phân trang số .
<?php wpbeginner_numeric_posts_nav(); ?>
Chỉ cần lưu ý rằng nơi bạn thêm mã này sẽ ảnh hưởng đến vị trí hiển thị phân trang số trên trang web của bạn.
Thông thường, bạn sẽ muốn hiển thị phân trang ở cuối trang lưu trữ của mình, vì vậy, bạn thường muốn thêm thẻ mẫu vào mã chân trang của mình.
Chủ đề của bạn đã có một số hình thức phân trang, chẳng hạn như liên kết 'Bài đăng cũ hơn' và 'Bài đăng mới hơn' chưa?
Trong trường hợp này, bạn sẽ cần tìm mã phân trang và thay thế bằng đoạn mã trên.
Ví dụ: Ashe là một trong những chủ đề blog WordPress miễn phí tốt nhất và đã thêm các liên kết phân trang ‘Trang đầu tiên’ và ‘Trang cuối’ vào các trang lưu trữ của bạn.
Để thay thế các liên kết tích hợp này bằng phân trang số, bạn cần chỉnh sửa các tệp templates/grid.php và templates/blog-pagination.php của chủ đề.
Trong mỗi tệp này, chỉ cần tìm phần sau:
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
Sau đó, bạn có thể tiếp tục và thay thế dòng này bằng đoạn mã sau:
<?php wpbeginner_numeric_posts_nav(); ?>
Khi bạn đã thêm mã, đừng quên lưu các thay đổi của mình.
Bước tiếp theo là tạo kiểu phân trang số tùy chỉnh của bạn.
Để giúp khách truy cập điều hướng kho lưu trữ, chúng tôi sẽ đánh dấu số trang hiện tại bằng một màu khác. Để thực hiện việc này, hãy mở tệp style.css của chủ đề rồi dán đoạn mã sau vào tệp này:
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: #fff;
text-decoration:none;
}
.navigation li {
display: inline;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}
Sau tất cả những điều đó, chỉ cần lưu các thay đổi của bạn bằng cách nhấp vào nút Cập nhật tệp.
Bây giờ nếu bạn truy cập trang lưu trữ, bạn sẽ thấy phân trang số trực tiếp trên trang web của mình.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm phân trang số trong chủ đề WordPress của bạn. Bạn cũng có thể xem qua hướng dẫn của chúng tôi về cách kiếm tiền trực tuyến bằng cách viết blog bằng WordPress và cách tạo chủ đề WordPress tùy chỉnh mà không cần viết bất kỳ mã nào.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.