Как отобразить первые четыре записи с помощью col-12, а записи обнуления будут отображаться примерно так: col-8 (col-6 и col-6)

Question

Я показываю последние сообщения на моей домашней странице, которые отображаются на моем сайте WordPress. Теперь я должен отобразить записи в столбце начальной загрузки, как показано на рисунке ниже.

Объяснение изображения:

1)первые четыре строки будут отображать столбец 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 оба класса выходят из цикла и объявляют две переменные php, называемые $index = 0; $check=0; перед циклом while.

Затем я добавил условие if-else внутрь, в то время как цикл и условие if ($index < 4). Почему 4, потому что я должен отобразить первые 4 строки с полкой 12. Итак, я получаю первые 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 (отметьте это Bootstrapпараметры сетки )
• Это очень плохая практика - ставить row, затем col, row снова и т. д., просто поставить ONE row, а затем поставить col затем закройте row