WordPress默认的标签云样式不怎么美观，颜色也有些单调。小编使用的DUX主题的“DUX 标签云”也是中规中矩，本来想要修改成彩色的标签，只是网上搜索测试了半天，也没有成功。后来找到一个教程，直接修改WordPress小工具自带的标签云，通过自定义代码，完美实现彩色标签（效果见下图）。而且这种方式，理论上不只适用于dux主题，其他的主题应该也是可行的。
操作方法
在当前主题的functions.php文件加入以下代码（可通过外观—主题编辑器修改）：
<code class="language-php "><span class="com">//圆角背景色标签</span>
<span class="kwd">function</span><span class="pln"> colorCloud</span><span class="pun">(</span><span class="pln">$text</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
$text </span><span class="pun">=</span><span class="pln"> preg_replace_callback</span><span class="pun">(</span><span class="str">'|<a (.+?)>|i'</span><span class="pun">,</span> <span class="str">'colorCloudCallback'</span><span class="pun">,</span><span class="pln"> $text</span><span class="pun">);</span>
<span class="kwd">return</span><span class="pln"> $text</span><span class="pun">;</span>
<span class="pun">}</span>
<span class="kwd">function</span><span class="pln"> colorCloudCallback</span><span class="pun">(</span><span class="pln">$matches</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
$text </span><span class="pun">=</span><span class="pln"> $matches</span><span class="pun">[</span><span class="lit">1</span><span class="pun">];</span><span class="pln">
$colors </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span><span class="str">'F99'</span><span class="pun">,</span><span class="str">'C9C'</span><span class="pun">,</span><span class="str">'F96'</span><span class="pun">,</span><span class="str">'6CC'</span><span class="pun">,</span><span class="str">'6C9'</span><span class="pun">,</span><span class="str">'37A7FF'</span><span class="pun">,</span><span class="str">'B0D686'</span><span class="pun">,</span><span class="str">'E6CC6E'</span><span class="pun">);</span><span class="pln">
$color</span><span class="pun">=</span><span class="pln">$colors</span><span class="pun">[</span><span class="pln">dechex</span><span class="pun">(</span><span class="pln">rand</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">7</span><span class="pun">))];</span><span class="pln">
$pattern </span><span class="pun">=</span> <span class="str">'/style=(\'|\")(.*)(\'|\")/i'</span><span class="pun">;</span><span class="pln">
$text </span><span class="pun">=</span><span class="pln"> preg_replace</span><span class="pun">(</span><span class="pln">$pattern</span><span class="pun">,</span> <span class="str">"style=\"display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\""</span><span class="pun">,</span><span class="pln"> $text</span><span class="pun">);</span><span class="pln">
$pattern </span><span class="pun">=</span> <span class="str">'/style=(\'|\")(.*)(\'|\")/i'</span><span class="pun">;</span>
<span class="kwd">return</span> <span class="str">"<a $text>"</span><span class="pun">;</span>
<span class="pun">}</span><span class="pln">
add_filter</span><span class="pun">(</span><span class="str">'wp_tag_cloud'</span><span class="pun">,</span> <span class="str">'colorCloud'</span><span class="pun">,</span> <span class="lit">1</span><span class="pun">);</span></code>
然后到WordPress后台，通过外观——小工具——标签云，添加后就能看到效果了。
注：这里的“标签云”是指WordPress自带的，而非当前主题的，如本站使用的DUX主题的“DUX 标签云”
至于标签的颜色，通过修改其中的颜色代码，就可以更改成自己喜欢的
<code class="language-php "><span class="pln">$colors </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span><span class="str">'F99'</span><span class="pun">,</span><span class="str">'C9C'</span><span class="pun">,</span><span class="str">'F96'</span><span class="pun">,</span><span class="str">'6CC'</span><span class="pun">,</span><span class="str">'6C9'</span><span class="pun">,</span><span class="str">'37A7FF'</span><span class="pun">,</span><span class="str">'B0D686'</span><span class="pun">,</span><span class="str">'E6CC6E'</span><span class="pun">);</span></code>
转载请注明原文链接：WordPress通过自定义代码小工具实现圆角彩色标签云
