笨猫博客

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

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

2010-07-23 4257点热度 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/Office 激活工具HEU KMS Activator v63.0.0 WinRAR7.13中文商业版以及授权文件 开源免费的2FA工具推荐(华为手机避坑Microsoft Authenticator 微软验证器) 情侣飞行棋:比吵架有趣,比看剧更亲密 Windows11美化方案教程 简洁、纯HTML导航项目:XG-NAV(开源)
    Windows/Office 激活工具HEU KMS Activator v63.0.0Windows11美化方案教程情侣飞行棋:比吵架有趣,比看剧更亲密开源免费的2FA工具推荐(华为手机避坑Microsoft Authenticator 微软验证器)WinRAR7.13中文商业版以及授权文件
    那村 - 网络您的家庭! 纯IPV6服务器入门指南教程 利用Github Action刷Microsoft 365 E5开发者订阅API实现续订 电脑安装iTunes时提示这台电脑已安装了更高版本解决办法 好看薄:以故事为元素的图片分享网站 Leica 中文摄影杂志 - 莱卡中文站
    最近评论
    天天下载Ttzip 发布于 16 小时前(09月15日) 很棒的网站!感谢分享,谢谢站长!!@天天下载Ttzip
    诗音 发布于 3 周前(08月29日) 时间改到2099年在暂停更新也可以
    vip券网 发布于 2 个月前(08月01日) 写的很详细,赞 :razz: :evil:
    萧瑟 发布于 2 个月前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
    梵蒂冈 发布于 2 个月前(07月08日) 士大夫
    标签
    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