2016-09-12 22:45
浏览 35


I want to implement this page in Wordpress:
Basically, the loading next post on mousescroll functionality

I can replicate the mousescroll action thru jQuery

        .on('mousewheel DOMMouseScroll swipedown swipeup', function(){
            // Do something


<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; ?>

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • donglengyuan6826
    donglengyuan6826 2016-09-13 05:43

    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.


        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) {
            // Here you can use the data returned by you PHP callback


    // 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
    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.

    点赞 评论