笨猫博客

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

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

2010-07-23 4508点热度 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
    取消回复

    最新 热点 随机
    最新 热点 随机
    AcePanel(原耗子面板)3.0 正式发布 Docker 自托管 Shlink 短链服务 Linux BBR V3 管理脚本:支持arm和x86-64轻松加速网络,让服务器飞起来! 船新的PT刷流脚本,傻瓜式一键部署好完整刷流环境VT+QB439+Filebrowser+系统优化 EnsoAI:让多个 Agents 并行开发 [多路智能|并行穿梭] 开源输入法:支持跨设备剪贴板同步与验证码提取
    AcePanel(原耗子面板)3.0 正式发布Linux BBR V3 管理脚本:支持arm和x86-64轻松加速网络,让服务器飞起来!Docker 自托管 Shlink 短链服务
    国内外各种建站免费面板和一键包汇总 Sift.email 输入Email 帮你检查电子邮件地址是否存在 基于Web3.0理念的个性化聚合平台:雅蛙 新的$$R多用户管理脚本-雨落无声 SSL证书密钥类型选择RSA还是ECC算法?对网站的影响及建议 VPS新手教程⑨:Linux挂载未分配硬盘
    最近评论
    提拉米苏 发布于 4 周前(01月18日) App首页会崩溃
    vioulo 发布于 1 个月前(01月07日) 之前以为 fcitx5 只能再 linux 上用来的 :smile:
    dk 发布于 5 个月前(09月22日) 哈哈哈哈
    天天下载Ttzip 发布于 5 个月前(09月15日) 很棒的网站!感谢分享,谢谢站长!!@天天下载Ttzip
    诗音 发布于 6 个月前(08月29日) 时间改到2099年在暂停更新也可以
    标签
    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