Jalena Blog

  • 首页
  • 程序开发
    • Java
    • Spring
    • SpringBoot
    • SpringMvc
    • Python
    • Odoo
    • C#
    • SQL
    • Web
    • Linux
  • 移动设备
    • Android
    • BlackBerry
    • Router
  • 杂七杂八
    • 我的废话
    • 音频
    • 视频
    • 常用软件
  • 关于
A bad workman always blames his tools.
  1. 首页
  2. Zaqizaba
  3. 正文

Wordpress 改造之Tag标签云

2013年10月24日 100点热度 0人点赞 1条评论

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

首先在主题目录下创建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吧。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: css php wordpress
最后更新:2019年02月21日

Jalena

A bad workman always blames his tools.

点赞
< 上一篇
下一篇 >

文章评论

  • firefore

    厉害。学习了。刚好有个博客打算弄这个。感谢分享。

    2014年09月18日
    回复
  • 取消回复

    Jalena

    A bad workman always blames his tools.

    最新 热点 随机
    最新 热点 随机
    Centos 7 离线安装Nginx Centos nmcli 网络管理命令 Linux 密钥登录 服务器部署vSphere ESXI 软路由(ESXi)安装OpenWrt 使用 Docker 部署 wordpress Android Studio Gradle 代理设置 Frp 反向代理 Git 更新合并fork的项目代码 MySQL 常用命令
    Centos nmcli 网络管理命令Centos 7 离线安装Nginx
    VS2008编译WinCE程序过慢解决办法 EDIUS输出到磁带之180b JAVA 输出任意奇数的菱形 JSP环境搭建 centos Tomcat 9 Centos7 部署 Odoo10.0 生产环境 Git 使用密钥登陆服务 Sublime text 3 安装 package control 为博客添加了 ThickBox 效果 Edius 6.08 虚拟加密狗折腾记 Odoo邮件配置
    标签聚合
    生活 解码 java Centos wordpress Edius odoo 其他
    Links
    • Emin.ink
    • 猿人学网站
    • ninja911
    • Feng Blog
    • 时空镜像
    • ZWWoOoOo

    COPYRIGHT © 2020 Jalena Blog. ALL RIGHTS RESERVED.

    THEME KRATOS MADE BY VTROIS