WordPress

创建彩色标签云页面

老墨 · 4月14日 · 2019年 · 133次已读

标签的作用在很多时候被严重低估,对于站点结构其实是很重要的。

老墨之前分享了利用小工具在侧边栏实现标签云的方法。但是随着标签数量的增加,全部显示在侧边栏并不美观,这时候就有必要再制作一个单独的标签云页面来显示全部标签,加上不同大小的彩色字体效果,对导航读者更为友好。效果展示

建立页面模板

在自己的主题目录下找到page.phpsingle.php文件,复制并重命名为:page_tagcloud.php,打开后在代码的最上方加入如下代码,告诉 WordPress 这是一个命名为 标签云页面 的模板文件:

<?php
/*
Template Name: 标签云页面
*/
?>

在该文件下面找到 <?php the_content();?> 用下面的代码将其整体替换:

<?php wp_tag_cloud('smallest=18&largest=45&unit=px&number=0');?>

将修改好的page_tagcloud.php文件上传至自己的主题文件夹中,然后在WP后台创建新的页面,命名为:标签云,内容为空,在右侧的 页面模板 中选择 标签云页面 模板,然后发布即可。

函数参数解释:

  • smallestlargest用来设置最小(默认8)和最大(默认22)字号
  • unit 标签云字体所使用的单位:pt(默认),em,px等
  • number 显示标签的数量:0为显示全部,默认显示45个
  • format 标签云的样式:flat(默认)-标签之间隔开排列;list-列表形式
  • orderby 标签云依据:name(默认)-按字母;count-按频率
  • order 排序顺序:ASC(默认)-按升序;DESC-按降序
  • exclude 排除某个标签。每个标签都有一个ID,如果你希望哪一个标签不显示,那就用’exclude=此标签ID′。那相应的标签就不会显示。默认显示全部。
  • include 包括某个标签。跟 exclude相反。如果你用’include=5,12′,那就只显示这两个ID的标签

彩色标签的实现

完成上述步骤后,标签云是默认的黑字,想实现彩色字体,就在主题文件夹中找到 functions.php 函数文件,然后在里面加上如下代码:

<?php if (get_option('swt_cumulus') == 'Hide') { ?>
<?php { echo ''; } ?>
<?php } else {
    //彩色标签云
    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);
} ?>

至此,一个按使用频率高低显示字体大小,像云彩一样展示给大家的标签云页面就制作完成了。

想利用小工具在侧边栏实现标签云可以参考另一篇文章:

4 条回应
  1. 两天2019-5-2 · 15:02

    非常灵动,赞一个!

    • 老墨2019-5-2 · 21:51

      终于见到人了

      • 两天2019-5-3 · 7:47

        有时间还要弄弄标签

        • 老墨2019-5-3 · 17:55

          继续折腾