2017-02-12 7 views
2

私は下の画像のように交互の列に投稿を表示しようとしています。最初の行がいっぱいになると、別のスタイルで別の行が作成されます。これは第3、第4などにも当てはまります。投稿の数によって異なります。WordPressの代替ポストカラム

alternate columns example

ここでは私のワードプレスの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();?> 

このコードは機能しますが、目標を達成するには不十分です。私はこのコード出力のスクリーンショットを作った。以下を参照してください:

enter image description here

問題は最後の行です。大きな写真は2番目の行として右側に揃えられますが、そのスタイルは最初の行と同じでなければなりません。

私はまだ問題の原因と思われるヒントを与えたいと思っています。$i = 1とwhileループの最後を設定することはできません。すべての行は1から5までカウントされますが、最後の行は問題を抱えています(最初の行と同じスタイルをとらないため)。私はタイトルの後ろにカウンターを置いた。

私は本当にたくさん試しました。どうしましたか?私を助けてください。

ありがとうございます。

+0

これは明らかに問題があると思います。 '$ i = 1; if($ i == 1)... 'あなたは他のコードを実行することは決してありません。 – miken32

+0

ええ、これをどうやって解決できるか知っていますか?私はループ内でループを作成する必要があると思うが、私はこれを行う方法を知らない。手伝って頂けますか?あなたの答えには – FFB

答えて

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 
} 

代わりに、これはフレキシボックスレイアウトの良いケースかもしれませんか?

+0

ありがとう。フレックスボックスを使用することは賢明ですか?古いバージョンは、それをサポートしていません。私はまた私の質問を改善するつもりです。私はcodepenにワードプレスの例を置くのは難しい – FFB

+0

この回答はうまくいきます!私はちょっと小さな問題があります。ポスト10が欠けているようです。これを修正できませんでした。 – FFB

+0

申し訳ありません!最後の行はif($ i%10 == 10)でなければなりません。== 0 前のコメントに遅れて返信して申し訳ありません。あなたは、以前のバージョンのIEがflexboxをサポートしていないと思うのは間違いありません。 IE9以前をサポートする必要がある場合は、より厳密なソリューション(上記の答えは基本的に)を使用する必要があります。しかし、利用可能な最新の統計によると、IE6-9はトラフィックの1%未満を占めています。フレックスボックスは将来を見据える価値があります:) –

0

私は、これは面白い、と私は、これは私の必要性を、スイートかもしれないと思う、同様の設計が生じていますが、別の問題で、ここでは鉱山が

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> 

+0

類似しています。あなたのコードはhtmlだけです。 – FFB

+0

グリッドボックスのdivはすべて順番にラベルが付けられているため、CSSでこれらのスタイルを設定できるはずです。 flexboxを4つの "列"で考えると、これはflexboxの良いユースケースになるかもしれません。上記の答えを使用する場合は、%10を%4に変更し、そのように繰り返します。より洗練されたソリューションが存在するので、なぜそれをやりたいのか、私は完全にはわかりません。 –

0

私はあなたが、最初の大きなペインの後、しかし、私WAを次の4つの小さなウィンドウのためのクラスを追加気づきましたあなたは、私はそれが5になり、個別にまで、ループカウンタを扱うことができる方法上の任意の理想を持っている場合ntedは、聞いてすなわち

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; 

?> 

さらに好ましくは、自分のフォーマットであることが大好きです。ありがとうございます。