Question

我在Wordpess中使用Bootstrap 3并且在使用网格格式在页面上显示我的存档帖子时遇到问题。我的wordpress循环代码是......

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

显示包含帖子图像的列表。现在，他们在页面上一个接一个地列出。

我如何让他们使用我的引导网格在页面上显示4，然后在下面的行中接下来的4个，然后在下面的下一个4行像这样......

<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列表中一个接一个地列出。

Answer 1

// Opening container or wrap outside of the loop
<div class="container my-container">
// start the loop
<?php
  $args=array(
     'post_type' => 'post',
     'post_status' => 'publish',
     'posts_per_page' => 18
    );

  $my_query = null;
  $my_query = new WP_Query($args);

  if( $my_query->have_posts() ) {

    $i = 0;
    while ($my_query->have_posts()) : $my_query->the_post();
  // modified to work with 3 columns
  // output an open <div>
  if($i % 3 == 0) { ?> 

  <div class="row">

  <?php
  }
  ?>

    <div class="col-md-4">
      <div class="my-inner">
      // all your content, title, meta fields etc go here.
      </div>
    </div>  
// increment the loop BEFORE we test the variable
      <?php $i++; 
      if($i != 0 && $i % 3 == 0) { ?>
        </div><!--/.row-->
        <div class="clearfix"></div>

      <?php
       } ?>

      <?php  
        endwhile;
        }
        wp_reset_query();
        ?>

</div><!--/.container-->

Answer 2

我只是觉得你们所有人都非常复杂。你们所有解决方案的主要问题是，如果你在行中没有相同数量的元素，你就不会关闭最后一行，你得到真是个烂摊子......

让我用一个IF解释我的解决方案（类似于你的，但没有复杂的东西，可调）

Open row
Run loop
If it is the last element in row close row, and open another one
Close the final row

以下是循环中的示例（我没有介绍您显示的WP_Query以及如何获取帖子）

$columns_num = 4; // The number of columns we want to display our posts
$i = 0; //Counter for .row divs

echo '<div class="row">';

    /* Start the Loop */
    while ( have_posts() ) : the_post();

        echo '<div class="single-product-archive col-md-' . 12 / $columns_num . '">'
            get_template_part( 'template-parts/content', get_post_format() );
        echo '</div>';

        if($i % $columns_num == $columns_num - 1 ) {  
            echo '</div> <div class="row">';
        }

        $i++;

    endwhile;

echo '</div>';

请注意，您可以更改$columns_num = 4的值。您甚至可以从自定义程序中创建一个选择框，并选择每行所需的列数。当然，价值必须在没有休息的情况下划分12号（自举列）。所以只有1,2,3,4和6是可以接受的。

Answer 3

是的，你可以做到。

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

Answer 4

我认为这些选项中的任何一个都不能完全发挥作用。他们假设元素/帖子的数量完全可以被列号整除。例如：

10个帖子被2 = 5个漂亮的封闭行分开

但

10个帖子除以3 = 3个漂亮的行和一个未被最终div关闭的行。

我的解决方法是在循环后检查计数器，如果它是可分的忽略，否则添加结束div。

<?php $i = 0; //keep track of the row div ?>

<?php foreach ($array_object as $key => $value ) :  ?>

    <?php if($i % 2 == 0) : ?>
         <div class="row">
    <?php endif; ?>

         <div class="col-md-6">

              Some content in the div

        </div>

        <?php $i++; ?>

        <?php if($i != 0 && $i % 2 == 0) : ?>
            </div><!--/.row-->
        <?php endif; ?>

    <?php endforeach; ?>

    <?php if($i != 0 && $i % 2 != 0) : // close the row if it did not get closed in the loop ?>
        </div><!--/.row-->
    <?php endif; ?>

Answer 5

感谢GERMAIN这条完整的代码回答了我的问题....

<?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
}
?>
<div class="col-md-4">
<div class="artist-thumbnail">
<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_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>
</div>
</div>
<?php    
if($i % 4 == 0) { ?> 

<?php
}

$i++;
endwhile;
}
wp_reset_query();
?>
</div>

Answer 6

这些解决方案运行良好，但它们没有响应，因为在没有添加媒体调用来覆盖引导程序列的情况下，它们将始终每行输出相同数量的帖子，与屏幕大小相关。

我想要一个3列网格显示，它使用引导列宽度，浮动和明确修正，这意味着为了避免浮动后高度不同时发生的非均匀交错，所有帖子必须是相同的高度。 / p>

我最初尝试使用bootstrap的.row-eq-height执行此操作，但它使用flexbox，它显示同一行中的所有列，而不管列大小。

这个人的jQuery解决方案解决了我的问题...... Same height column bootstrap 3 row responsive

  <?php 
    $args = array();
    $query = new WP_Query($args);

    while($query->have_posts()) : $query->the_post(); ?>

      <div class="col-eq-height col-md-4">                    
        <?php // Content goes here... ?>
      </div><!-- /.col-md-4 -->

    <?php endwhile;
    wp_reset_postdata();
  ?>

...然后将.col-eq-height类添加到定义的bootstrap列...

# test model
metrics = self.espa.evaluate_generator(testing_sequence_generator,
                                       batches)

这会导致您发布的响应式3列可堆叠引导网格。希望这是关于主题并帮助某人。

在Bootstrap 3网格布局中的Wordpress Loop帖子

6 个答案: