笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 猫玩技术
  3. 正文

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

2010-07-23 4307点热度 0人点赞 10条评论

在 WordPress 博客系统中,使用标签组织归类文章是极为有效的方式。为了给予用户强大的视觉冲击力,强调标签的重要性是 WordPress 主题设计的一个基本要素。这个自我感觉还不错的效果之前也有读者询问过,现在做个 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><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,0);">笨猫 - www.nbmao.com</li>'; ?>

实现的方法其实是和第一种一致的,有兴趣可以尝试第二种。

标签: css tag wordpress
最后更新:2010-07-23

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

  • Ray Chow

    第一种可以控制颜色比较不错

    2010-07-23
  • 淘城记

    不错!不错!但有点眼花!不适合我!呵呵!

    2010-07-23
  • gaga

    很有趣!学习了! :shock:

    2010-07-26
  • Tangboke

    是很不错的。

    2010-07-26
  • 笔头

    应该很不错~

    2010-07-28
  • jobasic

    有空试试去

    2010-07-28
  • 12365

    这篇文章写得真不错,学到很多,感谢 :)

    2010-07-29
  • zhao

    楼主牛

    2010-08-02
  • 经典语录

    方法很实用,不错,支持下

    2010-08-02
  • Xshagua

    不错,回去试试去。你这好像评论头像都不能显示哎!应该是升级版本了吧!这篇教程可以帮你解决: http://www.xshagua.com/?p=177 还是选第二种吧!

    2010-08-07
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    忘掉“学”英语,开始“接触”英语!一键给你的浏览器装一个“英语环境”生成器 软软一键开关 --提供多个 Windows 系统开关,例如保持常亮、隐藏桌面图标 MoonTV 客户端 v1.0.0 发布! Windows/Office 激活工具HEU KMS Activator v63.0.0 WinRAR7.13中文商业版以及授权文件 开源免费的2FA工具推荐(华为手机避坑Microsoft Authenticator 微软验证器)
    忘掉“学”英语,开始“接触”英语!一键给你的浏览器装一个“英语环境”生成器MoonTV 客户端 v1.0.0 发布!软软一键开关 --提供多个 Windows 系统开关,例如保持常亮、隐藏桌面图标
    A1/A1P管理员不死玩法之API管理面板 幻兽帕鲁 Palworld|豪华中文|V1.4.0+联机+单机+预购特典+修改器|解压即撸| DivShare回归,并做出重大调整 shadowsocks-libev一键安装脚本 Kyolo:给图片加上讲话气球 阿里云1元玩一个月vps
    最近评论
    dk 发布于 4 周前(09月22日) 哈哈哈哈
    天天下载Ttzip 发布于 1 个月前(09月15日) 很棒的网站!感谢分享,谢谢站长!!@天天下载Ttzip
    诗音 发布于 2 个月前(08月29日) 时间改到2099年在暂停更新也可以
    vip券网 发布于 3 个月前(08月01日) 写的很详细,赞 :razz: :evil:
    萧瑟 发布于 3 个月前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
    标签
    elliptictrue100.10.02
    BLOG ChatGPT Chrome CloudFlare DirectAdmin github Godaddy google kloxo Linux OneDrive OneIndex PHP QQ shadowsocks SNS ssh Typecho VPS web2.0 whmcs Windows wordpress 一键脚本 下载 免费 博客 图文教程 图标 图片 域名 头像 奥运 宝塔面板 插件 教程 日记 有趣 浏览器 游戏 猫 生活 电影 百度 网站 视频 设计 软件 阿里云盘 音乐
    好友
    • glzjin's blog glzjin's blog
    • ZAERA博客
    • 冰沫记
    • 奇它博客
    • 猫腻‘s Blog
    • 猫饭
    • 肥宅之家
    • 萌博
    • 野路子程序员

    COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang