这是针对我自定义的具有网格视图的自定义 Wordpress 主题。
我想在同一页面上加载帖子，比如在 twitter 中。我尝试了许多插件，例如无限滚动......但我无法让它工作，然后我尝试了 pbd-ajax-load-posts 并加载了帖子，但我无法让帖子加载到他们自己的容器上，他们只是在彼此下方加载。
.php 模板示例：
<?php get_header(); ?>
<?php get_sidebar(); ?>
<!-- CONTENT CONTAINER -->
<div id="content">
<!-- INNER WRAPPER -->
<div id="inner">
<!-- GRID CONTENT UL - EACH LI IS A GRID CONTAINER -->
<ul id="grid-content">
<!-- OPEN THE GRID LOOP QUERY -->
<?php while ( have_posts() ) : the_post(); ?>
<!-- GRID MODULE LOOP -->
<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- title, featured-image, ect.... -->
我对插件中的 .js 文件做了一些小改动，但似乎没有任何效果。这是插件内部的文件，它最初的样子：
jQuery(document).ready(function($) {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(pbd_alp.startPage) + 1;
// The maximum number of pages the current query can return.
var max = parseInt(pbd_alp.maxPages);
// The link of the next page of posts.
var nextLink = pbd_alp.nextLink;
/**
* Replace the traditional navigation with our own,
* but only if there is at least one page of new posts to load.
*/
if(pageNum <= max) {
// Insert the "More Posts" link.
$('#content') //<--- I had changed it to #grid-content
.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
.append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');
// Remove the traditional navigation.
$('.navigation').remove();
}
/**
* Load new posts when the link is clicked.
*/
$('#pbd-alp-load-posts a').click(function() {
// Are there more posts to load?
if(pageNum <= max) {
// Show that we're working.
$(this).text('Loading posts...');
$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
function() {
// Update page number and nextLink.
pageNum++;
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
// Add a new placeholder, for when user clicks again.
$('#pbd-alp-load-posts')
.before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
// Update the button message.
if(pageNum <= max) {
$('#pbd-alp-load-posts a').text('Load More Posts');
} else {
$('#pbd-alp-load-posts a').text('No more posts to load.');
}
}
);
} else {
// I changed this below to >>> .html('message here'); instead
$('#pbd-alp-load-posts a').append('.');
}
return false;
});
});
如果我在模板循环之后用简单的 html 测试它，我会得到我想要的结果。样本：
</div>
<!-- /MODULE TEXT -->
</li>
<!-- /GRID MODULE LOOP -->
<?php endwhile; ?>
<!-- /END GRID LOOP QUERY -->
<!-- I want to have the posts of the next page load in seperate
containers like this -->
<li>Post 11 </li>
<li>Post 12 </li>
<li>Post 13 </li>
<!--Then on the next click it would load 10 more -->
<!-- couldn't get it loading in here
<div class="gridcontent2"></div>-->
</ul>
<!-- /END GRID LIST -->
任何帮助将不胜感激。