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

之前，在浏览其他博客的时候看到有的博客侧边栏的例如随机推荐文章前会显示带彩色背景的数字，感觉很好看。想着也给自己博客弄一个，可在网上搜索许久，都没有找到相关的帖子。在代码方面，自己也不懂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;
?>
<div class="investment_con_list">
   <ul class="tab_post_links">
   <?php query_posts( array ( 'showposts' => $number, 'ignore_sticky_posts' => 1, 'orderby' => 'rand' ) );$i = 1; while ( have_posts() ) : the_post(); ?>
   <li class="hot-title">
      <span class="li-icon li-icon-<?php echo $i;?>"><?php echo $i;$i++ ?></span>
      <a href="<?php the_permalink(); ?>"  title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a>
   </li>
   <?php endwhile;?>	
   </ul>
</div>
<?php 
  echo $after_widget;
}
  function update( $new_instance, $old_instance ) {
    if (!isset($new_instance['submit'])) {
       return false;
    }
    $instance = $old_instance;
    $instance = array();
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['number'] = strip_tags($new_instance['number']);
    return $instance;
  }
  function form($instance) {
    if ( isset( $instance[ 'title' ] ) ) {
      $title = $instance[ 'title' ];
    }
    else {
      $title = '随机推荐';
    }
    global $wpdb;
    $instance = wp_parse_args((array) $instance, array('number' => '5'));
    $number = strip_tags($instance['number']);
?>
    <p>
       <label for="<?php echo $this->get_field_id( 'title' ); ?>">标题：</label>
       <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
    </p>
    <p>
       <label for="<?php echo $this->get_field_id('number'); ?>">显示数量：</label>
       <input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" />
    </p>
	<input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
<?php }
}
add_action( 'widgets_init', create_function( '', 'register_widget( "random_post" );' ) );

.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}

后台效果

前端效果