优化 WordPress 自带标签云为彩色样式

WordPress 默认标签云方便将编写文章的标签集中展示查看,是一个不错的自带功能;但是原有的标签云样式实在是不敢恭维,字体大的太大,小的又偏小,而且颜色单一十分枯燥乏味,让人没有了点击查看的兴趣。

现在我们要优化 WordPress 标签云原有样式,通过网上搜索得到的方法一般都是查找 WordPress 源文件 wp-includes 目录下的 category-template.php 中 wp_tag_cloud 函数修改其参数,再在主题 functions.php 文件中添加标签颜色代码。

但是以前有人说过能不动 WordPress 程序源文件就尽量不要修改,且不说更新 WordPress 后源文件会被覆盖还需重新添加修改的麻烦,如果不懂代码仅是照葫芦画瓢经常会出现一些不可预计的未知问题。

wordpress彩色标签云

所以本文除了介绍修改 WordPress 源文件更改标签云样式的方法外,另外说一种只需要在主题 functions.php 文件中添加代码就能实现更改 WordPress 标签云样式的方法。

修改 WordPress 源文件 wp_tag_cloud 参数(不推荐)

  1. function wp_tag_cloud( $args = '' ) {
  2. $defaults = array(
  3. 'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
  4. 'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'ASC',
  5. 'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true
  6. );
  7. $args = wp_parse_args( $args, $defaults );

代码注释:(按自己的需要手动修改即可)

smallest 表示标签的最小字号 默认8

largest 表示最大字号 默认22

unit 一般是 pt 或 px 表示字体使用像素单位

number=0 表示显示所有标签,如果为45,表示显示45个

separator 标签之间的分隔符,默认是空格;

orderby 表示标签排列顺序 默认以名称 name 排序

order=DESC 表示降序排序(ASC表示升序排序)

之后在主题 functions.php 文件中添加标签云显示随机颜色代码:

  1. //侧边栏彩色标签云
  2. function colorCloud($text) {
  3. $text = preg_replace_callback('|<a (.+?)>|i','colorCloudCallback', $text);
  4. return $text;
  5. }
  6. function colorCloudCallback($matches) {
  7. $text = $matches[1];
  8. $color = dechex(rand(0,16777215));
  9. $pattern = '/style=(\'|\”)(.*)(\'|\”)/i';
  10. $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
  11. return "<a $text>";
  12. }
  13. add_filter('wp_tag_cloud', 'colorCloud', 1);

只修改主题 functions.php 文件实现彩色标签云(推荐)

在当前主题 functions.php 文件中添加如下代码:

  1. add_filter('widget_tag_cloud','style_tags');
  2. function style_tags($args) {
  3. $args = array(
  4. 'largest'=> '15',
  5. 'smallest'=> '15',
  6. 'unit' => 'px',
  7. 'format'=> 'flat',
  8. 'number' => '50',
  9. 'orderby' => 'name',
  10. 'order' => 'ASC'
  11. );
  12. return $args;
  13. }
  14. function colorCloud($text) {
  15. $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  16. return $text;
  17. }
  18. function colorCloudCallback($matches) {
  19. $text = $matches[1];
  20. $colors=array('ff3300','0517c2','0fc317','e7cc17','601165','ffb900','f74e1e','00a4ef','7fba00');
  21. $color=$colors[dechex(rand(0,3))];
  22. $pattern = '/style=(\'|\")(.*)(\'|\")/i';
  23. $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
  24. return "<a $text>";
  25. }
  26. add_filter('wp_tag_cloud', 'colorCloud', 1);

大小排序等参数还是按照上面的说明你自己修改,仔细看你会发现,这里的颜色代码与上一种完全随机颜色代码稍有不同,而是选择了几种指定的颜色来显示第20行如:ff3300、0517c2等,这可根据你自己的喜好需要自行决定添加的颜色代码。

彩色标签云展示使用方法:

现在一般的 WodPress 主题都会有侧边栏的小工具管理,直接拖动标签云添加到你需要的页面就好。(如果连小工具这种主题标配都没有你又不太懂代码还是赶快换个 WordPress 主题吧)

OK,去试试添加代码调用 WordPress 自带标签云查看彩色效果吧!

 

转载请注明链接地址:荐爱小站 » 优化 WordPress 自带标签云为彩色样式

赞 (1) 赏 !

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 计算 (必填)

觉得文章有用就打赏一下吧,赠人玫瑰手有余香!

支付宝扫一扫打赏

微信扫一扫打赏