1

I am trying to adapt the Wordpress loop to style posts differently in rows that get infinitely smaller until all posts are displayed

The concept here is to display posts in rows

first row 1 post second row 2 posts third row 3 posts fourth row 4 posts fifth row 5 posts sixth row 6 posts seventh row 7 posts

and onward until all posts have been retrieved

the below code is limited and does not do the above how would you adapt to make the below do the above?

the below code is functional and can be seen here: 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; ?>
4

2 回答 2

0

多么优雅的想法！尝试这样的事情：

<?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 执行forbody 的次数与当前$count值一样多。所以 for$count = 1循环执行 1 次，然后 for$count = 2循环执行 2 次，依此类推。内部循环 wp 函数the_post()迭代帖子索引并the_content()输出当前帖子。

于 2012-09-27T17:49:55.567 回答
0

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

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

<?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 不遵循严格的层分离，但在我看来，如果可能的话，尝试这样做总是好的。所以我想出了两种方法，可以在模板文件中减少 this 的逻辑并将逻辑移到外面。由于 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;
}
于 2012-09-27T17:53:19.133 回答