关于这个WordPress文章列表序号其实很多对于刚学WordPress仿站的同学并不是很容易,因为只是照仿有时目标网站并不会那么容易让您调出WordPress文章列表序号,其实关于这个列表序列号网页的都是采用ol标签即可正常输出带序列号的列表,当然还有可以使用css3的 “nth-child 伪类”以及“:before和:after伪类” 来实现这样的效果,还有呢就是采用背景图片固定的来实现WordPress文章列表序号,先说一种最简单的PHP递增序列号的方法。

WordPress文章列表序号


<?php $ruikeedu=1;?>
显示的地方调用
<?php echo $ruikeedu=++;?>

WordPress文章列表序号

首先在要显示文章列表的DIV中放入调用某个栏目下的文章列表的WORDPRESS代码:


<ul class="xwz_bh">
<?php if (have_posts()) : ?>
<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</ul>

以上的代码就可以调用ID=1的分类下的文章,并且调用文章的数量为6篇,这些参数可以根据自己的需要进行设置。第二步就是放一段控制文章列表编号的的CSS,将以下的CSS代码放到网站的模板的style.css文件的最底部。


.xwz_bh li{list-style:none;height:30px;line-height:30px;font-size:14px; margin-bottom:5px;}
.xwz_bh li:before{ color:#fff; margin-right:5px; display:inline-block; width:30px; height:30px;border-radius:3px; text-align:center;}
.xwz_bh li:nth-child(1):before{content:'1';background:red;}
.xwz_bh li:nth-child(2):before{content:'2';background:red;}
.xwz_bh li:nth-child(3):before{content:'3';background:red;}
.xwz_bh li:nth-child(4):before{content:'4';background:green;}
.xwz_bh li:nth-child(5):before{content:'5';background:green;}
.xwz_bh li:nth-child(6):before{content:'6';background:green;}
.xwz_bh li:nth-child(7):before{content:'7';background:green;}
.xwz_bh li:nth-child(8):before{content:'8';background:green;}
.xwz_bh li:nth-child(9):before{content:'9';background:green;}
.xwz_bh li:nth-child(10):before{content:'10';background:green;}

这样通过“:before和:after伪类”就可以在文章的列表的前面添加一些我们需要的内容了,达到这种效果。