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ố vào trang blog WPBeginner. Các chủ đề tiêu chuẩn của WordPress và nhiều chủ đề khác hiển thị các liên kết ngắt 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ố, chẳng hạn như WPBeginner. Theo kinh nghiệm của chúng tôi, số lượng tìm kiếm dễ sử dụng, hấp dẫn và SEO hơn. Các khung chủ đề WordPress nâng cao hơn, chẳng hạn như Genesis, có chức năng tích hợp để thêm phân trang số. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm số trang cho chủ đề WordPress của bạn. Mục tiêu là thay thế các liên kết 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 cách để thêm số trang cho chủ đề WordPress của bạn. Phương pháp đầu tiên là thêm thủ công tìm kiếm trang mà không cần dựa vào plugin của bên thứ ba. Vì bài viết này là một phần của thể loại 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 này cho tất cả người dùng DIY của chúng tôi.
Thêm thủ công tìm kiếm trang vào chủ đề WordPress của bạn
Đầu tiên chúng tôi sẽ chỉ cho bạn cách thêm thủ công tìm kiếm số vào 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 học phát triển chủ đề hoặc những người muốn làm như vậy 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 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, bạn không cần mã hoặc plugin này.
hàm wpbeginner_numeric_posts_nav () {
if (is_singular ())
trở về;
toàn cầu $ wp_query;
/ ** Dừng thực thi nếu chỉ có 1 trang * /
if ($ wp_query-> max_num_pages max_num_pages);
/ ** Thêm trang hiện tại vào mảng * /
if ($ paged> = 1 )
$ left () = $ paged;
/ ** Thêm các trang xung quanh trang hiện tại vào mảng * /
if ($ paged> = 3 ) {
$ left () = $ paged – 1;
$ left () = $ paged – 2;
}
if (($ paged + 2 )
‘. “N”;
/ ** Liên kết bài viết trước * /
if (get_preingly_posts_link ())
printf (‘% s’. “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 == $ bên? ‘class = “hoạt động”‘: ”;
printf (‘% s’. “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 hai bên theo cả hai hướng nếu cần * /
sắp xếp ($ links);
foreach ((mảng) $ links là $ link) {
$ class = $ paged == $ link? ‘class = “hoạt động”‘: ”;
printf (‘% s’. “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”‘: ”;
printf (‘% s’. “n”, $ class, esc_url (get_pagenum_link ($ max)), $ max);
}
/ ** Liên kết bài đăng tiếp theo * /
if (get_next_posts_link ())
printf (‘% s’. “n”, get_next_posts_link ());
Vứt ra ” . “N”;
}
Tại WPBeginner, chúng tôi sử dụng cùng một mã cho phân trang số trên các trang lưu trữ của chúng tôi (ví dụ: blog hoặc danh mục của chúng tôi để hướng dẫn trong WordPress). Những gì mã này làm là 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 cần thêm các thẻ mẫu sau vào index.php, archive.php, category.php và tất cả các mẫu trang lưu trữ 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 phải thiết kế danh sách này. Chúng tôi muốn danh sách xuất hiện các khối nội tuyến trong đó trang hoạt động được đánh dấu bằng màu nền khác. Để thực hiện điều này, 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:
.navulation li a,
điều hướng li a: di chuột,
.navulation li.active a,
.navulation li.disables {
màu: #fff;
trang trí văn bản: không có;
}
.navulation li {
Hiển thị nội dòng;
}
.navulation li a,
điều hướng li a: di chuột,
.navulation li.active a,
.navulation li.disables {
màu nền: # 6FB7E9;
bán kính đường viền: 3px;
con trỏ: con trỏ;
phần đệm: 12px;
đệm: 0.75rem;
}
điều hướng li a: di chuột,
.navulation li.active và {
màu nền: # 3C8DC5;
}
Không có gì. Chúng tôi có một danh sách tìm kiếm số về chủ đề của chúng tôi có vẻ tốt.
Thêm phân trang số cho WordPress với WP-PageNavi
Bây giờ, hãy xem cách thêm số trang cho 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 đi đến 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 tìm kiếm văn bản và số mặc định bằng cài đặt của riêng bạn nếu bạn 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 thẻ mẫu vào chủ đề WordPress của mình. Chuyển đến thư mục chủ đề của bạn và tìm các hà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à các tệp mẫu lưu trữ khác. Thêm thẻ mẫu sau để thay thế các thẻ trước_posts_link và next_posts_link.
Khi bạn đã thêm đoạn mã wp_pagenavi, đây là tìm kiếm trang sẽ như thế nào:
Nếu bạn muốn thay đổi giao diện của màu sắc và kiểu phân trang số trong wp-pagenavi, bạn phả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 bạn muốn chỉnh sửa menu thả xuống chọn Trang WP và bấm vào Lựa chọn cái nút. Trình chỉnh sửa tải các tập tin 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ể thay đổi bảng màu và phong cách từ đây. Lý do chúng tôi sao chép nội dung plugin-css vào mẫu loại 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 tìm kiếm trang, hãy sử dụng nó và thay đổi nó trong chủ đề của bạn.
.wp-pagenavi {
rõ ràng: cả hai;
}
.wp-pagenavi a, .wp-pagenavi span {
màu: #FFF;
trang trí văn bản: không có;
màu nền: # 6FB7E9;
viền: 1px solid # B2D1E5;
phần đệm: 5px 5px;
lề: 2px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.cản {
viền màu: # E9F2F9;
màu nền: # 6FB7E9;
}
.wp-pagenavi span.cản {
font-weight: in đậm;
màu nền: # 3C8DC5;
}
Cái này nó thì trông như thế nào:
Như mọi khi, thử nghiệm với CSS. Mục tiêu phải là phù hợp với số lượng tìm kiếm với sự xuất hiện màu sắc 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 đối tượng đượ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. Bạn thích sử dụng phương pháp nào? 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.
