显示前三个帖子,然后在网格系统中显示其余帖子-每页4个

时间:2019-06-10 22:54:18

标签: php wordpress

我正在将fullPage.js库用于当前正在构建的网站。

此处的示例:http://jugoadis.com/appssolut_web/blog

前三个帖子通常应该像这里一样列出,但是之后,我需要每个滚动页面包含4个帖子的网格。我目前陷入第二查询中的4个帖子。我只能得到其中一个职位

到目前为止,这是我的代码:

   <div id="pagepiling" class="blog">

   <?php
   // Show first three posts
   $query = new WP_Query(array(
     'post_type' => 'post',
     'post_status' => 'publish',
     'posts_per_page' => 3
   ));

   while ($query->have_posts()) : $query->the_post(); ?>
     <div class="section">
         <div class="info-box">
            <h1 class="title align-items-center"><?php the_title();?>
         </div>
     </div>

  <?php 
  $currIndex++;
  // End while loop first 3 query
  endwhile;

  wp_reset_postdata();

  $new_query = new WP_Query(array(
     'post_type' => 'post',
     'post_status' => 'publish',
     'posts_per_page' => 4,
     'offset' => 3
  ));

  ?>

  <div class="section blog-grid">
  <div class="row align-items-center text-center grid">

  <?php
  while($new_query->have_posts()) : $new_query->the_post(); ?>
     <!-- Here i want -->

     <div class="col-md-6"> <!-- Post number 4 --> </div>
     <div class="col-md-6"> <!-- Post number 5 --> </div>
     <div class="col-md-6"> <!-- Post number 6 -->  </div>
     <div class="col-md-6"> <!-- Post number 7 --> </div>
     <!-- and on next scroll pages next 4 posts (8,9,10,11) and so on -->
  </div>
  </div>

  <?php 
    $currIndex++;
    endwhile;
    wp_reset_postdata();
  ?>

0 个答案:

没有答案