WP_Query +無限滾動

Question

我在處理我的全新博客模板（在wordpress上）時遇到了問題。我有以下查詢/ PHP代碼：

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無限滾動腳本。但誠實 - 我不知道如何開始; /主要是因爲沒有在互聯網上的許多現場實例/教程..感謝您的任何提示

Answer 1

您需要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 ?>> 
     ...