WordPress 随机彩色标签的实现方法

WordPress 随机彩色标签的实现方法,第1张

概述在 WordPress 博客系统中,使用标签组织归类文章是极为有效的方式。为了给予用户强大的视觉冲击力,强调标签的重要性是 WordPress 主题设计的一个基本要素。芒果的 2.0 版本已经将之前类似 Delicious 风格的灰色标签列表改进为随机彩色。这个自我感觉还不错的效果之前也有读者询问过,现在做个 Wor… 在 wordpress 博客系统中,使用标签组织归类文章是极为有效的方式。为了给予用户强大的视觉冲击力,强调标签的重要性是 wordpress 主题设计的一个基本要素。芒果的 2.0 版本已经将之前类似 DelicIoUs 风格的灰色标签列表改进为随机彩色。这个自我感觉还不错的效果之前也有读者询问过,现在做个 wordpress 随机彩色标签的实现方法的分享。

按照芒果首页现在的实现方式,随机彩色其实很容易。先来按照常理输出标签列表的代码:

<?PHP wp_tag_cloud(); ?>如果为标签添加背景色,就需要为每个标签元素设置 CSS 类来定义其样式。

首先,使用获取标签列表对象:

$Tags = get_the_Tags();然后,使用 foreach 函数遍历标签列表,循环输出标签名称和链接地址等信息,代码如下:

foreach($Tags as $tag) echo '<a href="'.get_tag_link($tag -> term_ID).'">'.$tag -> name.'</a>'; ?>完整的随机背景颜色代码为:

<?PHP $Tags = get_the_Tags(); foreach($Tags as $tag) echo '
<li class="tag-'.rand(1,5).'"><a href="'.get_tag_link($tag -> term_ID).'">'.$tag -> name.'</a></li>'; ?>注意到其中的 rand(1,5) 函数产生数字 1~5,则每一个标签的标记可以使用诸如 tag-1 的样式。

最后通过 CSS 定义 tag-1 至 tag-5 五个不同背景颜色的样式即可:

.tag-1{background:red;}
.tag-2{background:blue;}
...
.tag-5{background:green;}当然,如果你不想输出太多颜色限制,还有一个输出随机背景色的方法:

<?PHP echo '<li style="background:rgb(255,0);">芒果 - www.mangguo.org</li>'; ?>实现的方法其实是和第一种一致的,有兴趣可以尝试第二种。

出处:http://www.mangguo.org

总结

以上是内存溢出为你收集整理的WordPress 随机彩色标签的实现方法全部内容,希望文章能够帮你解决WordPress 随机彩色标签的实现方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/1004173.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存