如何使文章标题前显示彩色数字-伊阳博客

本文最后更新于2021年4月1日，已超过 3 年没有更新，如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

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

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

1、将下列代码复制，粘贴到widgets.php的最下面，并保存。

// 随机推荐
class random_post extends WP_Widget {
  function __construct(){
    parent::__construct( 'random_post', '主题&nbsp;&nbsp;随机推荐', 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" );' ) );

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、经过前两步之后，可在后台–外观–小工具中看到‘随机推荐’，之后，直接添加到想要显示的侧边栏中。

后台效果