早在20年之前就想更新这个主题了,毕竟这主题2012年就出了,老毛病不少,之前断断续续修复过很多问题,颇为耗费心神,后续就搁置了。这段时间正好空闲,突然想起来了,就借此机会对主题进行了全面修复,增加了一些功能,优化了大量js,现在前后端加载速度飞快(第一次访问的朋友加载慢是因为博客图片没有做压缩,刷新后就可以纵享丝滑了),各位自由体验吧~
Travel 主题修复与更新总结
本文记录 old.imlol.cn 所用 Travel 主题近期的一轮系统性修复与功能扩充。所有能力全部内置到主题,全站零插件依赖(主题共 421 个文件),版本从 1.6.5 一路更新到 1.8.9。按「内置能力 / 新增功能 / 问题修复」三类分别记录,方便日后维护,也给同样在收拾老主题的朋友一个参考。
一、内置能力(零插件)
1. SMTP 邮件发送
WordPress 自带的 mail() 发信不稳定,主题内置了完整的 SMTP 配置:
- 后台「主题设置 → 邮件配置」填写服务器信息即可,全站所有
wp_mail()(评论提醒、密码重置、审核通知)统一走 SMTP; - 默认关闭:没配置时保持 WP 默认发信行为,不会因为误配让全站邮件挂掉;
- 发件人兜底链:发件人邮箱 → SMTP 账号 →
wordpress@域名,从机制上杜绝MAIL FROM为空; - 「测试 SMTP 连接」按钮:先做端口连通性预检,失败时可展开完整 SMTP 会话日志,排查不用猜;
- 已实测 QQ 邮箱(smt.qq.com:465/SSL)发信成功。
2. 评论回复邮件提醒
- 双钩子触发:评论审核通过立即发;「先审后发」场景在状态变更时补发;
- 评论表单新增「有人回复此评论时,邮件通知我」勾选(默认勾选);
- 退订链接按评论粒度 token 校验,不打扰已退订的访客;
- 邮件模板三段式:页眉 / 正文 / 页脚均可自定义,留空用内置模板;
- 「发送测试邮件」按钮一键验证,失败时返回真实根因 + 排查建议 + 会话日志。
3. 头像系统
- 弃用 Gravatar(国内访问不稳定),改用自有头像库(165 张,OSS 托管);
- 同一邮箱 / 昵称恒定映射同一张头像(md5 稳定取模),不是每次刷新乱换;
- OSS 图片处理实时压缩,单张 1~3KB,评论列表几十个头像也不心疼流量。
4. 后台中文化与体验
- 主题设置 80+ 选项标签、后台模板 80+ 处文案全部汉化;
- 清除了已关停的 Google+ 全部残留(死链 + 图标);
- 「邮件配置」区 Tab 化:评论通知 / SMTP 两个面板顶部切换,带 hash 记忆;
- 密码类选项永不回填前端,以「● 已保存」标记区分状态。
二、新增功能
1. 评论区头衔标签 + 友链标签
- 按历史评论数评级:洪荒修真 12 级(炼气期 → 筑基期 → …… → 圣人),1 条起评,每 5 条升一档(步进后台可调),12 级各有配色;
- 评论数按「昵称或邮箱」并集统计(本站评论是历史导入的,假邮箱每人一条,只按邮箱会全员 1 条);
- 评论者填写的网站与后台「链接」中某条域名一致(忽略 www.)时,头衔后额外显示「友链」标识。
2. 留言板访客榜
- 前三名领奖台:第一名居中放大,金 / 银 / 铜徽章 + 成就昵称(复用头衔体系)+ 昵称 + 评论数,移动端冠军自动置顶;
- 评论数降序列表,默认前 24 名(后台 1–100 可调);
- 分割线 + 近期访客,默认前 24 名(后台可调);
- 全部单请求聚合(一次 SQL + PHP 并组),不拖慢页面。
3. 说说页面(动态)
- 自定义文章类型 + 页面模板,后台独立菜单发布碎片化内容;
- 时间线卡片 + 人性化时间(「x 小时前」);
- AJAX 点赞:登录用户按用户 ID 去重,游客按 IP + 浏览器指纹去重,再点一次自动取消;
- 点赞后邮件通知站长(后台可开关,默认开):三段式 HTML 邮件带摘要、点赞时间和当前赞数,取消点赞不打扰;
- 分页、空态齐备;AJAX 过渡(从其他页面点进来)点赞、分页全部正常。
4. 一言(Hitokoto)模块
- 说说页横幅主标题可切换为随机一言,每次刷新 / 站内跳转都换一句(实时取自一言官网 API);
- 句子下方标注出处(作者《作品》),上方小标签显示分类(动画 / 诗词 / 网络……);
- 后台一个开关控制,关闭时显示原来的固定内容;接口失败自动回退,页面永不裸奔。
5. 横幅特色图片背景
- 说说页横幅背景改为引用当前页面的特色图片,叠一层暗色渐变保证白字在任何图片上都可读;
- 换背景只需在后台更换页面的特色图片,不用碰代码;未设置图片时回退原配色。
6. 友链页面
- 重新启用 WP 内置「链接」功能,友链直接在后台管理(名称 / 地址 / logo / 描述);
- 三列卡片网格,移动端自动单列;
- 关系标签:自动探测对方是否回链(「好友 / 友邻 / 互链 / 故交 / 相知」),单方面收录的(「远望 / 未识 / 途经 / 素未 / 他乡」),也可后台手动指定;
- 性别标签(后台数据源,内联 SVG 图标);
- 底部「友链最新动态」:自动发现各站 RSS(手填 / 路径探测 / 首页
link标签三级发现),两列瀑布流,单站失败不塌版,抓取走 WP-Cron,页面请求零外网等待。
7. 国内分享平台
- 新增微博 / QQ / QQ 空间 / 豆瓣 / 微信 / YouTube,加上原有的 Facebook / Twitter / Pinterest 与「复制链接」共 10 个平台;
- 微信无网页分享接口,走「复制链接 + 提示」;YouTube 无分享接口,跳转频道主页或按标题搜索;
- 顺序支持后台拖拽调整(复制链接默认垫底);
- 按钮背景 / 图标颜色可自定义,留空沿用各平台品牌色。
8. 文章页右侧快速导航
- 标准格式文章页右侧垂直居中「回顶 / 跳转评论」一对图标,仅标准文章显示(音乐 / 视频 / 相册格式不显示),AJAX 换页后自动重新就位。
9. 首页置顶标识
- 置顶文章的标题旁增加一枚「置顶」小徽章(橙底白字),自动排在内容类型图标左侧,间距经过像素级调整;
- 置顶文章浮顶到首页第一页最前——主题原本靠 WP 原生置顶逻辑,被
query_posts替换主查询后悄悄失效了,这次显式重写:先查置顶篇、主查询排除、循环前优先渲染,顺序按后台置顶排列; - 三个移动断点(768–959 / 480–767 / 320–479)全部适配,徽章在右对齐标题场景下改为右浮动块,标题文字绕开它,任何字号 / 屏宽都不会压字。
10. 全站弹窗
- 首次到访的读者在页面加载完成后延迟 1–5 秒(后台可设,默认 3 秒)看到弹窗,适合放公告、活动提示;
- 弹窗内容后台自定义编辑,文本框支持 HTML(图片、链接、加粗都能放),留空则不弹;
- 弹出次数按访客可控(1–10 次):计数存在访客浏览器本地,达到上限彻底不再打扰——不写数据库、不发请求;
- 底部跳转按钮文字可自定义,可整体开关;链接留空或填
#时,点击只关不跳; - 显示位置三种模式:Entire Site 全站 / Pages 指定页面 ID 白名单 / Not 排除页面黑名单;
- 关闭支持 × / 点遮罩 / ESC 三种方式,弹出时锁定背景滚动;容器挂在页面最外层,AJAX 换页不受影响;
- 脚本条件加载,只有会弹出的请求才输出,不拖慢其他页面;
- 全部资源使用独立命名空间
ux-site-popup(脚本句柄 / DOM id / CSS 类名),与主题既有组件零命名冲突,访客计数存储 key 保持不变,升级无感。
三、问题修复
| # | 问题 | 根因 | 修复 |
| 1 | 后台主题设置页打不开(Fatal error) | PHP 8 下 count(null) 直接 TypeError(老主题 MLU 模块通病) |
空值守卫 + 全站扫描同类模式 |
| 2 | 文章页评论区结构错位、嵌套混乱 | wp_list_comments 的 style=div 与主题自定义回调不匹配,<li> 从不闭合 |
改 ul style + 补评论 id 锚点 |
| 3 | 背景幻灯片保存后不生效 | current_user_can('edit_post') 漏传文章 ID,meta cap 无法映射,整个 metabox 静默保存失败 |
补 object 参数 |
| 4 | 音乐格式文章页 500 | 主题遗留的废弃注释代码在 PHP 8 下被当作裸标识符解析 | 删除并用 HTML5 <audio> 重写播放器 |
| 5 | 评论正文刷新后消失 | single.php 遗留一行 JS 把全部评论正文 fadeOut 掉 |
删除该行(此前一直被另一个 bug 掩盖) |
| 6 | 后台中文 Tab 打开后设置项空白 | tab 锚点 id 由标题生成,剔除非法字符的正则把中文抹成空字符串,5 个 tab id 全部冲突 | 空 id 用计数器兜底 |
| 7 | SMTP 报 502 MAIL FROM:<> |
选项 id 连字符 / 下划线不一致(smtp-from-email vs smtp-from_email),From 永远读不到 |
统一拼写 + 发件人兜底链 |
| 8 | 发送测试邮件只报 wp_mail returned false |
wp_mail() 失败只返回 false,PHPMailer 真实报错被吞 |
采集 mailer 实例 + 会话日志,返回根因 + hint |
| 9 | 评论打字礼花特效从首页点进文章不生效 | AJAX 过渡不重新执行整页脚本,特效脚本从未被加载 | 事件委托重写 + 纳入场景资源补载框架 |
| 10 | 说说页分页 404 | redirect_canonical 把 ?paged= 301 到不存在的 /page/N/ |
显式分页格式 + 模板级移除 canonical |
| 11 | 后台极卡 | 头像抓取挂在 shutdown,每次请求结束都跑外网,最坏 200s 占满 PHP-FPM worker | 排除后台 / Cron / REST / AJAX + 频率锁 + 镜像重排 + 失败冷却 |
| 12 | 首页一直转圈不肯显示 | 入场遮罩等页面全部图片(某篇 97 张)加载完才移除 | 0.8s 超时兜底必定入场 |
| 13 | 背景轮播只出现在中间内容带 | position:fixed 被祖先 transform 创建包含块 |
#bgslider 移到 body 下 |
| 14 | 右侧导航首次进入不显示、关闭后不消失 | 同上包含块问题 + 场景切换后状态被重置 | 节点 detach 到 body + sync 加场景校验 |
| 15 | 站点 logo 是 http://,每页混合内容报警 |
HTTP→HTTPS 迁移遗留 | 更新选项为 https |
| 16 | PHP 报错直接打进页面、泄露服务器路径 | wp-config.php 只有 WP_DEBUG=false,未关 WP_DEBUG_DISPLAY(核心默认 true) |
建议补一行 define('WP_DEBUG_DISPLAY', false) |
| 17 | 后台 console 一片红:$(...).live is not a function |
jQuery 1.9 起移除 .live()/.die()/.size(),WP 7 的 jQuery 3.x + migrate 不再兜底 |
8 个文件 25 处迁移为事件委托 / .length |
| 18 | 页面资源臃肿 | 每页固定 12+ JS、9 CSS;include_custom_style.php 作为独立请求二次引导整个 WP |
条件加载(友链页 9JS+8CSS → 3+6)+ 自定义 CSS 改内联 |
| 19 | 移动端置顶标识压住标题文字 | 徽章绝对定位在标题左端,右对齐标题场景下与文字重叠 | 改右浮动块排在类型图标左侧,文字绕开;间距用 min-width 补偿(用 width 会被媒体查询压制) |
| 20 | 文章内代码横向撑出页面,移动端整页能拖出 910px | pre 只有一条背景色规则,没有 overflow-x,内部 code 长行不换行直接撑破容器 |
pre 加横向滚动 + 内边距 / 边框 / 等宽字体,行内 code 浅灰底可断行,正文补长串断行兜底 |
| 21 | 窄屏文章页整页能横向拖动 2px | 关闭按钮的装饰三角是 60px 方块旋转 135° 做的,旋转后包围盒超出视口 | #wrap 加 overflow-x:clip,只裁越界部分,桌面端视觉零变化 |
| 22 | 文章内表格移动端溢出、内容不换行 | 主题对正文表格只有 reset 没有内容样式,auto 布局下行内代码长串(current_user_can('edit_post') 等)断不了行,把整表撑出屏幕 |
固定列宽 + 单元格 overflow-wrap:anywhere、代码 word-break:break-all,顺带补边框与表头底色 |
四、版本记录
| 版本 | 主要内容 |
| 1.6.6 | 移除 Google 外链依赖、Web 字体本地化、title-tag 现代化 |
| 1.6.8 | 后台全面汉化、国内分享平台上线 |
| 1.6.9 | 文章页右侧快速导航 |
| 1.7.0 | 分享按钮配色自定义、豆瓣 / YouTube 平台 |
| 1.7.1 | 友链页面(后台链接管理 + 三列卡片) |
| 1.7.3 | 背景轮播修复、三列布局修正、友链最新动态 |
| 1.7.4 | 友链关系 / 性别标签 |
| 1.7.5 | 评论区头衔标签 + 友链标签 |
| 1.7.6 | 留言板访客榜(领奖台 + 排行榜 + 近期访客) |
| 1.7.7 | 说说页面(时间线 + 点赞) |
| 1.7.8 | 一言(Hitokoto)模块 |
| 1.7.9 | 横幅特色图片背景 |
| 1.8.0 | 首页置顶标识 + 置顶文章浮顶 |
| 1.8.1 | 说说点赞邮件通知;置顶标识与内容类型图标间距 |
| 1.8.2 | 修复移动端置顶标识压字(右浮动块方案) |
| 1.8.5 | 文章内代码块显示优化(横向滚动,不再撑破页面) |
| 1.8.6 | 修复关闭按钮装饰三角导致的整页横向拖动 |
| 1.8.7 | 全站弹窗(延迟弹出 + HTML 内容 + 次数控制 + 位置规则) |
| 1.8.8 | 文章内表格响应式修复(固定列宽 + 长串换行,移动端不再溢出) |
| 1.8.9 | 全站弹窗命名空间重构(ux-popup → ux-site-popup,消除与主题既有组件的潜在命名冲突,行为与外观不变) |
五、后记
这轮改造的核心思路是「能内置就不装插件」:邮件、头像、分享、友链、说说全部收进主题,后台统一管理。老主题的问题有个特点—— Bug 经常互相掩盖(评论正文消失被输出截断掩盖、SMTP 502 被 535 认证失败掩盖),所以每轮修完都做全页面回归,而不是只验证修复点。
后半段的重心移到了移动端细节:置顶标识、代码块、装饰三角、正文表格,单看都是几个像素的事,叠加起来就是「这站怎么总能横着拖」的观感。现在的习惯是每个改动都用无头 Chrome 按真实视口宽(320 / 375 / 390 / 414 / 460 / 499 / 1440)逐一量过再上线——截图工具的窗口宽度会骗人,布局视口和图片宽度必须严格一致,测出来的数才算数。
最新补的两个功能也延续同一思路:全站弹窗把「打扰」做成可度量的事(延迟几秒、弹几次、在哪弹,全部后台可调),表格修复则再次验证了那套像素级流程——四列表在 390px 下被一行代码长串撑破的故事,和代码块那次如出一辙。之后的 1.8.9 做了一次命名空间重构:弹窗的脚本句柄、DOM id、CSS 类名从 ux-popup 统一改为 ux-site-popup,与主题里同名风格的旧组件彻底分开——行为零变化,但以后再改任何一边都不会误伤另一边。
主题仍在持续打磨,下次更新见。











不懂原理。但是我在评论时,整个框都跟着抖动。动态背景图挺有趣的,不过透明度不高,大部分挡住啦。但透明度高,文字会不会就不是重点呢?其他技术问题咱也不懂
抖动是评论特效的,应该是值大了一点,我调整一下,阅读体验的话我再优化优化
各位发现bug和错误,欢迎反馈