Wordpress – 将一个类应用于每行的第一个和最后一个帖子

Question

我正在使用 960 网格系统构建一个 WordPress 主题。我有一个起始页，每行显示三个缩略图。这些缩略图位于带有父包装器的子网格中。

所以，我需要用一个名为“alpha”的类来包装每一行的第一篇文章，并用一个名为“omega”的类来包装每一行的最后一篇文章（在我的例子中是第三篇）。

知道如何解决这个问题吗？

这是我当前的代码，感谢任何帮助！

<?php get_header(); ?>


<div class="grid_12 projects"><!-- PROJECTS BEGINS -->

<?php
if (have_posts()) :
while (have_posts()) :
?>

<div class="grid_4 project">

<?php
the_post();
?>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>

<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>

</div><!-- PROJECT ENDS -->

<?php
endwhile;
endif;
?>

</div><!-- PROJECT-CONTAINER ENDS -->

<?php get_footer(); ?>

Answer 1

注意：如果您不希望最后一个元素始终包含 omega，但前提是它确实是一行中的第三个元素，请删除下面的 ||$ix==$wp_query->post_count。

<?php get_header(); ?>

<div class="grid_12 projects"><!-- PROJECTS BEGINS -->

<?php
$ix = 0; // <<< add this
if (have_posts()) :
while (have_posts()) :

$ix++; // <<< add this

?>

<div class="grid_4 project<? // << add these lines
echo ($ix == 1 || ($ix-1)%3)?' alpha':'';
echo ($ix%3||$ix==$wp_query->post_count)?' omega':'';
?>">

<?php
the_post();
?>

// nothing else changed

如果您可以使用 CSS3，另一个可能更好的解决方案是 nth-child selector.

.grid_12.projects .project:nth-child(3n+1) {
    /* alpha styling here */
}

.grid_12.projects .project:nth-child(3n+3) {
    /* omega styling here*/
}

Answer 2

好的，试试这个：

见//Add thiscmets

完整代码：

<?php get_header(); ?>


<div class="grid_12 projects">

<?php
if (have_posts()) :

$i = 1; //Add this

while (have_posts()) :

//Add this
if ($i === 1) {
    $new_class = "alpha";
  }
  elseif ($i % 3 == 0) {
    $new_class = "omega";
    $i = 0;
  } else {
    $new_class = "";
  }
//End
?>

<div class="grid_4 project <?php echo $new_class; ?>">
                           <!-- ^^^^^^^^^^^^^^^^^^^-->
<?php
the_post();
?>

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>

<h2>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>

</div><!-- PROJECT ENDS -->

<?php
$i++; //Add this
endwhile;
endif;
?>

</div><!-- PROJECT-CONTAINER ENDS -->

<?php get_footer(); ?>