WordPress替代帖子列

我想在下面的圖片中顯示交替列中的帖子。當第一排滿了時，另一個將被製成另一個樣式。這也適用於第3，第4等。這取決於帖子的數量。WordPress替代帖子列

在這裏你可以看到我的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計數，但最後一行有問題（因爲沒有采用與第一行相同的樣式）。我把櫃檯放在標題後面。

我真的嘗試了很多..我做錯了什麼？請幫幫我。

在此先感謝

來源

2017-02-12 FFB

我認爲這顯然是有問題的：'$ i = 1;如果（$ i == 1）...'你永遠不會執行其他代碼分支。 – miken32

是的，你知道我該如何解決這個問題嗎？我認爲我應該在一個循環內做一個循環，但我不知道該怎麼做。你可以幫我嗎？ – FFB

您使用了多少列？我不確定您的列布局的樣式/寬度。你可以在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的佈局良好的情況下？

來源

2017-02-13 01:29:30

感謝您的回答。使用flexbox是否明智？舊版本的ie不支持它。我也將改善我的問題。我很難在codepen上寫一個wordpress示例 – FFB

這個答案很好！我只有一個小問題。似乎10後缺失。無法解決這個問題。 – FFB

對不起！最後一行應該是if（$ i％10 == 10），而不是== 0 很抱歉，對於之前評論的回覆遲了。您認爲早期版本的IE不支持flexbox是正確的。如果您需要支持IE9及更早版本，則必須使用更嚴格的解決方案（基本上是上述答案）。然而，根據最新的統計數據，IE6-9佔流量的不到1％。 Flexbox值得期待未來:) –

我發現這個有趣的，我認爲這可能適合我的需要，我有類似的設計，但有另外一個問題，這裏是一個什麼礦看起來像

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>

來源

2017-02-14 15:45:12

看起來相似。但你的代碼只是HTML。 – FFB

由於您的網格框div全部按順序標記，因此您應該可以使用CSS對其進行設置。如果您想到四個「列」中的flexbox，這可能是flexbox的一個很好的用例。如果您想使用上述答案，請將％10更改爲％4，然後像這樣遍歷它們。我不完全確定你爲什麼想這樣做，因爲有更多優雅的解決方案。 –

我注意到你添加一個類下一個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; 

?>

更希望我會喜歡它在你自己的格式。在此先感謝。

來源

2017-02-17 20:12:14

WordPress替代帖子列

回答

相關問題