Wordpress 改造之Tag标签云

如果你来过我的博客肯定会看到我的博客以前是什么样子。进来没事折腾，遂把右边的标签云给改造了。看着彩色的感觉是不是很舒服。。

首先在主题目录下创建widgets目录，方便定义我们的东西。

再创建我们标签所使用的文件widgets-tags.php

将如下代码拷贝至widgets-tags.php里面

<?php  
add_action( 'widgets_init', 'Color_tags' );

function Color_tags() {
	register_widget( 'Color_tags' );
}

class Color_tags extends WP_Widget {
	function Color_tags() {
		$widget_ops = array( 'classname' => 'Color_tags', 'description' => '显示热门标签' );
		$control_ops = array('width'=>'300px','height'=>'312px');
		$this->WP_Widget( 'Color_tags', '彩色标签云', $widget_ops, $control_ops );
	}

	function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters('widget_name', $instance['title']);
		$count = $instance['count'];
		$offset = $instance['offset'];
		$more = $instance['more'];
		$link = $instance['link'];

		$mo='';
		if( $more!='' && $link!='' ) $mo='<a class="btn btn-primary" href="'.$link.'">'.$more.'</a>';

		echo $before_widget;
		echo $before_title.$mo.$title.$after_title; 
		echo '<div class="Color_tags">';
		$tags_list = get_tags('orderby=count&order=DESC&number='.$count.'&offset='.$offset);
		if ($tags_list) { 
			foreach($tags_list as $tag) {
				echo '<a href="'.get_tag_link($tag).'">'. $tag->name .' ('. $tag->count .')</a>'; 
			} 
		}else{
			echo '暂无标签！';
		}
		echo '</div>';
		echo $after_widget;
	}

	function form($instance) {
?>
		<p>
			<label>
				名称：
				<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>" class="widefat" />
			</label>
		</p>
		<p>
			<label>
				显示数量：
				<input id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="number" value="<?php echo $instance['count']; ?>" class="widefat" />
			</label>
		</p>
		<p>
			<label>
				去除前几个：
				<input id="<?php echo $this->get_field_id('offset'); ?>" name="<?php echo $this->get_field_name('offset'); ?>" type="number" value="<?php echo $instance['offset']; ?>" class="widefat" />
			</label>
		</p>
		<p>
			<label>
				More 显示文字：
				<input style="width:100%;" id="<?php echo $this->get_field_id('more'); ?>" name="<?php echo $this->get_field_name('more'); ?>" type="text" value="<?php echo $instance['more']; ?>" size="24" />
			</label>
		</p>
		<p>
			<label>
				More 链接：
				<input style="width:100%;" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" type="url" value="<?php echo $instance['link']; ?>" size="24" />
			</label>
		</p>
<?php
	}
}

?>

再来将如下CSS代码拷贝至主题的CSS文件内（一般为Style.css）

/* ----- Color tags ----- */
.Color_tags{padding: 5px 5px 5px 5px;}
.Color_tags a { text-decoration:none; }
.Color_tags a:nth-child(9n){background-color: #4A4A4A;}
.Color_tags a:nth-child(9n+1){background-color: #428BCA;}
.Color_tags a:nth-child(9n+2){background-color: #5CB85C;}
.Color_tags a:nth-child(9n+3){background-color: #D9534F;}
.Color_tags a:nth-child(9n+4){background-color: #567E95;}
.Color_tags a:nth-child(9n+5){background-color: #B433FF;}
.Color_tags a:nth-child(9n+6){background-color: #00ABA9;}
.Color_tags a:nth-child(9n+7){background-color: #B37333;}
.Color_tags a:nth-child(9n+8){background-color: #FF6600;}
.Color_tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
.Color_tags a:hover{opacity: 1;filter:alpha(opacity=100);}

基本准备就完事了，接下来就注册激活它

打开主题下的Function.php文件，在< ?php之后插入我们刚才的widgets-tags.php进去

// 载入自定义widgets
include('widgets/widgets-tags.php');

现在就向你的主题添加这个彩色的TAG吧。