Genesis Framework một chủ đề khá nhiều chức năng để chúng ta tùy biến, bạn có thể thấy bất kỳ bài hướng dẫn nào nếu muốn tìm kiếm trên mạng internet, tuy nhiên mỗi người có một cách chỉnh sửa riêng, cũng như việc sử dụng giao diện vậy không ai giống ai, thường thì tôi rành khá nhiều thời gian để tùy biến CSS, nên bạn có thể thấy là giao diện của tôi được sửa đổi liên tục từ show case, magazine pro, và hiện tại là sample. Có khá nhiều thứ thu hút tôi làm việc này trong đó phân trang trang chủ là một trong những hướng dẫn mà tôi áp dụng cho bất kỳ chủ đề nào của mình. Nếu bạn đang cố gắng tìm một giải pháp để tùy biến pagination thì bài viết này sẽ hưu ích cho bạn.
Hướng dẫn tùy biến pagination trong genesis
Mặc định từ phiên bản 2.0 của genesis đã có chức năng phân trang ở trang chủ, lưu trữ, chuyên mục, thẻ… Và được tích hợp trong phần cài đặt chung của genesis.
Kích hoạt pagination genesis
Để kích hoạt chức năng này truy cập Genesis > Themes Setting trong mục Content Archives > Entry Pagination ở đây tôi chọn Numeric, nếu bạn không thích hiển thị theo kiểu số thì có thể chọn Previous / Next.
Trong đó:
Numeric: Hiển thị phân trang theo kiểu số 1,2,3…4,5,6
Previous / Next: Hiển thị phân trang theo kiểu bài viết tiếp theo…
Tùy biến chữ next trong genesis
Tiếp theo chúng ta sẽ tùy chỉnh một số chức năng khác để Pagination hiển thị đẹp hơn.
#Tùy biến nút Next Page trong Genesis
add_filter ( 'genesis_next_link_text' , 'sp_next_page_link' );
function sp_next_page_link ( $text ) {
return 'NEXT<i class="fa fa-angle-right" aria-hidden="true"></i>';
}
add_filter ( 'genesis_prev_link_text' , 'sp_previous_page_link' );
function sp_previous_page_link ( $text ) {
return '<i class="fa fa-angle-left" aria-hidden="true"></i>PREV';
}
Bạn thấy đấy ở code trên tôi đã chỉnh sủa lại chữ Previous / Next theo ý muốn của mình và thêm 2 icon của Font Awesome trước nó.
Thêm Font Awesome vào genesis
# Add Font Awesome Support
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
Lưu ý: Nếu bạn đã thêm Font Awesome thì có thể bỏ qua bước này, để tranh việc xung đột code không mong muốn.
Thiết kế giao diện cho Previous / Next genesis
Copy toàn bộ mã CSS bên dưới và dán vào style.css
.pagination {
clear: both;
margin: 40px 0;
}
.adjacent-entry-pagination {
margin-bottom: 0;
}
.archive-pagination li {
display: inline;
}
.archive-pagination a {
background-color: #fff;
color: #443f3f;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
padding: 8px 20px;
text-decoration: none;
}
.archive-pagination a:hover,
.archive-pagination a:focus,
.archive-pagination .active a {
background-color: #c3251d;
color: #fff;
}
Lưu lại tất cả cài đặt, giờ đây hãy quay lại trang chủ xóa cache và xem kết quả nào.
Đó, đó là tất cả những gì bạn cần làm để tùy biến Pagination một cách chuyên nghiệp hơn, tôi hy vọng bạn sẽ thích bài viết này, và nếu có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới khung comments.
