Hướng Dẫn Sử Dụng Wp-Pagenavi

Với hơn 5 triệu lượt mua đặt, plugin WP PageNavi thật sự là một trong những plugin đang rất quen thuộc với các người dùng để làm phân trang với tương đối nhiều style cực kỳ đẹp mắt.

Bạn đang xem: Hướng dẫn sử dụng wp-pagenavi

Sau khi thiết đặt Plugin WP PageNavi, bạn truy vấn vào Settings -> PageNavi để thông số kỹ thuật cho Plugin.

Xem thêm: Chia Sẻ Wifi Trên Win 10 - #1 Cách Phát Wifi Trên Windows 10,

Màn hình PageNavi Settings hiện ra, bạn chăm chú tới những tùy chỉnh thiết lập trong mục Page Navigation Options. Trên cột Use pagenavi-css.css bạn chọn No (để tí nữa chúng ta thay style cho pagenavi). Kế tiếp bạn nhận Save Changes để lưu các thông tin thiết lập cho WP-PageNavi.

Bây giờ vấn đề cần làm cho là chúng ta mang đoạn code tiếp sau đây cho vào ngẫu nhiên vị trí nào nhưng mà bạn cần phải có phân trang trong wordpress:

Tạo style phân trang riêng

Nếu bạn có nhu cầu có một style riêng ở phần phân trang mang lại blog của mình, bạn cũng có thể hoàn toàn tùy chỉnh thiết lập với plugin WP PageNavi, chỉ việc bạn nắm vững một tí CSS là được.

Ở đây mình có một demo sửa chữa cho style khoác định của plugin, hãy nhờ rằng hãy tắt chức năng tùy lựa chọn Style của plugin đi nhá. Để đã đạt được style như trên, chỉ cần thêm đoạn CSS sau vào file style.css hoặc ngẫu nhiên file css như thế 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;