Cuộn vô hạn trong Genesis

Hướng dẫn này cung cấp các bước để triển khai Cuộn vô hạn của Bill Erickson trong WordPress trên trang Bài đăng và các trang lưu trữ trong Genesis với những cải tiến nhỏ.

Chúng tôi sẽ đề cập đến trường hợp thao tác cuộn của người dùng đóng vai trò kích hoạt làm mờ dần trong tập bài đăng tiếp theo.

Nếu bạn đang tìm kiếm một biến thể kích hoạt nhấp vào nút, hãy làm theo điều này thay thế.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

add_action( 'wp_ajax_be_ajax_load_more', 'be_ajax_load_more' );
add_action( 'wp_ajax_nopriv_be_ajax_load_more', 'be_ajax_load_more' );
/**
 * AJAX Load More.
 *
 * @link http://www.billerickson.net/infinite-scroll-in-wordpress
 */
function be_ajax_load_more() {
    $args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array();
    $args['post_type'] = isset( $args['post_type'] ) ? esc_attr( $args['post_type'] ) : 'post';
    $args['paged'] = esc_attr( $_POST['page'] );
    $args['post_status'] = 'publish';

    ob_start();

    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post();
        genesis_markup( array(
            'open'    => '<article %s>',
            'context' => 'entry',
        ) );

            do_action( 'genesis_entry_header' );

            do_action( 'genesis_before_entry_content' );

            printf( '<div %s>', genesis_attr( 'entry-content' ) );
            do_action( 'genesis_entry_content' );
            echo '</div>';

            do_action( 'genesis_after_entry_content' );

            do_action( 'genesis_entry_footer' );

        genesis_markup( array(
            'close'   => '</article>',
            'context' => 'entry',
        ) );
    endwhile; endif; wp_reset_postdata();
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

Bước 2

Tạo một tệp có tên load-more.js trong js thư mục của chủ đề con có như sau:

jQuery(function($){

    $('.post-listing').append( '<div class="loading"><img src="' + beloadmore.loadingimage + '" /></div>' );

    var loadingDiv = $('.post-listing .loading');

    var page = 2;

    var loading = false;

    var scrollHandling = {
        allow: true,
        reallow: function() {
            scrollHandling.allow = true;
        },
        delay: 1000 // (milliseconds) adjust to the highest acceptable value
    };

    $(window).scroll(function(){
        if( ! loading && scrollHandling.allow ) {
            scrollHandling.allow = false;
            setTimeout(scrollHandling.reallow, scrollHandling.delay);

            var offset = $(loadingDiv).offset().top - $(window).scrollTop();

            if( 750 > offset ) {
                loading = true;

                var data = {
                    action: 'be_ajax_load_more',
                    page: page,
                    query: beloadmore.query,
                };

                $.post(beloadmore.url, data, function(res) {
                    if( res.success) {
                        $(res.data).hide().appendTo('.post-listing').fadeIn(1000);

                        $('.post-listing').append( loadingDiv );

                        if ( page >= beloadmore.max ) {
                            $(loadingDiv).remove();
                        }

                        page = page + 1;
                        loading = false;
                    } else {
                        // console.log(res);
                    }
                }).fail(function(xhr, textStatus, e) {
                    // console.log(xhr.responseText);
                });

            }
        }
    });

});

Bước 3

Tải hình ảnh loading.gif (tải xuống từ đây) vào images thư mục của chủ đề con .

Bước 4

Tạo một phần mẫu, tức là một tệp có tên content-archive.php trong thư mục chủ đề con có:

add_action( 'wp_enqueue_scripts', 'be_load_more_js' );
/**
 * Javascript for Load More.
 *
 */
function be_load_more_js() {
    global $wp_query;

    $args = array(
        'url'   => admin_url( 'admin-ajax.php' ),
        'query' => $wp_query->query,
        'max' => $wp_query->max_num_pages,
        'loadingimage' => get_stylesheet_directory_uri() . '/images/loading.gif',
    );

    wp_enqueue_script( 'be-load-more', get_stylesheet_directory_uri() . '/js/load-more.js', array( 'jquery' ), '1.0', true );
    wp_localize_script( 'be-load-more', 'beloadmore', $args );

}

add_action( 'genesis_before_loop', 'sk_opening', 20 );
/**
 * Adds opening tag of a custom container for all the posts.
 *
 * A high priority of 20 to make this appear below .archive-description.
 */
function sk_opening() {
    echo '<div class="post-listing">';
}

add_action( 'genesis_after_loop', 'sk_closing' );
/**
 * Adds closing tag of a custom container for all the posts.
 */
function sk_closing() {
    echo '</div>';
}

// Removes Archive Pagination.
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );

Bước 5

Tải phần mẫu ở trên vào các mẫu mong muốn của bạn, tức là, tạo các tệp có tên home.php (cho trang Bài viết) và archive.php (cho các tệp lưu trữ) trong thư mục chủ đề con cả hai đều có:

get_template_part( 'content-archive' );

genesis();

Người giới thiệu:

genesis / lib / structure / loops.php