Question

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

我对append方法知之甚少，以及如何正确使用它的语法。例如，如果容器是＃newsContainer并且每个tile都是.newsContainerPost，我将如何正确地将其放入（下方）？

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

Answer 1

要实现这一目标，您需要采取几个步骤。首先，您需要使用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.php将您的10个帖子作为JSON字符串返回。您需要run the WP loop outside of the engine。

<?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调用放在函数中，并在要加载的事件上调用该函数;比如单击按钮，或滚动到页面底部。

我希望这会有所帮助。

使用jQuery Masonry“加载更多帖子”

1 个答案: