wordpress博客添加彩色标签云的方案总结

作者：袖梨 2022-06-25

方法一

代码如下 复制代码

打开 functions.php 文件，插入以下代码
//彩色标签云
function colorCloud($text) {
$text = preg_replace_callback("|

可以直接在需要调用标签云的模板中加入代码

代码如下 复制代码

上面红色部分的代码 $color = dechex(rand(0,16777215));用来定义标签随机颜色的十进制数值范围,0 等于 #000000,16777215 等于 #ffffff,建议重定义下，随机的颜色有可能跟你的网页背景色相同，会让用户看不清是什么字。在photoshop中定位好颜色范围后，使用系统自带的计算机即可把16进制转换成十进制数。

方法二

代码如下 复制代码

function cloud_tag()
{
$arr_tag = array();
$i = 0;
$query = mysql_query("SELECT `tag` FROM `article`");
while ($res = mysql_fetch_assoc($query))
{
$tmp = explode(' ' , strtoupper($res['tag']));
$arr_tag = array_merge($arr_tag , $tmp);
}
$arr_tag = array_unique($arr_tag);
shuffle($arr_tag);
$str_tag = "

";
foreach($arr_tag as $key=>$val)
{
$font_size = rand(12,40);
$font_color = dechex(rand(0,16777215));
$str_tag .= " ";
}
return $str_tag .= "
";
}

?>


方法三

打开当前主题的functions.php文件，加入以下代码：

代码如下 复制代码

function colorCloud($text) {
$text = preg_replace_callback('|

然后在需要显示彩色标签云的地方加入以下调用代码：

代码如下 复制代码

参数说明：

smallest=8&largest=24&number=50

8表示字号、字体大小。

24表示调用最热门的24个标签。

50表示一共输出50个标签。

上面三种彩色标签云效果如果直接把css定义在了htm中了，像我就不喜欢这样我喜欢分离一，

方法四

我们需要添加css样式，在style.css文件后面添加以下的样式代码，标签的间距就会好看些。

代码如下 复制代码
#page-cnt.tags,
#page-cnt.friends { height: 576px; padding: 6px 0 0; overflow: hidden; line-height: 30px; }
#page-cnt.tags,
#page-cnt.friends { height: auto; padding-top: 5px; overflow: visible; }
.tags a { display: inline-block; margin: 0 4px; white-space: nowrap; }


添加彩色功能

打开主题中的functions.php文件，在最末端的 ?>前面添加下面的代码，就可以实现彩色标签云了：

代码如下 复制代码

function colorCloud($text) {
$text = preg_replace_callback('|

发布Tags页面

上传到Tstyle主题根目录，到后台新建一个页面，在右边的“页面属性”选择Tags模板文件，不用填写任何内容，直接发布这个页面，就可以看到tags页面啦。

wordpress博客添加彩色标签云的方案总结


到这里为止，你就可以看到你的标签云页面啦。

注：侧边栏的标签云可以也使用下面的代码直接调用：

代码如下 复制代码

好了总结一下，从上面四种方法来看个人更喜欢最后一种，因为了喜欢把css定义在页面中维护也麻烦哦。

相关文章

精彩推荐