🌸 自定义后台主题UI色
配色方案调整
- 原始配色：粉色系渐变
- 新配色：半透明黑色渐变灰白色
- 渐变方案：
- 黑色渐变：rgba(0, 0, 0, 0.7) → rgba(102, 102, 102, 0.8)
- 灰色渐变：rgba(245, 245, 245, 0.95) → rgba(208, 208, 208, 0.85)
CSS变量系统搭建
- 创建变量文件：
assets/css/admin/admin-shiroki.css - 定义变量类型：
- 粉色系：--shiroki-pink-light, --shiroki-pink-medium, --shiroki-pink-dark, --shiroki-pink-deep
- 灰色系：--shiroki-gray-light, --shiroki-gray-medium, --shiroki-gray-dark
- 黑色系：--shiroki-black-light, --shiroki-black-medium, --shiroki-black-dark
- 白色系：--shiroki-white
- 渐变定义：--shiroki-gradient-pink, --shiroki-gradient-gray, --shiroki-gradient-black等
- 阴影：--shiroki-shadow-pink, --shiroki-shadow-black
文件修改清单
变量文件
- 文件：
assets/css/admin/admin-shiroki.css - 功能：定义所有CSS变量，实现配色集中管理
后台样式文件
- 文件：
assets/css/admin-flat-rounded.css - 修改：
- 引入变量文件：@import url('admin/admin-shiroki.css');
- 替换所有硬编码颜色为CSS变量
- 调整顶部管理栏、侧边栏、按钮、表格等样式
- 同步媒体按钮区域与Markdown工具栏背景色
Markdown编辑器样式
- 文件：
assets/css/markdown-editor.css - 修改：
- 引入变量文件：@import url('admin/admin-shiroki.css');
- 替换所有硬编码颜色为CSS变量
- 调整工具栏、按钮、预览区域等样式
视觉一致性优化
- 同步区域：
- Markdown工具栏 (boxmoe-md-toolbar)
- 媒体按钮区域 (#wp-content-media-buttons)
- 短代码选择器 (boxmoe-md-shortcodes)
- 统一样式：使用相同的半透明灰色渐变背景
技术亮点
- 模块化：通过CSS变量实现配色集中管理
- 可维护性：修改配色只需更新变量文件
- 一致性：确保整个后台界面视觉统一
- 响应式：半透明渐变适配不同背景
🔠 修复编辑页面，工具栏滚动页面不固定问题
问题描述：
- 编辑页面的三个工具栏（添加媒体工具栏、MD语法工具栏、WordPress默认工具栏）在滚动页面时不固定在顶部
- 工具栏之间存在重叠问题，影响编辑体验
解决方案：
- 移除
.quicktags-toolbar和#ed_toolbar的overflow: hidden属性，使position: sticky生效 - 调整三个工具栏的
top值和z-index值，确保按正确顺序排列且不重叠 - 修复工具栏的层级关系，确保第二个工具栏（MD语法工具栏）不被第三个工具栏（WordPress默认工具栏）盖住
具体修改：
- 第一个工具栏（#wp-content-media-buttons）：
- position: sticky !important
- top: 0 !important
- z-index: 1003 !important
- 第二个工具栏（.boxmoe-md-toolbar）：
- position: sticky !important
- top: 48px !important
- z-index: 1002 !important
- 第三个工具栏（#ed_toolbar, .quicktags-toolbar）：
- position: sticky !important
- top: 144px !important
- z-index: 1001 !important
修复效果：
- 工具栏现在会正确固定在页面顶部，不随页面滚动而消失
- 三个工具栏按正确顺序排列，不会相互重叠
- 编辑体验得到改善，工具栏操作更加方便
技术原理：
- 使用
position: sticky使工具栏在滚动时固定在指定位置 - 通过设置不同的
top值确保工具栏垂直排列 - 使用不同的
z-index值确保工具栏按正确层级显示 - 移除
overflow: hidden属性，确保position: sticky能够正常工作
🏄🏻♀️ 优化搜索引擎抓取及文章封面和作者头像显示问题
🚀 优化文章导读按钮
功能概述
将原有的文章导读按钮升级为 SVG 圆形阅读进度指示器，并添加轮盘展开式菜单风格
主要改动
1. footer.php
- 将原来的
div按钮替换为 SVG 圆形进度指示器 - 添加 SVG 渐变定义（支持亮色/暗色模式切换）
- 新增 轮盘展开式菜单（包含「目录」「顶部」「底部」三个功能按钮）
- 保留并优化文章目录面板
2. style.css
- SVG 进度环样式：使用
stroke-dasharray和stroke-dashoffset实现进度动画效果 - 轮盘展开动画：使用
cubic-bezier(0.68, -0.55, 0.265, 1.55)缓动函数实现弹性展开效果 - 悬停效果优化：悬停时保持展开位置的同时轻微放大（scale 1.1）并改变背景色
- 暗色模式适配：支持
data-bs-theme="dark"自动切换配色 - 目录面板动画：优化打开/关闭时的透明度和缩放过渡效果
3. boxmoe.js
- 阅读进度计算：实时计算页面滚动百分比
- SVG 进度更新：根据滚动位置动态更新圆环进度
- 轮盘菜单交互：
- 点击主按钮展开/收起轮盘菜单
- 「目录」按钮打开文章导读面板
- 「顶部」按钮平滑滚动到页面顶部
- 「底部」按钮平滑滚动到页面底部
- 外部点击关闭：点击页面其他区域自动关闭所有菜单
交互流程
- 滚动页面超过 350px 时，左侧显示 SVG 圆形进度指示器
- 圆环随阅读进度实时填充，显示当前阅读百分比
- 鼠标悬停在按钮上时显示 百分比文字提示
- 点击进度按钮，轮盘菜单以弧形展开三个选项
- 悬停轮盘项时轻微放大并变色，保持位置不变
- 点击「目录」打开 文章导读面板，显示文章章节导航
- 点击外部区域自动关闭所有菜单
技术要点
- SVG 圆形进度计算：圆周长 = 2πr ≈ 276.46（r=44）
- stroke-dashoffset = 圆周长 - (进度百分比 × 圆周长)
- 轮盘展开使用 CSS transform 的 translate 实现弧形分布
- 暗色模式通过 CSS 变量和属性选择器实现自动切换
🛠️ 优化类型与对象
📌 优化背景
主题在 PHP 8.0 及以上版本运行时出现【未定义数组键】警告，需要进行兼容性修复以确保在 PHP 8 环境下稳定运行。
🔧 修复内容
| 文件路径 | 行号 | 问题描述 | 修复方案 |
|---|---|---|---|
| --------- | ------ | --------- | --------- |
core/panel/includes/class-options-framework-admin.php |
483 | 未定义数组键 boxmoe_msg_notice_info |
添加 isset($input[$id]) 检查 |
page/page-friendlink.php |
828 | $_GET['fl_type'] 未检查直接使用 |
添加 isset($_GET['fl_type']) 检查 |
core/module/fun-navwalker.php |
72-76 | $args 对象属性可能未定义 |
使用 null 合并运算符 ?? 确保属性存在 |
core/module/fun-admin.php |
601 | count() 对可能为 null 的变量使用 |
使用 !empty() 替代 count() |
core/panel/includes/class-options-media-uploader.php |
92 | 使用 sizeof()（非最优） |
使用 count() 替代 |
page/template/user-home.php |
73 | 使用已废弃的 global $user_ID |
使用 get_current_user_id() 替代 |
✨ 代码示例
// 🛡️ 修复前：直接访问可能不存在的数组键
$clean[$id] = $input[$id];
// 🛡️ 修复后：先检查键是否存在
if ( isset( $input[$id] ) ) {
$clean[$id] = $input[$id];
}
// 🛡️ 修复前：对象属性可能未定义
$item_output = $args->before;
// 🛡️ 修复后：使用 null 合并运算符
$item_output = $args->before ?? '';
📋 优化结果
- 消除 PHP 8 环境下的未定义数组键警告
- 提升代码健壮性和兼容性
- 主题完全支持 PHP 8.0 及以上版本
🚀 清理主题控制台日志输出
文件位置: assets/js/admin-toolbar-collapse.js · assets/js/shiroki-post-follow.js · page/p-signin.php · core/module/fun-role-manager.php · assets/js/boxmoe.js · core/module/fun-context-menu.php · assets/js/music-player/shiroki-music-error-handler.js
- 问题描述：主题代码中存在大量
console.log和console.warn调试日志，在浏览器控制台中输出过多信息，影响调试体验和性能 - 解决方案：
- 清理调试日志：移除所有 console.log 调试输出，包括登录/注册流程、AJAX请求、按钮点击等日志
- 清理错误警告：移除图片懒加载失败、登录状态检查失败、用户面板操作失败等 console.warn 输出
- 保留注释掉的日志：对于已注释掉的 // console.log 保持原样，便于后续开发调试
- 保留错误处理逻辑：仅删除日志输出语句，保留原有的错误处理和降级逻辑
- 涉及文件：
- admin-toolbar-collapse.js：移除 jQuery 检查失败日志
- shiroki-post-follow.js：移除订阅功能所有调试日志
- p-signin.php：移除登录/注册流程 15 处调试日志
- fun-role-manager.php：移除角色管理脚本加载日志
- boxmoe.js：移除 17 处 console.warn 日志（登录状态、图片加载、点赞收藏等）
- fun-context-menu.php：移除图片复制失败日志
- shiroki-music-error-handler.js：移除音乐播放器错误日志
- 效果说明：浏览器控制台不再输出主题相关的调试信息，保持控制台整洁，提升开发和用户体验
代码位置
- 工具栏折叠：
wp-content/themes/lolimeow-shiroki/assets/js/admin-toolbar-collapse.js - 文章订阅：
wp-content/themes/lolimeow-shiroki/assets/js/shiroki-post-follow.js - 登录页面：
wp-content/themes/lolimeow-shiroki/page/p-signin.php - 角色管理：
wp-content/themes/lolimeow-shiroki/core/module/fun-role-manager.php - 核心JS：
wp-content/themes/lolimeow-shiroki/assets/js/boxmoe.js - 右键菜单：
wp-content/themes/lolimeow-shiroki/core/module/fun-context-menu.php - 音乐播放器：
wp-content/themes/lolimeow-shiroki/assets/js/music-player/shiroki-music-error-handler.js
🖼️ 图片查看器移动端适配优化
文件位置: assets/css/image-viewer.css · assets/js/image-viewer.js
- 问题描述：图片查看器在移动端打开时，图片显示过大超出屏幕范围，且操作按钮和关闭按钮在移动端显示不合适
- 解决方案：
- 图片尺寸限制：为移动端添加 max-width:90vw 和 max-height:70vh，确保图片自适应屏幕
- 关闭按钮适配：缩小按钮尺寸（40px→36px→32px），调整位置更靠近边缘
- 操作按钮栏优化：添加 flex-wrap:wrap 支持换行，调整间距和字体大小
- 多断点适配：针对 985px、768px、480px 三个断点分别优化
- 效果说明：图片查看器在移动端现在能够正常显示，图片不会超出屏幕，操作按钮易于点击
代码位置
- 样式定义：
wp-content/themes/lolimeow-shiroki/assets/css/image-viewer.css - 交互逻辑：
wp-content/themes/lolimeow-shiroki/assets/js/image-viewer.js
🏮 节日灯笼字体同步站点默认字体
文件位置: assets/css/style.css
- 问题描述：节日灯笼的文字样式使用了硬编码的【黑体】字体，无法跟随站点字体设置统一变化
- 解决方案：将
.deng-t的font-family从硬编码的黑体,Arial,Lucida Grande,Tahoma,sans-serif修改为inherit - 效果说明：灯笼文字现在会继承
body的字体设置，而body字体由【字体设置】中的【站点默认字体】控制，实现了字体统一
修改内容
/* 修改前 */
.deng-t{font-family:黑体,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center}
/* 修改后 */
/* 🏮 节日灯笼文字样式 - 使用继承字体以同步站点默认字体设置 */
.deng-t{font-family:inherit;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center}
代码位置
- 样式定义：
wp-content/themes/lolimeow-shiroki/assets/css/style.css:4990
🐧 QQ邮箱头像显示修复
文件位置: core/module/fun-gravatar.php
- 问题描述：用户使用QQ邮箱注册后，头像显示的是默认头像而非QQ头像，原因是QQ头像API格式已更新，旧版API在某些情况下无法正常获取头像
- 解决方案：
- 更新QQ头像API格式：将旧的API格式 headimg_dl?dst_uin=QQ号&spec=尺寸 更新为新的API格式 g?b=qq&nk=QQ号&s=尺寸
- 新增专用函数：添加 boxmoe_get_qq_avatar_url() 函数专门处理QQ头像URL生成，支持动态尺寸调整（40/100/200/640）
- 增强邮箱检测逻辑：添加空值检查 !empty($email) 和 !empty($qq)，使用 stripos 进行不区分大小写的邮箱后缀检测
- 优化头像获取优先级：确保QQ头像优先级高于WordPress默认头像，直接返回QQ头像URL不再检查WordPress原生头像
- 效果说明：QQ邮箱注册用户现在能正确显示QQ头像，头像加载失败时自动回退到默认头像
代码位置
- 头像处理逻辑：
wp-content/themes/lolimeow-shiroki/core/module/fun-gravatar.php
📝 文章编辑器工具栏按钮优化
文件位置: assets/js/quicktags-shiroki-divider.js · assets/js/tinymce-shiroki-divider.js · core/module/fun-admin.php
- 功能描述：在文章编辑器的工具栏上新增【换行】按钮，并优化【分割线】按钮的插入格式，让插入的内容在编辑器中更加清晰易读
- 新增功能：
- 【换行】按钮：在 Quicktags 文本编辑器和 TinyMCE 可视化编辑器的工具栏上新增【换行】按钮
- 点击后在光标位置插入 换行符，前后自动添加换行，让换行符单独占一行显示
- 优化内容：
- 【分割线】按钮：修改插入格式，从 改为 \n\n，让分割线在编辑器中单独占一行
- 【换行】按钮：修改插入格式，从 改为 \n \n，让换行符在编辑器中单独占一行
- 实现方案：
- Quicktags 文本编辑器：在 quicktags-shiroki-divider.js 中动态创建按钮并添加到工具栏，支持 DOM 变化监听确保动态加载时也能生效
- TinyMCE 可视化编辑器：在 tinymce-shiroki-divider.js 中注册插件，通过 editor.ui.registry.addButton 添加按钮
- PHP 注册：在 fun-admin.php 中通过 mce_external_plugins 和 mce_buttons 过滤器注册插件和按钮
- 效果说明：编辑文章时，点击【换行】或【分割线】按钮，插入的内容会在编辑器中单独占一行显示，避免多个标签连在一起难以阅读的问题
代码位置
- Quicktags 脚本：
wp-content/themes/lolimeow-shiroki/assets/js/quicktags-shiroki-divider.js - TinyMCE 脚本：
wp-content/themes/lolimeow-shiroki/assets/js/tinymce-shiroki-divider.js - PHP 注册：
wp-content/themes/lolimeow-shiroki/core/module/fun-admin.php
🎬 文章编辑器全屏按钮位置优化
文件位置: assets/css/admin/admin-shiroki.css · core/module/fun-admin.php
- 问题描述：WordPress 后台文章编辑器的 TinyMCE 可视化编辑器中，【专注写作模式（全屏）】按钮位于工具栏第三行的最右侧，盖住了【H4标题】等工具按钮，影响正常使用
代码位置
- 样式定义：
wp-content/themes/lolimeow-shiroki/assets/css/admin/admin-shiroki.css - PHP 加载：
wp-content/themes/lolimeow-shiroki/core/module/fun-admin.php
🌓 主题切换按钮图标优化
文件位置: header.php · assets/css/style.css · assets/js/boxmoe.js
- 功能描述：优化导航栏主题切换按钮的图标显示逻辑，根据当前主题显示对应的切换目标图标，提升用户体验
- 优化内容：
- 图标显示逻辑调整：亮色模式显示月亮图标（提示可切换到暗色），暗色模式显示太阳图标（提示可切换到亮色）
- 太阳图标：带有旋转光芒动画的 SVG 图标，光芒持续旋转
- 月亮图标：带有星星闪烁动画的 SVG 图标，4颗星星循环渐显渐隐
- 实现方案：
- PHP模板：在 header.php 的主题切换按钮中添加两个 SVG 图标，分别使用 theme-icon-sun 和 theme-icon-moon 类名
- CSS样式：在 style.css 中添加图标显示控制样式，通过 [data-bs-theme] 属性选择器控制图标显示/隐藏
- JS功能：在 boxmoe.js 的 updateActiveState 函数中添加图标切换逻辑，根据当前主题动态设置 display 属性
- 效果说明：用户当前处于亮色模式时，按钮显示月亮图标提示可切换到暗色；处于暗色模式时，按钮显示太阳图标提示可切换到亮色，图标带有流畅的动画效果
代码位置
- 按钮模板：
wp-content/themes/lolimeow-shiroki/header.php - 样式定义：
wp-content/themes/lolimeow-shiroki/assets/css/style.css - JS功能：
wp-content/themes/lolimeow-shiroki/assets/js/boxmoe.js
📦 代码块折叠功能视觉优化
文件位置: assets/css/style.css · assets/js/code-block-collapse.js
- 问题描述：代码块折叠功能的视觉效果不够美观，展开/收起按钮样式单一，且展开后按钮位置不合理会盖住代码或显示在代码块外部
- 优化内容：
- ☀️ 亮色模式按钮样式：将原本的深色渐变改为白色高斯模糊渐变色，使用 linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)) 配合 backdrop-filter: blur(8px) 实现毛玻璃效果
- 🌆 暗色模式按钮样式：将原本的白色半透明改为灰色高斯模糊渐变色，使用 linear-gradient(to bottom, rgba(50, 50, 50, 0), rgba(50, 50, 50, 0.8)) 配合 backdrop-filter: blur(8px)
- 📖 展开状态按钮位置：优化展开后【收起代码】按钮的位置，使其显示在代码块底部中央，使用 :has(.code-block-expanded) 选择器为 wrapper 添加 padding-bottom: 45px 避免按钮盖住代码
- ✨ 悬停效果增强：悬停时增加模糊度到 blur(12px)，提升交互反馈
- 实现方案：
- CSS选择器优化：使用 .code-block-expanded ~ .code-block-collapse-toggle 控制展开状态下的按钮样式
- :has()伪类应用：使用 .code-block-collapse-wrapper:has(.code-block-expanded) 为包含展开代码块的容器添加底部内边距
- 渐变与模糊结合：通过 linear-gradient 和 backdrop-filter 组合实现美观的毛玻璃遮罩效果
- 效果说明：代码块折叠按钮现在拥有更美观的毛玻璃视觉效果，亮色模式下为白色渐变，暗色模式下为灰色渐变，展开后按钮显示在代码块底部中央且不会遮挡代码内容
代码位置
- 样式定义：
wp-content/themes/lolimeow-shiroki/assets/css/style.css:4869-4965 - JS功能：
wp-content/themes/lolimeow-shiroki/assets/js/code-block-collapse.js
📝 底部栏版权文本优化
文件位置: core/module/fun-basis.php
- 功能描述：将底部栏的 Copyright 文本改为中文【版权©】，使版权信息更符合中文网站展示习惯
- 修改内容：
- 原文本：'Copyright'
- 新文本：'版权©'
- 修改位置：第458行
- 实现方案：
- 在 boxmoe_footer() 函数中，修改底部版权信息的输出逻辑
- 当 boxmoe_footer_copyright_hidden 选项未开启时，显示【版权©】而不是【Copyright】
- 同时移除了重复的 © 符号，因为【版权©】已经包含了版权符号
- 代码变更：
/* 📝 修改前 */
<span><?php echo get_boxmoe('boxmoe_footer_copyright_hidden') ? '' : 'Copyright'; ?> © <?php echo date('Y'); ?> ...</span>
/* 📝 修改后 */
<span><?php echo get_boxmoe('boxmoe_footer_copyright_hidden') ? '' : '版权©'; ?> <?php echo date('Y'); ?> ...</span>
- 效果说明：底部栏版权信息现在显示为【版权© 2025 网站名称】，更加符合中文用户的阅读习惯
🎲 侧边栏随机文章小部件布局优化
文件位置: core/widgets/widget-random-posts.php、assets/css/style.css
- 问题描述：侧边栏随机文章小部件中，【阅读全文】链接与日期在同一行显示，导致布局拥挤且不够美观
- 修改内容：
- widget-random-posts.php 第55-67行：重构日期、摘要和阅读链接的HTML结构
- style.css 第2796-2799行：新增 .post-meta 容器样式和 .read-more 链接样式
- 实现方案：
- 将日期、摘要和【阅读全文】链接包裹在一个新的
感谢您的支持
微信扫一扫
支付宝扫一扫
评论（2）