私はもっと多くの投稿をajaxで読み込む必要があるテーマを開発しています。現在、カテゴリページで[もっと読み込む]をクリックすると、すべての投稿が読み込まれます。 category.phpは次のようになります。
<?php $counter = 0; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $style = ($counter % 2 == 0) ? 'col1 masonry-item ' : 'col2 masonry-item '; ?>
<article id="post-<?php the_ID(); ?>" class="single-article post <?php echo $style; ?>" >
<div class="flip">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if (has_post_thumbnail( $post->ID) ) { ?>
<?php if ($counter % 2 == 0) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_large');
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_small');
} ?>
<img src="<?php echo $image[0]; ?>" alt="" />
<?php } ?>
</a>
</div>
<div class="post-meta click">
<a href="<?php echo the_permalink() ?>" rel="bookmark">
<div class="grid-text">
<h2 class="masonry-cat"><?php echo the_category('/ ') ?> | Nº <?php the_field('sub_page_article_number'); ?> </h2>
<h2><?php echo get_the_title(); ?></h2>
<?php the_excerpt(); ?>
<a href="<?php echo the_permalink() ?>" class="click-more">More</a>
</div>
</a>
</div>
</article>
<?php $counter++; endwhile;?>
</div> <!-- end of postslist -->
<a class="load_more" data-nonce="<?php echo wp_create_nonce('load_posts') ?>" href="javascript:;"><span>+</span> Load More <span>+</span></a>
</div>`
"Load More"ボタンをクリックすると、次のコードを持つ/functions.phpを呼び出します。
add_action( "wp_ajax_load_more", "load_more_func" );
function load_more_func() {
if ( !wp_verify_nonce( $_REQUEST['nonce'], "load_posts" ) ) {
exit("No naughty business please");
}
$offset = isset($_REQUEST['offset'])?intval($_REQUEST['offset']):0;
$posts_per_page = isset($_REQUEST['posts_per_page'])?intval($_REQUEST['posts_per_page']):10;
$post_type = isset($_REQUEST['post_type'])?$_REQUEST['post_type']:'post';
ob_start();
$args = array(
'post_type'=>$post_type,
'offset' => $offset,
'posts_per_page' => $posts_per_page,
'orderby' => 'date',
'order' => 'DESC'
);
$posts_query = new WP_Query( $args );
if ($posts_query->have_posts()) {
$result['have_posts'] = true;
$counter = 0;
while ( $posts_query->have_posts() ) : $posts_query->the_post(); ?>
<?php $style = ($counter % 2 == 0) ? 'col1 masonry-item ' : 'col2 masonry-item '; ?>
<article id="post-<?php the_ID(); ?>" class="single-article post masonry-brick <?php echo $style; ?>" >
<div class="flip">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if (has_post_thumbnail( $post->ID) ) { ?>
<?php if ($counter % 2 == 0) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_large');
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'masonry_thumb_small');
} ?>
<img src="<?php echo $image[0]; ?>" alt="" />
<?php } ?>
</a>
</div>
<div class="post-meta click">
<a href="<?php echo the_permalink() ?>" rel="bookmark">
<div class="grid-text">
<h2 class="masonry-cat"><?php echo the_category('/ ') ?> | Nº <?php the_field('sub_page_article_number'); ?> </h2>
<h2><?php echo get_the_title(); ?></h2>
<?php the_excerpt(); ?>
<a href="<?php echo the_permalink() ?>" class="click-more">More</a>
</div>
</a>
</div>
</article>
<?php $counter++; endwhile;
$result['html'] = ob_get_clean();
else {
$result['have_posts'] = false;
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
echo $result;
}
else {
header("Location: ".$_SERVER["HTTP_REFERER"]);
}
die();
}
JavaScriptは次のとおりです。
$('.load_more:not(.loading)').live('click',function(e){
e.preventDefault();
var $load_more_btn = $(this);
var post_type = 'post';
var offset = $('#posts_list .single-article').length;
var nonce = $load_more_btn.attr('data-nonce');
$.ajax({
type : "post",
context: this,
dataType : "json",
url : headJS.ajaxurl,
data : {action: "load_more", offset:offset, nonce:nonce, post_type:post_type, posts_per_page:headJS.posts_per_page},
beforeSend: function(data) {
$load_more_btn.addClass('loading').html('+ Loading... +');
},
success: function(response) {
if (response['have_posts'] == 1){
var $newElems = $(response['html'].replace(/(\r\n|\n|\r)/gm, '')).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$('#posts_list').append( $newElems ).masonry( 'appended', $newElems);
$load_more_btn.removeClass('loading').html('+ Load More +');
});
} else {
$load_more_btn.removeClass('loading').addClass('end_of_posts').html('<span>End of posts</span>');
}
}
});
私は別の方法で投稿を検索してみましたが、何もうまくいきませんでした。任意の助けは大歓迎です。
クエリパラメータに カテゴリの引数 が含まれていません。投稿タイプ、オフセット、1ページあたりの投稿数とともに、cat
またはcategory_name
を渡して設定する必要があります。現在のカテゴリのIDは get_queried_object()
で取得できます。
$queried_object = get_queried_object();
$cat_id = $queried_object->term_id;
カテゴリテンプレートのどこかに値を出力して取得するか、または、 ajax javascript をエンキューしたときにis_category
を確認し、 wp_localize_script()
を使用してスクリプトに渡します。