Wordpress Loop在Bootstrap 3网格布局中的帖子 [英] Wordpress Loop posts in Bootstrap 3 grid layout

问题描述

我在Wordpess中使用Bootstrap 3，并且有一个问题，我的归档帖子以网格格式显示在页面上。我的wordpress循环代码是...

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.

我如何让他们使用我的引导网格，在整个页面显示4，然后在下一个4

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>

等。那可能吗？基本上我想要Wordpress循环列出所有的我的帖子4在页面上，而不是一个接一个html列表下面的页面。

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();
?>

这篇关于Wordpress Loop在Bootstrap 3网格布局中的帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！