在 wordpress 中使用 Ajax “加载更多帖子”答案

【问题标题】："Load More Posts" with Ajax in wordpress在 wordpress 中使用 Ajax “加载更多帖子”
【发布时间】：2012-10-03 13:11:19
【问题描述】：

我正在尝试在博客页面上创建 ajax 分页.. 我需要做的是最初显示 5 个帖子，然后在单击“加载更多帖子”链接时再加载 5 个。

下面是我使用的javascript：

<script>
    jQuery(document).ready(function() {
        // ajax pagination
        jQuery('.nextPage a').live('click', function() { 

            // if not using wp_pagination, change this to correct ID
            var link = jQuery(this).attr('href');

            // #main is the ID of the outer div wrapping your posts
            jQuery('.blogPostsWrapper').html('<div><h2>Loading...</h2></div>');

            // #entries is the ID of the inner div wrapping your posts
            jQuery('.blogPostsWrapper').load(link+' .post')
        });
    }); // end ready function
</script>

问题是当我点击链接时，旧帖子被新帖子取代，我需要显示旧帖子以及新帖子......

这是启用 ajax 分页的更新的 jQuery 代码。

jQuery(document).ready(function(){
jQuery('.nextPage a').live('click', function(e){
  e.preventDefault();
  var link = jQuery(this).attr('href');
  jQuery('.blogPostsWrapper').html('Loading...');
  jQuery('.blogPostsWrapper').load(link+' .post');
  });
  });

现在唯一的问题是旧帖子被删除了，我需要保留旧帖子和新帖子..

【问题讨论】：

标签： ajax wordpress pagination

【解决方案1】：

这是我使用的最终代码，现在一切正常...

// Ajax Pagination
jQuery(document).ready(function($){
    $('.nextPage a').live('click', function(e)  {
    e.preventDefault();
    $('.blogPostsWrapper').append("<div class=\"loader\">&nbsp;</div>");

    var link = jQuery(this).attr('href');

    var $content = '.blogPostsWrapper';
    var $nav_wrap = '.blogPaging';
    var $anchor = '.blogPaging .nextPage a';
    var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts

    $.get(link+'', function(data){
    var $timestamp = new Date().getTime();
    var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
    $('.blogPostsWrapper .loader').remove();
    $next_href = $($anchor, data).attr('href'); // Get the new href
    $($nav_wrap).before($new_content); // Append the new content
    $('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
    $('.netxPage a').attr('href', $next_href); // Change the next URL
    $('.blogPostsWrapper .blogPaging:last').remove(); // Remove the original navigation
    });

    });
}); // end ready function

【讨论】：

我知道你发布这个已经有一段时间了，但我想看看与这个相关的 xhtml。

【解决方案2】：

你可以试试下面的代码吗？这就是我如何在我自己的网站上进行这项工作的方式。

替换：

jQuery('.blogPostsWrapper').load(link+' .post')

与：

$.get(link+' .post', function(data){
$('.blogPostsWrapper').append(data);
});

【讨论】：

Hello Dirk...我不知道为什么，但是当我单击“加载更多链接”时页面正在重新加载...
嗯我认为这与 .get 可能有机会： $.get(''+link+' .post', function(data){
嗨。我稍微编辑了 jQuery 代码……现在它以 ajax 方式加载页面，但问题是它正在加载完整的页面，包括页眉、页脚、侧边栏等。这是代码..jQuery(document).ready(function($){ $('.nextPage a').live('click', function(e) { e.preventDefault(); var link = jQuery(this).attr('href'); $.get(link+'', function(data){ $('.blogPostsWrapper').append(data); }); }); }); // end ready function跨度>
您可以尝试评论我刚刚添加的内容吗？您的代码加载漏洞页面的原因是因为现在您没有过滤器（.post），它只会选择包含 .post 的元素。
使用 .post 应用代码会出现 404 错误："NetworkError: 404 Not Found - http://localhost/tory/page/2/%20.post"

【解决方案3】：

您应该使用 jQuery append() 添加新帖子而不使用旧帖子。

jQuery load() 将替换在您的元素中找到的数据。引用自 jQuery API：

.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用都非常简单：

【讨论】：

append is loading is the ajax and not remove old posts但它也再次带出页眉、页脚等......这是新的jQuery代码：// Ajax Pagination jQuery(document).ready(function($){ $('.nextPage a').live('click', function(e) { e.preventDefault(); var link = jQuery(this).attr('href'); $.get(link+'', function(data){ $('.blogPostsWrapper').append(data); }); }); }); // end ready function
有点跑题了，但你实际上是以错误的方式做 ajax。您不应该查询另一个页面，但 ajax 请求应该触发 php 文件中的 wordpress 循环，并且只发回所需的帖子。