Cách thêm phân số trong chủ đề WordPress của bạn

Một trong những độc giả của chúng tôi gần đây đã hỏi chúng tôi làm thế nào để 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ũ hơn và các liên kết Bài đăng mới hơn ở cuối trang lưu trữ WordPress của bạn. Tuy nhiên, có nhiều trang web WordPress sử dụng phân trang số, như WPBeginner. Từ kinh nghiệm của chúng tôi, phân trang số thân thiện hơn với người dùng, hấp dẫn và thân thiện với SEO. Hầu hết các khung chủ đề WordPress tiên tiến như Genesis đều 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 phân trang số trong chủ đề WordPress của bạn. Mục tiêu là để thay thế các liên kết phân trang cũ và mới hơn mặc định ở cuối trang lưu trữ bằng các số trang dễ điều hướng.


Sự khác biệt giữa điều hướng mặc định của WordPress và Phân trang số

Có hai phương pháp để thêm phân trang số trong chủ đề WordPress của bạn. Phương pháp đầu tiên là thêm phân trang số theo cách thủ công 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, chúng tôi sẽ hiển thị phương pháp thủ công trước. Phương pháp thứ hai là sử dụng plugin của bên thứ ba hiện có để thêm phân trang số. Chúng tôi muốn giới thiệu 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 trong chủ đề WordPress của bạn

Trước tiên, chúng tôi sẽ chỉ cho bạn cách thêm phân trang số theo cách thủ công trong các chủ đề WordPress của bạn. Điều này sẽ có lợi cho người dùng nâng cao của chúng tôi và người dùng đang học phát triển chủ đề hoặc muốn làm điều nà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 đoạn mã sau vào tập tin chủ đề của bạn..

Lưu ý: Mã này có nguồn gốc 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ã này hoặc plugin.

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 * /
nếu ($ wp_query->max_num_pages <= 1)
trở về;

$ paged = get_query_var (‘phân trang’)? absint (get_query_var (‘paged’)): 1;
$ max = intval ($ wp_query->max_num_pages);

/ ** Thêm trang hiện tại vào mảng * /
nếu ($ phân trang >= 1)
$ links [] = $ phân trang;

/ ** Thêm các trang xung quanh trang hiện tại vào mảng * /
nếu ($ phân trang >= 3) {
$ links [] = $ paged – 1;
$ links [] = $ paged – 2;
}

if (($ paged + 2) <= $ tối đa) {
$ links [] = $ paged + 2;
$ links [] = $ paged + 1;
}

tiếng vang ‘

    ‘ . "\ n";

    / ** Liên kết bài đăng trước * /
    if (get_preingly_posts_link ())
    in (‘

  • %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 * /
    if (! in_array (1, $ links)) {
    $ class = 1 == $ phân trang? ‘lớp ="hoạt động"’:’ ‘;

    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link (1)), ‘1’);

    if (! in_array (2, $ links))
    tiếng vang ‘

  • Giáo dục
  • ‘;
    }

    / ** Liên kết đến trang hiện tại, cộng với 2 trang theo một trong hai hướng nếu cần * /
    sắp xếp ($ links);
    foreach ((mảng) $ links là $ link) {
    $ class = $ paged == $ link? ‘lớp ="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, $ links))
    tiếng vang ‘

  • Giáo dục
  • ‘ . "\ n";

    $ class = $ paged == $ max? ‘lớp ="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 ())
    in (‘

  • %S
  • ‘ . "\ n", get_next_posts_link ());

    tiếng vang ‘

‘ . "\ 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ẽ phải thêm thẻ mẫu sau vào chủ đề của bạn Index index.php, archive.php, category.php và bất kỳ mẫu trang lưu trữ nào khác.

<?php wpbeginner_numeric_posts_nav (); ?>

Bây giờ chúng tôi đã có danh sách các trang được đánh số, chúng tôi cần tạo kiểu cho danh sách này. Chúng tôi muốn làm cho danh sách xuất hiện trong khối nội tuyến nơi 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 chủ đề style style.css của bạn:

.điều hướng li a,
.điều hướng li a: di chuột,
.điều hướng li.active a,
.điều hướng li.disables {
màu: #fff;
trang trí văn bản: không có;
}

.điều hướng li {
Hiển thị nội dòng;
}

.điều hướng li a,
.điều hướng li a: di chuột,
.điều hướng li.active a,
.điều hướng 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,
.điều hướng li.active a {
màu nền: # 3C8DC5;
}

Có bạn có nó. Chúng tôi có một danh sách phân trang số trong chủ đề của chúng tôi trông tuyệt vời.

Thêm thủ công phân trang số vào chủ đề WordPress mà không cần plugin

Thêm phân số trong WordPress bằng WP-PageNavi

Bây giờ, hãy xem, hãy xem cách thêm phân trang số 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 bạ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 để định cấu hình cài đặt plugin.

Định cấu hình cài đặt WP-PageNavi

Trên trang cài đặt plugin, bạn có thể thay thế cài đặt văn bản và phân trang 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 thẻ mẫu trong Theme WordPress của mình. Chuyển đến thư mục chủ đề của bạn và tìm các dòng cho phân trang cũ hơn và mới hơn 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_posts_link và next_posts_link cũ.

<?php wp_pagenavi (); ?>

Khi bạn đã thêm đoạn mã wp_pagenavi, đây là cách phân trang số sẽ như thế nào:

Chế độ xem mặc định của phân trang số của wp-pagenavi

Nếu bạn muốn thay đổi màu sắc và kiểu phân trang số trong wp-pagenavi, thì 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à nhấp vào nút Chọn. Trình chỉnh sửa sẽ 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.

Sao chép nội dung của tệp pagenavi-css

Tiếp theo, bạn cầ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 chủ đề style style.css của bạn. Bây giờ bạn có thể sửa đổi bảng màu và kiểu dáng từ đây. Lý do tại sao chúng tôi đã sao chép nội dung của plugin Css vào chủ đề của biểu định kiểu là để tránh mất thay đổi kiểu dáng nếu 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 và sửa đổ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 hiện {
font-weight: in đậm;
màu nền: # 3C8DC5;
}

Đây là cách nó sẽ trông như thế nào:

CSS PageNavi tùy chỉnh

Như mọi khi bạn nên thử nghiệm với CSS. Mục tiêu phải là để phù hợp với phân trang số với giao diện trang web của bạn Màu sắc, để nó hòa trộn độc đáo và trông không giống như một mục được đặt kỳ quặc.

Chúng tôi hy vọng rằng bài viết này đã giúp bạn thêm và hiển thị phân số 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.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map