- 首页
- 前端开发
- Bootstrap 3 网格布局中的 Wordpress Loop 帖子
Bootstrap 3 网格布局中的 Wordpress Loop 帖子
[英] Wordpress Loop posts in Bootstrap 3 grid layout
本文介绍了Bootstrap 3 网格布局中的 Wordpress Loop 帖子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 Wordpess 中使用 Bootstrap 3，但在让我的存档帖子以网格格式跨页面显示时遇到问题.我的 wordpress 循环代码是...
<?php$args=数组('post_type' =>'艺术家'，'post_status' =>'发布'，'posts_per_page' =>-1,'caller_get_posts'=>1);$my_query = null;$my_query = new WP_Query($args);if( $my_query->have_posts() ) {回声'';而 ($my_query->have_posts()) : $my_query->the_post();?><li><img src="<?php the_field('artist_photo'); ?>"alt="" class="img-responsive"/><?php endwhile;}wp_reset_query();?><?php while ( have_posts() ) : the_post();?><?php endwhile;?><?php 其他:?><?php endif;?>
这会显示一个包含帖子图片的列表.现在，他们在页面上一个接一个地列出.
我如何让他们使用我的引导程序网格在页面上显示 4 个，然后是下面一行中的下一个 4 个，然后是下面一行中的下一个 4 个......
<div class="col-md-3"><li>图片 1 放在这里</li>
<div class="col-md-3"><li>图片 2 放在这里</li>
<div class="col-md-3"><li>图片 3 放在这里</li>
<div class="col-md-3"><li>图片 4 放在这里</li>
等等.那可能吗?基本上，我希望 Wordpress 循环在整个页面上列出我的所有帖子 4，而不是在页面下方的 html 列表中一个接一个地列出.
解决方案
是的，你可以做到.
'艺术家'，'post_status' =>'发布'，'posts_per_page' =>-1,'caller_get_posts'=>1);$my_query = null;$my_query = new WP_Query($args);if( $my_query->have_posts() ) {回声'';$i = 0;而 ($my_query->have_posts()) : $my_query->the_post();if($i % 4 == 0) { ?><div class="row"><?php}?><p><a href="<?php the_permalink() ?>"rel="bookmark" title="永久链接到<?php the_title_attribute(); ?>"><?php the_title();?></a></p><p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name');?></a></p><p><a href="<?php the_permalink() ?>"rel="bookmark" title="永久链接到<?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>"alt="" class="img-responsive"/></a></p><?phpif($i % 4 == 0) { ?>
<?php}$i++;终了；}wp_reset_query();?>
I am using Bootstrap 3 within Wordpess and have an issue getting my archive posts to display across the page in a grid format. My wordpress loop code is...
<?php if ( have_posts() ) : ?>
<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" />
</li>
<?php endwhile;
}
wp_reset_query();
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
This displays a list containing the post's image. Right now, they list one after the other down the page.
How would I get them to use my bootstrap grid showing 4 across the page, then the next 4 in the row beneath, then the next 4 in row beneath that like this...
<div class="row">
<div class="col-md-3">
<li>image 1 goes here</li>
</div>
<div class="col-md-3">
<li>image 2 goes here</li>
</div>
<div class="col-md-3">
<li>image 3 goes here</li>
</div>
<div class="col-md-3">
<li>image 4 goes here</li>
</div>
</div>
etc. Is that possible? Basically i want the Wordpress loop to list ALL of my posts 4 across the page instead of one after the other in a html list down the page.
解决方案
Yes you can do it.
<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
if($i % 4 == 0) { ?>
<div class="row">
<?php
}
?>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
<p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p>
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>
<?php
if($i % 4 == 0) { ?>
</div>
<?php
}
$i++;
endwhile;
}
wp_reset_query();
?>
这篇关于Bootstrap 3 网格布局中的 Wordpress Loop 帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
