如何使文章标题前显示彩色数字

之前，在浏览其他博客的时候看到有的博客侧边栏的例如随机推荐文章前会显示带彩色背景的数字，感觉很好看。想着也给自己博客弄一个，可在网上搜索许久，都没有找到相关的帖子。在代码方面，自己也不懂PHP，没办法最终只能是不停的修改测试，好在最终给弄成了。

今天，有群友在问这方面的问题，那就写个教程，希望像我一样不懂代码的人可以用到，下面我将介绍下方法。
本人用的是懿古今的NANA主题，里面是不带随机推荐小工具的，所以我就在NANA/inc/functions/下的widgets.php里做了下修改。

// 随机推荐
class random_post extends WP_Widget {
	function __construct(){
		parent::__construct( 'random_post', '主题  随机推荐', array('description' => '主题自带的随机推荐小工具') );
	}
     function widget($args, $instance) {
		extract($args);
		$title = apply_filters( 'widget_title', $instance['title'] );
		echo $before_widget;
		if ( ! empty( $title ) )
		echo $before_title . $title . $after_title;
		$number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 5;
?>

		 $number, 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ) );$i = 1; while ( have_posts() ) : the_post(); ?>
			

			
			
	
	

 '5'));
		$number = strip_tags($instance['number']);
?>
	
标题：
	
	
显示数量：
	
	

2、将下列css样式复制到style.css里。css样式可自行修改。
.tab_post_links li:first-child{padding-top:10px}
.tab_post_links li{padding-top:5px}
.li-icon{background:#ccc;font-size:12px;color:#fff;line-height:180%;margin:0 5px 0 0;padding:0 5px;border-radius:2px}
.li-icon-1{background:#c01e22}
.li-icon-2{background:#23b7e5}
.li-icon-3{background:#6E8B3D}
 
3、经过前两步之后，可在后台--外观--小工具中看到‘随机推荐’，之后，直接添加到想要显示的侧边栏中。
后台效果



前端效果