如果你来过我的博客肯定会看到我的博客以前是什么样子。进来没事折腾，遂把右边的标签云给改造了。看着彩色的感觉是不是很舒服。。
首先在主题目录下创建widgets目录，方便定义我们的东西。
再创建我们标签所使用的文件widgets-tags.php
将如下代码拷贝至widgets-tags.php里面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?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）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* ----- 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进去
|
1 2 |
// 载入自定义widgets include('widgets/widgets-tags.php'); |
现在就向你的主题添加这个彩色的TAG吧。
厉害。学习了。刚好有个博客打算弄这个。感谢分享。