Question

这是我自定义的具有网格视图的自定义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 -->

任何帮助将不胜感激。

Answer 1

我不会将您的帖子放在列表项中，因为它们几乎肯定不会符合HTML标准。 .before javascript代码告诉pbd在div中加载新帖子。如果你想在列表项中使用它们，那么这些必须是li。但首先要看第一点 - 不要使用li。

如果没有链接网站的话，很难说出错了，但我的猜测是占位符内容位于错误的位置。我会根据插件作者的建议切换到使用div。

<强>更新根据您的反馈，我看到两种可能性。第一

行$('#grid-content') blahblahblah将数据检索器置于内容网格之后。不在里面。为了得到它，请改用它。

$('#grid-content ul')

现在不确定这是否会弄乱布局。当你把div放在列表中时，这当然是非法的。你可以切换

.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

用其他合法的东西。

您可以尝试其他的事情 - 我没有看到这个代码 - 是有新增职位的INSERT语句针对UL来代替。但是，我没有看到这种情况发生在哪里，所以我无法告诉你如何做到这一点。

<强> UPDATE2

When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

.load方法插入新帖子。所以你可以在当前的代码中看到

$('.pbd-alp-placeholder-'+ pageNum).load

定位占位符中的新内容。相反，让它针对您的ul。所以你想要：

$('#grid-content ul').load

你会这样做而不是我在Update1中提供的信息

WordPress问题我在gridview的同一页面上加载帖子

1 个答案: