WP_Query +无限滚动

  • Z时代
  • 2024-01-10
  • 分类：问答

我在处理我的全新博客模板（在wordpress上）时遇到了问题。我有以下查询/ PHP代码：WP_Query +无限滚动

echo '<div id="posts-container" class="fusion-blog-layout-medium fusion-blog-infinite fusion-posts-container-infinite fusion-blog-archive fusion-clearfix">'; 
$args = array('post_type' => 'era', 'post_status' => array('publish', 'future'), 'paged' => $paged); 
$custom_query = new WP_Query($args); 
while($custom_query->have_posts()) : $custom_query->the_post(); 
$post_classes = $post_class . ' ' . $alignment_class . ' ' . $thumb_class . ' post fusion-clearfix'; 
ob_start(); 
post_class($post_classes); 
$post_classes = ob_get_clean(); 
echo '<article id="post-' . get_the_ID() . '" ' . $post_classes . '>'; 
get_template_part('new-slideshow'); 
echo '<div class="fusion-post-content koncert post-content">'; 
echo ('<h2 class="entry-title fusion-post-title" data-fontsize="18" data-lineheight="27"><a href="' . get_post_permalink('','','true') . '">' .get_the_title() . '</a></h2>'); 
if (get_field("data_i_miejsce_koncertu", get_the_ID())) { 
    echo ('<div class="lista-koncert-podtytul">' . get_field("data_i_miejsce_koncertu", get_the_ID()) . '</div>'); 
} 
echo '<div class="fusion-post-content-container">'; 
do_action('avada_blog_post_content'); 
if (get_field("opis", get_the_ID())) { 
    echo '<div class="lista-koncert-opis">' . wp_trim_words(get_field("opis", get_the_ID()), 60, ' [...]') . '<br><br><a href="' . get_post_permalink('','','true') . '">Zobacz więcej &gt;</a></div>'; 
} 
echo '</div>'; 
echo '</div>'; // End post-content. 
echo '</article>'; 
endwhile; 
wp_reset_postdata(); // reset the query 
echo '</div>';

我想实现的是没有固定分页（我已经删除从我的模板控件），但我想使用jquery无限滚动脚本。但诚实 - 我不知道如何开始; /主要是因为没有在互联网上的许多现场实例/教程..感谢您的任何提示

回答：

您需要invovle JavaScript使无限滚动工作。 基本上你需要具备什么：

  1. 页显示第一几个帖子，并加载无限滚动的JavaScript函数，你叫它

  2. 后滚动/“点击

  3. 上wp_ajax挂钩，以提供后续的信息数据负载更多的”你用JavaScript调用此，在此之前的所有帖子已加载的底部

  4. 重复追加加载帖子

这应该给你一个很好的明星关键点：https://www.billerickson.net/infinite-scroll-in-wordpress/

也请不要在Wordpress主题/插件中使用echo编写HTML。这是更具可读性，并帮助你保持你的缩进权：

?> 
<div id="posts-container" class="fusion-blog-layout-medium fusion-blog-infinite fusion-posts-container-infinite fusion-blog-archive fusion-clearfix"> 
    <?php 
    $args = array('post_type' => 'era', 'post_status' => array('publish', 'future'), 'paged' => $paged); 
    $custom_query = new WP_Query($args); 
    while($custom_query->have_posts()) : $custom_query->the_post(); 
     $post_classes = $post_class . ' ' . $alignment_class . ' ' . $thumb_class . ' post fusion-clearfix'; 
     ob_start(); 
     post_class($post_classes); 
     $post_classes = ob_get_clean(); 
     ?> 
     <article id="post-<?php echo get_the_ID() ?>" <?php echo $post_classes ?>> 
     ...

以上是 WP_Query +无限滚动 的全部内容， 来源链接： utcz.com/qa/257108.html

回到顶部