Hiện tại đa số theme wordpress miễn phí hoặc có phí đều có sẵn chức năng phân trang, nhưng vẫn còn nhiều theme wordpress chúng ta phải tự làm điều này. WP PageNavi là một plugin khá quen thuộc, chức năng của plugin này là tạo phân trang trong WordPress. Khi blog của bạn có nhiêu bài viết thì WP-PageNavi sẽ thực sự giúp ích cho bạn, điều hướng người dùng tăng tỷ lệ pageview cho blog, góp phần tối ưu onpage cho blog.
Sử dụng Plugin WP PageNavi để phân trang trong WordPress
Với hơn 5 triệu lượt cài đặt, plugin WP PageNavi thật sự là một plugin đã rất quen thuộc với nhiều người dùng để phân trang với nhiều style vô cùng đẹp mắt.
Sau khi cài đặt Plugin WP PageNavi, bạn truy cập vào Settings -> PageNavi để cấu hình cho Plugin.
Màn hình PageNavi Settings hiện ra, bạn chú ý tới những thiết lập trong mục Page Navigation Options. Tại cột Use pagenavi-css.css bạn chọn No (để tí nữa chúng ta thay style cho pagenavi). Sau đó bạn nhấn Save Changes để lưu các thông tin thiết lập cho WP-PageNavi.
Bây giờ việc cần làm là bạn mang đoạn code dưới đây cho vào bất kỳ vị trí nào mà bạn cần có phân trang trong wordpress:
<?php wp_pagenavi(); ?>
Tạo style phân trang riêng độc đáo với plugin WP PageNavi
Nếu bạn muốn có một style riêng ở phần phân trang cho blog của mình, bạn có thể hoàn toàn tùy chỉnh với plugin WP PageNavi, chỉ cần bạn nắm vững một tí CSS là được.
Ở đây mình có một demo thay thế cho style mặc định của plugin, nhớ là hãy tắt chức năng tùy chọn Style của plugin đi nhá. Để có được style như trên, chỉ cần thêm đoạn CSS sau vào file style.css hoặc bất kỳ file css nào của theme wordpress:
.wp-pagenavi {height:54px; font-size:15px; float: right; margin-bottom: 20px;}
.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:50px; text-align:center; line-height:49px; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; 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:15px 6px 15px; 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:50%;-moz-border-radius:50%;border-radius:50%; width:50px; height: 50px; line-height: 44px; text-align: center; border:1px solid #e3e3e3; background:#fff;}
.wp-pagenavi .last {width:50px; height: 50px; line-height: 44px;}
Đơn giản như vậy, bây giờ bạn có thể thấy được phân trang cực đẹp trên blog wordpress của bạn. Nếu muốn thay style, hãy dựa trên những div ở demo của mình, tùy chỉnh thông số là được. Chúc các bạn thành công!