WordPress添加彩色标签云

标签云是很多wordpress主题都有的一个主题元素，上一篇wordpress教程中，我们已经向大家介绍了的方法。很多站长在的过程中，想要给主题添加彩色标签云功能，包括边栏调用和页面调用，今天我们就向大家介绍一下实现的方法。

1.调用标签云

我们可以使用 wp_tag_cloud() 函数实现标签云的调用。比如下面的样例：

Crayon-5c891cc245e07970312099" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-language">PHP

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?>

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891cc245e07970312099-1">1 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891cc245e07970312099-1">Crayon-ta">PHPCrayon-h"> Crayon-e">wp_tag_cloudCrayon-sy">(Crayon-s">'smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC'Crayon-sy">)Crayon-sy">; 代码注释： smallest表示标签的最小字号 largest表示最大字号 unit=px表示字体使用像素单位 number=0表示显示所有标签，如果为40，表示显示40个 orderby=count表示按照标签所关联的文章数来排列 order=DESC表示降序排序(ASC表示升序排序，DESC表示降序排序) 2. 添加彩色标签云功能 根据上面的参数，您已经可以调用标签云了，切换到主题目录，打开 functions.PHP 文件，加入以下代码即可实现彩色标签云功能： Crayon-5c891cc245e11418149858" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">functions.PHP Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-language">PHP Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> //边栏<a href="https://www.jb51.cc/tag/caise/" target="_blank" class="keywords">彩色</a><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a> 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); Crayon-main" style="">Crayon-table">Crayon-row"> Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891cc245e11418149858-1">1 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e11418149858-2">2 Crayon-num" data-line="Crayon-5c891cc245e11418149858-3">3 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e11418149858-4">4 Crayon-num" data-line="Crayon-5c891cc245e11418149858-5">5 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e11418149858-6">6 Crayon-num" data-line="Crayon-5c891cc245e11418149858-7">7 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e11418149858-8">8 Crayon-num" data-line="Crayon-5c891cc245e11418149858-9">9 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e11418149858-10">10 Crayon-num" data-line="Crayon-5c891cc245e11418149858-11">11 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e11418149858-12">12 Crayon-num" data-line="Crayon-5c891cc245e11418149858-13">13 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891cc245e11418149858-1">Crayon-c">//边栏彩色标签 Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e11418149858-2">Crayon-t">functionCrayon-h"> Crayon-e">colorCloudCrayon-sy">(Crayon-v">$textCrayon-sy">)Crayon-h"> Crayon-sy">{ Crayon-line" id="Crayon-5c891cc245e11418149858-3">Crayon-h"> Crayon-v">$textCrayon-h"> Crayon-o">=Crayon-h"> Crayon-e">preg_replace_callbackCrayon-sy">(Crayon-s">'||i'Crayon-sy">,Crayon-s">'colorCloudCallback'Crayon-sy">,Crayon-h"> Crayon-v">$textCrayon-sy">)Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e11418149858-4">Crayon-h"> Crayon-k ">returnCrayon-h"> Crayon-v">$textCrayon-sy">; Crayon-line" id="Crayon-5c891cc245e11418149858-5">Crayon-sy">} Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e11418149858-6">Crayon-t">functionCrayon-h"> Crayon-e">colorCloudCallbackCrayon-sy">(Crayon-v">$matchesCrayon-sy">)Crayon-h"> Crayon-sy">{ Crayon-line" id="Crayon-5c891cc245e11418149858-7">Crayon-h"> Crayon-v">$textCrayon-h"> Crayon-o">=Crayon-h"> Crayon-v">$matchesCrayon-sy">[Crayon-cn">1Crayon-sy">]Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e11418149858-8">Crayon-h"> Crayon-v">$colorCrayon-h"> Crayon-o">=Crayon-h"> Crayon-e">dechexCrayon-sy">(Crayon-e">randCrayon-sy">(Crayon-cn">0Crayon-sy">,Crayon-cn">16777215Crayon-sy">)Crayon-sy">)Crayon-sy">; Crayon-line" id="Crayon-5c891cc245e11418149858-9">Crayon-h"> Crayon-v">$patternCrayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'/style=(\'|\”)(.*)(\'|\”)/i'Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e11418149858-10">Crayon-h"> Crayon-v">$textCrayon-h"> Crayon-o">=Crayon-h"> Crayon-e">preg_replaceCrayon-sy">(Crayon-v">$patternCrayon-sy">,Crayon-h"> Crayon-s">"style=\"color:#{$color};$2;\""Crayon-sy">,Crayon-h"> Crayon-v">$textCrayon-sy">)Crayon-sy">; Crayon-line" id="Crayon-5c891cc245e11418149858-11">Crayon-h"> Crayon-k ">returnCrayon-h"> Crayon-s">""Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e11418149858-12">Crayon-sy">} Crayon-line" id="Crayon-5c891cc245e11418149858-13">Crayon-e">add_filterCrayon-sy">(Crayon-s">'wp_tag_cloud'Crayon-sy">,Crayon-h"> Crayon-s">'colorCloud'Crayon-sy">,Crayon-h"> Crayon-cn">1Crayon-sy">)Crayon-sy">; 3. 制作标签云页面 1) 复制你主题的 page.PHP 文件，在该文件的顶部添加： Crayon-5c891cc245e14788885519" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">page-tags.PHP Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-language">PHP Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> <?php /* Template Name: Tags */ ?> Crayon-main" style="">Crayon-table">Crayon-row"> Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891cc245e14788885519-1">1 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e14788885519-2">2 Crayon-num" data-line="Crayon-5c891cc245e14788885519-3">3 Crayon-num Crayon-striped-num" data-line="Crayon-5c891cc245e14788885519-4">4 Crayon-num" data-line="Crayon-5c891cc245e14788885519-5">5 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891cc245e14788885519-1">Crayon-ta">PHP Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e14788885519-2">Crayon-c">/* Crayon-line" id="Crayon-5c891cc245e14788885519-3">Crayon-c">Template Name: Tags Crayon-line Crayon-striped-line" id="Crayon-5c891cc245e14788885519-4">Crayon-c">*/ Crayon-line" id="Crayon-5c891cc245e14788885519-5"> 2) 使用下面的代码替换page.PHP中的 the_content(); ： Crayon-5c891cc245e16478849262" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">page-tags.PHP Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-language">PHP Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?> Crayon-main" style="">Crayon-table">Crayon-row"> Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891cc245e16478849262-1">1 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891cc245e16478849262-1">Crayon-ta">PHPCrayon-h"> Crayon-e">wp_tag_cloudCrayon-sy">(Crayon-s">'smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC'Crayon-sy">)Crayon-sy">; 3) 删除page.PHP中的某些不需要的功能，最后将该文件另存为 page-tags.PHP ，这样，一个标签云模板就做好了。 4) 访问 wordpress后台-页面-新建页面，页面名称随便填一下，在 页面属性 中，选择 tags 模板即可。 4. 边栏中调用标签云 您可以使用下面的函数调用，具体的修改方法，就靠您自己折腾主题了： Crayon-5c891cc245e17838471915" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title"> Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-language">PHP Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?> Crayon-main" style="">Crayon-table">Crayon-row"> Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891cc245e17838471915-1">1 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891cc245e17838471915-1">Crayon-ta">PHPCrayon-h"> Crayon-e">wp_tag_cloudCrayon-sy">(Crayon-s">'smallest=12&largest=18&unit=px&number=20'Crayon-sy">)Crayon-sy">; 注：一般制作比较规范的wordpress主题，都支持 Widget小工具，您可以在 wordpress后台-外观-小工具 中查看是否支持 标签云小工具。 原文地址：https://www.jb51.cc/wordpress/238372.html 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。 上一篇：修改WordPress自带标签云小工具的显下一篇：在所有WordPress文章底部添加自定义 相关推荐 给WordPress菜单中UL下的某一个或某几个LI添加自定义类 我们有时候在定制WORDPRESS主题的时候，由于菜单样式的要求我们需要给我们的WordPress获… 作者：编程之家 时间：2024-09-25 让WordPress主题支持中文图片及中文附件上传 很多朋友在做wordpree主题制作的时候会经常遇到一个问题，那就是如果图片或附件是以中文命名的，就… 作者：编程之家 时间：2024-09-25 屏蔽wordpress后台无用菜单和模块 提升wordpress运行效率 wordpress后台的模块很多，但并不是每个都经常用到。介绍几段代码，可以根据自己的需要屏蔽不常用… 作者：编程之家 时间：2024-09-25 WordPress导入数据库出现”Unknown collation: ‘utf8mb4_unicode_ci”之类错误的解决办法 从WordPress4.2版本开始，如果我们在MYSQL5.1版本数据中导出的数据编码是带有utf8… 作者：编程之家 时间：2024-09-25 修改WordPress上传文件大小限制 很多网友会遇到这样一个问题，就是WordPress网站上传图片、附件、多媒体文件时有一个最大文件大小… 作者：编程之家 时间：2024-09-25 WordPress代码高亮插件WP-CodeBox 对于经常要在文章中出现代码的IT相关博客，安装一个代码高亮插件是非常必要。尤其是当代码里出现引号时，… 作者：编程之家 时间：2024-09-25 WordPress上传图片、附件、多媒体支持中文后缀名 我们在做WordPress主题开发的时候，经常会遇到在文章中或多媒体中上传图片、附件或视频的时候，如… 作者：编程之家 时间：2024-09-25 WordPress自定义字段插件：Advanced Custom Fields超详细使用教程 该插件的系列视频教程已在WordPress中文社区开始进行更新，您也可以前往查看该插件的视频教程：立… 作者：编程之家 时间：2024-09-25 WordPress手机主题调度插件Any Mobile Theme Switcher 目前，移动网站非常的流行，可以说成了必须，虽然现在大部分网站都通过响应式布局来实现手机网站，但是响应… 作者：编程之家 时间：2024-09-25 为WordPress页面或文章手动添加或自定义相关文章 很多朋友在进行wordpress主题定制的时候都会用到相关文章，比如在一篇新闻详情页的下面列出相应的… 作者：编程之家 时间：2024-09-25 小编推荐 苹果市值2025年有望达4万亿美元 • iPadOS 18来了，iPad现在真的有“生产力 • 谷歌日本整活：打造莫比乌斯外形键盘 正 • 天玑9400核心配置曝光，OV米均已采购， • iPad和安卓Pad有什么区别？不用这三项功 • 松下全画幅镜头便携长焦70-300mm F4.5- • 停产Quest Pro、力推Quest 3S，Meta要让 • RTX 4080/90要说再见！消息称英伟达11月 热门标签更多 友情链接: ai导航 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！