Q&AinfiniteScrollはプラグインではなくjs読み込みです。
記事のカテゴリーを選択して絞った時に、「more」ボタンを押してもボタンが反応しません。
カテゴリーを絞らない状態では反応します。
スマホで検証すると、カテゴリーを絞ってから(ボタンを押しても押さなくても)絞らない状態に戻すとボタンの反応がなくなります。
この現象はスマホの時のみ起こります。
スマホではページのスクロールに応じて記事をフェードインさせる記述をしていますが、この部分を削除して検証しても挙動に差は見られなかったので、これが影響を及ぼしているというわけではなさそうでした。
カテゴリーを絞った時はURLが変わるのですが、もしかしたらURLが変わったことが原因なのではないか？と考えていますが確信が得られません。
newsページではカテゴリーを絞らない状態用のphp、絞った状態用のphpがあります。
今回wordpressでのサイト制作が初めてで、phpも詳しいわけではないのでアドバイスをいただけますと幸いです。
何卒、よろしくお願いいたします。
↓セレクトボックス
php
1<?php 2global $post; 3$slug = $post->post_name; 4$categories = get_categories(array('taxonomy' => 'category')); 5?> 6 7<?php if ($categories) : ?> 8 <div class="category-box"> 9 <select name="cat-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> 10 <option value="news/">ALL</option> 11 <?php foreach ($categories as $category) : ?> 12 <?php if($slug == $category->slug): ?> 13 <option value="<?php echo esc_url(home_url( 'news/' . $category->slug )); ?>" selected><?php echo esc_html($category->name); ?></option> 14 <?php else: ?> 15 <option value="<?php echo esc_url(home_url( 'news/' . $category->slug )); ?>"><?php echo esc_html($category->name); ?></option> 16 <?php endif; ?> 17 <?php endforeach; ?> 18 <option value="https://xxx.jp/">外部リンク</option> 19 </select> 20 </div> 21<?php endif; ?>
↓カテゴリー選択なし
php
1<?php get_template_part('template/common/page-heading'); ?> 2<main> 3 <section class="news"> 4 <div class="news__category"> 5 <?php get_template_part('template/common/category-select'); ?> 6 </div> 7 <div class="news__list"> 8 <div id="cardList" class="list__column"> 9 <?php 10 $category = 'news'; 11 $parent_ID = get_page_by_path($category)->ID; 12 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 13 $args = array( 14 'post_type' => 'post', 15 'post_status' => 'publish', 16 'paged' => $paged, 17 "posts_per_page" => 9, 18 'orderby' => 'date' 19 ); 20 $the_query = new WP_Query($args); 21 while ($the_query->have_posts()) : $the_query->the_post(); 22 ?> 23 <?php get_template_part('template/common/news-card'); ?> 24 <?php 25 endwhile; 26 wp_reset_postdata(); ?> 27 </div> 28 </div> 29 <?php 30 $pages = $the_query->max_num_pages; 31 if (!$pages) { 32 $pages = 1; 33 } 34 ?> 35 <?php if ($pages != 1 && $paged < $pages) : ?> 36 <div id="pagination" style="display: none;"> 37 <?php global $wp_rewrite; 38 $paginate_base = get_pagenum_link(1); 39 if (strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()) { 40 $paginate_format = ''; 41 $paginate_base = add_query_arg('paged', '%#%'); 42 } else { 43 $paginate_format = (substr($paginate_base, -1, 1) == '/' ? '' : '/') . 44 user_trailingslashit('page/%#%/', 'paged');; 45 $paginate_base .= '%_%'; 46 } 47 echo paginate_links(array( 48 'base' => $paginate_base, 49 'format' => $paginate_format, 50 'total' => $the_query->max_num_pages, 51 'mid_size' => 1, 52 'current' => ($paged ? $paged : 1), 53 'prev_text' => '<< 前へ', 54 'next_text' => '次へ >>', 55 )); ?> 56 </div> 57 <div class="news__button"> 58 <div id="lead-more"><button class="button--outline" type="button">More</button></div> 59 <div class="scroller-status" style="display: none;"> 60 <p class="infinite-scroll-request"><img id="loading" src="<?php echo get_template_directory_uri() ?>/assets/img/loading.gif" alt="読み込み中" width="30" height="30"></p> 61 <p class="infinite-scroll-last">これ以上は記事がありません</p> 62 <p class="infinite-scroll-error">読み込むページはありません</p> 63 </div> 64 </div> 65 <?php endif; ?> 66 </div> 67 </section> 68</main>
↓カテゴリー選択あり
php
1<?php 2global $post; 3$slug = $post->post_name; 4?> 5<?php get_template_part('template/common/page-heading'); ?> 6<main> 7 <section class="news"> 8 <div class="news__category"> 9 <?php get_template_part('template/common/category-select'); ?> 10 </div> 11 <div id="newsList" class="news__list"> 12 <div class="list__column"> 13 <?php 14 $category = 'news'; 15 $parent_ID = get_page_by_path($category)->ID; 16 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 17 $args = array( 18 'category_name' => $slug, 19 'post_type' => 'post', 20 'post_status' => 'publish', 21 'paged' => $paged, 22 "posts_per_page" => 9, 23 'orderby' => 'date' 24 ); 25 $the_query = new WP_Query($args); 26 while ($the_query->have_posts()) : $the_query->the_post(); 27 ?> 28 <?php get_template_part('template/common/news-card'); ?> 29 <?php 30 endwhile; 31 wp_reset_postdata(); ?> 32 </div> 33 </div> 34 <?php 35 $pages = $the_query->max_num_pages; 36 if (!$pages) { 37 $pages = 1; 38 } 39 ?> 40 <?php if ($pages != 1 && $paged < $pages) : ?> 41 <div id="pagination" style="display: none;"> 42 <?php global $wp_rewrite; 43 $paginate_base = get_pagenum_link(1); 44 if (strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()) { 45 $paginate_format = ''; 46 $paginate_base = add_query_arg('paged', '%#%'); 47 } else { 48 $paginate_format = (substr($paginate_base, -1, 1) == '/' ? '' : '/') . 49 user_trailingslashit('page/%#%/', 'paged');; 50 $paginate_base .= '%_%'; 51 } 52 echo paginate_links(array( 53 'base' => $paginate_base, 54 'format' => $paginate_format, 55 'total' => $the_query->max_num_pages, 56 'mid_size' => 1, 57 'current' => ($paged ? $paged : 1), 58 'prev_text' => '<< 前へ', 59 'next_text' => '次へ >>', 60 )); ?> 61 </div> 62 <div class="news__button"> 63 <div id="lead-more"><button class="button--outline" type="button">More</button></div> 64 <div class="scroller-status" style="display: none;"> 65 <p class="infinite-scroll-request"><img id="loading" src="<?php echo get_template_directory_uri() ?>/assets/img/loading.gif" alt="読み込み中" width="30" height="30"></p> 66 <p class="infinite-scroll-last">これ以上は記事がありません</p> 67 <p class="infinite-scroll-error">読み込むページはありません</p> 68 </div> 69 </div> 70 <?php endif; ?> 71 </div> 72 </section> 73</main>
js
1jQuery(function($) { 2 $(window).bind("load", function(){ 3 const pagination = document.getElementById('pagination'); 4 if(pagination != null) { 5 const infScroll = new InfiniteScroll( '#cardList', { 6 append: '.news-card', 7 path: '#pagination .next', 8 hideNav: '#pagination', 9 button: '#lead-more', 10 scrollThreshold: false, 11 status: '.scroller-status', 12 history: 'false', 13 }); 14 } else { 15 return false; 16 } 17 }); 18 //スクロールしてフェードイン 19 const windowWidth = window.innerWidth; 20 if (windowWidth <= 1025) { 21 $(window).scroll(function (){ 22 $('.news-card').each(function(){ 23 var elemPos = $(this).offset().top, 24 scroll = $(window).scrollTop(), 25 windowHeight = $(window).height(); 26 if (scroll > elemPos - windowHeight + 100){ 27 $(this).addClass('scrollin'); 28 } 29 }); 30 }); 31 } else { 32 return false; 33 } 34})
↓jsファイル読み込み
js
1function my_scripts(){ 2 wp_enqueue_script('anime', get_template_directory_uri() . '/assets/js/anime.min.js', array(), '1.0.0', true); 3 if(is_home() || is_front_page()) { 4 wp_enqueue_script('slick-script', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'); 5 } 6 if (is_page('news') || is_parent_slug() === 'news') { 7 wp_enqueue_script('infiniteScroll', 'https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js', array(), '1.0.0', true); 8 } 9 wp_enqueue_script('script', get_template_directory_uri() . '/assets/js/all.min.js', array(), '1.0.0', true); 10} 11add_action('wp_print_scripts', 'my_scripts');
回答1件
0
自己解決
カテゴリー選択ありphpと選択なしphpでidの記述に違いがあり、ここを選択なしphpと統一したところ動くようになりました。
id="newsList"をid="cardList"へ変えてclass="list__column"のdivへ移動させる必要がありました。
↓カテゴリー選択ありphp_before
php
1<div id="newsList" class="news__list"> 2 <div class="list__column"> 3 <?php 4 //php省略 5 ?> 6 </div> 7</div>
↓カテゴリー選択ありphp_after
php
1<div class="news__list"> 2 <div id="cardList" class="list__column"> 3 <?php 4 //php省略 5 ?> 6 </div> 7</div>
投稿2021/03/15 04:04
総合スコア17
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。