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，但仅当它确实是行中的第3个元素时，请删除下面的||$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 this条评论

完整代码：

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

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

2 个答案: