【发布时间】:2017-04-10 09:47:28
【问题描述】:
我正在尝试在如下布局中以自定义帖子类型列出帖子。
下面这样的布局的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”之后有一个 div 分隔符,然后在“PROFILE - 1 & PROFILE - 2”之后又有一个 div 分隔符。
基本上结构如下。
个人资料-1
VV
空白空间(基于 div col-md-4 col-sm-6 )
VV
个人资料 2
VV
Profile-3
VV
空白空间(基于 div col-md-4 col-sm-6 )
VV
Profile-4
我将此循环用作自定义结构,但我无法从 Profile-2 > Profile-3 > 空间点获取它。
寻求帮助来实现这个循环
到目前为止我已经尝试过了
<?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 我已经更新了我的问题,请参阅
-
默认情况下,bootstrap 使用 12 列结构。如果您使用
col-md-4 col-sm-6,那么它将在桌面显示 3 个 div,在 Ipad 中显示 2 个 div。所以在你的情况下,它会像你的截图一样显示。 -
@hardik solanki 这是一个 html 网站,我正在转换为 wordpress,因此 html 布局已经在这里。但问题是我无法将此布局放入 wordpress 循环中。我想要的是实现我在问题中提到的循环
-
那么您需要使用@VineetKumarSingh 的答案。他已经将您的 div 放入了自定义循环结构中。
标签: php wordpress custom-post-type