Cuộn trang vô hạn với genesis bạn đã dám thử chưa?

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.

Cuộn trang vô hạn với genesis

Có 2 bước bạn cần thực hiện để thêm cuộn vô hạn trong Genesis

  1. Thêm các file js cuộn vô hạn
  2. 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!

Thông tin liên hệ

    • 1

      Step 1

    • 2

      Step 2

    • 3

      Step 3

    1/3

    Step 1

    This will close in 0 seconds

    <div class="content-form-widget">
    <p style="color: #003DA5;">Nhận Báo Giá</p>
    <p style="font-size: 87.5%">InDMP sẽ trả lời mail của bạn trong thời gian sớm nhất</p>
    </div>

      This will close in 20 seconds