0

我正在尝试建立一个模仿新 www.digg.com 网站布局的网站（博客）。

它由一个顶部有特色的全宽帖子组成，下面的帖子是 3 列宽的块。所有的块都设置为一定的宽度并向左浮动。

我正在构建的不同之处在于，不仅仅是顶部帖子是一个特色全宽帖子，任何行都可以显示一个特色帖子，它应该扩大页面的整个宽度并将其他块向下推。

问题是，如果一个帖子被指定为特色并且它不在左栏中，那么它看起来就不正确。下图说明了如果精选帖子位于第 2 列或第 3 列中会发生什么。

遍历 Wordpress 帖子的 WHILE 循环，我计算并为每个帖子 CSS 类分配一个 1 到 3 之间的数字。例子<div class="col-1"> <div class="col-2"> <div class="col-3">

col-1 = 左栏帖子
col-2 = 中栏帖子
col-3 = 右栏帖子

有时，一篇文章也会有一个名为featured. 当一个帖子被指定为featuredthen 时，它将扩展 3 列的全宽，而不仅仅是 1 列。

只要featured帖子是结果集中的第一个帖子，这一切都很容易。但是，在下图中，我显示了我的问题所在。如果我为每个帖子分配一个 1-3 的类列名，为特色帖子分配一个类名，然后假设我正在迭代集合并将一个featuredCSS 类分配给通常具有类名的帖子col-2，col-3然后这儿存在一个问题。

下图显示了问题。在第 3 行，您可以看到如果我将特色课程分配给第 3 行中心列（col-2）会发生什么

在此处输入图像描述

我需要以某种方式将类名col-1 col-2 col-3或分配给featuredwhile 循环中的所有帖子，并确保featured帖子始终位于第 1 列的位置。

我愿意接受有关如何实现这一目标的任何建议或帮助？

下面是 PHP 循环的示例代码...（注意：我还没有添加代码来检查精选帖子）

<?php
// Start our column count at 1
$column = 1;
while (have_posts()) : the_post();
    $col_class = 'post-col-' .$column;
?>

  <article <?php post_class($col_class); ?>>
      post content
  </article>

<?php
// Increase the Column count
$column++;
// After count has displayed 3, we reset the count
if($column == 4){
    $column = 1;
}
endwhile;
?>
4

1 回答 1

1

只是认为您也可以“保留”一个元素，直到整行都被填满。如果您的帖子排序如下：

  1. 项目清单
  2. 项目清单
  3. 项目清单
  4. 项目清单
  5. 特征列表项
  6. 项目清单
  7. 项目清单

您可以像以前一样循环浏览它们，并在检测到特色项目时将其临时存储并在完成后显示。如下所示：

<?php
$column = 1;
$featured_list = array();
while (have_posts()) : the_post();
  $col_class = 'post-col-' .$column;

  if(!$isfeatured) {
    echo '<article '.post_class($col_class).'>post content</article>';
  } else {
    $featured_list[] = '<article '.post_class($col_class).'>post content</article>';
  }

  // Increase the Column count
  $column++;
  // After count has displayed 3, we reset the count
  if($column == 4){
    $column = 1;
  // Print everything in the array, doing nothing if empty
  foreach ($featured_list as $featured_item) { 
    echo $featured_item;
  }
  // Reset the array
  $featured_list = array(); 
}
endwhile;
?>
于 2012-11-06T12:45:35.900 回答