WP文章列表前添加數字排序號

發表留言 人氣: 704°c

WordPress 加入最新文章、推薦文章或隨機文章在側邊欄代碼,想在文章列表前添加彩色數字排序,增添鮮明的美感,在排行榜頁面加上前3篇熱門文章標題的數字1、2、3有不同的顏色序號,令表格的標題更加突出。

只要在文章列表循環輸出時增加一個變量,輸出一篇就自動+1,然後在給前3篇文章的數字添加一個背景屬性即可。

例如: 隨機文章代碼
<ul>
<?php
$args = array( 'numberposts' => 5, 'orderby' => 'rand', 'post_status' => 'publish' );
$rand_posts = get_posts( $args );
foreach( $rand_posts as $post ) : ?>
<li><span class="wp-label-<?php echo ++$i ?>"><?php echo ++$listnumber ?></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

CSS 代碼:
.wp-label-1 {
background: #D9534F;
}
.wp-label-2 {
background: #6FC299;
}
.wp-label-3 {
background: #81C1F2;
}
.wp-label-4 {
background: #5BC0DE;
}
.wp-label-5 {
background: #5BC0DE;
}

預覽效果Demo▼

你可以使用色碼表修改顏色︰www.ifreesite.com/color

標籤: , | 短網址