笨猫博客

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

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

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

    最新 热点 随机
    最新 热点 随机
    NodeWarden -云端备份、大附件处理、直传链路 和 网页端密码库体验 it-toolbox开发者工具箱 — 72 款实用工具,基于 Cloudflare Pages Functions 全栈部署 OpenClaw图形化一键安装/卸载工具吧 Telegram 创建 bot 获取 token 和 chatId 以及发送消息最新教程 AcePanel(原耗子面板)3.0 正式发布 Docker 自托管 Shlink 短链服务
    it-toolbox开发者工具箱 — 72 款实用工具,基于 Cloudflare Pages Functions 全栈部署NodeWarden -云端备份、大附件处理、直传链路 和 网页端密码库体验
    给WordPress 添加分类图标 Favicon.CC:在线制作Favicon图标 人人网密码下载 猫扑网密码下载 QQ开放群共享文件功能体验 加州旅馆 所见即所得web编辑器推荐
    最近评论
    09君 发布于 1 个月前(03月13日) 来访。给你点赞了,工具很不错。很难绷不住的是,全民普及还没到一个月,就开始全民卸载了。
    芝雩 发布于 2 个月前(02月28日) 您好,请问下为什么我搭建的ghost,他的后台配置页面是纯英文的,ghostCLI 是20.20.0...
    C 发布于 2 个月前(02月06日) 早就听说这个面板了,竟然是你开发的,厉害啊
    提拉米苏 发布于 3 个月前(01月18日) App首页会崩溃
    vioulo 发布于 3 个月前(01月07日) 之前以为 fcitx5 只能再 linux 上用来的 :smile:
    标签
    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