• 客服微信1828868518 点击这里给我发消息
  • 下载资源,选择【普通下载】按钮即可

WordPress通过自定义代码小工具实现圆角彩色标签云

图文馆 1itao 3个月前 (10-08) 113次浏览 0个评论 扫描二维码
文章目录[隐藏]

WordPress默认的标签云样式不怎么美观,颜色也有些单调。小编使用的DUX主题的“DUX 标签云”也是中规中矩,本来想要修改成彩色的标签,只是网上搜索测试了半天,也没有成功。后来找到一个教程,直接修改WordPress小工具自带的标签云,通过自定义代码,完美实现彩色标签(效果见下图)。而且这种方式,理论上不只适用于dux主题,其他的主题应该也是可行的。

WordPress通过自定义代码小工具实现圆角彩色标签云

操作方法

在当前主题的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>

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址