สอบถามเรื่องการทำ I...
 
การแจ้งเตือน
ลบทั้งหมด

สอบถามเรื่องการทำ Infinite Scroll ร่วมกับ Masonry ครับ

   RSS

0
หัวข้อเริ่มต้น

หลังจากทำตามธีมเว็บนิตรสารโดยใช้ Masonry โดยใช้ธีม seed 
ซึ่งพอไปเห็น Infinite Scroll เลยลองทำต่อดูครับ

พบปัญหาว่ามันไม่ทำงานเลยอยากขอคำแนะนำครับ

1. ผมได้ติดตั้ง infinite-scroll.pkgd.min.js ไว้ในไฟล์ scripts.js
2. ผมวาง code ชุดนี้ลงในไฟล์ main-vanilla.js ซึ่งผมไม่แน่ใจว่าเข้าใจถูกไหมว่าให้เปลี่ยน append เป็น -card

let elem = document.querySelector('.s-infinite');
let infScroll = new InfiniteScroll( elem, {
  // options
  path: '.pagination__next',
  append: '.-card',
  history: false,
});

3.  ส่วนสุดท้ายคือค่าที่ผมพ่นออกมาครับ

<div class="sec-news">
    <div class="container ">

        <h2 class="s-title">NEWS</h2>

        <div class="s-masonry s-infinite">
            <?php 
			$args = array(
				'posts_per_page' => 5
			);
			$the_query = new WP_Query( $args );
			?>

            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

            <?php get_template_part( 'template-parts/content', 'card' ); ?>

            <?php endwhile; wp_reset_postdata(); ?>

        </div>
</div>
แท็กหัวข้อ
4 คำตอบ
0

ส่วนตัวยังไม่เคยทดลองใช้ตัวนี้นะครับ แต่ตามหลักในโค้ดต้องมีพวก pagination หรือ พวก prev next ร่วมด้วยนะครับ

อาจต้องปรับโค้ดจาก doc ของเขาตรงจุดนี้

ร่วมกับโค้ด pagination หรือ prev next ของ WordPress นะครับผม

หรือถ้าเป็นโค้ดเกี่ยวกับแนวนี้จะอยู่ในไฟล์ template-tags ของธีม plant นะครับ

0

ตามที่ @k บอกนะครับ จะให้ระบบโหลดหน้าถัดไปได้ มันต้องมีลิงก์ที่เอาไว้แสดงหน้าถัดไปให้โหลดครับ 

ซึ่งวิธีพ่นค่า pagination ของ post ที่เขียนเอง เราจะใช้

seed_posts_navigation($the_query);

แล้วดูว่ามีคลาสอะไรครอบ ถ้าไม่มี ก็ตั้งเองครับ

ดังนั้น จะไม่ใช่โค้ดนี้นะครับ

 path: '.pagination__next',

ปล. ถ้าเปลี่ยนหน้า แต่ข้อมูลเป็นอันเดิม เพราะไม่ได้ใส่ $paged ไว้นะครับ ลองดูตัวอย่างโค้ดแบบมีหลายหน้า ที่ไฟล์ page-seeddemo.php นะครับ แคปมาให้ดูตามรูปครับ

 CleanShot 2021 05 29 at 15.10.08@2x
0
หัวข้อเริ่มต้น

ในระหว่างที่รอคำตอบผมได้ลองติดตั้งปลั๊กอินของ facetwp และใช้ Add on ที่มีชื่อว่า Load more ของ facetwp ครับ

load more ใช้งานได้แล้ว แต่มีปัญหาตรงที่พอเมื่อเรากด load more แล้ว post ที่พ่นออกมาไม่ก่ออิฐให้แบบ masonry ครับ
แต่แสดงออกมาในรูปแบบโพสต์เดียวแล้วไหลลงมาแทน

echo facetwp_display( 'facet', 'load_more' )
<div class="sec-news">
    <div class="container">

        <h2 class="s-title">NEWS</h2>

            <?php if ( have_posts() ) : ?>

            <?php 
                echo '<div class="s-masonry">';
                while ( have_posts() ) : the_post();
                get_template_part( 'template-parts/content', 'card');
                endwhile; 
                
                echo '</div>';
                echo facetwp_display( 'facet', 'load_more' )
                //seed_posts_navigation();
            ?>
            <?php else : ?>

            <?php get_template_part( 'template-parts/content', 'none' ); ?>
                
            <?php endif; ?>
            

</div>

 

 Screen Shot 2564 05 29 at 16.09.16
0

เวลาเจอปัญหาแบบนี้ ค้นด้วยคีย์เวิร์ดของโค้ดที่เราใช้ก่อนเลยครับ กรณีนี้คือคำว่า facetwp masonry

พอค้นคำว่า facetwp masonry ก็เจอเลย เช่น

แบ่งปัน: