Question

我正在尝试调整Wordpress循环，以便在行中获得不同的样式无限小，直到显示所有帖子

此处的概念是以行显示帖子

第一排1帖子第二排2个帖子第三排3个帖子第四排4个帖子第五排5个帖子第六排6个帖子第七排7篇帖子

然后继续检索所有帖子

以下代码是有限的，并没有做到上述你将如何适应以下做上述事情？

以下代码功能正常，可在此处查看：http://ccs.btcny.net/redhook/

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="style-1"><?php the_content(); ?></div>
<?php elseif ($count == 2 || $count == 3) : ?>
<div class="style-2"><?php the_content(); ?></div>
<?php elseif ($count == 4 || $count == 5 || $count == 6) : ?>
<div class="style-3"><?php the_content(); ?></div>
<?php elseif ($count == 7 || $count == 8 || $count == 9 || $count == 10) : ?>
<div class="style-4"><?php the_content(); ?></div>
<?php elseif ($count == 11 || $count == 12 || $count == 13 || $count == 14 || $count == 15 ) : ?>
<div class="style-5"><?php the_content(); ?></div>
<?php elseif ($count >= 16 ) : ?>
<div class="style-6"><?php the_content(); ?></div>
<?php endif; ?>
<?php endwhile; ?>

Answer 1

多么优雅的主意！尝试这样的事情：

<?php
if (have_posts()):
    $count = 0;
    while (have_posts()):
        $count++;
?>
    <div class="style-<?php echo $count; ?>">
    <?php
        for( $i = 1; $i <= $count; $i++ ):
            if (have_posts()):
                the_post();
                the_content(); 
            endif;
        endfor;
    ?>
    </div>
<?php 
    endwhile;
?>

while循环计数过帐和输出<div>'s。 div内部执行for body的次数与当前$count值一样多。因此，对于$count = 1循环执行1次，然后$count = 2循环执行2次，依此类推。内部循环wp函数the_post()迭代后索引和the_content()输出当前帖子。

Answer 2

这是我的解决方案。基本上我通过检查下一个元素是否在当前行内来设置行号。为此，我需要查看下一个索引是否等于下一行的第一个索引。

棘手的部分是找到行中第一个项目的索引。由于这不是线性的，而是几何顺序，每行中的项目编号将增加。要计算下一行的第一项，我需要将当前行中的元素数（在本例中只是当前行）添加到当前行的第一个索引。当我得到下一行的第一个索引并且下一个项目将等于该数字时，我需要转到下一行并为该计算索引设置当前行的第一个索引。

<?php //The first index of the first row is 1?>
<?php $row = 1;?>
<?php $curFirstIndex = 1;?>

<?php //start counting items ?>
<?php $count = 0;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php //check if the next item is equal to the first index of the next row ?>
   <?php if ($count+1 >= ($row + $curFirstIndex)) :
       <?php 
         //the next item will be in the new row
         //in $curFirstIndex store the first number of the current row
         $curFirstIndex = $row + $curFirstIndex;

         //go to the next row
         $row++;
       ?>
   <?php endif; ?>
   <?php $count++;?>

<?php endwhile;?>

<强> [编辑]

上述解决方案有效，但它有一个小缺陷，即它将逻辑合并到模板中。 Wordpress没有遵循一些严格的层分离，但在我看来，如果可能的话，尝试这样做总是好的。所以我提出了两种方法可以减少模板文件中的逻辑并将逻辑移到外面。由于wordpress在其主题中有functions.php，我们可以使用此文件来创建一个处理该逻辑的函数。这是代码

模板视图文件：

<?php //Initial values?>
<?php $row = 1;?>
<?php $count = 1;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php //check if the current item is the last in the row ?>
   <?php if ($count == getRowLastItemIndex($row)) {$row++;} ?>
   <?php $count++;?>

<?php endwhile;?>

在functions.php中：

function getRowLastItemIndex($row) {
    $index = 0;
    for($i = 1; $i <= $row; $i++) {
        $index += $i;
    }
    return $index;
}

或者以下列方式使其更加分离

模板文件

<?php //Initial values?>
<?php $row = 1;?>
<?php $count = 1;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php $row = getRowNumber($row,$count);?>
   <?php $count++;?>

<?php endwhile;?>

并在functions.php中添加另一个函数

function getRowNumber($row,$count) {

    if ($count == getRowLastItemIndex($row)) 
        $row++;
    } 
    return $row;
}

wordpress超级循环风格的帖子在行N次

2 个答案: