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>