关于这个dev site, 我有一篇帖子显示了三个项目(即将发布),我想修改最后“了解更多”链接上的类,以显示三个不同的选项,每个条目一个。
p class=“lm红色”p class=“lm绿色”p class=“lm蓝色”
代码如下:
<?php
$args = array( \'post_type\' => \'post\', \'posts_per_page\' => 3, \'cat\' => 2, \'sort_by\' => \'event_begin_date\', \'order\' => \'ASC\');
query_posts( $args );
while (have_posts()) : the_post(); ?>
<div class="cs col-sm-6 col-md-4 col-lg-4">
<article class="project-item">
<a href="#">
<figure class="fig">
<img class="img-responsive" alt="" src="<?php the_field(\'event_image\'); ?>">
</figure>
<div class="content">
<h3><?php the_title(); ?></h3>
<p class="dates hidden-xs"><?php the_field(\'event_dates\'); ?></p>
<p class="hidden-xs"><?php the_field(\'event_snippet\'); ?></p>
<p class="lm">Learn More</p>
</div>
</a>
</article>
</div>
<?php endwhile;?>
我曾尝试使用第n个子元素来定位css中的项目,但这样做会导致所有项目的样式都相同。
p.lm {
font: 16px "Open Sans", sans-serif;
text-align: center;
text-transform: uppercase;
background-color: #AC162C;
position: absolute;
width: 280px;
bottom: 0;
left: 20px;
color: #fff;
}
p.lm:nth-child(2n) {
background-color: #b9b329;
}
p.lm:nth-child(3n) {
background-color: #1270f8;
}
我希望能够通过WP或CSS来解决这一问题。
最合适的回答,由SO网友:Milo 整理而成
首先,不要使用query_posts
, 使用WP_Query
创建其他查询。
您可以使用内置的current_post
查询对象的变量。
下面是一个使用post_class
功能:
<?php
$my_posts = new WP_Query( array( \'posts_per_page\' => 3 ) );
if( $my_posts->have_posts() ):
while( $my_posts->have_posts() ):
$my_posts->the_post();
?>
<div <?php post_class( \'index-\' . ( $my_posts->current_post + 1 ) ); ?>>
<p class="lm">Learn More</p>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
然后在CSS中:
.index-1 .lm { /* styles for 1st post */ }
.index-2 .lm { /* styles for 2nd post */ }
.index-3 .lm { /* styles for 3rd post */ }