そのため、AJAX を使用して別の PHP ファイルから新しいループをロードするカスタム jQuery と組み合わせて、jQuery 無限スクロール プラグインを使用しようとしています。無限スクロールは最初のページ コンテンツでは機能しますが、新しく読み込まれたコンテンツでは機能しません。AJAX ロジックの仕組みは次のとおりです。
- カテゴリをクリックします
- REL属性に格納されているカテゴリIDを取得する
- その ID を変数として保存する
- 変数を引数として別の PHP ファイルのループに渡し、PHP ファイルのそのセクションをロードします。
無限スクロールの重要な部分は、スクリプトが次のものを見つけられることです。
- 投稿の次のページへのリンクを含む要素 (最初のコンテンツは #pageNav、新しいコンテンツは #filterPageNav)
- 投稿の次のページへのリンク (#beyondInfinity)
- 投稿を含む div
- 投稿自体
これが問題の一部である可能性があります。別の問題として、$_POST['id'] 呼び出しが、ページ化されたカテゴリ投稿のさまざまなページに正しく投稿されていない可能性があります: ("../category-filter/page/2", "../category -filter/page/3" など)
どんな洞察や助けも大歓迎です!!!
編集/追加 8/17:
私 (またはあなた) が AJAX を介してロードされたカテゴリを使用して外部ループに無限スクロールを適用することについての質問に答える前にcategory__in'=>array($_POST['id'])、たとえばcategory__in'=>array(13)代わりに固定カテゴリを想定して最初に答える方が確かに簡単です。したがって、誰かがこの単純化された問題に対する洞察や答えを持っていれば、それも素晴らしいでしょう!
JQUERY は次のとおりです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<?php if( is_home() ) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/spritely.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Add Loading Image
$('body').append('<div id="catFilterLoading"></div>');
$('#catFilterLoading').pan({fps: 30, speed: 1000, dir: 'right', depth: '1'});
//Filter Categories
$.ajaxSetup({cache:false});
$('#categoryContainer ul li a').click( function() {
$('#catFilterLoading').show();
//Remove the initial page navigation + the infinite scroll script
$('#pageNav, #documentInfinite').remove();
//Get the category ID, stored in the REL attr
var cat_id = $(this).attr('rel');
//Load the '#filter' div and post the cat_id to that page to be used in the new loop
$("#content").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/category-filter/ #filter",{id:cat_id}, function() {
//This is the call back function for load()
//Do this stuff once the new content has finished loading
//hide the loading graphic
$('#catFilterLoading').hide();
//apply a new infinite scroll effect to the loaded content
$('#filter').infinitescroll({
navSelector : "#filterPageNav",
nextSelector : "#beyondInfinity",
itemSelector : "#filter .post",
loadingImg : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
donetext : ""
});
});
return false;
})
});
</script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/init.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/infinite-scroll.min.js"></script>
<?php if( is_home() ) { ?>
<script id="documentInfinite" type="text/javascript">
$(document).ready(function() {
$('#content').infinitescroll({
navSelector : "#pageNav",
nextSelector : "#beyondInfinity",
itemSelector : "#content .post",
loadingImg : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
donetext : ""
});
});
</script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavHome.js"></script>
<?php } else { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavPage.js"></script>
<?php } ?>
読み込まれたコンテンツの PHP テンプレートは次のとおりです。
<?php
/*
Template Name: categoryFilter
*/
?>
<?php
get_header();
?>
<h3 id="thinkingH3">Latest Thinking</h3>
<div id="content">
<div id="filter">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if( !is_paged() ) {
$args=array(
'category__in'=>array($_POST['id']),
'paged'=>$paged
);
} else {
$args=array(
'category__in'=>array($_POST['id']),
'paged'=>$paged
);
}
query_posts($args);
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="post <?php echo $_POST['id']; ?>">
<div class="postExcerpt">
<span class="postDateOutter"></span>
<span class="postDate"><?php the_time('m.d.Y') ?></span>
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/post.jpg" alt="post image" />
<h2><?php the_title(); ?></h2>
<?php the_advanced_excerpt(); ?>
<a class="readFull" href="#">Read Full Post</a>
</div>
<div class="postAuthor">
<?php echo get_avatar( get_the_author_email(), '120' ); ?>
<b><?php the_author(); ?></b>
<b>Comments: <?php comments_number('0', 'one', '%'); ?> </b>
<b>Thinking About</b>
<ul>
<?php swift_list_cats(7); ?>
</ul>
</div>
</div> <!-- post -->
<?php endwhile; endif; ?>
<div id="filterPageNav"><?php get_pagination(); ?></div>
</div> <!-- filter -->
</div> <!-- content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
ページネーション機能の HTML 出力は次のとおりです (ドメイン名は削除されています)。
<div id="pageNav"><a id='pageIndicator'>Page <span>1 <i>of</i> 4</span></a><a href='http://....com/' class='current pageNumbers'>1</a><a href='http://../page/2' class='pageNumbers'>2</a><a href='http://....com/page/3' class='pageNumbers'>3</a><a href='http://....com/page/4' class='pageNumbers'>4</a><a href="http://.../page/2" id="beyondInfinity"><i>Next</i> </a> <a href='http://.../page/4'> » </a></div>