乐于分享
好资源不私藏

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

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

 

操作方法

在当前主题的functions.php,dux主题为functions-theme.php文件加入以下代码:

/* 彩色静态标签云 Color Tag Cloud 
/* -------------------------------- */
function colorCloud($text) {
  $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  $text=preg_replace('/<a /','<a ',$text);
  return $text;
}
function colorCloudCallback($matches) {
  $text = $matches[1];
//这里定义我们背景色的范围,如果不想设置背景色的输出范围我们可以使用
//$color = dechex(rand(0,16777215));从所有颜色中随机出一个
  $a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
  $co = array_rand($a,2);
  $color = $a[$co[0]];
//随机颜色代码结束,下面开始吧颜色赋值给每个标签生成背景色
  $pattern = '/style=(\'|\")(.*)(\'|\")/i';
  $text = preg_replace($pattern, "style=\"background:#{$color};\"", $text);
  return "<a $text>";
}
//把php代码挂载到wp_tag_cloud钩子上
add_filter('wp_tag_cloud', 'colorCloud', 1);

然后到WordPress后台,通过外观——小工具——标签云,添加后就能看到效果了。

注:这里的“标签云”是指WordPress自带的,而非当前你所使用主题的标签云!!!

其中上面代码中的:

$a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');

里面的颜色值可以根据自己爱好调整。

 

 

未经允许不得转载:9i资源网 » WordPress通过自定义代码小工具实现圆角彩色标签云

评论 抢沙发

评论前必须登录!

立即登录   注册

×
订阅图标按钮