Thêm các bài viết cùng chuyên mục là một trong những phương pháp hữu ích giúp bạn giới thiệu cho người đọc những nội dung hưu ích khác trên trang web của bạn, và điều đó hoàn toàn có thể bằng cách sử dụng các đoạn mã code mẫu từ chúng tôi, cụ thể là bài viết các cách thêm bài viết liên quan vào genesis đơn giản, và bài viết này tôi muốn hướng dẫn bạn thêm một cách chèn các bài viết tiếp theo cùng chủ vào khu vực entry navigation ở cuối mỗi bài viết theo dạng next và prev tương tự như ảnh bên dưới cuối bài viết.
Hướng dẫn chèn bài viết tiếp theo vào genesis
Để thực hiện việc này nhìn chung cúng ta sẽ làm qua 2 bước, và hướng dẫn này được thực hiện trên genesis sample nên nó hoạt động tốt trên bất kỳ chủ đề nào của genesis.
1. Thêm chức năng next post vào genesis
Bằng cách này bạn thêm các đoạn mã code bên dưới vào file functions.php trong thưu mục child theme của bạn.
Dưới đây là mã để thêm các liên kết bài viết trước và sau tiếp theo sau mỗi bài viết.
<?php //* Do NOT include the opening php tag //* Add previous and next post links after entry add_action( 'genesis_entry_footer', 'genesis_prev_next_post_nav' );
Mã tùy chỉnh liên kết trang tiếp theo trong entry navigation
<?php
//* Do NOT include the opening php tag
//* Customize the next page link in the entry navigation
add_filter ( 'genesis_next_link_text' , 'bg_next_page_link' );
function bg_next_page_link ( $text ) {
return 'Next Page »';
}
Mã tùy chỉnh liên kết trang trước trong entry navigation
<?php
//* Do NOT include the opening php tag
//* Customize the previous page link in the entry navigation
add_filter ( 'genesis_prev_link_text' , 'bg_previous_page_link' );
function bg_previous_page_link ( $text ) {
return '« Previous Page';
}
Toàn bộ mã code chèn bài viết tiếp theo trong genesis
//* Add previous and next post links after entry
add_action( 'genesis_entry_footer', 'genesis_prev_next_post_nav' );
//* Customize the next page link in the entry navigation
add_filter ( 'genesis_next_link_text' , 'bg_next_page_link' );
function bg_next_page_link ( $text ) {
return 'Next Page »';
}
//* Customize the previous page link in the entry navigation
add_filter ( 'genesis_prev_link_text' , 'bg_previous_page_link' );
function bg_previous_page_link ( $text ) {
return '« Previous Page';
}
2. Thêm các đoạn mã CSS cho phù hợp với chủ đề của bạn
Để chèn các thuộc tính css này bạn chỉ cần copy toàn bộ mã dán vào style.css.
.adjacent-entry-pagination {
margin-bottom: 30px;
background: #fff;
padding: 5px;
}
lưu lại.
Kết quả:
