零基础建站培训教程介绍

当前位置:

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

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

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

在做网站时如何去显示上面的自动递增的编号效果呢,这种效果我们可以用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伪类”就可以在文章的列表的前面添加一些我们需要的内容了,达到这种效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  1. wordpress开发教程:wordpress后台如何添加多个编辑器
  2. 如何自定义wordpress 注册页面
  3. wordpress 配置文件config.php在哪?
  4. WordPress站点地图(sitemap)制作方法(免插件)
  5. wordpress 默认头像修改方法汇总
  6. wordpress置顶文章调用与设置
  7. wordpress模板(主题)安装方法
  8. 网站如何调用其它wordpress网站文章(自动更新)
  9. WordPress网站批量替换 删除自定义栏目(亲测有效)
  10. WordPress网站百度熊掌号”搜索结果出图“改造方法
学做网站论坛零基础学建网站课程