0%
boxmoe_header_banner_img

加载中

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


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

🆔 后台分类目录显示分类ID

文件位置: core/module/fun-admin.php

  • 功能描述: 在后台文章分类目录中显示分类ID,便于用户查看和管理分类
  • 核心特性:

- 在分类列表中新增「分类ID」列,显示每个分类的唯一标识符
- 同时支持文章分类和标签分类
- 保持与后台其他列表的风格一致

  • 代码寻找:

- 分类ID列添加:core/module/fun-admin.php

  • 使用步骤:

- 后台 → 文章 → 分类目录
- 在分类列表中查看新增的「分类ID」列,即可看到每个分类的ID
- 同样适用于「文章 → 标签」列表

 
 
 
 

🎎 文章卡片看板娘自定义

  • 后台设置

- 入口:外观 → 盒子萌主题设置 → 文章设置 → 文章页左下角看板娘设置
- 功能:支持上传自定义看板娘图片,可一键替换默认图,支持实时预览
- 格式支持:JPG、PNG、GIF格式,新增浅蓝色文字提示【建议分辨率160x75为最佳尺寸】
- 显示范围:提供“仅在首页生效 / 全站生效”单选开关
- 按钮优化:当有图片时显示“替换”和“删除”两个按钮,方便用户替换图片

  • 前端实现

- 动态CSS生成:根据设置的图片URL和显示范围,动态生成CSS覆盖原主题的背景图
- 响应式设计:支持三列布局(80px大小)和单列布局(120px大小)
- 显示条件:根据设置的显示范围自动控制显示
- 位置:绝对定位在文章卡片左下角(bottom: 10px; left: 10px; z-index: 1)
- 移动端适配:575px 以下屏幕自动缩小为 60%,避免遮挡正文

  • 技术实现

- 支持替换原主题的\assets\images\post-list.png图片
- 支持留空不显示,可点击恢复默认图
- 样式与主题设置保持一致性

使用步骤

  1. 后台 → 外观 → 盒子萌主题设置 → 文章设置 → 文章页左下角看板娘设置
  2. 点击“上传”或“替换”按钮上传自定义看板娘图片
  3. 选择显示范围(仅在首页生效 / 全站生效)
  4. 保存设置后,前端文章卡片将显示自定义看板娘图片
  5. 如需恢复默认,可点击“删除”按钮后保存

 
 
 
 

🎨 主题切换图标优化

文件位置: header.php · page/p-signin.php · page/p-signup.php · page/p-reset_password.php

  • 导航栏主题切换主图标:将导航栏中默认的 fa-adjust 图标替换为带有太阳到月亮过渡动画的 SVG 动画图标
  • 亮色模式图标:将下拉菜单中的 fa fa-sun-o 图标替换为带有旋转动画效果的太阳 SVG 图标
  • 暗色模式图标:将下拉菜单中的 fa fa-moon-o 图标替换为带有太阳到月亮过渡动画的 SVG 图标
  • 多页面适配:优化内容同时应用于导航栏、登录页、注册页和重置密码页的主题切换按钮
  • 统一尺寸:所有 SVG 图标统一设置为 16x16 尺寸,保持视觉一致性
  • 动画效果

- 主切换按钮:太阳到月亮的平滑过渡动画,带有星芒闪烁效果
- 亮色模式:持续旋转的太阳图标,带有绘制动画
- 暗色模式:月亮与星芒的组合动画,带有闪烁效果

  • 主题适配:图标颜色跟随当前主题自动变化,完美适配亮色和暗色模式

实现要点

  • 使用内联 SVG 实现动画效果,无需额外资源加载
  • 保持原有按钮的所有功能和交互不变
  • 优化 SVG 代码,移除不必要的空格和属性
  • 确保动画流畅,不影响页面性能

使用步骤

  1. 保存修改后的文件到主题目录
  2. 刷新页面即可看到新的主题切换图标
  3. 点击图标可正常切换主题,动画效果自动播放

 
 
 
 

🔗 外链跳转开关功能

文件位置: core/panel/settings/set-msg.php · core/module/fun-article.php

  • 功能描述:在后台通知设置中新增两个外链跳转开关,用于控制网站外部链接的跳转方式
  • 后台设置

- 入口:外观 → 盒子萌主题设置 → 通知设置 → 外链跳转设置
- 开关选项:
- 🔗 外链提醒版开关:开启后,外部链接将跳转到带有安全提示的跳转页面
- 🔗 外链直跳版开关:开启后,外部链接将直接跳转到目标页面,带有简洁的加载提示
- 开关逻辑:两个开关互斥,优先使用提醒版开关

  • 前端实现

- 动态查找跳转页面:通过模板名称自动查找使用了对应模板的页面
- 支持两种模板:
- 提醒版:使用 page/p-goto.php 模板,带有安全提示和倒计时跳转
- 直跳版:使用 page/p-go.php 模板,简洁的加载提示后直接跳转
- 自动处理外部链接:通过 the_content 过滤器自动处理文章中的外部链接
- 容错机制:如果找不到对应模板的页面,自动跳过外链处理,避免404错误
- 智能识别:只处理外部链接,内部链接和相对链接保持不变

  • 核心特性

- 开关控制:支持通过后台开关灵活启用或禁用外链跳转功能
- 无硬编码:动态查找页面,适应不同的页面配置
- 安全可靠:保持原链接的所有属性,只修改href属性
- 性能优化:高效的正则匹配和替换,不影响页面加载速度

  • 代码寻找

- 开关设置:core/panel/settings/set-msg.php:122-138
- 跳转逻辑:core/module/fun-article.php:909-972
- 过滤器添加:core/module/fun-article.php:974

  • 使用步骤

1. 后台 → 外观 → 盒子萌主题设置 → 通知设置
2. 在"外链跳转设置"部分开启需要的跳转方式开关
3. 保存设置后,网站中的外部链接将自动使用选定的跳转方式

  • 优化记录

- 修复了硬编码路径问题:从固定路径改为动态查找页面
- 增强了容错机制:找不到页面时自动跳过处理
- 改进了链接识别逻辑:更准确地识别外部链接
- 优化了代码结构:更清晰的逻辑和注释

🎎 新增前端看板形象'gura摇'

文件位置: core/panel/settings/set-basis.php

  • 功能描述: 在后台主题设置的【选择前端看板形象】中新增一个预设形象"gura摇",该预设会读取主题内置的 gurayao.gif 动画图片
  • 实现要点:

- 在 $lolijump_options 数组中添加了 'gurayao' => __(' gura摇', 'ui_boxmoe_com') 选项
- 利用了已有的图片路径处理逻辑,当选择"gura摇"时会自动加载对应的 gurayao.gif 文件
- 图片文件位置:assets/images/top/gurayao.gif

  • 使用步骤:

- 后台 → 外观 → 盒子萌主题设置 → 基础设置 → 网页右侧看板开关
- 开启看板开关后,在【选择前端看板形象】中选择"gura摇"
- 保存设置后,前端右侧看板将显示对应的GIF动画

 
 
 
 

👤 登录状态检查修复与头像显示优化

文件位置: core/module/fun-basis.php · assets/js/boxmoe.js · core/module/fun-gravatar.php · header.php · comments.php

🔍 问题分析

  • 登录状态检查失败:用户点击"检查登录状态"按钮时返回"登录状态检查失败:无效的请求"
  • 登录状态不一致:首页显示已登录,文章页显示未登录
  • 登录状态丢失:页面刷新后登录状态丢失

🔧 插件代码修复记录

📦 ERPHP Down 插件修复

文件位置: wp-content/plugins/erphpdown/includes/mobantu.php

1. 未定义变量修复

  • 问题:第1025行使用了未定义的 $post_id 变量
  • 解决方案:将 $post_id 替换为正确的 $order->ice_post_id 属性
  • 影响:修复了订单提醒邮件中无法正确生成文章链接的问题

2. IDE静态分析警告修复

  • 问题:intelephense 报告 _mbt_add_activity_mbt_add_notice 函数未定义
  • 解决方案:在文件开头添加了 PHPDoc 函数声明注释
  • 代码
/**
   * @function _mbt_add_activity 外部活动记录函数
   * @function _mbt_add_notice 外部通知函数
   */
  
  • 影响:消除了 IDE 静态分析警告,不影响运行时功能

📦 QR Code 生成器修复

文件位置: wp-content/plugins/erphpdown/includes/qrcode.class.php

1. 未定义静态属性 $frames

  • 问题QRtools 类中使用了未声明的静态属性 $frames
  • 解决方案:在 QRtools 类中添加 private static $frames = array(); 静态属性声明

2. 类名拼写错误

  • 问题:错误的类名 QRbitrtream
  • 解决方案:改为正确的 QRbitstream

3. 非静态方法被静态调用

  • 问题estimateBitsModeKanji 方法被静态调用,但本身是普通方法
  • 解决方案:将该方法改为静态方法 public static function estimateBitsModeKanji($size)

4. 未定义常量 buf

  • 问题:第1378行使用了未定义的常量 buf
  • 解决方案:改为正确的 $buf 变量

5. 未定义变量 $run

  • 问题eatKanji 方法中使用了未定义的 $run 变量
  • 解决方案:在方法中添加 $run = $p; 的定义

6. 未定义变量 $hint

  • 问题splitString 方法中使用了未定义的 $hint 变量
  • 解决方案:改为使用 $this->modeHint 属性

7. 未定义变量 $ret

  • 问题getCode 方法中使用了未初始化的 $ret 变量
  • 解决方案:初始化 $ret = 0;

8. 未定义常量 string

  • 问题:第3057行使用了未定义的常量 string
  • 解决方案:改为正确的 $string 变量

9. imagedestroy 弃用警告

  • 问题:PHP 8.0+ 中 imagedestroy 函数已弃用
  • 状态:暂时保留,该函数在当前 PHP 版本中仍可正常使用

📦 修复效果

  • ✅ 修复了所有代码错误,确保插件正常运行
  • ✅ 消除了 IDE 静态分析警告,提高代码质量
  • ✅ 保持了与原插件功能的完全兼容
  • ✅ 修复了潜在的运行时错误风险
  • ✅ 优化了代码结构和可读性

- 为所有页面添加严格的缓存控制头,防止页面缓存导致登录状态不一致
- 禁用 CDN 缓存登录用户内容
- 确保 AJAX 请求不被缓存

  1. 登录状态管理优化

- 优化 LoginStatusManager.init() 函数,优先使用 PHP 初始状态
- 改进 localStorage 处理,确保登录状态持久化
- 增强 UI 渲染,添加更好的错误处理
- 修复资源路径生成,处理 undefined ajax_object.themeurl

  1. 头像显示逻辑优化

- 修改 boxmoe_get_avatar_url 函数,添加用户登录状态检查,未登录时返回空字符串
- 修改 boxmoe_get_avatar 函数,未登录时不返回头像 HTML
- 更新 header.php 中的头像渲染逻辑,只有在头像 URL 有效时才显示头像元素
- 更新 comments.php 中的头像渲染逻辑,只有在头像 URL 有效时才显示当前登录用户头像
- 更新 boxmoe.js 中的 renderLoginUI 函数,只有在头像 URL 有效时才渲染头像元素

✨ 优化效果

  • 登录状态检查功能正常,不再返回"无效的请求"错误
  • 登录状态在所有页面保持一致
  • 登录状态在页面刷新后仍然保持
  • 只有登录成功的用户才会显示头像
  • 未登录用户不会显示任何用户头像
  • 各种场景下(导航栏、评论区、用户面板)都遵循统一的头像显示规则

📁 涉及文件

  • core/module/fun-basis.php:AJAX 登录状态检查、缓存控制
  • assets/js/boxmoe.js:登录状态管理、UI 渲染
  • core/module/fun-gravatar.php:头像获取逻辑
  • header.php:导航栏和用户面板头像渲染
  • comments.php:评论区头像渲染

�️ 全局右键菜单增强 (Fun Context Menu)

文件位置: core/module/fun-context-menu.php

  • 功能概述:替换浏览器默认右键菜单,提供更符合主题风格的快捷操作,涵盖导航、文本编辑与媒体处理。
  • 核心特性

- 智能剪贴板(全环境兼容)
- 优先策略调整:在粘贴时,优先尝试兼容模式 (Legacy Mode) 通过隐藏 DOM 触发 execCommand('paste') 获取系统剪贴板。这使得即使在 HTTP 环境或 API 受限的情况下,也能成功粘贴站外内容,而不是错误地读取站内缓存。
- API 权限检测:在调用 navigator.clipboard 前增加 navigator.permissions.query 检查,若明确拒绝则自动降级。
- HTTPS 环境:若权限允许,使用 navigator.clipboard API 提供最佳体验。
- HTTP 环境适配
- 第一道防线:利用 Legacy Mode 尝试获取系统剪贴板(支持部分旧版浏览器及特定配置)。
- 第二道防线:若完全无法获取系统内容,则降级读取 localStorage 实现站内跨页粘贴,并提示“已粘贴站内内容 (外部内容受浏览器安全限制)”。

 
 
 
 

🎉 后台顶部横幅提示优化

文件位置: core/panel/includes/class-options-framework-admin.php · core/module/fun-admin.php

  • 统一提示样式:后台主题设置保存提示框与前端复制文本顶部横幅提示样式保持一致
  • 正确的提示显示

- 点击保存设置:显示"设置已保存成功!"
- 点击恢复默认设置:显示"已恢复默认选项!"
- 点击重置页面标语:显示"页面标语已恢复默认值!"
- 复制文章:显示"文章复制成功!"

  • 持续时间:所有提示持续显示5秒后自动消失
  • 良好的用户体验:提示清晰、美观,不影响用户操作
  • 兼容性:兼容不同的浏览器和设备

技术要点

  • 使用WordPress的redirect_post_location过滤器:修改重定向URL,添加操作类型参数
  • 使用URL参数传递操作类型:解决了WordPress设置API自动重定向导致POST数据丢失的问题
  • 使用transient API存储临时数据:用于文章复制等其他操作的提示
  • 响应式设计:提示横幅在不同设备上都能正常显示
  • 平滑的动画效果:提示横幅的显示和隐藏都有平滑的过渡动画

具体修改

  1. 修改主题设置保存提示框的实现:移除默认的WordPress提示框,改为使用自定义的顶部横幅提示
  2. 修改validate_options函数:添加URL参数,用于传递操作类型
  3. 修改后台顶部横幅提示函数:从URL参数中获取操作类型,显示相应的提示
  4. 添加复制文章功能的提示:使用transient API存储临时数据,显示复制成功提示

优化效果

  • 统一了后台和前端的提示样式,提高了用户体验
  • 确保用户在进行各种操作时都能得到清晰的反馈
  • 通过使用WordPress的内置函数和API,确保了代码的可靠性和兼容性

 
 
 
 

🎲 随机文章小部件

文件位置: core/widgets/widget-random-posts.php · core/widgets/widget-set.php

  • 功能描述:新增随机文章阅读功能的页面小部件,支持从网站文章库中随机选取文章,并在前端页面以指定样式展示文章信息
  • 核心特性

- 随机获取文章,使用 WordPress 内置函数实现
- 支持后台配置:显示文章数量、是否显示缩略图、是否显示摘要、是否显示发布日期、摘要长度等
- 前端样式与主题现有风格一致,支持响应式设计
- 可配置分类限制,支持包含或排除特定分类

  • 后台显示名称:"随机文章_shiroki"
  • 摘要默认长度:20个字符

使用步骤

  • 后台 → 外观 → 小部件
  • 将"随机文章_shiroki"小部件拖拽到侧边栏或其他小部件区域
  • 配置小部件选项,保存后前端即可显示随机文章

 
 
 
 

🎨 文章卡片样式优化

文件位置: core/module/fun-basis.php · assets/css/style.css

  • 边框设置函数修复

- 将 boxmoe_border_setting() 函数从直接输出类名改为返回类名,确保能正确应用到文章卡片的 class 属性中
- 优化了函数注释,添加了emoji图标

  • 悬停动画统一

- 为单排布局(.list-one.post-list)添加了与三列布局一致的悬停上移动画
- 动画效果:向上移动10px,过渡时间0.3秒
- 确保所有文章卡片都有统一的过渡效果

  • 底座背景框修复

- 将单排布局的背景色和背景图片从直接设置在元素上改为使用 ::before 伪元素实现
- 优化了堆叠顺序管理:背景层(::before)设置 z-index: -1,底座背景框(::after)设置 z-index: -2
- 解决了悬停时底座背景框显示异常的问题

  • 样式结构统一

- 单排布局与三列布局保持一致的样式结构
- 确保了各层元素的正确堆叠关系
- 增强了主题的视觉一致性

使用效果

  • 无论选择哪种文章布局风格,布局边框都会正确应用
  • 所有文章卡片都有统一的悬停上移动画效果
  • 悬停时底座背景框正确显示在卡片下方,不会出现显示异常
  • 整体视觉效果更加统一和专业

 
 
 
 

🔗 外链跳转开关功能

文件位置: core/panel/settings/set-msg.php · core/module/fun-article.php

  • 功能描述:在后台通知设置中新增两个外链跳转开关,用于控制网站外部链接的跳转方式
  • 后台设置

- 入口:外观 → 盒子萌主题设置 → 通知设置 → 外链跳转设置
- 开关选项:
- 🔗 外链提醒版开关:开启后,外部链接将跳转到带有安全提示的跳转页面
- 🔗 外链直跳版开关:开启后,外部链接将直接跳转到目标页面,带有简洁的加载提示
- 开关逻辑:两个开关互斥,优先使用提醒版开关

  • 前端实现

- 动态查找跳转页面:通过模板名称自动查找使用了对应模板的页面
- 支持两种模板:
- 提醒版:使用 page/p-goto.php 模板,带有安全提示和倒计时跳转
- 直跳版:使用 page/p-go.php 模板,简洁的加载提示后直接跳转
- 自动处理外部链接:通过 the_content 过滤器自动处理文章中的外部链接
- 容错机制:如果找不到对应模板的页面,自动跳过外链处理,避免404错误
- 智能识别:只处理外部链接,内部链接和相对链接保持不变

  • 核心特性

- 开关控制:支持通过后台开关灵活启用或禁用外链跳转功能
- 无硬编码:动态查找页面,适应不同的页面配置
- 安全可靠:保持原链接的所有属性,只修改href属性
- 性能优化:高效的正则匹配和替换,不影响页面加载速度

  • 代码寻找

- 开关设置:core/panel/settings/set-msg.php:122-138
- 跳转逻辑:core/module/fun-article.php:909-972
- 过滤器添加:core/module/fun-article.php:974

  • 使用步骤

1. 后台 → 外观 → 盒子萌主题设置 → 通知设置
2. 在"外链跳转设置"部分开启需要的跳转方式开关
3. 保存设置后,网站中的外部链接将自动使用选定的跳转方式

  • 优化记录

- 修复了硬编码路径问题:从固定路径改为动态查找页面
- 增强了容错机制:找不到页面时自动跳过处理
- 改进了链接识别逻辑:更准确地识别外部链接
- 优化了代码结构:更清晰的逻辑和注释

 
 
 
 

🎎 新增前端看板形象'gura摇'

文件位置: core/panel/settings/set-basis.php

  • 功能描述: 在后台主题设置的【选择前端看板形象】中新增一个预设形象"gura摇",该预设会读取主题内置的 gurayao.gif 动画图片
  • 实现要点:

- 在 $lolijump_options 数组中添加了 'gurayao' => __(' gura摇', 'ui_boxmoe_com') 选项
- 利用了已有的图片路径处理逻辑,当选择"gura摇"时会自动加载对应的 gurayao.gif 文件
- 图片文件位置:assets/images/top/gurayao.gif

 
 
 
 

⏰ 时钟小部件开发

文件位置: core/widgets/widget-clock.php · core/widgets/widget-set.php

  • 功能描述:开发了功能完整的时钟页面小部件,允许用户自定义选择时区,实时显示当前时间并根据所选时区自动调整
  • 核心特性

- 支持多种时区选择,包括亚洲、欧洲、美洲等主要时区
- 自动将用户选择的时区信息显示为小部件标题,采用中文+英文格式(如"东京时间 (Asia/Tokyo)")
- 实时显示当前时间,每秒更新一次
- 自适应亮色和暗色模式
- 亮色模式下显示蓝色渐变时间(#3b82f6 到 #10b981)
- 暗色模式下显示紫色渐变时间(#8b5cf6 到 #ec4899)
- 响应式设计,适配不同屏幕尺寸和布局
- 遵循WordPress编码标准,与主题现有功能兼容
- 与主题设计风格统一,采用圆角卡片设计

  • 后台显示名称:"时钟小部件_shiroki"

使用步骤

  • 后台 → 外观 → 小部件
  • 将"时钟小部件_shiroki"小部件拖拽到侧边栏或其他小部件区域
  • 配置时区和标题选项,保存后前端即可显示时钟

修复记录

  1. 修复下拉框不显示问题:简化了 form() 函数,使用直接 echo 语句,添加翻译域,确保 HTML 结构正确
  2. 修复时间不渲染问题:使用 getHours() 而不是 getUTCHours() 计算目标时区时间,确保时间显示正确
  3. 修复暗色模式显示问题:确保所有必要的 CSS 属性(background-cliptext-fill-color)都明确设置,防止文本被色块覆盖
  4. 优化时区标题格式:将时区名称改为中文+英文格式,提升用户体验
  5. 适配多种布局:优化了一排三个布局下的显示,确保时间完整显示
  6. 响应式设计优化:添加媒体查询,根据屏幕尺寸自动调整字体大小和内边距

技术实现

  • 使用 WordPress Widget API 开发,实现了 __construct()widget()form()update() 方法
  • 采用 CSS 渐变实现彩色文字效果
  • 使用 JavaScript 实现实时时间更新
  • 适配主题的亮色/暗色模式切换
  • 支持一排三个布局的特殊优化

 
 

感谢您的支持
微信赞赏

微信扫一扫

支付宝赞赏

支付宝扫一扫



评论(2)

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

发表评论

表情 颜文字
插入代码

北京时间 (Asia/Shanghai)

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