Wordpress在鼠标滚轮上加载下一页

Question

I want to implement this page in Wordpress: http://www.spendeeapp.com/
Basically, the loading next post on mousescroll functionality

I can replicate the mousescroll action thru jQuery

$(document).ready(function(){
    $(document)
        .on('mousewheel DOMMouseScroll swipedown swipeup', function(){
            // Do something
        })
});

PHP:

<div id="content">
            <h1>Main Area</h1>
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <h1><?php the_title(); ?></h1>
                <h4>Posted on <?php the_time('F jS, Y') ?></h4>
                <p><?php the_content(__('(more...)')); ?></p>
                <hr> <?php endwhile; else: ?>
                <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
        </div>

My question is, how can I load the next post thru the event, and display the loaded post.

Answer 1

You are already halfway there. All you need to do next is create an ajax request and load the next page by using a php callback. The code will look something like this. Pay special attention to comments.

jQuery

$.ajax({
    url: data.ajax_url, // Localize this variable using Wordpress functions
    type: 'post',
    data: {
        action: 'load_nextpage_page', // The name of php callback (function)
        // Any other variables you may wish to pass
    },
    success: function(data) {
        console.log(data);
        // Here you can use the data returned by you PHP callback
    }
});

PHP

<?php 

// your-javascript-file-handle is the one you use while enqueuing your JS files in wordpress. Use the same handle in following code
// to know more about localization visit https://developer.wordpress.org/reference/functions/wp_localize_script/

wp_localize_script('your-javascript-file-handle', 'data', array(
    'ajax_url' => admin_url('admin-ajax.php'),
));


// AJAX callback handling
add_action('wp_ajax_load_nextpage_page', 'load_nextpage_page');
add_action('wp_ajax_nopriv_load_nextpage_page', 'load_nextpage_page');

function load_nextpage_page()
{
    // Code for fetching next post here
    // Remember you will need a variable to keep track of which post should be fetched next.


    // Once you have fetched the right post
    //  you can echo the contents which will be passed as a reposnse to your ajax request.
}

I have outlined everything you might need to build this thing. I hope it helps you.