カスタム投稿タイプの無限スクロール

  • 解決済 notosama

    (@notosama)


    5年、 6ヶ月前

    infinite scrollの実装で困っています。
    カスタム投稿タイプ「works」を作成して、index.phpに以下のように記述しました。
    「もっと読む」ボタンを押しても「読み込むページがありません」と表示されてしまいます。

    
<?php get_header(); ?>

<div id="work_list">

<?php query_posts('post_type=works&posts_per_page=3&paged='.$paged); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div id="post">
     記事内容
  </div>

<?php endwhile; else : ?>
<?php endif; ?>

</div>

<span class="next_posts_link">
    <?php next_posts_link(); ?>
</span>
<button class="view-more-button" type="button">もっと見る</button>
<div class="page-load-status" style="display:none;">
    <div class="infinite-scroll-request">ロード中</div>
    <p class="infinite-scroll-last">これ以上は記事がありません</p>
    <p class="infinite-scroll-error">読み込むページがありません</p>
</div>

<script>
var infScroll = new InfiniteScroll( '#work_list', { 
    append: '#post',             
    path: '.next_posts_link a',  
    hideNav: '.next_posts_link', 
    button: '.view-more-button', 
    scrollThreshold: false,      
    status: '.page-load-status', 
    history: 'false'             
});
</script>

<?php get_footer(); ?>

    次のページへのリンクはちゃんと出力されています。
    いろいろ調べてまわったのですがどうして原因がわからず、質問させていただきました。
    どうか解決策をご教授お願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • CG

    (@du-bist-der-lenz)

    5年、 6ヶ月前

    こちらのトピックと同様のことではないでしょうか。
    https://ja.wordpress.org/support/topic/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E5%88%86%E9%A1%9E%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%81%A7%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/

    トピック投稿者 notosama

    (@notosama)

    5年、 6ヶ月前

    そちらのトピックは拝見しました。
    どう上手くいかないのか書かれていないので、全く同じ問題・原因であるのかわからなかった為、詳細も含めて質問させて頂きました。

    bigbang823

    (@bigbang823)

    5年、 6ヶ月前

    こちらのトピックを投稿させて頂いた者です。
    https://ja.wordpress.org/support/topic/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E5%88%86%E9%A1%9E%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%81%A7%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/

    私の場合、カスタム投稿アーカイブ（archive-xxx.php）は問題なく無限スクロールは実装できております。

    ishitaka

    (@ishitaka)

    5年、 6ヶ月前

    こんにちは

    infinite scroll は次ページが存在する必要があります。
    サブクエリに対する次ページが存在しません。URL パラメーターなどで次ページを用意するといいかと思います。

    例:

    <div id="work_list">
<?php
$works_paged = isset( $_GET['works_paged'] ) ? absint( $_GET['works_paged'] ) : 1;
$the_query = new WP_Query( 'post_type=works&posts_per_page=5&paged=' . $works_paged );
$max_num_pages = $the_query->max_num_pages;
if ( $the_query->have_posts() ) {
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		(省略)
	}
	wp_reset_postdata();
}
?>
</div>
<?php
if ( $max_num_pages > $works_paged ) {
	$works_paged++;
	$permalink = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER["REQUEST_URI"];
	$next_url = esc_url( add_query_arg( 'works_paged', $works_paged, $permalink ) );
	echo '<span class="next_posts_link"><a href="' . $next_url . '"></a></span>';
}
?>
(省略)
    トピック投稿者 notosama

    (@notosama)

    5年、 6ヶ月前

    こんにちは。ご返信ありがとうございます。

    すみません、かなりの初心者なので更に教えて頂ければ恐縮です。
    一つ目の(省略)の部分には何を書けばいいのでしょうか？
    (省略)を抜いて実行したところ次ページが出力されていたので、うまくいきそうではあるのですが…

    <div id=”post”>記事内容</div>
    <?php endwhile; else : ?>
    <?php endif; ?>

    上記の部分がないのでとりあえずそのまま書いてみましたが、当然かもしれませんがエラーが出ます…
    本当に申し訳ないのですが、ご教授頂ければ有り難いです。

    ishitaka

    (@ishitaka)

    5年、 6ヶ月前

    一つ目の(省略)の部分には何を書けばいいのでしょうか？

    ここは、どのような表示にしたいのか、私にはわからないので、ご自身でお書きください。

    単純にタイトルだけであれば、

    <div id="work_list">
<?php
$works_paged = isset( $_GET['works_paged'] ) ? absint( $_GET['works_paged'] ) : 1;
$the_query = new WP_Query( 'post_type=works&posts_per_page=5&paged=' . $works_paged );
$max_num_pages = $the_query->max_num_pages;
if ( $the_query->have_posts() ) {
	echo '<div class="container">';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo '<article class="post">' . get_the_title() . '</article>';
	}
	echo '</div>';
	wp_reset_postdata();
}
?>
</div>
<?php
if ( $max_num_pages > $works_paged ) {
	$works_paged++;
	$permalink = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER["REQUEST_URI"];
	$next_url = esc_url( add_query_arg( 'works_paged', $works_paged, $permalink ) );
	echo '<span class="next_posts_link"><a href="' . $next_url . '"></a></span>';
}
?>

    上記にあわせて、

    <script>
var infScroll = new InfiniteScroll( '.container', { 
    append: '.post',
    path: '.next_posts_link a',
    hideNav: '.next_posts_link',
    button: '.view-more-button',
    scrollThreshold: false,
    status: '.page-load-status',
    history: 'false'
});
</script>
    • この返信は5年、 6ヶ月前にishitakaが編集しました。
    トピック投稿者 notosama

    (@notosama)

    5年、 6ヶ月前

    頂いたヒントを元に、無事思った通りに実装できました。
    ご丁寧に教えて頂きありがとうございました！本当に助かりました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「カスタム投稿タイプの無限スクロール」には新たに返信することはできません。