2017-03-07 4 views
0

私は 'portfolio'という名前のカスタム投稿型を作成しましたが、2列3列のループを作成し、高度なカスタムフィールドを使って画像をアップロードしようとしていますが、次のコードに何を追加するのか分かりませんそれを実現させる。Bootstrap Girdのカスタム投稿タイプの操作方法Wordpressのループですか?

まず

私のステップ:私は、ポートフォリオページから来ているカスタムポストタイプを生成します。

2番目:以前のプロジェクトをポートフォリオページにアップロードしたとき。以前の8つのサンプルをホームページにループしたいだけです。

3番目:2列のグリッド最も前の投稿のみを表示します。しかし、3列のグリッド私はあまり以前の投稿を表示したいです。私は正しくブートストラップ4グリッドをやっています。

enter image description here

ここでは、現在、私のために動作しませんコードです。ポートフォリオページに画像をアップロードすると、ホームページに表示されません。

<!-- recent work --> 
    <div class="old-portfolio recent_work"> 
     <div class="container-fluid text-center"> 
      <div class="row"> 
       <?php 
        $alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true)); 
        if ($alter_args->have_posts()) : while ($alter_args->have_posts()) : $alter_args->the_post(); ?> 

       <div class="portfolio-work col-xs-12 col-md-6 col-lg-12"> 
        <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image"> 
         <img class="" src="<?php the_field('portfolio_image'); ?>"/> 
        </a> 

        <li class="portfolio-item"> 
         <h3><?php the_title(); ?></h3> 
        </li> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="portfolio-work col-md-4"> 
        <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image"> 
        <img class="" src="<?php the_field('portfolio_image'); ?>"/> 
        </a> 

        <li class="portfolio-item"> 
        <h3><?php the_title(); ?></h> 
        </li> 
       <?php endwhile; ?> 
       </div> 
      <?php endif; ?> 
      </div> 
     </div> 
    </div> 
    <!-- recent work --> 

答えて

1

ループの先頭にある変数を設定してカウンターを開始して、ループ内の各項目に番号を割り当てる必要があります。 $i == 0;を追加することでそれを行うことができます。そしてループの最後に、変数を1つずつ変更して$i++;にする必要があります。これにより、各項目の後に番号が変わります。これを実行すると、ループ内にif/elseステートメントを記述することによって、アイテムの処理を簡単に変更できます。あなたの例では、あなたが<?php if($i < 2){echo "6";} else {echo "4";} ?>

<?php 
    $alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true)); 
    if ($alter_args->have_posts()) : ?> 
<?php $i == 0; //Start a counter by setting a variable ?> 
<?php while ($alter_args->have_posts()) : $alter_args->the_post(); ?> 

    <div class="portfolio-work col-xs-12 col-md-<?php if($i < 2){echo "6";} else {echo "4";} //For the first 2 items in the loop echo 6 else echo 4 ?> col-lg-12"> 
     <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image"> 
     <img class="" src="<?php the_field('portfolio_image'); ?>"/> 
       </a> 
       <li class="portfolio-item"> 
        <h3><?php the_title(); ?></h3> 
       </li> 
      </div> 
     </div> 
       <?php $i++; //this will increase the counter by 1 at the end of each item in the loop ?> 
      <?php endwhile; ?> 
     <?php endif; ?> 
+0

を追加するようcol-md-6クラスとcol-md-4クラスを持っている残りの部分を持っている最初の2つの項目を設定したいあなたはうまく説明、ありがとうございます! –

関連する問題