我在一个自定义帖子类型上添加了6个不同的帖子。比如,在Team下,有6个不同的成员,我想在两行中显示这6个成员,每行3列。怎么做到了?我是WordPress主题开发的新手。尝试编写首页代码,任何建议和资源将不胜感激。 我做的就是这样,
<section class="team" id="team">
<div class="container">
<div class="row">
<div class="team-heading text-center">
<h2>our team</h2>
<h4>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</h4></div>
<?php
$args = array(
'post_type' => 'team',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' =>3,
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()) : ?>
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="col-md-2 single-member col-sm-4">
<div class="person">
<img class="img-responsive"> <?php the_post_thumbnail(); ?>
</div>
<div class="person-detail">
<div class="arrow-bottom"></div>
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?></p>
</div>
</div>
<!-- Query to display +1/next content-->
<div class="col-md-2 single-member col-sm-4">
<div class="person-detail">
<div class="arrow-top"></div>
<h3><?php the_title(); ?></h3>
<p><?php the_content(); ?> </p>
</div>
<div class="person">
<img class="img-responsive"> <?php the_post_thumbnail( ); ?>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif ?>
答案 0 :(得分:1)
这比PHP更像是一个前端问题。您可以通过多种方式实现它,但最简单的方法是简单地使用Bootstrap。此外,如果你按照自己的方式混合使用PHP和HTML,那么你最终会得到不可读的文件。
首先,查询:
<?php
$args = array(
'post_type' => 'team',
'posts_per_page' => -1
);
$the_query = new WP_Query($args);
?>
排序date
,DESC
是不必要的,因为这是默认值。 posts_per_page
不应限制退回商品的数量。
观点:
<section class="team" id="team">
<div class="container">
<div class="team-heading text-center">...</div>
<div class="row">
<?php if($the_query->have_posts()): $i = 0; while($the_query->have_posts()): $the_query->the_post(); ?>
<div class="col-sm-4">
<?php if ($i % 2 > 0): ?>
<div class="single-member">...tpl1...</div>
<?php else: ?>
<div class="single-member">...tpl2...</div>
<?php endif; ?>
</div>
<?php $i++; endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
</section>
col-sm-4
应该使你连续获得3件物品。