Wordpress — применение класса к первому и последнему сообщению каждой строки

Я создаю тему WordPress, используя сетку 960. У меня есть стартовая страница, на которой в каждой строке отображаются три миниатюры. Эти миниатюры находятся в дочерней сетке с родительской оболочкой.

Итак, мне нужно обернуть первый пост каждой строки классом с именем «альфа», а последний пост (третий в моем случае) каждой строки с классом под названием «омега».

Есть идеи, как я могу это решить?

Вот мой текущий код, любая помощь приветствуется!

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

wordpress php 960.gs
person Niklas    schedule 30.12.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Хорошо, попробуйте этот:

См. //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(); ?>
person Rahil Wazir    schedule 30.12.2013
comment
Это ставит альфу на первый пост, а омегу на второй. Мне нужен один без класса альфы/омеги между ними. Итак пост номер 1: проект+альфа 2: проект 3: проект+омега 4: проект+альфа. И так далее... - person Niklas; 31.12.2013

arrow_upward
2
arrow_downward

Примечание: если вы не хотите, чтобы последний элемент всегда имел омегу, а только если это действительно третий элемент в строке, удалите ||$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.

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

.grid_12.projects .project:nth-child(3n+3) {
    /* omega styling here*/
}
person Tim G    schedule 30.12.2013
comment
Обычно вы бы сделали именно это, поместив класс к первому потомку и последнему. Но в этом случае мне нужно, чтобы это был проект + альфа, проект, проект + омега для каждой строки сообщения. В противном случае это испортит поля... - person Niklas; 31.12.2013
comment
Я перечитал вопрос после того, как опубликовал свой ответ и понял, что не отвечал на вопрос. Я считаю, что сделал это сейчас. - person Tim G; 31.12.2013