如何用col 12显示前四条记录?重置记录将以col-8(col 6和col-1-6)的形式显示。

Question

我正在我的主页上显示最近的文章，显示在我的WordPress网站上。现在，我必须在引导列中显示记录，如下面的图像。

​

​

对图像的解释：

( 1)前四行将显示col 12。

2)然后我必须把第8栏和第4栏分开。

( 3)在第8栏中，我必须在第6-6栏中显示我的记录的重置。

4)在第4栏中，我必须显示一些不是来自数据库的静态文本。

所以我的HTML代码会像这样显示。

<div class="container">
        <div class="row">

            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
            <div class="row">
                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
                        <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12"></div>
                        <!-- and so on -->
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <!-- html text this is not apart of for each-->
                </div>
            </div>

        </div>
    </div>

我的预期产出是

​

​

我对如何做到这一点感到困惑。目前，我正在得到第12号的所有记录。下面是我的代码。

function recentPost_on_home2(){
ob_start();
?>
<div class="cp-seeWrapper">
    <div class="row">
   <?php 
    global $paged;
    $paged = $paged ? $paged : get_query_var( 'page' );
    $args = array('posts_per_page' => 6,'paged'=> $paged,);
    $tyler_query = new WP_Query( $args );
    if ($tyler_query->have_posts()) {

               while ( $tyler_query->have_posts() ) {
                    $tyler_query->the_post();
                    $names = array();
                    $categories = get_the_category();
                    foreach ( $categories as $i => $term ) {
                        if ( $i < 1 ) { // show at most two
                            $names[] = '<a href="' . esc_url( get_category_link( $term->term_id ) ) . '">' . $term->name . '</a>';
                        }
                    }
                    $names = implode( '', $names );
                    ?>
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="cp-shadow cp-seeSinglePostWrapper">
                        <a href="<?php echo esc_url( get_the_permalink() );?>" title="<?php echo esc_attr( the_title_attribute('echo=0'));?>" class=""><?php echo get_the_post_thumbnail();?></a>
                        <div class="bg-white single-post-box">
                            <div class="d-flex cp-CategoryList">
                                <div class="seeDate"><?php echo get_the_date('F j, Y');?></div>
                                <div class="cp_cat_list"><?php echo $names;?></div>
                            </div>
                            <div class="cp-b-content">
                                <h2><a href="<?php echo esc_url( get_the_permalink() );?>" title="<?php echo esc_attr( the_title_attribute('echo=0'));?>" class=""><?php echo wp_trim_words(get_the_title(), 12, '...');?></a>
                                </h2>
                            </div>
                                <p><?php echo wp_trim_words(get_the_excerpt(), 25, '...');?></p>
                        </div>
                    </div>
                </div>
            <?php  }?>

    <?php   }?>

    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="cp-social cp-shadow bg-white">
                <h3>Social</h3>
            </div>
    </div>

    <div class="cp-postPagination">
         <div class="nav-previous cp-pagi float-left"><?php previous_posts_link(); ?></div>
         <div class="nav-next cp-pagi float-right"><?php next_posts_link( null, $tyler_query->max_num_pages ); ?> </div>
          <div class="clearfix"></div>
    </div>
</div>
</div>
    <?php return ob_get_clean(); 
}
add_shortcode( 'home_recent_post2', 'recentPost_on_home2' );

Answer 1

最后，我找到了解决办法。我不知道这是不是正确的方法，但它解决了我的问题。

我只是分享代码的示例

我所做的是，将container和row都添加到循环之外，并在What循环之前声明两个名为$index = 0; $check=0;的php变量。

然后我在while循环中添加了if-else条件，条件是if ($index < 4)。为什么是4，因为我必须用col 12显示前4行，所以我得到了前4行和12列。

然后在else条件下，我添加了

if ($check==0){?>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12"><div class="row">
<?php $check=1;}?>

为什么上面的代码，因为上面的代码将只工作一次，在一个期间循环，所以它是由8列。在“否则关闭”之后，我添加了$index++;以增加记录。

就这样。我得到了我的预期产量。

<div class="container">
  <div class="row">
    <?php if ($tyler_query->have_posts()) {
      $index = 0; 
      $check=0;
      while ( $tyler_query->have_posts() ) {
      if ($index < 4) {?>
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <!--content-->
    </div>
    <?php  } else {              
           if ($check==0){?>
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
      <div class="row">
        <?php $check=1;}?>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <!--content-->
        </div>
        <?php   } $index++;}?>
      </div>
    </div>

    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <!-- html text this is not apart of for each-->
    </div>

  </div>
</div>

Answer 2

你可以试试这个伴侣：

编辑

<div class="container">
  <div class="row">
  …
  …
  …
  $index = 0;
  foreach ( $categories as $i => $term ) {
    if ($index < 3) {
      <div class="col-12">…</div>
    } else {
      <div class="col-12 col-sm-4">…</div>
      <div class="col-12 col-sm-4">…</div>
      <div class="col-auto">…</div>
    }
    $index++;
  }
  …
  </div>
</div>

我把逻辑放进去，你的工作就是把php / html语法放进去！祝你好运:)

别忘了这一点:

• col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12和col-12完全一样(查看这个引导网格选项)
• 把row放在col，然后再加上row，等等都是很糟糕的做法只需放置ONE row，然后放置col，然后关闭row即可。