Question

我想在Wordpress中实现此页面：http://www.spendeeapp.com/
基本上，在mousescroll功能上加载下一篇文章

我可以通过jQuery复制mousescroll动作

$(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>

我的问题是，如何通过事件加载下一篇文章，并显示加载的帖子。

Answer 1

你已经到了一半了。接下来你需要做的就是创建一个ajax请求并使用php回调加载下一页。代码看起来像这样。特别注意评论。

<强>的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.
}

我已经概述了构建这个东西可能需要的一切。我希望它可以帮助你。

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

1 个答案: