私はカスタムポストタイプの投稿を、以下のようなレイアウト内に並べようとしています。このようなレイアウト以下のためカスタムワードプレスループ
の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;
?>
のすべての値を印刷することができますか? –
@ hardik solanki私の質問が更新されました – greenarrow
を参照してください。デフォルトでは、ブートストラップは12列構造を使用していました。 'col-md-4 col-sm-6'を使用した場合、デスクトップには3つのdivが、Ipadには2つのdivが表示されます。あなたの場合、スクリーンショットのように表示されます。 –