惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

PCI Perspectives
PCI Perspectives
Microsoft Security Blog
Microsoft Security Blog
MongoDB | Blog
MongoDB | Blog
T
The Blog of Author Tim Ferriss
罗磊的独立博客
人人都是产品经理
人人都是产品经理
The Cloudflare Blog
Engineering at Meta
Engineering at Meta
Y
Y Combinator Blog
宝玉的分享
宝玉的分享
Recorded Future
Recorded Future
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
Recent Announcements
Recent Announcements
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Apple Machine Learning Research
Apple Machine Learning Research
T
Threatpost
The GitHub Blog
The GitHub Blog
M
MIT News - Artificial intelligence
Scott Helme
Scott Helme
P
Palo Alto Networks Blog
T
Tenable Blog
P
Privacy International News Feed
V
Visual Studio Blog
F
Fortinet All Blogs
酷 壳 – CoolShell
酷 壳 – CoolShell
I
Intezer
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
AI
AI
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
S
Security Affairs
S
SegmentFault 最新的问题
C
Cisco Blogs
博客园 - 聂微东
MyScale Blog
MyScale Blog
V
Vulnerabilities – Threatpost
量子位
T
The Exploit Database - CXSecurity.com
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Security Latest
Security Latest
P
Proofpoint News Feed
阮一峰的网络日志
阮一峰的网络日志
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
T
Troy Hunt's Blog
T
Tailwind CSS Blog
Stack Overflow Blog
Stack Overflow Blog
云风的 BLOG
云风的 BLOG
A
About on SuperTechFans
The Last Watchdog
The Last Watchdog

澄沨的漫游茶记

岁暮杂记 在 KOReader 上显示直排文本 虎落平阳:TNO 美国罗伯特·F·肯尼迪线·前篇 烟火·乙巳 蜀都行纪 实习日 事故小记 烟火·甲辰 藏地行纪 元旦杂记 浴火重生:TNO 东方红西北国防阵线党权线·后篇 太阳旗之下:TNO 东方红西北国防阵线党权线·前篇 尚在人间:TNO 乌克兰-苏维埃社会主义共和国线 上海电信 SDN 网关全局域网皆可收看 IPTV 的实现 论 AList 的滥用:多平台串联搭建个人影音-番剧流媒体服务 俄罗斯已逝:TNO 俄罗斯科米-神俄线·后篇 紫日高悬:TNO 俄罗斯科米-神俄线·前篇 The Pure WINDOWS Project: 使用 Windows Sandbox 隔离腾讯系软件的笔记 廣東手艺人:TNO 广东国索尼-长江实业线 使用 PaaS 服务部署 umami 统计工具的笔记 柏林春晓:TNO 德国施佩尔左线 闲话 COMICUP 与敝站 解决小米手机在 fastboot 模式下不被 Windows 识别的问题 贺正·癸卯 MIUI 下观看 Netflix 等流媒体时 Widevine DRM L1 认证失效之解决 崇明骑行纪事·合 磊哥小传 崇明骑行纪事·转 让 Hyper-V 虚拟机支持调用 USB 摄像头 崇明骑行纪事·起承 炎夏小憩 飞哥小传 さよなら、WordPress 使用 Cloudflare Workers 加速甲骨文存储桶 博客流浪纪事 moe-counter-cf:将萌萌计数器部署到 Cloudflare Workers 烟火·迪士尼 红十字救护员培训小记 迁移到了狗云 探索优雅纯粹的追番体验:蜜柑计划 + Resilio Sync Moe-counter: 给网站装上多种风格可选的萌萌计数器 疫情,在下的朋友圈拾遗 Postcrossing 初探小记 解决 Github 同步复刻上游仓库时冲突的问题 使用甲骨文免费云服务器搭建 frp 内网穿透工具的笔记 「在下」的两周年 The Pure WINDOWS Project: Hyper-V 虚拟机使用笔记 The Pure MIUI Project: 小米 10 刷机笔记 烟火·壬寅 贝恩小传「大盛り」 非法侵入住宅罪之浅究 碧蓝航线舰娘原型考据「铁血驱逐篇」 贰拾 火警纪事 观 EDG 夺冠有感 华硕路由器实现远程唤醒局域网设备的笔记 军训随笔 夏日蓝调 贝恩小传 迁移到了 Bandwagon Host 杂诗二首 来给 WordPress 添加一个书单页面吧 乡影随摄 从刑法的报复主义论中国刑法的发展 漫谈二次元的「破圈」 浅谈「FBI WARNING」 とある魔都の ACGN 巡礼目録 桜色 在 WordPress 上添加 moc3 Live2d 看板娘的超简单方法 COVID-19 疫苗接种全纪录 Steam 转区小记 元旦 更新主题为 Sakurairo 华为 HarmonyOS / EMUI 安装 GMS 谷歌框架的笔记 下载没有下载权限的钉钉直播回放的笔记 Re:从零开始的 Windows 简明优化指南 Re:从零开始的计算机使用指南 使用 ADB 工具箱卸载手机预装应用 基于宝塔面板的 Google Drive 百宝箱搭建笔记 The Story of the Snake | 蛇纪事 参议院纪事 箱轮纪事
在 Wordpress 博客里创建彩色标签云页面的笔记
澄沨 · 2021-07-05 · via 澄沨的漫游茶记

随着博客文章的不断增多,文章之间的分类体系就变得越来越重要了,原先在下在博客创立之初就设定了的文章分类框架显然已经不能满足现时博客文章分类的需要,渐渐地,标签成为了第二大分类文章的手段。但是,虽然在下一直坚持给文章打上标签,博客却一直没有一个通过标签来访问文章的入口。这是因为 Wordpress 的标签云只提供在侧边栏,而侧边栏的设计又与博客的主题颇为不搭,所以就一直没有启用。这次突然想到也许可以单独创建一个页面面用来展示标签云,这样一来,问题也就解决了。遂上网搜索相关解决方案,又是在 CSDN 上找到了好货,于是立即动手实施。

模板制作&使用

首先,像上次做书单模板一样,要先做一个标签云的模板。在 WordPress 主题根目录下把 page.php 复制一份,重命名为 page-tag.php ,并把开头的注释改为如下所示。

1
2
3



接下来就可以直接在 </main> 标签前面一行加上:

1
<?php wp_tag_cloud('smallest=14&largest=46&unit=px&number=500'); ?>

这里就直接调取了 Wordpress 标签云的函数,其中 smallest 代表最小字体, largest 代表最大字体, unit 代表单位(可选 pt 或 px), number 代表显示标签数量,这些参数都可以依据个人喜好进行修改。

这样,一个简单的标签云模板就做好了。来到 WordPress 后台,新建一个页面,在模板处选择标签云模板,直接发布,就可以看到刚刚做好的标签云模板了。

当然,这只是一个简单的标签云模板。可以看到,其样式和展示在侧边栏的标签云完全没有什么区别,颜色也很单一,不便于区分,要是今后想要改改标签云的参数,还要跑到主题模板那边改代码,比较麻烦。所以,要是追求美观和易用性的话,还是要对这个页面进行一波优化。

模板美化

通过检索,在下发现曾经有一款非常有名的 Wordpress 标签管理插件能够满足需要,它叫做 Simple Tags。不过,当在下去插件商店里寻找它的时候,却怎么也找不到它,又经过了一番查找,原来是因为它改名了,现在的它叫做 TaxoPress

果断把它安装下来,依次点击 Settings - Legacy

可以看到这里能对标签云的大小、颜色等属性做可视化修改,这样一来,修改标签云就方便了许多。设置好了之后,想要看到效果,别忘了把页面模板里的 Wordpress 的标签云函数改成 TaxoPress 的标签云函数。

1
2
3
4
5

<?php wp_tag_cloud('smallest=14&largest=46&unit=px&number=500'); ?>


<?php st_tag_cloud(); ?>

改完之后一看,问题就随之出现了。虽然 TaxoPress 能对标签云的颜色进行修改,其可以修改的也仅仅只是最热门的标签和最冷门的标签的颜色,换句话说,只能实现标签云的颜色渐变。这听起来好像也不错,但是实际的效果并不如在下想象的那么出色。

可以看到,同色系渐变,标签之间的区分并不是很明显。而不同色系的渐变又是不能接受的——想也不用想,这整个标签云只能用「怪」来形容。

好在还是有方法,只需要修改一下插件的样式就可以解决这个问题了,不过还得要到代码里去找一找。

定位到 wp-content/plugins/simple-tags/inc,编辑 class.client.php 这个文件,找到 get_color_by_scale( $scale_color, $min_color, $max_color ) 这一行,并注释掉或者直接删掉以下代码。

1
2
3
4
5
6
7
8
9
10
$scale_color = $scale_color / 100;
$minr = hexdec(substr($min_color, 1, 2));
$ming = hexdec(substr($min_color, 3, 2));
$minb = hexdec(substr($min_color, 5, 2));
$maxr = hexdec(substr($max_color, 1, 2));
$maxg = hexdec(substr($max_color, 3, 2));
$maxb = hexdec(substr($max_color, 5, 2));
$r = dechex(intval((($maxr$minr) * $scale_color) + $minr));
$g = dechex(intval((($maxg$ming) * $scale_color) + $ming));
$b = dechex(intval((($maxb$minb) * $scale_color) + $minb));

在后面加上以下代码:

1
2
3
$r = dechex(rand(0,255));
$g = dechex(rand(0,196));
$b = dechex(rand(0,255));

完成之后,彩色的标签云就会出现,目的也圆满达成了。不过要注意,今后如果插件更新,还是要重新改一下上面的样式代码的。