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

Posted 2023-03-06

【中文标题】Bootstrap 3 网格布局中的 Wordpress Loop 帖子

【英文标题】：Wordpress Loop posts in Bootstrap 3 grid layout

【发布时间】：2014-01-24 04:51:20

【问题描述】：

我在 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'); ?>"  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 列表中一个接一个地列出。

【问题讨论】：

我建议做 3 个这样的独立循环：***.com/a/37083852/1813525

【参考方案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-->  

【讨论】：

非常适合我。干杯 KJ！

这太好了，谢谢！

【参考方案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 是可以接受的。

【参考方案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'); ?>"  class="img-responsive" /></a></p>

    <?php    
    if($i % 4 == 0)  ?> 
        </div>
    <?php
    

    $i++;
endwhile;

wp_reset_query();
?>

【讨论】：

当我这样做时，网站会中断。我已经用你的例子更新了上面的代码，希望你能看到我做错了什么？

我是否将我原始帖子中的所有内容剪切并粘贴到该代码的中间？如果我这样做，整个网站都会崩溃......

我解决了！再次感谢你的帮助。我将在上面发布最终代码供将来的人们使用。

【参考方案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; ?>

【参考方案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'); ?>"  class="img-responsive" /></a></p>
</div>
</div>
<?php    
if($i % 4 == 0)  ?> 

<?php


$i++;
endwhile;

wp_reset_query();
?>
</div> 

【讨论】：

这对我不起作用。变量在 if 条件之后递增。结果是第一行（3 或 4 或您使用多少列）缺少结束 row div。我的工作答案如下。

【参考方案6】：

这些解决方案运行良好，但响应速度不快，例如，如果不添加媒体调用来覆盖引导程序的列，它们将始终在每行输出相同数量的帖子，而与屏幕大小无关。

我想要一个 3 列网格显示，它利用引导列宽、浮动和 clearfixes，这意味着为了避免浮动帖子高度不同时发生的不均匀交错，所有帖子必须具有相同的高度。

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

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

// Add this javascript to header.php(or equivalent file)...

jQuery( document ).ready(function() 
    var heights = jQuery(".col-eq-height").map(function() 
        return jQuery(this).height();
    ).get(),

    maxHeight = Math.max.apply(null, heights);    
    jQuery(".col-eq-height").height(maxHeight);
);

...然后将 .col-eq-​​height 类添加到您定义的引导列...

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

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