🔠 修复编辑页面,工具栏滚动页面不固定问题
问题描述:
- 编辑页面的三个工具栏(添加媒体工具栏、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 及以上版本

评论(2)