WordPress альтернативные столбцы столбца

Question

Я пытаюсь показать сообщения в чередующихся столбцах, как на изображении ниже. Когда первая строка заполнена, другой будет выполнен, но с другим стилем. Это также относится к 3-м, 4-му и так далее. Это зависит от количества должностей.

Здесь вы можете увидеть мой WordPress PHP/HTML код.

<?php get_header();?> 
    <div class="tab-content"> 
    <div class="container-fluid no-padding"> 
     <?php 
     $args = array(
     'post_type' => 'case', 
     'category_name' => 'website', 
     'posts_per_page' => -1 
    ); 
     $query = new WP_Query($args); 
     if ($query->have_posts()) : 
     $i = 0; 

     while($query->have_posts()) : 
      $query->the_post(); 
     $i++; 
      if($i <= 5) { 
       if($i == 1) { 
     ?> 
       <div class="big-pane col-lg-6"> 
        <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a> 
        <div class="text-box"> 
        <h1><?php the_title(); echo" ".$i?></h1> 
        <p><?php the_field('sub_titel');?></p> 
        <a href="<?php the_permalink(); ?>">Bekijk project</a> 
        </div> 
       </div> 

       <div class="small-pane-holder1 col-lg-6"> 
       <?php 
       } 
       else { ?> 
       <div class="small-pane col-lg-6"> 
        <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a> 
        <div class="text-box"> 
        <h1><?php the_title(); echo" ".$i?></h1> 
        <p><?php the_field('sub_titel');?></p> 
        <a href="<?php the_permalink(); ?>">Bekijk project</a> 
        </div> 
       </div> 

       <?php 
       if($i == 5){ ?> 
        </div> 
        <div class="clearfix"></div> 
        <?php 
       } 
       } 
      } 
      else { 
       $i = 1; 

       if($i == 1){ ?> 
       <div class="big-pane col-lg-6 pull-right"> 
        <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a> 
        <div class="text-box"> 
        <h1><?php the_title(); echo" ".$i?></h1> 
        <p><?php the_field('sub_titel');?></p> 
        <a href="<?php the_permalink(); ?>">Bekijk project</a> 
        </div> 
       </div> 

       <div class="small-pane-holder2 col-lg-6 ">     
       <?php 
       } 
       else {?> 
        <div class="small-pane col-lg-6"> 
         <a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a> 
         <div class="text-box"> 
         <h1><?php the_title(); echo" ".$i?></h1> 
         <p><?php the_field('sub_titel');?></p> 
         <a href="<?php the_permalink(); ?>">Bekijk project</a> 
         </div> 
        </div> 
       </div> 
       <?php ?> 

       <div class="clearfix"></div> 
       <?php 

       } 
      } 

     endwhile; 
     echo $i; 
     else: 
      echo "<p>Sorry voor de teleurstelling :(!</p>"; 
     endif; 
     wp_reset_postdata(); ?>    
    </div> 
    </div> 
<?php get_footer();?> 

Этот код работает, но недостаточно для достижения моей цели. Я сделал скриншот этого вывода кода. Смотрите ниже:

Проблема заключается в последней строке. Большая фотография выровнена с правой стороны как вторая строка, но ее стиль должен быть таким же, как в первой строке.

Я все еще хочу дать намек на то, что, по моему мнению, вызывает проблему. Я не могу установить $i = 1 и конец цикла while. каждая строка насчитывает от 1 до 5, но последняя строка имеет проблемы (для того, чтобы не принимать тот же стиль, что и первая строка). Я поставил счетчик за заголовками.

Я действительно много пробовал. Что я сделал неправильно? Пожалуйста, помогите мне.

Заранее благодарен

Answer 1

Сколько столбцов вы работаете? Я не уверен, что стиль/ширина для макета столбца. Не могли бы вы поместить простую версию в codepen или jsfiddle?

Вы можете изменить свой обход контура, чтобы выглядеть как это, так что он проходит через петлю в 10-х:

if($i % 10 == 1){ // returns items 1 and 11, so the right-aligned large post 
} 
if($i % 10 >= 2 && $i % 10 < 5) { // posts 2-4 
} 
if($i % 10 == 5) { // every 5th post, add the row's closing tag at the end here 
} 
if($i % 10 == 6) { // every 6th post, open the new row 
} 
if($i % 10 >= 7 && $i % 10 < 10) { // posts 7-9 
} 
if($i % 10 == 0){ // every 10th post, add the second row's closing tag at the end 
} 

С другой стороны, это может быть хорошим примером для макета Flexbox?

Answer 2

я нахожу это интересным, и я думаю, что это может номера моей потребности, имею схожую конструкцию, но с другой проблемой, вот экран съемки, что мое выглядит

here is the image sample

вот мой код

<div class="row featured"> 
    <div class="grid-box grid-box-1 item-featured"> 
     <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/video-post/"> 
      <div class="caption"> 
       <div class="cat"><span>News</span></div> 
       <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp;              
         <i class="fa fa-video-camera"></i> Video 
       </div> 
       <h2 class="title">Video Post with Featured Image</h2>  </div> 

      <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/> </div>    
     </a> 
    </div> 
    <div class="grid-box grid-box-2 item-featured"> 
     <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-more-tag/"> 
      <div class="caption"> 
       <div class="cat"><span>Lifestyle</span></div> 
       <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp; 
       <i class="fa fa-video-camera"></i> Video  
       </div> 

       <h2 class="title">Post With More Tag</h2> 
      </div> 

      <div class="vm-featured"> <img src="/asstes/image1.jpg"/> </div>     
     </a> 
    </div> 
    <div class="grid-box grid-box-3 item-featured"> 
     <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/vimeo-video-post/"> 
      <div class="caption"> 
       <div class="cat"><span>What's New</span></div> 
       <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp; 
       </div> 
       <h2 class="title">Vimeo Video Post</h2> 
      </div> 
      <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/> </div> 
     </a> 
    </div> 
    <div class="grid-box grid-box-4 item-featured"> 
     <a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-image-and-text/"> 
      <div class="caption"> 
       <div class="cat"><span>News</span></div> 
       <div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015 &nbsp; 
       </div> 

       <h2 class="title">Post with Image and text</h2> 

      </div> 


      <div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/> </div>     
     </a> 

    </div> 

Answer 3

я заметил, что вы добавить класс для следующего 4 небольшой панели, после первой большой панели, однако я в nted спросить, если у вас есть какие-либо идеал, как я мог справиться счетчик для цикла индивидуально, пока он доберется до 5, то есть

counter 1 = has content , 
counter 2 = has content , 
counter 4 = has content , 
counter 5 = has content, 

я есть, хотя достигнуто нечто подобное с сильфона кодом, но я хотел бы использовать ваш формат.

<?php if (have_posts()) : 
$count = 0; $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1; 
while (have_posts()) : the_post(); 
    $count++; 
    if ($count <= 1 && $paged === 1) : 
     if ($count === 1) echo '<div class="break"><h2>first</h2></div>'; ?> 
     <div class="first-three"> 
      <?php the_title() ?> 
     </div> 
    <?php elseif (1 < $count && $count <= 2 && $paged === 1) : 
     if ($count === 2) echo '<div class="break"><h2>secound</h2></div>'; ?> 
     <div class="next-four"> 
      <?php the_title() ?> 
     </div> 
    <?php elseif (2 < $count && $count <= 3 && $paged === 1) : 
     if ($count === 3) echo '<div class="break"><h2>third</h2></div>'; ?> 
     <div class="next-six"> 
      <?php the_title() ?> 
     </div> 
    <?php elseif (3 < $count && $count <= 4 && $paged === 1) : 
     if ($count === 4) echo '<div class="break"><h2>forrth</h2></div>'; ?> 
     <div class="next-other-six"> 
      <?php the_title() ?> 
     </div> 
    <?php elseif (4 < $count && $count <= 5 && $paged === 1) : 
     if ($count === 5) echo '<div class="break"><h2>fifth one</h2></div>'; ?> 
     <div class="next-four"> 
      <?php the_title() ?> 
     </div> 

     <?php elseif (5 < $count && $count <= 6 && $paged === 1) : 
     if ($count === 6) echo '<div class="break"><h2>sixth one</h2></div>'; ?> 
     <div class="next-four"> 
      <?php the_title() ?> 
     </div> 
    <?php endif; 
endwhile; ?> 
<div class="nav-previous alignleft"><?php next_posts_link('Older posts'); ?></div> 
<div class="nav-next alignright"><?php previous_posts_link('Newer posts'); ?></div><?php 
endif; 

?> 

Более предпочтительно я хотел бы, чтобы это было в вашем собственном формате. благодарит заранее.