2

我已经为自定义页面模板（Wordpress）实现了 Masonry。我已经规定只显示前 10 个帖子。但是，我想创建一个“加载更多”链接，以便显示接下来的 10 个帖子，依此类推，直到 Masonry 到达最后一个帖子。

我对 append 方法以及如何正确使用它的语法不太了解。例如，如果容器是#newsContainer 并且每个图块是 .newsContainerPost，我将如何正确地将它放入（下）？

$('#append').click(function(){
  var $boxes = $( boxMaker.makeBoxes() );
  $container.append( $boxes ).masonry( 'appended', $boxes );
});
4

1 回答 1

0

您需要采取一些步骤来实现这一点。首先，您需要使用AJAX调用您的数据库并获取项目（在本例中为帖子）。您很可能希望返回一个 JSON 字符串，该字符串可以被解析以构建您的帖子的 HTML 标记。一个例子是：

$.ajax({
    type: "POST",
    url: "path/to/load-more.php",
        context: document.body,
        success: function(data) {
            if(!data){
                 //possible errors
                 return false;
            }
            var posts = JSON.parse(data);
            var container = document.getElementById('container')
            for(var i in posts){
               var post = posts[i];
               //now post will have info like post.image, post.title
               //post.excerpt, and whatever else you put in the php script
               //build the post with HTML and append it to the container
               //and [reload masonry][2] eaxmple
               var div = document.createNode('div');
               var h1 = document.createNode('h1');
               h1.innerHTML = post.title;
               div.appendChild(h1);
               container.appendChild(div);
               container.masonry( 'reload' );                   
            }
        }
    });

其次，您需要将load-more.php10 个帖子作为 JSON 字符串返回。您将需要在引擎之外运行 WP 循环。

<?php
    // Include WordPress
    define('WP_USE_THEMES', false);
    require('/server/path/to/your/wordpress/site/htdocs/blog/wp-blog-header.php');
    query_posts('showposts=10');
    $arr = new array();
while ($wp_query->have_posts()) : $wp_query->the_post();
    //put in whatever info you want from the post in a new
    //array index
    $arr[the_ID()]['title'] = the_title();
endwhile;

return json_encode(arr); 

?>

将 ajax 调用放在一个函数中，并在要加载更多的事件上调用该函数；比如点击一个按钮，或者滚动到页面底部。

我希望这有帮助。

于 2013-02-27T00:52:59.987 回答