Question

我创建了一个自定义帖子类型的常见问题解答，其中包括以下字段：问题，askBy，hisPhoto，Answer，answersBy，photo。我可以在front-page.php上显示所有常见问题解答 -

<?php     $args = array('post_type' => 'faq');
          $the_query = new WP_Query($args);

if ($the_query->have_posts()) :                     
            $color_counter=1; //if counter is odd then set faq div bkgcolor=cyan else bkgcolor=blue
            $color; 

        ?>                  
            <!-- Loop through the posts -->
            <?php while ($the_query->have_posts()) : $the_query->the_post(); 
                if ($color_counter % 2 == 0) : $color="ques-drk-blue"; 
                else:  $color="ques-cyan-blue"; 
                endif;
            ?>
                <div class="<?php echo $color ?>">
                     <div class="quote-wrapper"><blockquote><?php the_field('question'); ?></blockquote></div>
                     <div class="person-descr">
                            <?php $cust_img = get_field('cust_photo'); 
                                  if( !empty($cust_img) ): ?>                                        
                                     <div class="round-image" style="background-image:url(<?php echo $cust_img['url']; ?>);"></div>
                            <?php endif; ?> 
                            <div class="person"><?php the_field('cust_name'); ?></div>
                     </div>
                </div>
                <div>
                     <div class="person-descr">
                            <?php $opti_img = get_field('optician_photo'); 
                                  if( !empty($opti_img) ): ?>                                        
                                     <div class="round-image" style="background-image:url(<?php echo $opti_img['url']; ?>);"></div>
                            <?php endif; ?> 
                            <br/><div class="person"><?php the_field('optician_name'); ?></div>
                     </div>
                     <div class="quote-wrapper"><blockquote><?php the_field('answer'); ?></blockquote></div>
                  </div>                    
            <?php $color_counter++ ;
                  endwhile;                   
                  wp_reset_postdata();              
            ?>

这会依次显示所有常见问题解答自定义帖子以及所需的样式。但是可能会有很多常见问题，所以我想通过最初只显示2个常见问题并在用户滚动页面时加载更多来实现延迟加载或加载更多效果。如果我的查询（WP_Query）预先获取所有常见问题，可以实现这样的效果吗？请指教。谢谢你的帮助。

Answer 1

肯定有几种方法可以解决这个问题。

这是我的建议。我现在要从特定的代码中抽象出来，看它是否听起来像你在寻找它。

将所有常见问题数据存储在JS数组中：

因为听起来在页面加载时获取所有常见问题解答数据可能更有效率，而不是只在需要时一次查询N个帖子（5,10等）时，让我们假设进行初始调用并将所有FAQ数据存储在JS数组中。想想data = JSON.parse( JSON_encoded(PHP_Array));

编写一个JS函数，该函数在数据提取的回调中，遍历FAQ的数组，并将第一个X附加到您的文档中，其余部分保留在此全局JS变量中。

在您的HTML中，您将在页面上显示第一个X常见问题解答，并跟踪页面上显示的最后一个常见问题解答。

当用户滚动/触发事件以加载更多帖子时，上面运行的JS函数会再次运行，但这次会附加下一个X FAQ。

您可以将JavaScript事件侦听器绑定到window.scroll事件。如果用户的滚动位置到达页面底部或将当前常见问题解答下方的元素放入视图中，您只需将另一个X常见问题解答附加到当前列表中。

您怎么看？

Answer 2

Here is the link where you can download complete working example with sample database.

在我的示例中，我正在从wordpress数据库中检索帖子并在加载时显示5个帖子，然后每次滚动时我都会将5个以上的帖子附加到同一页面。

DEMO

为常见问题解答自定义帖子加载更多/延迟加载效果

2 个答案: