Trong bài viết trước tôi có hướng dẫn bạn cách để cuộn trang vô hạn với genesis, nhìn chung thì cả 2 phương pháp này khá giống nhau giúp chúng ta load trang ngoài trang chủ một cách tự động, tuy nhiên ở bài viết trước để cuộn trang bắt buộc bạn phải click vào nút buton, còn bài viết này khi bạn kéo đến khu vực nhất định các trang khác sẽ được load một cách tự động không cần click chuột.
Ưu điểm của của việc tự động load bài viết
- Tự động cuộn trang không cần click.
- Tốc độ load khá nhanh.
Nhược điểm của việc tự động load bài viết
- Hệ thống sẽ load tự động không có điểm dừng (load hết bài viết thì thôi)
Đó là một số ưu nhược điểm khi chúng ta áp dụng theo phương pháp này, bạn nên cân nhắc trước khi hành động.
Hướng dẫn tự động load bài viết ngoài trang chủ genesis
Nhìn chung chúng ta sẽ thực hiện phương pháp này theo 3 bước, các bước sẽ được mình hướng dẫn chi tiết bên dưới.
Bước 1: Thêm file js vào chủ đề genesis của bạn.
Upload file này vào thư mục js trong chủ đề con của bạn, và dán toàn bộ code bên dưới vào file functions.php trong thư mục child theme.
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 tải file js ngoài trang web của bạn
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 );
}
}
Tương tự như trên thêm các đoạn mã PHP ở trên vào các chủ đề con (functions.php)
Bước 2: Tùy chỉnh chức năng cuộn trang trên genesis
Tạo một file 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 toàn bộ mã jQuery bên dưới.
jQuery(document).ready(function($) {
/**
* @author Brad Dalton
*/
$('.content').infiniteScroll({
// options
path: '.pagination-next a',
append: '.entry',
history: false,
status: '.scroller-status',
hideNav: '.pagination',
});
});
Bước 3: Cài đặt số trang hiển thị trên mỗi bài viết
Bằng cách truy cập Cài đặt > Đọc tại đây bạn có thể cài đặt số trang cần hiển thị bên ngoài trang chủ.
Hoặc bạn có thể ghi đè chức năng này bằng cách thêm đoạn mã bên dưới.
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() thẻ điều kiện trong đoạn mã trên để sử dụng trên các trang lưu trữ khác.
