Hướng Dẫn Phân Trang Với Wp PageNavi Trên WordPress

Bạn đang tìm kiếm một Plugin phân trang ư? Bạn muốn thay thế code phân trang cổ hủ của WordPress ư? Vâng! bạn hoàn toàn có thể làm được điều này với Plugin Wp PageNavi. Cấu hình đơn giản, dễ dàng sử dụng, và có nhiều hỗ trợ Style đẹp.

Vài nét về Wp PageNavi

Wp PageNavi là một plugin phân trang có lượt tải và cài đặt nhiều nhất hiện nay. Plugin hỗ trợ phân trang ưu việt, đẹp mắt. Cách sử dụng hoàn toàn đơn giản chỉ với một vài bước. Tương thích được hầu hết các loại website. Thường xuyên được nâng cấp để hỗ trợ các phiên bản mới nhất của wordpress. Ngoài ra, còn có thể tùy ý chỉnh sửa css của plugin, làm các link phân trang trở nên sống động hơn.

Xem thêm: 15 Mẫu CSS Phân Trang Đẹp Dành Cho Plugin Wp PageNavi.

Sử Dụng Plugin

Cài Đặt Plugin

Vào Plugin => Add New => Search Wp PageNavi

Tiến hành cài đặt và kích hoạt để sử dụng plugin.

Sau khi hoàn tất cài đặt. Plugin sẽ xuất hiện tại vị trí Setting => Pagenavi.

Cấu hình Plugin

Truy cập vào plugin để tiến hành cấu hình hiển thị cơ bản cho Plugin.

Tên Và Công Dụng

Text For Number Of Pages: Văn bản và số hiển thị ở đầu trang.

  • %PAGE_NUMBER%: Trang hiện tại.
  • %TOTAL_PAGES%: Tổng số trang.
Xem Thêm:   Hành Trình Kiếm Tiền Online Bằng Việc Tham Gia Viết Blog

Text For Current Page: Hiển thị trang hiện tại.

Text For Page: Hiển thị trang.

Text For First Page: Quay lại đầu trang.

Text For Last Page: Chuyển đến cuối trang.

Text For Previous Page: Về trang trước.

Text For Next Page: Qua trang kế tiếp.

Text For Previous … : Trang rút gọn.

Text For Next … : Trang rút gọn.

Page Navigation Style: Kiểu hiển thị.

  • Normal: Bình thường.
  • Drop-Down List: Dạng danh sách.

Number Of Pages To Show: Số trang mặc định hiển thị.

Number Of Larger Page Numbers To Show: Giới hạn số trang lớn hơn hiển thị.

Show Larger Page Numbers In Multiples Of: Hiển thị số trang lớn hơn bội số.

Không hiển thị phân trang

Sau khi cài đặt, kích hoạt và cấu hình xong plugin Wp PageNavi nhưng vẫn không hiển thị phân trang. Đây là do bạn chưa hoàn tất quá trình cấu hình cho plugin. Để hiển thị bạn cần thêm một đoạn code của PageNavi

<?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>

vào content-singe.phpcontent-page.php

Cách thực hiện

Bước 1: Copy đoạn code hiển thị phân trang của Wp PageNavi.

<?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>

Bước 2: Can thiệp vào trình chỉnh sửa giao diện

Truy cập vào Themes Editor, tiến hành chỉnh sửa ở 2 file content-singe.phpcontent-page.php

Bước 3: Xóa phân trang của giao diện và thêm code phân trang của Plugin

  1. Xóa đoạn code phân trang của giao diện. Thông thường đoạn code sẽ có dạng wp-link-page( array …
  2. Thêm đoạn code của plugin vừa copy ở bước 1. Dán đoạn code bên dưới the_content hoặc <!– .entry-content–>
Xem Thêm:   Chia Cột Các Bài Viết trên Wordpress Với Content View

Bước 4: Lưu lại cài đặt và kiểm tra

Sau khi xóa đoạn code phân trang của giao diện và thêm đoạn code Wp PageNavi vào. Bạn click vào Savechange để lưu lại những cài đặt.

Để kiểm tra bạn nên tạo 1 tap website mới, không nên sử dụng tap chỉnh sửa giao diện. Vì cách làm này sẽ ảnh hưởng trực tiếp đến trang web. Nếu có sự cố không mong muốn xảy ra với trang web của bạn. Tại tap này bạn có thể sử dụng Ctrol + z để quay lại một vài bước để khôi phục themes.

Bạn cần phải thêm phân trang tại bài post hoặc page để tiện hơn trong quá trình kiểm tra. Cách phân trang trên wordpress bạn sử dụng <!–nextpage–> ở trong phần shortcode. Xem thêm: Phân Trang Trên Bài Viết WordPress Để Tăng PageView.

Bước 5: Thêm Css cho plugin

Bạn có thể thêm đoạn css dưới đây vào website để phân trang thêm sống động. Bạn hoàn toàn có thể tùy chỉnh css theo ý thích của bạn chỉ cần có 1 ít kiến thức về nó. Ngoài ra, bạn cũng có thể sử dụng các mẫu css mà mình đã làm sẵng. Xem tại đây: 15 Mẫu CSS Phân Trang Đẹp Dành Cho Plugin Wp PageNavi

.wp-pagenavi {	font-size:15px; float: right;}
.wp-pagenavi a, .wp-pagenavi span.current {margin:2px; text-decoration:none; border:1px solid #e3e3e3; color:#000; background:#fff; display:block; float:left; width:50px; height:40px; text-align:center; line-height:35px; -webkit-border-radius:30%; -moz-border-radius:30;border-radius:30%; font-weight: 700; font-size: 12px;}
.wp-pagenavi span.current {text-shadow:none;}
.wp-pagenavi a:visited {padding:6px 6px 5px; margin:2px; text-decoration: none; border:1px solid #e3e3e3; color:#000; background:#fff;}
.wp-pagenavi a:hover {border:1px solid #EA453B; color:#fff; background:#EA453B; text-shadow:none;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {border:0; background: none;}
.wp-pagenavi .previouspostslink:hover , .wp-pagenavi .nextpostslink:hover {color: #898989; background: none; border:0;}
.wp-pagenavi a:active {padding:6px 6px 5px; margin:2px; text-decoration:none; border:1px solid #e3e3e3; color:#000; background:#fff;}
.wp-pagenavi span.pages {padding: 8px 15px 8px; margin:2px; color:#000; background:transparent; 	float:left;}
.wp-pagenavi span.current {margin:2px; border:1px solid #000; color:#000; border:1px solid #EA453B; color:#fff; background:#EA453B;}
.wp-pagenavi span.extend {margin:2px; color:#000; background:#fff; float:left; -webkit-border-radius:30%; -moz-border-radius:30%; border-radius:30%; width:50px; height: 40px; line-height: 44px; text-align: center; border:1px solid #e3e3e3; background:#fff;}
.wp-pagenavi .first {width:60px; height: 40px; line-height: 35px;}
.wp-pagenavi .last {width:60px; height: 40px; line-height: 35px;}

Lời Kết

Như vậy, qua bài viết này mình đã chia sẽ cho các bạn một plugin phân trang khá tốt hiện nay. Cài đặt, sử dụng và cả css đi kèm. Đơn giản quá để thực hiện phải không nào. chúc các bạn thành công!!!

Xem Thêm:   Dọn Dẹp Rác Và tăng Tốc Web với Plugin WP-Optimize
  •  
  •  
  •  
Loading...