笨猫博客

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

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

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

    最新 热点 随机
    最新 热点 随机
    【开源】Mail-CF:任意前缀域名邮箱收发教程 Cloudflare R2 打造免费图床,10G存储+免流量费 网络测速、Ping、TCPing、网络监控、探测节点代码 分享一下大部分VPS以及甲骨文ARM/AMD、AWS、谷歌云GCP通用DD方法!统 TCP-Optimize:TCP/UDP 网络深度调优脚本 基于 Cloudflare Workers + D1 的自托管 2FA/TOTP 验证码管理工具、分享链接功能
    【开源】Mail-CF:任意前缀域名邮箱收发教程
    一个老外在中国生活太久的表现 这社会变的看不懂了 云图科幻悬疑大片,DVD版,云图迅雷下载,云图下载 槐荫树下:网易为迎奥运推出Micro-blog服务 不需PS超简单制作圆角图片的方法!推荐在线制作圆角图片修改工具网站 WordPress 混合内容中常见的 SSL 问题
    最近评论
    南香香 发布于 4 天前(11月06日) 任意前缀都能收、转发到主邮箱,注册服务时随手编一个地址太方便了。CF 全收 + Resend 这套组...
    VilaVPN 发布于 4 天前(11月06日) 小白向的 Sing-box 订阅教程写得很清楚,跟着配基本能跑起来。补充一点:自建节点最近被按 IP...
    Flora Ding 发布于 1 周前(11月03日) Mail-CF 任意前缀域名邮箱收发这个方案太香了,开源教程写得很跟手。自己域名收信对独立站很加分。...
    土木坛子 发布于 1 个月前(10月06日) 致敬探索精神。
    秋风于渭水 发布于 2 个月前(09月17日) 如果超过10GB,可以换成B2(backblaze)他家存储价格只有R2的一半,且他家到CF的流量不...
    标签
    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