标签样式美化插件 (Tag Style)

预计阅读 6 分钟
版本: 2.0 作者: 小武 网站: https://1z345.cn Requires: WordPress 5.0+ Tested: WordPress 6.x

简介

标签样式美化插件是一款专为 WordPress 网站设计的标签样式增强工具。它可以为网站全局的标签添加美观的视觉效果,提供 12 种预设样式选择,支持自定义颜色、动画效果和深色模式适配。

功能特性

12 种预设样式

样式
名称
特点
style-1
紫色渐变
优雅的紫蓝渐变
style-2
蓝绿渐变
清新的青绿渐变
style-3
红色渐变 ⭐推荐
热情的粉红渐变
style-4
粉紫渐变
柔和的暖色渐变
style-5
简约白底
简洁的白底蓝字
style-6
边框描边
透明的边框效果
style-7
霓虹灯效果
科技感发光效果
style-8
糖果风格
圆角糖果色
style-9
毛玻璃效果
现代毛玻璃风格
style-10
3D 立体
立体感阴影
style-11
彩虹动画
动态彩虹渐变
style-12
暗影风格
深色简约风格

核心功能

  • 可视化预览 – 后台直接预览每种样式效果
  • 自定义颜色 – 自定义背景色、文字色、悬停颜色
  • 动画控制 – 悬停动画开关 + 4档速度调节
  • 尺寸调节 – 字体大小、内边距、圆角独立设置
  • 深色模式 – 自动适配暗色主题网站
  • 加载控制 – 可选择全站/仅文章页/仅归档页加载

支持的标签位置

  • 文章标签云 (`tag-cloud-link`)
  • 侧边栏标签组件 (`.zib-widget .tags`)
  • 文章底部标签 (`.post-tags`, `article .tags`)
  • 标签归档页面 (`.tag-list`)
  • 古腾堡编辑器标签云区块 (`.wp-block-tag-cloud`)

安装

方法一:WordPress 后台上传

  1. 下载插件压缩包
  2. 进入 插件 → 安装插件 → 上传插件
  3. 选择 ZIP 文件并安装
  4. 启用插件

方法二:FTP/SFTP 上传

  1. 解压插件压缩包
  2. 上传 `tag-style` 文件夹到 `/wp-content/plugins/`
  3. 进入 WordPress 后台 插件 页面启用

使用说明

1. 基本设置

  1. 登录 WordPress 后台
  2. 进入 设置 → 标签样式
  3. 选择喜欢的预设样式
  4. 点击「保存设置」

2. 自定义调整

在设置页面可以调整以下参数:
参数
说明
默认值
字体大小
标签文字大小
12px
水平内边距
左右间距
12px
垂直内边距
上下间距
4px
圆角
边框圆角弧度
4px
动画速度
悬停动画时长
0.3s

3. 性能优化

通过「加载位置」选项可以限制样式加载范围:
  • 全站加载 – 所有页面加载样式(默认)
  • 仅文章页 – 仅在文章/页面加载
  • 仅归档页 – 仅在分类/标签归档页加载

常见问题

Q: 样式没有生效?

  1. 检查插件是否已启用
  2. 清除浏览器缓存
  3. 确认目标元素有对应的 CSS 选择器
  4. 检查是否有其他插件覆盖了样式

Q: 如何修改单个标签颜色?

目前版本暂不支持单个标签自定义颜色,这是全局样式设置。

Q: 深色模式不生效?

确保你的主题使用了 `prefers-color-scheme: dark` 或添加了 `.dark-mode` / `.night-mode` 类。

更新日志

v2.0 (2024-01-01)

  • 重构代码架构,效率提升 80%
  • 新增 4 种样式(毛玻璃、3D、彩虹动画、暗影)
  • 添加自定义颜色功能
  • 添加动画速度和尺寸调节
  • 支持深色模式自动适配
  • 支持按页面类型加载优化性能
  • 重构 Settings API 后台界面
  • 添加国际化支持

v1.0 (2023)

  • 初始版本
  • 8 种预设样式
  • 基础后台设置

目录结构

tag-style/ ├── tag-style.php # 主插件文件 ├── languages/ # 语言文件目录 │ └── tag-style-zh_CN.po # 中文语言包 └── README.md # 说明文档

技术实现

  • 使用 WordPress Settings API 确保安全性
  • 通过 `wp_add_inline_style()` 优化样式加载
  • 完整的数据验证和清理
  • 插件激活时自动初始化选项

许可证

本插件采用 GPL v2 or later 许可证。

联系与支持

  • 网站: https://1z345.cn
  • 问题反馈: 请在网站留言

Made with ❤️ by 小武
© 版权声明
THE END
喜欢就支持一下吧
点赞8340支持作者 分享
评论标题 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容