Một trong những độc giả của chúng tôi gần đây đã hỏi chúng tôi cách chúng tôi thêm phân trang số trên trang blog WPBeginner. Các chủ đề mặc định của WordPress và nhiều chủ đề khác hiển thị các liên kết phân trang bằng cách thêm các bài đăng cũ và các liên kết bài đăng mới hơn ở cuối trang lưu trữ WordPress. Tuy nhiên, có nhiều trang web WordPress sử dụng phân trang số, như WPBeginner. Theo kinh nghiệm của chúng tôi, phân trang số dễ sử dụng, hấp dẫn và SEO hơn. Các khung chủ đề WordPress nâng cao hơn, như Genesis, đi kèm với chức năng tích hợp để thêm số trang. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm số trang trong chủ đề WordPress của bạn. Mục tiêu là thay thế các liên kết phân trang cũ hơn và mới hơn ở cuối trang lưu trữ bằng số trang dễ điều hướng.
Có hai phương pháp thêm số trang vào chủ đề WordPress của bạn. Phương pháp đầu tiên là thêm thủ công phân trang số mà không cần dựa vào plugin của bên thứ ba. Vì bài viết này nằm trong danh mục chủ đề và dành cho các nhà thiết kế chủ đề mới, trước tiên chúng tôi sẽ hiển thị phương pháp thủ công. Phương pháp thứ hai là sử dụng plugin của bên thứ ba hiện có để thêm số trang. Chúng tôi đề xuất phương pháp đó cho tất cả người dùng DIY của chúng tôi.
Thêm thủ công số trang cho chủ đề WordPress của bạn
Đầu tiên, chúng tôi sẽ chỉ cho bạn cách thêm số phân trang theo cách thủ công vào các chủ đề WordPress của bạn. Điều này sẽ có lợi cho người dùng quyền lực của chúng tôi và người dùng đang học phát triển chủ đề hoặc những người muốn làm điều đó mà không cần dựa vào plugin của bên thứ ba. Hãy bắt đầu bằng cách thêm đoạn mã sau vào tệp tin.php của chủ đề.
Lưu ý: Mã này được lấy từ Genesis Framework mà chúng tôi sử dụng trên trang web của chúng tôi. Nếu bạn đang sử dụng Genesis thì bạn không cần mã hoặc plugin này.
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 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 ) - ‘. “N”;
- % s
- % s
- Giáo dục
- % s
- Giáo dục
- % s
- % s
/ ** Liên kết bài đăng trước * /
if (get_preingly_posts_link ())
in (‘
‘. “n”, get_preingly_posts_link ());
/ ** Liên kết đến trang đầu tiên, cộng với dấu chấm lửng nếu cần * /
nếu (! in_array ( 1, $ liên kết)) {
$ lớp = 1 == $ phân trang? ‘class = “hoạt động”‘: ”;
in (‘
‘. “n”, $ class, esc_url (get_pagenum_link ( 1 )), ‘1’);
nếu (! in_array ( 2, $ liên kết))
Vứt ra ‘
‘;
}
/ ** Liên kết đến trang hiện tại, cộng với 2 các trang theo một trong hai hướng nếu cần thiết * /
sắp xếp ($ links);
foreach ((mảng) $ links là $ link) {
$ class = $ paged == $ link? ‘class = “hoạt động”‘: ”;
in (‘
‘. “n”, $ class, esc_url (get_pagenum_link ($ link)), $ link);
}
/ ** Liên kết đến trang cuối cùng, cộng với dấu chấm lửng nếu cần * /
if (! in_array ($ max, $ links)) {
if (! in_array ($ max – 1, $ liên kết))
Vứt ra ‘
‘. “N”;
$ class = $ paged == $ max? ‘class = “hoạt động”‘: ”;
in (‘
‘. “n”, $ class, esc_url (get_pagenum_link ($ max)), $ max);
}
/ ** Liên kết bài đăng tiếp theo * /
if (get_next_posts_link ())
in (‘
‘. “n”, get_next_posts_link ());
Vứt ra ‘
‘. “N”;
}
Tại WPBeginner, chúng tôi sử dụng cùng mã này để phân trang số trên các trang lưu trữ của chúng tôi (ví dụ: blog của chúng tôi hoặc trang danh mục hướng dẫn WordPress). Những gì mã này làm là nó lấy số lượng trang và chuẩn bị một danh sách các liên kết được đánh số. Để thêm phần này vào các mẫu của bạn, bạn sẽ cần thêm thẻ mẫu sau vào index.php, archive.php, category.php và bất kỳ mẫu trang lưu trữ nào khác cho chủ đề của bạn.
Bây giờ chúng tôi có danh sách các trang được đánh số, chúng tôi cần thiết kế danh sách này. Chúng tôi muốn làm cho danh sách xuất hiện khối nội tuyến trong đó trang hoạt động được tô sáng bằng một màu nền khác. Để thực hiện điều đó, hãy tiếp tục và thêm phần sau vào tệp style.css của chủ đề của bạn:
.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;
}
Có bạn đi. Chúng tôi có một danh sách phân trang số về chủ đề của chúng tôi trông tuyệt vời.
Thêm phân trang số trong WordPress bằng WP-PageNavi
Bây giờ, hãy xem cách thêm số trang trong chủ đề WordPress của bạn bằng cách sử dụng một plugin hiện có tên là WP-PageNavi. Điều đầu tiên cần làm là cài đặt và kích hoạt plugin WP-PageNavi. Sau khi kích hoạt plugin, hãy vào Cài đặt »PageNavi để cấu hình các cài đặt plugin.
Trên trang cài đặt plugin, bạn có thể thay thế cài đặt phân trang văn bản và số mặc định bằng cài đặt riêng nếu muốn. Tuy nhiên, cài đặt mặc định sẽ hoạt động cho hầu hết các trang web.
Trong bước tiếp theo, bạn cần thêm một thẻ mẫu trong chủ đề WordPress của bạn. Chuyển đến thư mục chủ đề của bạn và tìm các dòng cho phân trang cũ nhất và mới nhất trong các mẫu trang lưu trữ của bạn: index.php, archive.php và bất kỳ tệp mẫu lưu trữ nào khác. Thêm thẻ mẫu sau để thay thế các thẻ trước đó trước_posts_link và next_posts_link.
Khi bạn đã thêm đoạn mã wp_pagenavi, đây là cách phân trang số sẽ như thế nào:
Nếu bạn muốn thay đổi sự xuất hiện của màu sắc và kiểu phân trang số trong wp-pagenavi, bạn cần phải đi đến Cài đặt »PageNavi. Bỏ chọn tùy chọn để sử dụng Sử dụng pagenavi-css.css và lưu các thay đổi. Bây giờ đi đến Plugin »Trình chỉnh sửa. Từ Chọn plugin để chỉnh sửa menu thả xuống chọn WP-PageNavi và bấm vào Lựa chọn cái nút. Trình chỉnh sửa sẽ tải các tệp plugin trong thanh bên phải. Nhấp vào pagenavi-css.css để mở nó trong trình chỉnh sửa và sau đó sao chép nội dung của tệp.
Sau đó, bạn phải đi đến Ngoại hình »Biên tập và dán nội dung của pagenavi-css.css vào tệp style.css của chủ đề của bạn. Bây giờ bạn có thể sửa đổi bảng màu và phong cách từ đây. Lý do tại sao chúng tôi sao chép nội dung css của plugin vào biểu định kiểu chủ đề là để tránh mất thay đổi kiểu trong trường hợp bạn cập nhật plugin. Đây là một phiên bản sửa đổi một chút của phân trang số, hãy sử dụng nó và sửa đổi nó trong chủ đề của bạn.
.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;
}
Đây là những gì nó sẽ trông như:
Như mọi khi, bạn nên thử nghiệm với CSS. Mục tiêu phải là khớp số phân trang với giao diện màu của trang web của bạn, để nó hòa trộn tốt và trông không giống như một vật phẩm được đặt kỳ lạ.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm và hiển thị số trang trong chủ đề WordPress của bạn. Phương pháp nào bạn thích sử dụng? Bạn có thích phân trang số hay bạn thích điều hướng tích hợp trước / tiếp theo? Cho chúng tôi biết trong các ý kiến dưới đây.
