0%
boxmoe_header_banner_img

加载中

「盒子萌Lolimeow」主题二创「纸鸢版🕊️更新」与「🗼开发笔记」


avatar
白木 2025年8月27日 2026年2月13日 1.62k

🔠 修复编辑页面,工具栏滚动页面不固定问题

问题描述

  • 编辑页面的三个工具栏(添加媒体工具栏、MD语法工具栏、WordPress默认工具栏)在滚动页面时不固定在顶部
  • 工具栏之间存在重叠问题,影响编辑体验

解决方案

  • 移除 .quicktags-toolbar#ed_toolbaroverflow: hidden 属性,使 position: sticky 生效
  • 调整三个工具栏的 top 值和 z-index 值,确保按正确顺序排列且不重叠
  • 修复工具栏的层级关系,确保第二个工具栏(MD语法工具栏)不被第三个工具栏(WordPress默认工具栏)盖住

具体修改

  1. 第一个工具栏(#wp-content-media-buttons)

- position: sticky !important
- top: 0 !important
- z-index: 1003 !important

  1. 第二个工具栏(.boxmoe-md-toolbar)

- position: sticky !important
- top: 48px !important
- z-index: 1002 !important

  1. 第三个工具栏(#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-dasharraystroke-dashoffset 实现进度动画效果
  • 轮盘展开动画:使用 cubic-bezier(0.68, -0.55, 0.265, 1.55) 缓动函数实现弹性展开效果
  • 悬停效果优化:悬停时保持展开位置的同时轻微放大(scale 1.1)并改变背景色
  • 暗色模式适配:支持 data-bs-theme="dark" 自动切换配色
  • 目录面板动画:优化打开/关闭时的透明度和缩放过渡效果
3. boxmoe.js
  • 阅读进度计算:实时计算页面滚动百分比
  • SVG 进度更新:根据滚动位置动态更新圆环进度
  • 轮盘菜单交互

- 点击主按钮展开/收起轮盘菜单
- 「目录」按钮打开文章导读面板
- 「顶部」按钮平滑滚动到页面顶部
- 「底部」按钮平滑滚动到页面底部

  • 外部点击关闭:点击页面其他区域自动关闭所有菜单

交互流程

  1. 滚动页面超过 350px 时,左侧显示 SVG 圆形进度指示器
  2. 圆环随阅读进度实时填充,显示当前阅读百分比
  3. 鼠标悬停在按钮上时显示 百分比文字提示
  4. 点击进度按钮,轮盘菜单以弧形展开三个选项
  5. 悬停轮盘项时轻微放大并变色,保持位置不变
  6. 点击「目录」打开 文章导读面板,显示文章章节导航
  7. 点击外部区域自动关闭所有菜单

技术要点

  • 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)

查看评论列表
评论头像
小笨蛋 2026年01月13日
赞!
评论头像
小笨蛋 2026年01月13日
不错不错ツ

发表评论

表情 颜文字
插入代码

北京时间 (Asia/Shanghai)

后退
前进
刷新
复制
粘贴
全选
删除
返回首页
0%
目录
顶部
底部
📖 文章导读