如何在无限加载帖子的WordPress循环中的每5个帖子之后插入<div>?

时间:2019-03-05 作者:MikeL5799

因此,我建立了一个WPQuery循环,它工作得很好,并使用无限滚动来保持以10篇文章为一批加载文章。我要做的是插入<div> 在列表中每5个帖子之后。我给它添加了一个计数器代码,但它似乎没有给我想要的输出,因为它只给我<div> 在第5和第10个帖子上,但之后就没有了。代码如下:

   <?php
 $featuredPosts = get_field(\'featured_posts\');
$excludePosts = [];
foreach($featuredPosts as $key => $postItem) {
  $excludePosts[] = $postItem->ID;
}

$numPosts = 10;
$args = array(
 \'post_type\'  => \'post\',
 \'post_status\' => \'publish\',
 \'posts_per_page\' => $numPosts,
 \'post__not_in\' => $excludePosts
);


$the_query = new WP_Query( $args );
 if ( $the_query->have_posts() ) {
  $counter = 0;
  while ( $the_query->have_posts() ) {
    $the_query->the_post();
 ?>
    <article id="post-<?php echo get_the_ID(); ?>" <?php post_class(\'frontpage-articles\'); ?> >
        <div class="entry-container">
            <div class="post-meta"><span class="entry-date"><?php echo get_the_date("M d, Y", get_the_ID()); ?></span>
                <span class="entry-author">by
                   <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta(\'ID\'))) ?>"><?php the_author(); ?></a>
                </span>
            </div>
            <header class="entry-header">
                <h3 class="entry-title">
                    <?php echo sanitize_title(the_title( \'<a href="\' . esc_url(get_permalink($post->ID) ) . \'">\', \'</a>\' )); ?></h3>
            </header><!-- .entry-header -->

            <div class="entry-summary">
                <?php /*echo substr(strip_tags(get_the_excerpt()), 0,999); */?>
                <?php echo substr(strip_tags(get_the_excerpt()), 0, 120); ?>
            </div><!-- .entry-summary -->
        </div>
        <!-- #thumbnail-->
        <?php
        $cloudinaryImage = get_post_meta($post->ID, \'cloudinary_image_id\');
        if ( has_post_thumbnail() ) {
            $thumbnailUrl = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) );
        }
        ?>

        <?php
        $thumbnail = \'\';
        if(!empty($cloudinaryImage[0])) {
            $thumbnail = "https://res.cloudinary.com/upload/".$cloudinaryImage[0];
        } else if(!empty($thumbnailUrl)) {
            $thumbnail = $thumbnailUrl[0];
        } ?>
        <a href="<?php echo esc_url(get_permalink($post->ID))?> ">
            <div class="entry-thumb" style="background-image: url(\'<?= $thumbnail; ?>\'); background-repeat: no-repeat; background-size: cover;" alt="">
            </div>
        </a>
        <!-- .thumbnail-image -->
    </article>
        <?php 
            $counter++;
            if ($counter % 5 == 0){
              echo \'<div>Ads Test Div to Be inserted after every 5th post</div>\';
            }

        ?>
    <hr>
    <?php

}
$counter = 0;
/* Restore original Post Data */
wp_reset_postdata();
}
    echo do_shortcode(\'[ajax_load_more preloaded="false"  offset="13"  exclude"="\'.implode(",", $excludePosts).\'" images_loaded="false" button_label="Load more" transition_container="false" progress_bar="false" posts_per_page="10" pause="true" pause_override="true" css_classes="infinite-scroll"]\');
我不知道为什么计数不起作用,因为我相信它在正确的位置。任何帮助都将不胜感激。

1 个回复
SO网友:Fabrizio Mele

看来你在用Ajax Load More 作为一种延迟加载方法。您的div仅显示与“classic”WP查询一起加载的元素,因为load more shortcode与您编写的代码无关:是其他代码,当您的代码已经被解析时执行,运行,还是完成。

浏览它的文档,如果不直接修改它的源文件,我无法找到任何方法将自己插入插件自己的循环,这是一个坏主意。

我的建议是,如果您确实想使用该插件进行延迟加载,请利用其complete callback function 加载完成后,插入div,每隔5个帖子动态计数一次。You will need to setup ajax on frontend first.

然后将特殊div绑定到ajax操作:

function my_ajax_action(){
   echo "<div> Hello! </div>";
}
add_action( \'wp_ajax_nopriv_my_ajax_action\', \'my_ajax_action\' );

并使用一些javascript从前端调用它,以放置在需要此功能的页面的页脚中。

$(function() {

jQuery.fn.insertAt = function(index, element) { //custom function, see below code
  var lastIndex = this.children().size();
  if (index < 0) {
    index = Math.max(0, lastIndex + 1 + index);
  }
  this.append(element);
  if (index < lastIndex) {
    this.children().eq(index).before(this.children().last());
  }
  return this;
}

  $.fn.almComplete = function(alm){ //this is the ajax load more\'s callback, view link in answer

    jQuery.ajax(//let\'s call our custom ajax action
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url, //see link in answer about ajax setup
        data: { action:"my_ajax_action" }, //the custom action
        success: function(my_div){ //what to do when the div is returned from ajax
            jQuery(\'.loaded_posts\').insertAt(4, my_div);
            jQuery(\'.loaded_posts\').insertAt(9, my_div);
            //fixed values because you know how many posts you call
        }
    });
  }
})(jQuery)


我用了insertAt 功能来自this answer.其他资源包括Wordpress page on AJAX

相关推荐

Group posts by custom field

我正在尝试使用显示所有子页面的列表wp_query 到目前为止,我已经创建了一个函数来检索当前页面的所有子页面,但是我需要按照自定义字段将这些页面排序为两个列表。调用自定义字段type 它是一个具有以下值的选择字段:product 和about 我需要根据字段值将页面列表分为两组,但我似乎无法按自定义字段对其进行分组。我需要输出为:Product - Page 1 - Page 2 - Page 3 About - Page 1 - Page 2&