可以跳过背景信息。
我想在我的Wordpress主题上使用无限滚动选项，但我没有受过良好的Javascript培训，所以我尝试了以下解决方案：
https://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/
function custom_infinite_scroll_js() {
//Code as given in the link above
}
add_action( \'wp_footer\', \'custom_infinite_scroll_js\', 100 );
我在上述文章上浪费了几天的时间，后来意识到一切都过时了，甚至metafizzy的JS也已经更新了。
面临的挑战有：
img: The path to the ajax loader image
nextSelector: Selector for the “previous posts” link.
navSelector: Containing selector for the previous/next navigation links.
itemSelector: Selector for posts. This might be .hentry, .post, .etc
contentSelector: Containing div for your posts.
无法理解如何在我的主题中找到这些选择器
V2中的一些bug决定使用V3，并继续使用最新版本的无限卷轴。V2已更新为V3。详细信息可在此处找到。https://infinite-scroll.com/extras.html#v2-upgrade-example
我创建了这样一个函数→function custom_infinite_scroll_js() {
if ( ! is_singular() ) { ?>
<script>
var $container = $(\'.container\').infiniteScroll({
append: \'.post\',
path: \'.pagination__next\',
status: \'.page-load-status\',
});
// use event for v2 callback
$container.on( \'append.infiniteScroll\', function( event, response, path, items ) {
$( items ).tooltip();
});
</script>
<?php
}
}
add_action( \'wp_footer\', \'custom_infinite_scroll_js\', 100 );
但它实际上并没有创建一个无限卷轴。有人能指导我如何进行吗。
SO网友:Varsha Dhadge
对于单篇文章，下面的无限滚动是解决方案
仅有一个的php
<div class="blog-article-section">
<?php while( have_posts() ): ?>
<div class="blog-article">
<?php if( have_posts() ): the_post(); ?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<?php endif; ?>
<div class="pagination-single" >
<div class="next_post_link"><?php previous_post_link( \'%link\',\'Previous Post\' ) ?></div>
<div class="previous_post_link"><?php next_post_link( \'%link\',\'Next Post\' ) ?></div>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="blog-article1"></div>
<a href="#" class="loadArticle">Load more</a>
脚本。js公司
(function($) {
$(document).ready(function(){
var next_count = 1;
$(\'.next_post_link a\').attr("id", "next"+next_count);
var prev_count = 1;
$(\'.prev_post_link a\').attr("id", "prev"+prev_count);
$(".loadArticle").click(function(e) {
e.preventDefault();
loadNextArticle();
});
$(window).scroll(function(){
loadNextArticle();
console.log(\'scroll\')
});
function loadNextArticle(){
var next_link = $("#next"+next_count).attr("href");
var prev_link = $("#prev"+prev_count).attr("href");
if(typeof(next_link) != "undefined"){
$.ajax({
type: "GET",
url: next_link,
data: {},
async: false,
success: function(data){
next_count = ++next_count;
var result = $(data);
$(\'.next_post_link a\', result).attr("id","next"+next_count);
result.find(\'.blog-article\').appendTo(\'.blog-article1\').fadeIn(\'slow\');
}
});
}
}
});
}(jQuery));
