【原创】爱情计时器WordPress插件介绍与使用说明

一个为 WordPress 打造的轻量爱情计时器小工具:把相识、相恋、结婚的日子放进侧边栏,让每一次打开都能看到“我们一起走过”的天数,精确到秒。

一、插件简介

爱情计时器(lyx-love-timer)是一个 WordPress 小工具插件。把它放到任意侧边栏后,会在侧栏显示一张精致的计时卡片:左右头像 + 中间小动画,下方实时显示从开始日期至今的天数、时、分、秒,逐秒跳动。

插件采用全站一份配置的设计:所有内容和样式都在独立的设置页里调整,放到多个侧边栏也完全同步,换主题、搬家都不用重新设置。

环境要求:WordPress 5.0+ / PHP 7.0+

二、功能特色

1. 实时计时,精确到秒

卡片上的天、时、分、秒每秒刷新一次,且脚本内部做了优化——数值没变时不会重复操作 DOM,省电省资源。

2. 全站统一配置

小工具面板本身不提供任何输入项,只保留一个“前往设置”入口。所有侧边栏、所有主题都共用同一份配置,避免同一个插件在不同侧边栏显示不一样。

3. 实时预览设置页

设置页右侧就是实时预览卡片:改颜色、拖滑块、换图片,左边动手、右边立刻见效,不需要保存即可看到效果。确认满意后再点“保存更改”。

4. 高度自定义的外观

  • 背景:渐变色可自由更换起止色,也可以换成背景图,并能调整渐变蒙版的浓淡;
  • 内层时间卡:背景色、不透明度(0 为完全隐形)、圆角、阴影深浅、毛玻璃效果均可独立设置;
  • 四组数字分色:天 / 时 / 分 / 秒可以分别指定颜色;
  • 圆角:支持自定义数值,也可以选择“跟随主题圆角”,与主题风格融为一体。

5. 细节体验

  • 时区统一:开始时间按站点时区在服务端换算,不同时区的访客看到的天数完全一致,不会差一天;
  • 夜间模式:自动跟随系统深色模式,卡片切换为深色玻璃质感,无需手动设置;
  • 自适应字号:数字字号随卡片宽度缩放,窄侧栏不会溢出,宽侧栏更大气;
  • 动效克制:中间图片有轻微的呼吸动画,并且尊重系统的“减弱动态效果”设置;
  • 状态兜底:开始日期无效时显示“尚未开始”,JS 未加载时显示“加载中...”,不会留下空白。

6. 性能与兼容

  • 只有侧边栏真的放置了小工具,页面才会加载对应的 CSS/JS,不拖慢其他页面;
  • 脚本注册在页脚加载;即使用主题用 the_widget() 直接调用、错过了样式打印时机,也有页脚兜底补输出;
  • 兼容 WordPress 自定义器(Customizer)的局部刷新,改设置时计时器会重新初始化,且不会产生重复的定时器;
  • 卸载插件时才删除配置数据,停用不会丢设置。

7. 配置备份与迁移

设置页支持把全部 26 项配置一键导出 / 导入为 JSON 文件:既能本地备份,也能把配置原样搬到另一个站点,免去逐项重设的麻烦(详见下文“五、配置备份与迁移”)。

三、安装方式

方式一:后台上传(推荐)

  1. 下载插件 zip 包;
  2. 进入 WordPress 后台 → 插件 → 安装插件 → 上传插件;
  3. 选择下载的 zip 文件,点击“现在安装”;
  4. 安装完成后点击“启用插件”。

方式二:FTP 上传

  1. 解压插件 zip 包,得到 lyx-love-timer 文件夹;
  2. 将文件夹上传到站点的 /wp-content/plugins/ 目录;
  3. 回到后台 插件 列表,找到“蓝逸轩爱情计时器”并启用。

四、使用步骤

第 1 步:放置小工具

进入 外观 → 小工具,在列表中找到“蓝逸轩爱情计时器”,拖入(或添加)到你希望显示的侧边栏。放置一次即可,可以同时放在多个侧边栏,效果完全相同。

也支持在 外观 → 自定义 → 小工具 中放置,实时定制器里同样可以直接看到效果。

第 2 步:打开设置页

两种入口任选其一:

  • 后台左侧菜单的 爱情计时器(时钟图标);
  • 小工具面板里的 前往设置 按钮。

第 3 步:逐项配置

设置页分四个标签页,右侧实时预览同步生效:

标签页 可配置内容
基础 标题(留空则不显示)、徽标文字(卡片内“一起走过”)、开始日期(精确到时分秒,只填日期则按当天 0 点计算)
图片 左侧头像、右侧头像、中间图片、背景图(支持媒体库选图或直接填地址)、背景图叠加不透明度
卡片外观 边框圆角(自定义/跟随主题)、内层时间卡圆角、内层背景色与不透明度、内层阴影开关与深浅、内层毛玻璃开关
颜色 卡片背景渐变开关、渐变起始色/结束色、文字颜色、天/时/分/秒四组数字的颜色

设置页顶部标签栏的右侧,还常驻着 导出配置 / 导入配置 / 重置为默认 三个按钮,方便备份、迁移与还原(见下一节)。

第 4 步:保存并查看效果

点击“保存更改”后,访问网站前台即可看到计时卡片。如果站点开启了页面缓存或 CDN,记得清一次缓存再刷新。

设置页底部的 重置为默认 按钮,可将全部 26 项配置一键恢复为插件默认值(无法撤销,慎用)。

五、配置备份与迁移(导入 / 导出)

设置页右上角标签栏的右侧,除了“重置为默认”,还有两个配置管理按钮,是本插件最容易被忽略、却非常实用的功能:

  • 导出配置:把当前全部 26 项设置导出成一个 JSON 文件下载到本地。文件里带有插件版本信息,既可以用来备份,也可以迁移到另一个站点——在新站点装好插件、导入这个文件即可,免去逐项重新设置的麻烦。
  • 导入配置:选择一个本插件导出的 JSON 文件,确认后自动导入并覆盖当前全部设置。导入时所有值都会经过安全清洗,无法识别的字段会被自动忽略;若文件不是本插件导出的配置(或体积异常),会被直接拒绝,不会污染现有设置。

导入会覆盖网站上的现有配置,且无法撤销。正式导入前,建议先用“导出配置”备份一份,万一不满意还能导回来。

六、设置建议与小贴士

  1. 头像用正方形:左右两个头像会显示为圆形,建议上传正方形图片,变形最小;中间图片建议用小尺寸 GIF 或 PNG。
  2. 内层不透明度为 0:会让内层时间卡彻底隐形(背景、描边、阴影、毛玻璃全部去掉),适合把数字直接放在渐变背景上。
  3. 毛玻璃效果:观感很好,但低端安卓设备可能掉帧,默认建议保持关闭,追求视觉效果再开启。
  4. “跟随主题圆角”:选择后卡片圆角与主题小工具卡片自动保持一致;自定义圆角则可精确控制弧度(0–100)。
  5. 背景图与渐变可叠加:背景图和渐变背景可以同时开启——开启背景图后,渐变会以可调的浓淡(叠加不透明度)叠在照片之上,既能保留照片,又能保证文字清晰。
  6. 换主题/搬家:配置存在数据库选项里,与小工具实例无关,换主题后无需重新配置;换服务器时,用“导出 / 导入”即可把配置一并带走。
  7. 多个侧边栏:同一份配置全站共用,无需分别设置。

七、常见问题(FAQ)

Q:小工具面板里为什么不能填内容?

A:插件采用全站一份配置的设计,所有内容都在独立设置页里管理,避免多个侧边栏配置不一致。小工具面板只保留一个“前往设置”的入口。

Q:开始日期可以精确到时分秒吗?

A:可以。设置项是日期时间选择器,精确到秒;只填日期时按当天 0 点计算。

Q:不同时区的访客看到的天数会不一样吗?

A:不会。开始时间在服务端按站点时区换算成 UTC 时间戳再输出,全站口径一致。

Q:不想要背景渐变/背景图可以吗?

A:可以。关闭渐变后卡片完全透明,露出主题卡片本身的背景;背景图默认也是关闭的。

Q:会拖慢网站吗?

A:不会。只有当侧边栏真的放置了小工具时才会加载样式和脚本,且脚本位于页脚、做了 DOM 更新优化。

Q:支持手机端吗?

A:支持。移动端有专门的间距与头像尺寸适配,数字字号也会随卡片宽度自动缩放。

Q:能把配置迁移到另一个网站吗?

A:可以。在旧站点用“导出配置”下载 JSON,到新站点装好插件后用“导入配置”上传该文件,全部 26 项设置一次性到位。

Q:导入配置会覆盖现有设置吗?

A:会,导入将覆盖当前全部设置且无法撤销。建议导入前先用“导出配置”备份,方便回滚。

Q:卸载插件会丢数据吗?

A:停用不会丢失任何设置;只有卸载(删除)插件时才会清理配置数据。

八、下载地址

蓝奏云
来源:蓝奏云 | 提取码: llov
立即下载

如果你在使用中遇到问题或有功能建议,欢迎在网站留言反馈,也欢迎把插件分享给需要的人。

上一篇 如何确认我的DNS提供商是谁?
目录
蓝逸轩

蓝逸轩管理员

这个人很懒,什么都没有留下。

本月创作热力图

少
多