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を使用してデータベースを呼び出し、アイテム (この場合は投稿) を取得する必要があります。投稿の HTML マークアップを作成するために解析できる JSON 文字列を返したいと思うでしょう。例は次のとおりです。

$.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 文字列として返す必要があります。エンジンの外部で 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 に答える