首页 > 建站资源 > 建站教程 > WordPress教程:制作一个彩色标签云页面的教程

WordPress教程:制作一个彩色标签云页面的教程

时间:2012-08-03    来源:胡小易博客

看到很多博客都有标签聚合的功能,于是花了点儿时间找了找,在倡萌博客找到了这个方法。

下面和大家共享下:

首先复制一份你博客主题的page.php模板

然后在其顶部加入

<?php
/*
Template Name: Tags
*/
?>

然后将这种显示正文内容的代码换成调用tags的代码

<?php the_content(); ?>

换成

<?php wp_tag_cloud(‘smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC’);?>

在style.css里面增加如下代码可以使得间距更好看:

#page-cnt.tags,
#page-cnt.friends { height: 576px; padding: 6px 0 0; overflow: hidden; line-height: 30px; }
#page-cnt.tags,
#page-cnt.friends { height: auto; padding-top: 5px; overflow: visible; }
.tags a { display: inline-block; margin: 0 4px; white-space: nowrap; }

打开主题中的functions.php文件,在最末端的 ?>前面添加下面的代码,就可以实现彩色标签云了:

;
function colorCloud($text) {
$text = preg_replace_callback(‘|<a (.+?)>|i’,'colorCloudCallback’, $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$color = dechex(rand(0,16777215));
$pattern = ‘/style=(\’|\”)(.*)(\’|\”)/i’;
$text = preg_replace($pattern, “style=\”color:#{$color};$2;\”", $text);
return “<a $text>”;
}
add_filter(‘wp_tag_cloud’, ‘colorCloud’, 1);

大功告成,在后台新建一个tags页面就可以了。

相关推荐
如何在WordPress指定页面加载指定JavaScript或CSS代码
在WordPress中集成支付宝思路及实现步骤
开源博客程序Wordpress非404页实现伪静态的方法分享
WordPress常用模板函数大全 设计WordPress主题必备
如何对WordPress实现将选中文字转发到微博的功能
修改wordpress分页标题重复影响SEO的问题
WordPress教程:博客首页排除指定分类文章的方法分享
用WordPress原生函数来实现归档页面的内容调用
解决wordpress升级出现302重定向的问题
修改wordpress博客url中category的方法分享
修改WordPress文章ID不连续的2个方法分享
wordpress实现调用单页功能的简易教程
WordPress教程:显示注册用户数量的方法分享
WordPress新手教程:如何替换登陆后的默认首页?
Wordpress教程:用键盘操作代替鼠标操作实现翻页功能
WordPress 3.2.1集成百度Ueditor在线编辑器方法分享
WordPress教程:7招快速提升WordPress的运行性能
在HostGator主机下如何快速安装WordPress博客程序
WordPress教程:链接关系(rel)添加external和nofollow选项方法
WordPress教程:如何在文章中显示广告(非上下、左右角)
Wordpress默认编辑器的增强方法分享 非插件实现
WordPress教程:在文章中调用另一个页面内容的方法分享
WordPress新手教程:如何自定义侧边栏小工具?
wordpress教程:如何巧用条件语句为博客减压?
删除WordPress中generator meta tag标签的方法分享
10招优化WordPress速度 为网站访问提速
wordpress缓存插件 - WordPress WP Super推荐
WordPress教程:给友情链接添加Nofollow方法分享
创建一个集成到WordPress简单的CSS网格布局
WordPress教程:使用Redis缓存来进行加速
给wordpress评论链接加Nofollow和设置URL跳转策略
wordpress博客程序如何做搜索引擎优化
wordpress新手教程:CSS+PHP搞定分页难题详解
10个最常见的WordPress错误及解决方案分享
给Wordpress添加Feedsky订阅并显示原文地址的方法分享
10步教你快速创建一个基于WordPress的商业网站

精彩推荐

热门教程