douhao7677
douhao7677
2016-09-12 22:45
浏览 35

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

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.

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

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.

    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.

    点赞 评论

相关推荐