Khi truy cập vào trang web mặc định sẽ phải click vào từng trang trong pagination để cuộn sang pages tiếp theo, vậy đối với hướng dẫn này chúng tôi sẽ cung cấp cho bạn những đoạn mã cho phép bạn tải trang vô hạn áp dụng với các child theme genesis của studiopress.com
Phương pháp này sẽ hoạt động tốt hơn khi chúng ta kích hoạt Jetpack Infinite Scroll For Genesis.
Trong bài hướng dẫn bạn sẽ được sử dụng phương pháp đơn giản nhất, để tùy chỉnh theo phong cách mà không cần sử dụng đến một plugin khác.
Có 2 bước bạn cần thực hiện để thêm cuộn vô hạn trong Genesis
- Thêm các file js cuộn vô hạn
- Cài đặt tính năng cuộn vô hạn
Bước 1: Tải lên file js cuộn trang vô hạn
Bạn có thể thực hiện bằng cách upload file infinite-scroll.pkgd.min.js lên thư mục js của bạn.
Tiếp theo kích hoạt js trên vào genesis
add_action( 'wp_enqueue_scripts', 'genesis_infinite_scroll_scripts' );
function genesis_infinite_scroll_scripts() {
if ( is_front_page() ) {
wp_enqueue_script( 'infinite-scroll', get_stylesheet_directory_uri() . '/js/infinite-scroll.pkgd.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'infinite-scroll-set', get_stylesheet_directory_uri() . '/js/infinite-scroll-set.js' , array( 'jquery', 'infinite-scroll' ), '1.0.0', true );
}
}
Hoặc
add_action( 'wp_enqueue_scripts', 'load_external_infinite_scroll' );
function load_external_infinite_scroll() {
if ( is_front_page() ) {
wp_enqueue_script( 'infinite-scroll', '//unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js' );
wp_enqueue_script( 'infinite-scroll-set', get_stylesheet_directory_uri() . '/js/infinite-scroll-set.js' , array( 'jquery', 'infinite-scroll' ), '1.0.0', true );
}
}
Dán một trong hai đoạn code trên vào file functions.php của bạn.
Bước 2: Đặt các chức năng tùy chọn trong cuộn vô hạn với genesis
jQuery(document).ready(function($) {
$('.content').infiniteScroll({
// options
path: '.pagination-next a',
append: '.entry',
history: false,
status: '.scroller-status',
hideNav: '.pagination',
});
});
Tạo một tệp mới có tên là infinite-scroll-set.js trong thư mục JS của chủ đề con của bạn và thêm jQuery ở trên vào tệp.
Cài đặt số bài hiển thị trên mỗi trang
Tiếp theo chúng ta truy cập Setting > Reading
Bạn cũng có thể cài đặt các thuộc tính trên bằng cách dán toàn bộ code vào functions.php
add_action('pre_get_posts', 'set_posts_per_page');
function set_posts_per_page( $query ){
if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {
$query->set( 'posts_per_page', 2 );
}
}
Thay đổi is_home() hàm điều kiện trong đoạn mã trên để sử dụng trên các trang lưu trữ khác.
Và cuối cùng là lưu lại.
Giờ đây, hãy quay lại trang chủ của bạn reload và xem kết quả nào…
Chúc thành công!
