Question

不幸的是，我无法找到解决问题的确切方法。

我从WP数据库加载了10个帖子（例如），如下所示：

<?php

$catArgs = array(
    'category__in'  => wp_get_post_categories( $post_id, $args ),
    'showposts' => 10,//display number of posts
    'orderby'   =>'rand',//display random posts
    'post__not_in'  => array($post->ID)
 ); 

$cat_post_query = new WP_Query($catArgs); 

if( $cat_post_query->have_posts() ) { 
    while ($cat_post_query->have_posts()) : $cat_post_query-
>the_post(); ?> 

<div class="owl-item">

<?php if (has_post_thumbnail()) ?>

<a rel="nofollow" class="thumbnail-link" href="<?php the_permalink() ?
>"><?php the_post_thumbnail('new_thumb'); ?>    
<p><?php the_title(); ?></a></p>

</div>

<?php endwhile; 

wp_reset_query(); } ?>

之后，我使用OWL Carousel插件在这十个帖子之间滑动：

jQuery(document).ready(function($){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    lazyLoad: true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true,
            loop: false
        },
        600:{
            items:2,
            nav:true,
            loop: false
        },
        1000:{
            items:3,
            nav:true,
            loop:true
        }
    }
})
});

但是，我意识到在HTML中显示这些数据并不是一个好习惯。

我需要的是，当访问者访问我的页面时，只加载十分之二的帖子。在他向左或向右滑动之后，我想从WP数据库中加载（例如）两个帖子。

换句话说，我有50个相关帖子。加载它们太糟糕了（糟糕的SEO练习）。如何动态加载它们？我只需要预装2-3个帖子，而剩下的只需要访问者点击右箭头或左箭头。

在输出上，我想要这样的东西：

<div class="owl-carousel">
<div class="owl-item">...Preloaded-1...</div>
<div class="owl-item">...Preloaded-2...</div>
<div class="owl-item">...Waiting for user clicking on arrow to load 
from DB...
</div>
<div class="owl-item">...Waiting for user clicking on arrow to load 
from DB-2...
</div>
<div class="owl-item">...Waiting for user clicking on arrow to load 
from DB-3...
</div>
</div>

我意识到解决方案可能是使用jQuery或更确切地说是AJAX。但我在这件事上无能为力。

感谢您的帮助。

使用OWL轮播动态加载相关帖子WP

0 个答案: