2017-04-10 1 views
0

私はカスタムポストタイプの投稿を、以下のようなレイアウト内に並べようとしています。このようなレイアウト以下のためカスタムワードプレスループ

enter image description here

のhtml。

<div class="col-md-4 col-sm-6"> 
PROFILE - 1 

</div> 
<div class="col-md-4 col-sm-6"> 


    </div> 
<div class="col-md-4 col-sm-6"> 
PROFILE - 2 

    </div> 
<div class="col-md-4 col-sm-6"> 
PROFILE - 3 

    </div> 
<div class="col-md-4 col-sm-6"> 


    </div> 

<div class="col-md-4 col-sm-6"> 
    PROFILE - 4 

    </div> 

あなたが後に見ることができるように "PROFILE - 1 & PROFILE - 2" の後に再びdiv要素のセパレータ - div要素の区切りがある "PROFILE 1" そして " - - 1 & PROFILE 2 PROFILE" があります。

基本的に以下のような構造です。

プロファイル-1

VV

空きスペース(DIVベースCOL-MD-4 COL-SM-6)

VV

プロファイル-2

VV

Profile-3

VV

空きスペース(DIVベースCOL-MD-4 COL-SM-6)

VV

プロファイル-4

iは、カスタム構造として、このループを使用してい私はProfile-2> Profile-3> Space pointから取得できません。私はカスタム投稿をリスト

これまで
<?php 
$args=array(
'post_type' => 'ourteam', 
'posts_per_page' => -1 
); 

    //Set up a counter 
    $counter = 0; 

    //Preparing the Loop 
    $query = new WP_Query($args); 


    //In while loop counter increments by one $counter++ 
    if($query->have_posts()) : while($query->have_posts()) : $query- 
    >the_post(); $counter++; 

    //We are in loop so we can check if counter is odd or even 
    if($counter % 2 == 0) : //It's even 
    ?> 


    <div class="col-md-4 col-sm-6"> 

    </div> 

    <div class="col-md-4 col-sm-6"> 

    <div class="cp-attorneys-style-2"> 

     <div class="frame"> <a href="<?php the_permalink(); ?>"><?php 
    the_post_thumbnail(''); ?></a> 

     <div class="caption"> 

      <div class="holder"> 

      <ul> 

      <li><a href="<?php the_field('mem_twitter'); ?>"><i class="fa fa-twitter"></i></a></li> 

       <li><a href="<?php the_field('mem_facebook'); ?>"><i class="fa fa-facebook"></i></a></li> 

       <li><a href="<?php the_field('mem_linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li> 

      </ul> 

      <p> </p> 

      <a href="<?php the_permalink(); ?>" class="btn-style-1">Read Profile</a> </div> 

     </div> 

     </div> 

     <div class="cp-text-box"> 

     <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 

     <em><?php the_field('mem_titles'); ?></em> </div> 

    </div> 

    </div>  


<div class="col-md-4 col-sm-6"> 

</div> 


<?php 
else: //It's odd 
?> 



    <div class="col-md-4 col-sm-6"> 

    <div class="cp-attorneys-style-2"> 

     <div class="frame"> <a href="<?php the_permalink(); ?>"><?php 
     the_post_thumbnail(''); ?></a> 

     <div class="caption"> 

      <div class="holder"> 

      <ul> 

      <li><a href="<?php the_field('mem_twitter'); ?>"><i class="fa fa-twitter"></i></a></li> 

       <li><a href="<?php the_field('mem_facebook'); ?>"><i class="fa fa-facebook"></i></a></li> 

       <li><a href="<?php the_field('mem_linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li> 

      </ul> 

      <p> </p> 

      <a href="<?php the_permalink(); ?>" class="btn-style-1">Read Profile</a> </div> 

     </div> 

     </div> 

     <div class="cp-text-box"> 

     <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 

     <em><?php the_field('mem_titles'); ?></em> </div> 

    </div> 

    </div>  



    <?php 


    endif; 

    endwhile; wp_reset_postdata(); endif; 


    ?> 
+1

のすべての値を印刷することができますか? –

+0

@ hardik solanki私の質問が更新されました – greenarrow

+0

を参照してください。デフォルトでは、ブートストラップは12列構造を使用していました。 'col-md-4 col-sm-6'を使用した場合、デスクトップには3つのdivが、Ipadには2つのdivが表示されます。あなたの場合、スクリーンショットのように表示されます。 –

答えて

0

これを試してみましたが、このループ

を達成するための助けを探して

はその複雑ではありません。あなたがしなければならないのは、WP_Query Functionを使用してカスタム投稿を照会し、次にHTML形式で一覧表示することだけです。ここでは、あなたが望むものを達成するかもしれないコードを使用しています。

<?php 
    global $the_query; 

    $args = array (
      'post_type'=>'team', 
      'posts_per_page'=>-1, 
    ); 
    // You can change your post type and for more 
    // go to this link https://codex.wordpress.org/Class_Reference/WP_Query 
    $the_query = new WP_Query($args); ?> 
    <div class="container"> 
     <div class="row"> 
    <?php 
    if ($the_query->have_posts()) { 

     while ($the_query->have_posts()){ 
      $the_query->the_post(); ?> 

      <div class="col-md-4 col-sm-6"> 
     <?php echo get_the_title(get_the_ID()); ?> 

    </div> 
    <?php 
     }//end while 


    } //End if 
?> 
</div><!-- End of row --> 
</div><!-- End of container --> 

注: - ループの中にあなたがこれまでに行うことを試みている何のカスタムポスト

+0

ありがとう、しかし、私は私の質問で述べた構造のカスタムループです – greenarrow

+0

Content
ループで繰り返されます。一度ループすればすべての情報が出力されます。あなたはcssを使用して美化を使用して管理する必要があります。 –