1、在你的主题文件夹中 functions.php 文件中加入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 |
function colorCloud<span class="br0">(</span>$<span class="kw2">text</span><span class="br0">)</span> <span class="br0">{</span> // 实现彩色标签云 $<span class="kw2">text</span> <span class="sy0">=</span> preg_replace_callback<span class="br0">(</span><span class="st0">'|<a (.+?)>|i'</span><span class="sy0">,</span> <span class="st0">'colorCloudCallback'</span><span class="sy0">,</span> $<span class="kw2">text</span><span class="br0">)</span><span class="sy0">;</span> return $<span class="kw2">text</span><span class="sy0">;</span> <span class="br0">}</span> function colorCloudCallback<span class="br0">(</span>$matches<span class="br0">)</span> <span class="br0">{</span> $<span class="kw2">text</span> <span class="sy0">=</span> $matches<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">;</span> $color <span class="sy0">=</span> dechex<span class="br0">(</span>rand<span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">16777215</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> $pattern <span class="sy0">=</span> <span class="st0">'/style=(\'</span>|\<span class="st0">")(.*)(\'|\"</span><span class="br0">)</span>/i<span class="st0">'; $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text); return "<a $text>"; } add_filter('</span>wp_tag_cloud<span class="st0">', '</span>colorCloud<span class="st0">', 1);</span> |
代码中 $color
= dechex(rand(0,16777215));作用是定义标签随机颜色的十进制数值范围,0 等于 #000000,16777215 等于 #ffffff,你也可以重定义标签云显示的颜色范围,只要查找出相应颜色的十六进制转换为相应的十进制就可以了。
2、自定义WordPress 标签云小工具相关参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//custom widget tag cloud add_filter<span class="br0">(</span> <span class="st0">'widget_tag_cloud_args'</span><span class="sy0">,</span> <span class="st0">'theme_tag_cloud_args'</span> <span class="br0">)</span><span class="sy0">;</span> function theme_tag_cloud_args<span class="br0">(</span> $args <span class="br0">)</span><span class="br0">{</span> $newargs <span class="sy0">=</span> array<span class="br0">(</span> <span class="st0">'smallest'</span> <span class="sy0">=></span> <span class="nu0">8</span><span class="sy0">,</span> //最小字号 <span class="st0">'largest'</span> <span class="sy0">=></span> <span class="nu0">22</span><span class="sy0">,</span> //最大字号 <span class="st0">'unit'</span> <span class="sy0">=></span> <span class="st0">'pt'</span><span class="sy0">,</span> //字号单位,可以是pt、px、em或% <span class="st0">'number'</span> <span class="sy0">=></span> <span class="nu0">45</span><span class="sy0">,</span> //显示个数 <span class="st0">'format'</span> <span class="sy0">=></span> <span class="st0">'flat'</span><span class="sy0">,</span>//列表格式,可以是flat、list或array <span class="st0">'separator'</span> <span class="sy0">=></span> <span class="st0">"\n"</span><span class="sy0">,</span> //分隔每一项的分隔符 <span class="st0">'orderby'</span> <span class="sy0">=></span> <span class="st0">'name'</span><span class="sy0">,</span>//排序字段,可以是name或count <span class="st0">'order'</span> <span class="sy0">=></span> <span class="st0">'ASC'</span><span class="sy0">,</span> //升序或降序,ASC或DESC <span class="st0">'exclude'</span> <span class="sy0">=></span> null<span class="sy0">,</span> //结果中排除某些标签 <span class="st0">'include'</span> <span class="sy0">=></span> null<span class="sy0">,</span> //结果中只包含这些标签 <span class="st0">'link'</span> <span class="sy0">=></span> <span class="st0">'view'</span><span class="sy0">,</span> //taxonomy链接,view或edit <span class="st0">'taxonomy'</span> <span class="sy0">=></span> <span class="st0">'post_tag'</span><span class="sy0">,</span> //调用哪些分类法作为标签云 <span class="br0">)</span><span class="sy0">;</span> $return <span class="sy0">=</span> array_merge<span class="br0">(</span> $args<span class="sy0">,</span> $newargs<span class="br0">)</span><span class="sy0">;</span> return $return<span class="sy0">;</span> <span class="br0">}</span> |
强烈建议您阅读: WordPress函数:wp_tag_cloud(标签云)详解和举例
上诉代码中的数组可适当取舍,如果要采用默认的参数,就可以将相关自定义的参数(数组)删除。
默认参数解析:
smallest:
标签文字最小字号,默认为8pt;
largest:
标签文字最大字号,默认为22pt;
unit:
标签文字字号的单位,默认为pt,可以为px、em、pt、百分比等;
number:
调用的标签数量,默认为45个,设置为“0”则调用所有标签;
format:
调用标签的格式,可选“flat”、“list”和“array”,默认为“flat”平铺,“list”为列表方式;
orderby:
调用标签的排序,默认为“name”按名称排序,“count”则按关联的文章数量排列;
order:
排序方式,默认为“ASC”按正序,“DESC”按倒序,“RAND”按任意顺序。
exclude:
排除部分标签,输入标签ID,并以逗号分隔,如“exclude=1,3,5,7”不显示ID为1、3、5、7的标签;
include:
包含标签,与exclude用法一样,作用相反,如“include=2,4,6,8”则只显示ID为2、4、6、8的标签。
3、wordpress彩色标签云小工具调用。
修改完成后,直接在仪表盘的”外观—>小工具”中把”标签云”小工具拖动到右侧小工具中就可以了。
也可以在主题需要调用的地方添加下面这行代码调用:
在边栏中的调取方法,添加如下代码(具体参数自己修改,smallest表示最小字体,largest表示最大字体,unit表示字体单位pt/px,number表示调取标签的数量):
1 |
<span class="kw2"><?php</span> wp_tag_cloud<span class="br0">(</span><span class="st_h">'smallest=12&largest=18&unit=px&number=20'</span><span class="br0">)</span><span class="sy0">;</span><span class="sy1">?></span> |
下面所介绍的方法实际是实现标签云背景的彩色,而并非标签本身彩色
1、在调用的地方加入以下代码:
1 |
<aside class="tags"><span class="kw2"><?php</span> wp_tag_cloud<span class="br0">(</span><span class="st_h">'smallest=12&largest=12&number=45&order=DESC'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span></aside> |
你的标签不同的话,请设置class为tags
如果你想在边栏中通过文本小工具直接添加的话,需要文本小工具支持PHP代码,实现的方法阅读文章 让你的WordPress文本小工具运行PHP,这样的话更加方便灵活。
2、在你的主题style.css添加以下css样式
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="re1">.tags</span><span class="br0">{</span><span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">12px</span> <span class="re3">13px</span> <span class="re3">10px</span> <span class="re3">15px</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#4A4A4A</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">1</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#428BCA</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">2</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#5CB85C</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">3</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#D9534F</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">4</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#567E95</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">5</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#B433FF</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">6</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#00ABA9</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">7</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#B37333</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">nth-child</span><span class="br0">(</span>9n<span class="sy0">+</span><span class="nu0">8</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#FF6600</span><span class="sy0">;</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="br0">{</span><span class="kw1">opacity</span><span class="sy0">:</span> <span class="nu0">0.80</span><span class="sy0">;</span><span class="kw1">filter</span><span class="sy0">:</span>alpha<span class="br0">(</span>opacity<span class="sy0">=</span><span class="nu0">80</span><span class="br0">)</span><span class="sy0">;</span><span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span><span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#428BCA</span><span class="sy0">;</span><span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline-block</span><span class="sy0">;</span><span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">5px</span> <span class="re3">5px</span> <span class="nu0">0</span><span class="sy0">;</span><span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">6px</span><span class="sy0">;</span><span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">21px</span><span class="br0">}</span> <span class="re1">.tags</span> a<span class="sy0">:</span><span class="kw5">hover</span><span class="br0">{</span><span class="kw1">opacity</span><span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">;</span><span class="kw1">filter</span><span class="sy0">:</span>alpha<span class="br0">(</span>opacity<span class="sy0">=</span><span class="nu0">100</span><span class="br0">)</span><span class="sy0">;</span><span class="br0">}</span> |
原理与添加彩色标签云相似,在当前主题目录下面的functions.php里面加入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="co1">//圆角背景色标签 </span> <span class="kw2">function</span> colorCloud<span class="br0">(</span><span class="re0">$text</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$text</span> <span class="sy0">=</span> <span class="kw3">preg_replace_callback</span><span class="br0">(</span><span class="st_h">'|<a (.+?)>|i'</span><span class="sy0">,</span> <span class="st_h">'colorCloudCallback'</span><span class="sy0">,</span> <span class="re0">$text</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">return</span> <span class="re0">$text</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw2">function</span> colorCloudCallback<span class="br0">(</span><span class="re0">$matches</span><span class="br0">)</span> <span class="br0">{</span> <span class="re0">$text</span> <span class="sy0">=</span> <span class="re0">$matches</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">;</span> <span class="re0">$colors</span> <span class="sy0">=</span> <span class="kw3">array</span><span class="br0">(</span><span class="st_h">'F99'</span><span class="sy0">,</span><span class="st_h">'C9C'</span><span class="sy0">,</span><span class="st_h">'F96'</span><span class="sy0">,</span><span class="st_h">'6CC'</span><span class="sy0">,</span><span class="st_h">'6C9'</span><span class="sy0">,</span><span class="st_h">'37A7FF'</span><span class="sy0">,</span><span class="st_h">'B0D686'</span><span class="sy0">,</span><span class="st_h">'E6CC6E'</span><span class="br0">)</span><span class="sy0">;</span> <span class="re0">$color</span><span class="sy0">=</span><span class="re0">$colors</span><span class="br0">[</span><span class="kw3">dechex</span><span class="br0">(</span><span class="kw3">rand</span><span class="br0">(</span><span class="nu0">0</span><span class="sy0">,</span><span class="nu0">7</span><span class="br0">)</span><span class="br0">)</span><span class="br0">]</span><span class="sy0">;</span> <span class="re0">$pattern</span> <span class="sy0">=</span> <span class="st_h">'/style=(\'|\")(.*)(\'|\")/i'</span><span class="sy0">;</span> <span class="re0">$text</span> <span class="sy0">=</span> <span class="kw3">preg_replace</span><span class="br0">(</span><span class="re0">$pattern</span><span class="sy0">,</span> <span class="st0">"style=<span class="es1">\"</span>display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #<span class="es4">{$color}</span>; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;<span class="es1">\"</span>"</span><span class="sy0">,</span> <span class="re0">$text</span><span class="br0">)</span><span class="sy0">;</span> <span class="re0">$pattern</span> <span class="sy0">=</span> <span class="st_h">'/style=(\'|\")(.*)(\'|\")/i'</span><span class="sy0">;</span> <span class="kw1">return</span> <span class="st0">"<a <span class="es4">$text</span>>"</span><span class="sy0">;</span> <span class="br0">}</span> add_filter<span class="br0">(</span><span class="st_h">'wp_tag_cloud'</span><span class="sy0">,</span> <span class="st_h">'colorCloud'</span><span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span> |
你如果想实现彩色3D旋转标签云的话,直接阅读 WordPress 3D旋转彩色标签云
评论(0)