wordpress调用文章列表的时候递增序列号方法

使用wordpress程序做网站时，我们通常通过动态代码去调用某个版块的文章列表。这种文章列表一般是使用无序列表标签<ul>标签来排列的。但为了一些效果的需要，我们需要在调用的文章列表前面显示一个编号。

在做网站时如何去显示上面的自动递增的编号效果呢，这种效果我们可以用css3的 “nth-child 伪类”以及“:before和:after伪类” 来实现这样的效果。（相关知识：CSS视频教程）

方法一：CSS3给列表前插入项目序列编号

方法二：使用“:before和:after伪类”递增

1. 在要显示文章列表的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>
   
   

2. 以上的代码就可以调用ID=1的分类下的文章，并且调用文章的数量为6篇，这些参数可以根据自己的需要进行设置。
3. 放一段控制文章列表编号的的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;}
   
   

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

标签： isp 代码 网站的模板

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。