boxmoe_header_banner_img

加载中

文章导读

「萌盒子Lolimeow」主题二次开发笔记


avatar
白木 2025年8月27日 56

下载本文实现的Lolimeow主题包
查看或在Github项目下载主题包

雨云服务器

购买服务器

雨云服务器

云服务器、网站搭建、游戏云、对象存储、裸金属物理机

 
 
 

萌盒子-主题二次开发笔记

 
 

✨ 新增功能

 
 

👤 用户头像重构

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

  • 统一头像获取策略:实现了 Custom (自定义) > QQ Avatar (QQ头像) > Local Default (本地默认) 的降级策略
  • 本地默认头像:当用户无自定义头像且非QQ邮箱时,返回主题内置默认头像 (assets/images/touxiang.jpg)
  • QQ头像集成:支持识别 QQ 邮箱自动调用 QQ 头像,并支持多个 QQ 头像源 (Q1-Q4) 切换
  • 后台自定义头像管理 (core/module/fun-admin.php):

– 在“个人资料”页面增加自定义头像上传/选择功能
– 支持从媒体库选择图片
– 提供“移除自定义头像”和“重置为默认头像”的一键操作
– 增加头像预览功能,实时显示当前设置的头像
 
 
 
 

🪧 页面标语设置

文件位置: core/panel/settings/set-slogan.php · header.php · core/panel/includes/class-options-framework-admin.php

  • 独立设置页:新增“页面标语设置”,位于“文章设置”下方(options.php 引入)
  • 可配置文案:支持首页、文章、分类、标签、搜索、404、作者、日期、归档、页面默认,以及友链、会员中心模板专属标语;均提供默认值
  • 前台输出:面包屑处的 span 文案从主题设置读取(header.php:275-304
  • 仅重置标语:在保存区域新增“重置标语”扁平圆角弹窗,只恢复标语相关键到默认值,不影响其它设置(class-options-framework-admin.php:223-304
  • 交互与样式:自定义圆角弹窗,按钮为“取消/确定”,确定后自动提交隐藏字段 reset_slogan=1 执行重置

使用步骤

  • 后台 → 外观 → 盒子萌主题设置 → 页面标语设置,填写各页面文案并保存
  • 如需恢复默认,仅点击“重置标语”并在弹窗中确定

⏱️ 底部运行时间增强(运行天数 → 天/时/分/秒)

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

  • 结构升级:底部版权处将原单一“运行天数”改为“天/时/分/秒”四段显示,前缀文案支持自定义,附加 fa-clock-o 图标
  • 实时刷新:前端每秒计算并刷新,自动级联递进(秒→分→时→天),支持未来时间回退保护(负值归零)
  • 前后端衔接:开始时间通过主题设置下发到前端(ajax_object.running_days
  • 彩色视觉:四段数字分别赋色以增强可读性(橙/绿/紫/蓝)

代码寻找

  • 渲染容器:wp-content/themes/lolimeow/core/module/fun-basis.php:223-230
  • 前端逻辑:wp-content/themes/lolimeow/assets/js/boxmoe.js:637-666
  • 样式定义:wp-content/themes/lolimeow/assets/css/style.css:865-882

使用步骤

  • 后台 → 外观 → 盒子萌主题设置 → 底部运行天数设置:

– 开关:boxmoe_footer_running_days_switch
– 开始时间:boxmoe_footer_running_days_time(例如 2025-01-01
– 前缀文案:boxmoe_footer_running_days_prefix(默认“本站已稳定运行了”)
 
 
 
 

🔎 主题设置页模糊搜索(后台 Options 搜索)

文件位置: core/panel/includes/class-options-framework-admin.php · core/panel/js/options-custom.js · core/panel/css/optionsframework.css

  • 页头搜索框:在主题设置页头新增搜索输入框 #of-search-input,支持模糊搜索所有设置项名称与分组标题
  • 实时筛选:输入时跨分组动态过滤,仅显示匹配的设置块与其所在分组;清空输入自动恢复当前标签页
  • 轻量实现:前端纯 JS 实现,无后端改动,与原标签切换、联动显示逻辑兼容

代码寻找

  • 输入框插入:wp-content/themes/lolimeow/core/panel/includes/class-options-framework-admin.php:209-213
  • 搜索逻辑:wp-content/themes/lolimeow/core/panel/js/options-custom.js:72-124
  • 样式规则:wp-content/themes/lolimeow/core/panel/css/optionsframework.css:145-146,169

使用步骤

  • 后台 → 外观 → 盒子萌主题设置 → 在页头搜索框输入关键词,即可实时过滤匹配的设置项;清空搜索恢复

 
 
 
 

🧼 写文章选区清除格式按钮(避免样式串改)

文件位置: assets/js/tinymce-clear-format.js · assets/js/clear-format-quicktags.js · core/module/fun-admin.php

  • 行为描述:在写文章页的编辑器新增“清除格式”按钮;当选中内容点击按钮后,移除选区中的内联样式、类名、ID、事件与 data- 属性,保留必要的 a[href]img[src|alt|title],并进一步执行 RemoveFormat 去除残留格式,避免前端样式串改
  • 适配范围:支持可视化编辑器(TinyMCE)与文本编辑器(Quicktags)
  • 代码寻找

– TinyMCE 插件注册与按钮:wp-content/themes/lolimeow/core/module/fun-admin.php:23-36,46-50
– TinyMCE 清洗逻辑:wp-content/themes/lolimeow/assets/js/tinymce-clear-format.js
– 文本编辑器按钮与清洗:wp-content/themes/lolimeow/assets/js/clear-format-quicktags.js
– 脚本加载(仅写文章页):wp-content/themes/lolimeow/core/module/fun-admin.php:305-308

  • 使用步骤:选中需要清理的段落或文本 → 点击“清除格式”;文本编辑器同样在选区后点击按钮完成清洗

 
 
 
 

🖼️ 文章页图片查看器(点击预览/全屏)

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

  • 交互行为:文章页 .single-content 内图片可点击预览,淡入 Overlay 居中显示;支持拖拽、滚轮缩放、旋转、原始大小、上一张/下一张;点击遮罩空白处关闭
  • 自然尺寸显示:默认按图片原始尺寸渲染,不受容器尺寸限制;需适配屏幕时点击“全屏”切换到适配模式(等比缩放至视口)
  • 全屏适配:根据图片 naturalWidth/naturalHeight 与窗口尺寸自动计算缩放;退出全屏恢复之前的缩放与位移状态
  • 快捷键Esc 关闭,+/= 放大,- 缩小,R 旋转,0 原始大小,F 全屏,方向键切换

代码寻找

  • 资源加载:wp-content/themes/lolimeow/core/module/fun-basis.php:139(CSS) · wp-content/themes/lolimeow/core/module/fun-basis.php:147(JS)
  • 前端逻辑:wp-content/themes/lolimeow/assets/js/image-viewer.js
  • 样式规则:wp-content/themes/lolimeow/assets/css/image-viewer.css

实现要点

  • 图片收集:收集 .single-content img,兼容懒加载,优先读取 data-src/currentSrc
  • 行为控制:拖拽更新 translate(x,y);缩放范围 0.5–3.0;旋转每次 +90°;组图切换与计数 当前/总数
  • 全屏类名:切换 tk-image-viewer__wrapper--fullscreen,CSS 中限制 img 最大宽高为 100vw/100vh
  • 事件管理:关闭时移除键盘监听,防止泄漏;对子链接点击统一 preventDefault + stopPropagation 避免跳转

 
 
 
 

🖱️ 复制事件顶部横幅提示

文件位置: assets/js/boxmoe.js · assets/css/style.css

  • 复制提示:前端触发任意复制事件时,顶部横幅下滑显示提示文案:您拷贝了本站内容,记得注释来源哦~( ̄y▽, ̄)╭ 👍🏻
  • 联动复制按钮:文章代码块的“复制代码”按钮复制成功同样触发横幅提示(ClipboardJS 成功回调联动)
  • 浅蓝背景:横幅背景为浅蓝色 #e6f2ff,适配亮/暗主题色体系;暗色模式下强制文字与图标为黑色,解决白字配浅蓝底的对比度问题
  • 紫色遮罩动画:遮罩为 rgba(139,61,255,0.35),自左向右覆盖横幅背景;推进过程中保持圆角前沿(约 18px
  • 完全覆盖与收起:遮罩在动画末尾完全覆盖横幅(超出 100% 宽度以避免右侧露出),随后横幅自动收起;重复复制会重置动画与计时
  • 移动端适配:在窄屏缩小内边距与字号,避免遮挡

交互时序

  • 遮罩动画约 1.1s 完成;为确保“完全覆盖 → 收起”,横幅在遮罩结束后约 0.4s 隐藏,总显示时长约 1.5s

代码寻找

  • 初始化与事件绑定:wp-content/themes/lolimeow/assets/js/boxmoe.js:744–760
  • 复制按钮联动:wp-content/themes/lolimeow/assets/js/boxmoe.js:610–620
  • 横幅样式与动画:wp-content/themes/lolimeow/assets/css/style.css:953–959(含 @keyframes copyMaskSweep

 
 
 
 

🅰️ 字体设置与默认字体(自定义上传/编辑器注入)

文件位置: core/panel/settings/set-fonts.php · core/module/fun-fonts.php · core/panel/options-framework-js.php · core/panel/css/optionsframework.css

  • 新增“字体设置”分组与开关:boxmoe_custom_font_switch(开启后自定义字体才生效)
  • 自定义字体列表:纯文本、扁平圆角表格,支持“新增/修改/删除”;“新增”按钮置于标题右侧(class-options-interface.php:101 注入按钮,样式见 optionsframework.css
  • 弹窗编辑:填写“显示名称”、上传 woff2 或自定义 woff2 链接(二选一、互斥校验),保存后写入列表;删除采用事件委托修复(core/panel/options-framework-js.php:257-265
  • 数据存储:以数组形式保存到 boxmoe_fonts,每项包含 name/woff2/url;服务端清洗互斥与合法性(core/panel/includes/class-options-sanitization.php:296-312
  • 经典编辑器字体选择:通过 TinyMCE 注入自定义字体到 font_formatscore/module/fun-fonts.php:87),并追加 @font-facecontent_style 保证渲染;确保显示默认内置字体列表(core/module/fun-fonts.php:121-139
  • Gutenberg 支持:动态注入到 theme.json 数据(wp_theme_json_data_themecore/module/fun-fonts.php:24-65),区块“字体族”出现自定义项
  • 前端样式:统一注入 @font-facecore/module/fun-fonts.php:4-22
  • 站点默认字体:新增 boxmoe_default_font 下拉,选项包含“默认字体”+自定义字体名称;选择非“默认字体”时为全站应用 body{font-family: ...}(前端与编辑器均注入,core/module/fun-fonts.php:18-22, 80-85, 142-150
  • 上传支持:允许上传 woff/woff2upload_mimescore/module/fun-basis.php:349
  • 布局与可读性优化:

– 表格标题与“新增”按钮同列对齐(optionsframework.cssclass-options-interface.php:101-106
– 文本自适应换行、长链接不溢出容器(optionsframework.css

使用步骤

  • 后台 → 外观 → 盒子萌主题设置 → 字体设置:

– 开启“自定义字体”→ 点击“新增”填写名称并上传或填写链接(二选一)→ 保存设置
– 如需修改/删除,列表中点击“修改/删除”即可;保存后生效
– 选择“站点默认字体”应用到全站(选择“默认字体”保持主题原样)

 
 
 
 

️ 写文章 MD 语法编辑器(开关/工具栏/预览)

文件位置: core/module/fun-markdown.php · assets/js/markdown-editor.js · assets/css/markdown-editor.css · core/panel/settings/set-optimize.php · functions.php

  • 开关入口:后台 → 外观 → 盒子萌主题设置 → 系统优化 → “写作类相关开关优化” → 启用 MD 语法编辑器(boxmoe_md_editor_switch)参考(wp-content/themes/lolimeow/core/panel/settings/set-optimize.php:28-33
  • 模块引入:主题主入口引入 fun-markdown.php 模块参考(wp-content/themes/lolimeow/functions.php:36
  • 渲染流程:前台内容渲染在 the_content 上执行 Markdown → HTML → do_shortcode,保证主题原生短代码正常工作参考(wp-content/themes/lolimeow/core/module/fun-markdown.php:51-57
  • 编辑器行为:开启开关后禁用 Gutenberg 与富文本编辑,使用纯文本域;提供 Markdown 工具栏与“预览”按钮,移除“实时预览”参考(wp-content/themes/lolimeow/core/module/fun-markdown.php:59-72 · wp-content/themes/lolimeow/assets/js/markdown-editor.js:26-39,57-58
  • 预览接口wp_ajax_boxmoe_md_preview 接口返回解析后的 HTML,并执行短代码以便预览与前台一致(wp-content/themes/lolimeow/core/module/fun-markdown.php:73-80
  • 工具栏定位:Markdown 工具栏挂载在“表情栏”之后,避免遮挡;提升层级避免覆盖参考(wp-content/themes/lolimeow/assets/js/markdown-editor.js:40-49 · wp-content/themes/lolimeow/assets/css/markdown-editor.css:1
  • 样式增强:预览区圆角卡片、代码块深色背景、列表缩进与图片自适应;下拉选择统一圆角边框参考(wp-content/themes/lolimeow/assets/css/markdown-editor.css:4-10
  • 短代码下拉:保留“添加媒体”旁原生 Boxmoe短代码 下拉,移除额外的重复短代码控件,避免界面混乱

使用步骤

  • 主题设置中开启“启用MD语法编辑器”并保存
  • 写文章页:使用工具栏按钮(B/I/H1–H3/Link/Image/Code/Quote/UL/OL)编辑 Markdown;点击“预览”生成预览区
  • 需要插入主题短代码时,使用“添加媒体”旁的 Boxmoe短代码 下拉选择插入即可

 
 
 
 

🎎 网页右侧看板自定义管理 (Custom Side Board Manager)

文件位置: core/panel/includes/class-options-interface.php · core/panel/js/options-custom.js · core/panel/css/optionsframework.css · core/panel/includes/class-options-sanitization.php

  • 自定义列表管理:在“网页右侧看板开关”中新增自定义列表功能,支持无限添加看板形象。
  • 交互操作

新增/替换/删除:支持调用媒体库上传/选择图片,或输入外部链接。
一键启动:每个项目配有“启动”按钮,点击即选中该形象(单选逻辑),自动同步到隐藏的 Radio 选项。

  • 自定义命名与 UI 优化

名称设置:允许为每个看板形象设置显示名称。
浮动标签(Floating Label):名称输入框采用 Material Design 风格浮动标签。
默认状态:输入框内显示“请输入名称”(灰色)。
激活状态:标签上浮至边框左上角,变为“名称”(蓝色),并自动切换背景色遮挡边框线(Outlined 风格)。
动态文本:利用 CSS content: attr() 配合 data-
属性实现提示文案在不同状态下的自动切换。

  • 数据安全:完善了 custom_board_list 类型的后端清洗逻辑,确保 URL 和名称的安全存储。

代码寻找

  • 界面渲染:class-options-interface.php (case 'custom_board_list')
  • 动态交互:options-custom.js (添加/删除/启动逻辑)
  • 样式定义:optionsframework.css (.custom-board-input-group 相关)
  • 数据清洗:class-options-sanitization.php (of_sanitize_custom_board_list)

使用步骤

  • 后台 → 外观 → 盒子萌主题设置 → 基础设置 → 网页右侧看板开关
  • 点击“新增看板形象”添加新项,或在现有项中操作。
  • 输入名称(体验浮动标签效果),点击“启动”应用形象。

 
 
 
 

🆔 自定义用户UID与查重

文件位置: core/module/fun-user.php · core/module/fun-user-center.php · page/template/user-home.php · core/module/fun-admin.php

  • 随机 UID 生成(6位以上):新用户注册时,系统通过 do-while 循环自动生成一个唯一且不重复的 6 位以上数字 UID,并保存至 custom_uid 用户元数据中。
  • 用户中心显示(只读):在用户资料设置页,“用户ID”输入框对普通用户禁用(仅显示),若未设置则默认显示系统原始 ID;只有管理员可进行修改。
  • 后台管理与列表

资料页管理:管理员可在后台用户资料页查看和修改任意用户的 UID(无正则限制,仅查重)。
新增用户:在后台“添加用户”页面,新增“用户ID”输入框。管理员可指定 UID;若留空,系统将自动生成随机 6 位以上 UID。
列表展示:后台“所有用户”列表新增“用户ID”列,直观展示自定义 UID(未设置则显示系统 ID)。

  • 后端查重与校验

唯一性检查:更新前检查数据库中是否存在相同 custom_uid 或与现有用户的系统 ID 冲突(排除自身),防止 ID 冲突。
权限控制:前端更新接口增加 manage_options 权限校验,防止普通用户通过接口绕过限制。

  • 扁平圆角弹窗提示

前端:当后端返回 ID_EXISTS 错误时,前端弹出自定义的扁平圆角风格错误提示框。
后台:当 ID 冲突导致保存失败时,自动隐藏原生顶部错误条,改为页面居中的扁平化模态弹窗显示错误信息。

代码寻找

  • 注册生成逻辑:core/module/fun-user.php (boxmoe_generate_custom_uid)
  • 后端更新与查重:core/module/fun-user-center.php (boxmoe_update_user_profile 增加权限校验)
  • 后台管理字段与列表:core/module/fun-admin.php (boxmoe_admin_user_custom_uid_field / boxmoe_manage_users_columns / boxmoe_save_new_user_custom_uid)
  • 前端输入框控制:page/template/user-home.php (根据 current_user_can 控制 disabled)

使用步骤

  • 新用户注册:注册成功后自动获得随机 6 位以上 UID。
  • 查看 UID:用户在“个人资料”页查看自己的 UID(不可修改)。
  • 管理员修改:管理员可在后台或前台修改用户 UID,修改时会自动查重。
  • 管理员新增:在后台添加用户时,可直接填写指定 UID,或留空自动生成。

 
 
 
 

🖼️ 自定义背景装饰图管理

文件位置: core/panel/settings/set-basis.php · header.php · assets/css/style.css · core/panel/includes/class-options-media-uploader.php · core/module/fun-basis.php

  • 后台设置

入口:外观 → 盒子萌主题设置 → 基础设置 → 自定义背景装饰图 (boxmoe_background_image)。
交互优化:将“删除”按钮改为“替换”按钮,支持直接从媒体库选择或上传新图进行替换。
SVG 支持:新增 upload_mimes 过滤器允许 SVG 格式上传;修复了设置面板中 SVG 图片无法预览的问题。

  • 前端显示

逻辑:若设置了图片,则通过 CSS 注入 header.php 覆盖默认背景;若留空,则不显示任何背景装饰图(默认 CSS 已去除硬编码)。
样式:背景图层级调整为 z-index: -999,确保位于最底层不遮挡内容;使用 !important 确保自定义设置生效。
链接修复:输出链接经过 esc_url 处理,修复了无法正确应用自定义链接的问题。

  • 稳定性

保存优化:修复了保存设置时因资源限制或正则处理导致的 502 错误(增加 set_time_limit / memory_limit,管理员跳过 wp_kses)。

使用步骤

  • 后台 → 盒子萌主题设置 → 基础设置 → 自定义背景装饰图。
  • 点击“上传”或“替换”选择图片(支持 SVG)。
  • 保存后前台背景即更新;若需移除,清空该设置保存即可。

 
 
 
 

👮 角色与用户身份管理

文件位置: core/module/fun-role-manager.php · core/panel/settings/set-user-identity.php

  • 功能概述:提供了一套轻量级的本地用户角色管理系统,允许站长在后台自由创建、删除角色,并管理用户的角色分配。
  • 核心特性

角色管理:支持新增自定义角色(指定唯一标识与显示名称),并可删除自定义角色(系统内置角色受保护)。
权限继承:支持继承模式,创建新角色时可完全复制现有角色的所有权限(如 VIP 继承 Subscriber 权限)。
细粒度权限自定义:支持自定义组合模式,可基于 20+ 项具体能力(如发布文章、管理分类、安装插件等)自由勾选,精准控制角色权限。
用户角色分配:内置用户搜索功能,支持通过 ID、用户名、邮箱或昵称搜索用户,并直接修改其角色。
安全机制:内置安全校验,防止管理员意外移除自身的管理员权限;自定义模式下自动赋予基础阅读权限。
界面集成:深度集成于“用户身份管理”设置面板,采用 AJAX 交互,操作流畅。

  • UI 优化与交互

权限选择弹窗:自定义模式下采用扁平圆角风模态框(Modal),直观展示并选择所需权限。
风格统一:现有角色列表采用与“新增角色”一致的卡片式布局,视觉体验更佳。
系统角色标识:系统内置角色(如 Administrator)拥有独立的蓝色 系统内置 徽章,并与角色名称保持间距。
折叠收纳:默认折叠所有系统内置角色,仅展示自定义角色,保持列表简洁;点击“展开系统内置角色管理”即可查看完整列表。
描述优化:操作说明已移至区块描述中,不再占用列表空间;角色 ID 显示更加清晰。

  • 代码寻找

– 后端逻辑与 AJAX:wp-content/themes/lolimeow/core/module/fun-role-manager.php
– 设置面板界面:wp-content/themes/lolimeow/core/panel/settings/set-user-identity.php

  • 使用步骤

– 后台 → 外观 → 盒子萌主题设置 → 用户身份管理
– 新增角色:填写标识(英文)、名称(中文),选择模式(继承/自定义),若自定义则点击按钮勾选具体权限,最后点击创建。
– 管理用户:在下方搜索框输入用户信息,找到目标用户后点击其角色名称进行修改。

 
 
 
 

📝 后台文章一键复制

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

  • 功能描述:在后台“所有文章”和“所有页面”列表的操作栏中新增“复制”按钮。
  • 核心逻辑:点击复制后,自动创建一个新草稿,完整拷贝原文章的标题、内容、摘要、分类标签及所有自定义字段(Meta Fields),并自动跳转到新文章编辑页。
  • 代码寻找

– 按钮注入:boxmoe_duplicate_post_link (挂载于 post_row_actions / page_row_actions)
– 复制处理:boxmoe_duplicate_post_as_draft (挂载于 admin_action_...)

 
 
 
 

📋 Markdown任务清单功能

文件位置: core/module/fun-markdown.php · assets/js/markdown-editor.js · assets/css/markdown-editor.css · assets/css/style.css · assets/js/boxmoe.js

  • 功能描述:新增Markdown任务清单语法支持,实现点击交互和自动保存功能,支持三种任务状态。
  • 核心特性

Markdown语法支持:识别 - [ ](未完成)、- [>](进行中)和 - [x](已完成)格式的任务项
编辑器工具栏增强:在编辑器工具栏中添加任务清单按钮,支持快速插入语法
前端交互:点击emoji可切换任务状态,支持三种状态循环切换(未完成→进行中→已完成→未完成)
自动保存:通过AJAX将任务状态保存到服务器
作者鉴权:只有内容作者才能修改任务状态
漫画圆角风格:采用主题一致的漫画圆角设计
深色模式支持:适配浅色和深色模式
状态样式区分
– ❌ 未完成:默认样式
– 🔄 进行中:黄色背景,橙色文字,左侧黄色边框
– ✅ 已完成:删除线,灰色文字

  • 代码寻找

– Markdown解析:fun-markdown.php:19-57
– 编辑器按钮:markdown-editor.js:36
– 前端交互:boxmoe.js:800-935
– 样式设计:style.css:53-154

  • 使用步骤

– 在编辑器中输入 - [ ] 任务项- [>] 任务项- [x] 任务项,或点击工具栏按钮插入
– 发布后,在前端页面点击emoji切换任务状态
– 系统会自动保存任务状态

  • 状态切换逻辑:点击一次切换到下一个状态,按未完成→进行中→已完成→未完成循环切换

 
 
 
 

🦶 底部版权与文案增强

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

  • 自定义 Theme by 信息:新增“底部版权信息自定义”设置项,支持自定义 HTML 内容(默认为 Theme by Boxmoe),可修改为备案链接或其他声明。
  • 隐藏 Copyright 字样:新增“底部隐藏 Copyright 文字”开关,开启后仅显示 © 符号,去除了默认的 “Copyright” 英文单词。
  • 运行时间后缀自定义:在原有的“天”后缀基础上,新增了“时”、“分”、“秒”的自定义后缀设置,允许站长完全自定义时间单位的显示文本(如改为英文 d/h/m/s 或其他趣味文案)。
  • 使用步骤:后台 → 外观 → 盒子萌主题设置 → 基础设置 → 底部设置 / 底部运行天数设置。

 
 
 
 

�️ 欢迎语独立字体配置

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

  • 功能描述: 允许独立设置Banner欢迎语的字体,与全站字体分开
  • 配置入口: 后台 → 外观 → 盒子萌主题设置 → 字体设置 → 欢迎语独立字体
  • 共享字体列表: 使用与站点默认字体相同的字体列表,包含所有自定义字体
  • 默认行为: 默认使用站点默认字体,选择后仅应用于Banner欢迎语
  • 代码寻找

– 设置选项:core/panel/settings/set-fonts.php:47-55
– 字体处理:core/module/fun-fonts.php:24-29
– 前端渲染:header.php:261

实现要点

  • 在字体设置中添加了”欢迎语独立字体”选择器
  • 共享站点默认字体的字体列表
  • 仅在启用自定义字体时生效
  • 使用CSS类.boxmoe-typing-animation应用独立字体样式
  • 保持与原有打字动画效果兼容

使用步骤

  1. 后台 → 外观 → 盒子萌主题设置 → 字体设置
  2. 启用自定义字体(如果尚未启用)
  3. 在”欢迎语独立字体”下拉菜单中选择要使用的字体
  4. 保存设置,前台Banner欢迎语将使用新设置的字体

 
 
 
 

�🌈 Banner打字动画效果

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

  • 动态打字效果:Banner区域的欢迎语实现了彩色打字动画效果,每个字符逐字显示,带有随机彩虹色配色
  • 自动循环:打字完成后等待3秒,然后逐字删除,再重新开始,形成循环动画
  • 响应式设计:适配不同屏幕尺寸,确保在各种设备上都能正常显示
  • 配置简单:通过Banner设置中的”Banner欢迎语”即可自定义显示文本
  • 代码寻找

– 欢迎语渲染:core/module/fun-basis.php:128-135
– 打字动画逻辑:assets/js/boxmoe.js:849-910
– 前端渲染:header.php:259-262

实现要点

  • 使用 data-text 属性传递要显示的文本
  • 彩虹配色方案包含12种颜色,每次随机选择不同颜色,避免重复
  • 打字速度:200ms/字符,删除速度:100ms/字符
  • 采用 span 标签包裹每个字符,实现单个字符的颜色控制

使用步骤

  • 后台 → 外观 → 盒子萌主题设置 → Banner设置
  • 在”Banner欢迎语”输入框中填写要显示的文本(留空则显示默认值”Hello! 欢迎来到盒子萌!”)
  • 保存设置后,前台Banner区域会自动显示打字动画效果

 
 
 
 

👤 用户信息页面小部件增强

文件位置: core/widgets/widget-currentuser.php · core/widgets/widget-userinfo.php

  • 复制功能修复:修复QQ、邮箱、微信图标点击复制功能,使用现代Clipboard API,并兼容旧浏览器
  • 动画效果增强:新增悬停上移动画和扫光动画,提升交互体验
  • 头像显示修复:修复当前登录用户头像不显示问题,使用主题自定义头像函数
  • 信息显示控制:优化用户名和个人说明的显示逻辑
  • 纯文本统计修复:修复统计信息显示为纯文本的问题,去除重复HTML结构
  • 邮箱图标修复:将错误的Win图标替换为正确的邮箱图标
  • 语法错误修复:修复JavaScript代码中的语法错误,确保功能正常运行

代码寻找

  • 当前用户信息页面小部件:wp-content/themes/lolimeow/core/widgets/widget-currentuser.php
  • 用户信息页面小部件:wp-content/themes/lolimeow/core/widgets/widget-userinfo.php

 
 
 
 

✍️ 文章作者信息页面小部件

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

  • 新增页面小部件:创建当前文章作者信息页面小部件,显示文章作者的详细信息
  • 作者信息展示:包含作者头像、名称、个人简介和社交链接
  • 作者统计数据:显示作者发布文章数量和收到的评论数量
  • 社交链接支持:支持QQ、邮箱、微信等社交图标,带有复制功能和动画效果
  • 无缝集成:添加到主题页面小部件列表,可直接在后台拖拽使用

代码寻找

  • 文章作者页面小部件:wp-content/themes/lolimeow/core/widgets/widget-postauthor.php
  • 页面小部件注册:wp-content/themes/lolimeow/core/widgets/widget-set.php

使用步骤

  • 后台 → 外观 → 页面小部件
  • 将”当前文章作者信息”页面小部件拖拽到侧边栏或其他页面小部件区域
  • 保存设置后,文章页会自动显示当前文章作者的详细信息

 
 
 
 

📋 小部件复制功能

文件位置: core/widgets/widget-postauthor.php · core/widgets/widget-currentuser.php · core/widgets/widget-userinfo.php · core/widgets/copy-function.js · assets/js/boxmoe.js

 
 

修复内容

  1. 复制功能修复:修复QQ、邮箱、微信图标点击无法复制文本的问题

– 创建统一的复制功能脚本 copy-function.js
– 使用现代 Clipboard API,并兼容旧浏览器
– 通过 WordPress 机制加载脚本,确保只加载一次

  1. Gitee支持增强:为所有小部件添加Gitee信息和图标支持

– 在三个小部件中添加Gitee字段获取和显示
– 使用Gitee官方SVG图标 https://gitee.com/static/images/gitee-logos/logo_gitee_g_red.svg
– 添加Gitee后台设置选项
– 修复Gitee图标显示问题

  1. Toast提示样式优化

– 将头部图标从 msg-tip.png 改为动态读取网站Favicon
– 标题从”系统消息”改为”温馨提示”
– 正文显示”已复制:{实际复制的文本}”
– 采用漫画风背景(粉色渐变 + Comic Sans MS 字体 + 圆角 + 阴影)

  1. 当前用户信息小部件修复

– 修复用户信息获取逻辑,从 isset() 改为 !empty()
– 确保邮箱图标正常显示
– 优化邮箱显示样式

  1. 其他优化

– 修复widget-userinfo.php和widget-currentuser.php中的$defaults数组,添加gitee键默认值
– 确保所有小部件中的邮箱、QQ、GitHub等图标正常显示
– 优化社交图标的CSS样式

 
 

代码寻找

  • 统一复制功能脚本:wp-content/themes/lolimeow/core/widgets/copy-function.js
  • Toast提示样式:wp-content/themes/lolimeow/assets/js/boxmoe.js
  • 小部件文件:wp-content/themes/lolimeow/core/widgets/widget-.php

 
 

使用步骤

  • 后台 → 外观 → 页面小部件
  • 编辑需要修改的小部件,填写Gitee链接等信息
  • 保存设置后,前端会显示相应的社交图标
  • 点击社交图标可复制对应的信息(QQ、邮箱、微信)或跳转到对应链接(GitHub、Gitee)

 
 
 
 

🎉 主题激活自动创建页面

文件位置: functions.php

  • 功能概述: 主题激活时自动在后台创建指定页面,无需手动操作
  • 自动创建的页面列表:

– 友链 – 使用 page/p-links.php 模板
– 友情链接 – 使用 page/p-links.php 模板
– 外链提示版 – 使用 page/p-goto.php 模板
– 外链直跳版 – 使用 page/p-go.php 模板
– 注册页面 – 使用 page/p-signup.php 模板
– 用户中心 – 使用 page/p-user_center.php 模板
– 登录页面 – 使用 page/p-signin.php 模板
– 重置密码页面 – 使用 page/p-reset_password.php 模板

  • 实现原理: 通过 after_switch_theme 钩子在主题激活时触发,检查页面是否存在,不存在则创建并设置对应模板
  • 代码寻找: wp-content/themes/lolimeow/functions.phplolimeow_create_pages_on_activation 函数
  • 使用步骤: 无需手动操作,主题激活后自动创建所有页面

 
 
 
 

📋 文章布局风格切换

文件位置: core/panel/settings/set-basis.php · page/template/blog-list.php · assets/css/style.css

  • 功能概述: 新增文章布局风格切换功能,支持在单排布局和一排三个布局之间切换
  • 后台设置:

入口: 外观 → 盒子萌主题设置 → 基础设置 → 博客布局效果设置 → 文章布局风格
选项: 单排布局(默认)、一排三个布局
数据存储: boxmoe_article_layout_style

  • 前端实现:

– 在 blog-list.php 中添加布局判断逻辑
– 单排布局保持原有样式,一排三个布局使用响应式网格布局
– 支持移动端适配,在小屏幕上自动调整为单列布局

  • 样式优化:

– 新增 .list-three 相关样式,保持与原有主题风格一致
– 实现卡片悬停效果和过渡动画
– 优化图片尺寸和内容显示

 
 
 
 

📐 三列布局优化

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

  • 问题修复:

– 修复三列布局时卡片高度不一的问题
– 调整主内容和侧边栏的宽度比例,增强文章内容的视觉占比

  • 布局调整:

– 主内容区域:在三列布局时从 col-lg-8 调整为 col-lg-9
– 侧边栏:在三列布局时从 col-lg-4 调整为 col-lg-3
– 使用 Flex 布局确保卡片等高显示

  • 内容优化:

– 限制标题最多显示2行
– 限制内容最多显示3行
– 将元信息区域固定在卡片底部
– 确保所有卡片元素对齐一致

 
 
 
 

📇 Markdown卡片式内容

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

  • 功能描述: 新增卡片式内容语法,支持创建漫画风格的卡片,包含头像、名称、描述、链接和勋章
  • 语法格式:

  名称:
  头像链接:
  描述:
  链接:
  勋章:
  
  • 编辑器支持:

– 在Markdown编辑器工具栏新增”卡片”按钮
– 点击按钮自动插入卡片语法模板
– 支持实时预览

  • 样式特点:

– 漫画风格设计,采用圆角、阴影和渐变效果
– 头像圆形设计,带有边框和阴影
– 左上角勋章标签,带有旋转效果
– 整个卡片可点击跳转(新标签打开)
– 暗色模式适配,背景色跟随主题

  • 代码寻找:

– Markdown解析:core/module/fun-markdown.php:75-93
– 编辑器按钮:assets/js/markdown-editor.js:38
– 样式定义:assets/css/markdown-editor.css:298-424 · assets/css/style.css:916-1067

使用步骤:

  1. 确保已开启MD语法编辑器(后台 → 外观 → 盒子萌主题设置 → 系统优化)
  2. 在写文章页点击编辑器工具栏中的”卡片”按钮
  3. 填写卡片信息:名称、头像链接、描述、链接和勋章
  4. 发布后,前端将显示漫画风格的卡片

优化特性:

  • 无底部按钮,实现全屏点击跳转
  • 自适应宽度设计
  • 紧凑的卡片布局
  • 精致的勋章标签
  • 无多余虚线装饰
  • 完美适配暗色模式

 
 
 
 

🎪 底部栏小部件区域

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

  • 功能描述: 重新开发底部栏小部件功能,位于前端页面底部,支持横排显示各种小部件,并优化搜索小部件样式与主题边框效果绑定
  • 核心特性:

– 支持主题边框样式设置(漫画边框、阴影边框、动态线条边框)
– 自动跟随主题的边框样式设置
– 响应式设计,适配不同屏幕尺寸
– 支持各种小部件类型(分类、最新文章、评论、标签云、搜索、用户信息等)
– 悬停动画效果,增强用户体验
– 暗色模式适配
– 搜索小部件样式与主题边框效果深度绑定(没同步样式,需要解决)
– 统一的小部件样式管理

  • 实现要点:

– 在fun-basis.php中注册底部栏小部件区域
– 在footer.php中添加底部栏小部件区域的调用
– 在style.css中添加底部栏小部件的样式
– 支持主题边框样式的自动应用
– 修复了非悬停状态下底座样式丢失的问题
– 修复了头像样式、书签图片显示、文字布局等问题

  • 代码寻找:

– 小部件区域注册:core/module/fun-basis.php:302-337
– 底部栏调用:footer.php:10-18
– 样式定义:assets/css/style.css:2048-2568assets/css/style.css:3458-3550
– 搜索小部件:core/widgets/widget-search.php

使用步骤:

  1. 后台 → 外观 → 页面小部件
  2. 将需要的小部件拖拽到”底部栏展示”小部件区域
  3. 保存设置后,前端页面底部将显示添加的小部件

优化特性:

  • 小部件卡片样式与首页风格一致
  • 支持各种小部件内容样式的自适应
  • 用户信息小部件样式优化
  • 非悬停状态下底座样式正常显示
  • 悬停时的平滑过渡动画
  • 完美适配亮色和暗色模式
  • 搜索小部件样式与主题边框效果深度绑定
  • 统一的搜索小部件样式,适配所有位置
  • 增强的搜索小部件交互体验
  • 修复了书签样式同步问题
  • 修复了漫画风边框底座显示问题

搜索小部件边框效果绑定:

  • blog-border 样式:搜索输入框边框颜色与主题边框颜色一致,聚焦时显示主题特色的2px偏移阴影效果
  • blog-shadow 样式:搜索输入框默认带有轻微阴影,聚焦时阴影增强,同时保持主题特色的2px偏移效果
  • blog-lines 样式:搜索输入框添加了与漫画风边框匹配的流动渐变背景动画,聚焦时动画加速
  • 暗色模式适配:所有边框效果在暗色模式下均有对应的适配样式

 
 
 
 

🎬 文章页视频播放器优化

文件位置: assets/js/boxmoe.js · assets/css/style.css

  • 功能描述: 优化文章页视频播放器功能,增强用户体验

 
 

🔹 网页全屏功能优化

  • 实现原理: 修改网页全屏按钮功能,实现占满浏览器视口的效果
  • 核心特性:

– 点击网页全屏按钮时,页面内容占满整个浏览器视口
– 保持浏览器工具栏和地址栏可见
– 隐藏页面滚动条,防止出现双滚动条
– 清零页面边距,充分利用视口空间
– 退出时恢复页面原始状态

  • 代码寻找:

– 功能实现:assets/js/boxmoe.js:1213-1253
– 样式定义:assets/css/style.css(移除了关灯模式相关样式)

 
 

🔹 功能调整记录

  1. 初始实现: 添加了B站风格视频播放器,包括自定义控制栏、进度条、倍速播放、镜像画面、画中画和关灯模式
  2. 关灯模式移除: 根据需求删除了所有与关灯模式相关的代码,包括CSS样式和JavaScript功能
  3. 网页全屏优化: 改进了网页全屏按钮功能,从浏览器真正全屏改为占满视口
  4. 状态同步修复: 确保普通全屏按钮和网页全屏按钮的状态管理相互独立,避免冲突(失败,后续会修复)

 
 

🔹 技术实现要点

  • 使用CSS变量和渐变效果美化播放器界面
  • 采用requestAnimationFrame实现平滑的进度条动画
  • 支持多种浏览器全屏API的兼容性处理
  • 实现了完整的视频控制功能,包括播放/暂停、音量控制、进度条拖拽、倍速播放等
  • 响应式设计,适配不同屏幕尺寸

使用步骤:

  • 在文章中插入视频,系统自动为视频添加自定义控制栏
  • 使用控制栏进行视频操作:

– 点击播放/暂停按钮控制视频播放
– 拖拽进度条跳转视频进度
– 点击倍速按钮切换播放速度
– 点击镜像按钮镜像视频画面
– 点击画中画按钮进入画中画模式
– 点击网页全屏按钮占满浏览器视口
– 点击全屏按钮进入浏览器真正全屏模式

 
 
 
 

📋 首页文章分类筛选功能增强

文件位置: core/panel/settings/set-artice.php · core/module/fun-article.php · core/panel/includes/class-options-interface.php

  • 功能描述: 增强首页文章分类筛选功能,支持通过输入分类ID进行筛选,并优化了设置项的显示样式
  • 核心特性:

分类ID输入筛选: 在后台「主题设置-文章设置」中新增「首页文章分类筛选」配置项,支持输入分类ID,多个分类用,、,三个标点符号做区分
置顶文章筛选: 修复了置顶文章不遵循分类筛选条件的问题,确保只有符合条件的置顶文章才会显示在首页
设置项样式优化: 为设置项描述中的标点符号添加了红色圆角背景样式,提升用户体验
span标签支持: 确保设置项描述中可以使用带样式的span标签

  • 代码寻找:

– 设置项定义:core/panel/settings/set-artice.php
– 分类筛选逻辑:core/module/fun-article.php
– HTML标签支持:core/panel/includes/class-options-interface.php

  • 使用步骤:

– 后台 → 外观 → 盒子萌主题设置 → 文章设置
– 在「首页文章分类筛选」输入框中输入分类ID,多个分类用,、,三个标点符号做区分
– 保存设置后,首页将只显示所选分类的文章(包括符合条件的置顶文章)

 
 
 
 

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

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

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

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

  • 代码寻找:

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

  • 使用步骤:

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

 
 
 
 

🎨 主题切换动画效果实现

文件位置: assets/js/boxmoe.js

  • 功能描述: 实现了点击切换亮色/暗色模式时的平滑圆形过渡动画,提升用户体验
  • 核心特性:

– 点击主题切换按钮时,从按钮位置向外扩散圆形遮罩
– 使用CSS clip-path 动画实现平滑过渡
– 自动适配当前主题背景色
– 520ms 动画时长,提供流畅视觉体验
– 动画结束后自动清理,不影响页面性能

  • 代码寻找:

– 动画实现:wp-content/themes/lolimeow/assets/js/boxmoe.js:1705-1753

  • 实现要点:

– 计算点击位置和所需最大半径
– 创建临时遮罩层,应用当前主题背景色
– 使用 requestAnimationFrame 触发 CSS 过渡
– 监听 transitionend 事件清理元素
– 兼容各种主题切换按钮位置

  • 使用步骤: 无需额外设置,点击页面顶部的亮色/暗色模式切换按钮即可体验动画效果
  • 实现对比: 从 lolimeow-meihua 主题移植并优化,确保与 lolimeow 主题完美兼容

 
 
 
 

🎎 文章卡片看板娘自定义

文件位置: core/panel/settings/set-artice.php · page/template/blog-list.php · core/panel/includes/class-options-media-uploader.php

  • 后台设置

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

  • 前端实现

– 动态CSS生成:根据设置的图片URL和显示范围,动态生成CSS覆盖原主题的背景图
– 响应式设计:支持三列布局(80px大小)和单列布局(120px大小)
– 显示条件:根据设置的显示范围自动控制显示
– 位置:绝对定位在文章卡片左下角(bottom: 10px; left: 10px; z-index: 1)

  • 技术实现

– 替换原主题的CSS背景图,而不是新增HTML元素
– 支持留空不显示,可点击恢复默认图
– 样式与主题设置保持一致性

  • 优化和修复

– 修复了h4标题被挤压到右边的问题
– 修复了未定义数组键的警告
– 确保group使用方式符合Options Framework框架要求

使用步骤

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

⚡ 优化

 
 
 
 

🔗 链接体验优化

  • 后台站点预览:后台顶部栏的“查看站点”链接改为新标签页打开 (_blank),避免覆盖后台页面 (boxmoe_adminbar_viewsite_newtab).
  • 后台全站链接新窗口打开

开关入口: 基础设置 -> 后台所有链接新窗口打开 (boxmoe_admin_all_links_new_tab)
功能描述: 开启后,后台页面底部注入 JS,自动将所有非 JS/锚点 链接的 target 属性设置为 _blank
代码寻找:
– 设置项: wp-content/themes/lolimeow/core/panel/settings/set-basis.php
– 注入逻辑: wp-content/themes/lolimeow/core/module/fun-admin.php (boxmoe_admin_all_links_new_tab)

  • 导航栏链接新窗口打开

开关入口: 基础设置 -> 导航栏链接新窗口打开 (boxmoe_nav_target_blank)
功能描述: 开启后,前台顶部导航菜单的所有末级链接(非下拉父级)将自动设置为新窗口打开 (target="_blank")。
代码寻找:
– 设置项: wp-content/themes/lolimeow/core/panel/settings/set-basis.php
– 过滤逻辑: wp-content/themes/lolimeow/core/module/fun-basis.php (boxmoe_nav_target_blank_filter)

  • 文章编辑按钮新窗口打开

开关入口: 基础设置 -> 文章编辑按钮新窗口打开 (boxmoe_article_edit_target_blank)
功能描述: 开启后,文章页/页面内的编辑按钮(包括顶部工具栏编辑)将在新窗口打开 (target="_blank")。
代码寻找:
– 设置项: wp-content/themes/lolimeow/core/panel/settings/set-basis.php
– 文章页按钮逻辑: wp-content/themes/lolimeow/core/module/fun-article.php (boxmoe_edit_post_link_new_tab)
– 工具栏按钮逻辑: wp-content/themes/lolimeow/core/module/fun-admin.php (boxmoe_adminbar_edit_post_newtab)

 
 
 
 

✍️ 写文章入口新标签页打开

文件位置: core/module/fun-admin.php · assets/js/admin-view-newtab.js

  • 覆盖范围:顶部“新建→文章”、侧边“文章→写文章”、文章列表页右上角“新增文章 / Add New”
  • 新标签与安全:统一添加 target="_blank"rel="noopener noreferrer",避免后台页被覆盖与提升安全性
  • 代码寻找

– Admin Bar 新建文章:wp-content/themes/lolimeow/core/module/fun-admin.php:338-346
– 后台统一新标签脚本:wp-content/themes/lolimeow/assets/js/admin-view-newtab.js:1-12

 
 
 
 

💊 药丸短代码样式修复(Bootstrap 5 兼容)

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

  • 修复原因:旧类名 badge-primary 等在 Bootstrap 5 已弃用;bg-gradient- 不存在,导致 [ yaowan] 前端样式不生效
  • 修复方案:统一改用 text-bg- 颜色类,并通过 bg-gradient 叠加实现渐变;内容输出使用 wp_kses_post 进行安全过滤
  • 支持值

1–8 纯色:primary / secondary / info / success / danger / warning / light / dark
9–16 渐变:在上述纯色基础上叠加 bg-gradient

  • 用法示例

[ yaowan style='5']危险[/yaowan]< span class="badge text-bg-danger mb-1 mt-1">危险
[ yaowan style='9']主要[/yaowan]< span class="badge text-bg-primary bg-gradient mb-1 mt-1">主要

  • 影响范围:仅影响 [ yaowan] 短代码的前端徽章渲染,不改动其它短代码寻找

 
 
 
 

🧾 代码短代码与复制修复([ precode])

文件位置: core/module/fun-shortcode.php · assets/js/boxmoe.js · assets/js/quicktags.js

  • 编辑器包装清理:清理短代码内容中的 < p>/< div>/< br> 等编辑器注入标签,使用 shortcode_unautop 转换换行并做 trim,防止被当作 HTML 渲染
  • 安全转义:最终以 < pre>< code>…< / code>< / pre> 输出,并对内容 esc_html 确保纯文本显示(防 XSS/标签破坏)
  • 参数支持linenums 控制是否显示行号,lang 指定高亮语言(Prettify 的 lang-
  • 复制纯文本:复制按钮改用 data-clipboard-text,从 ol.linenums li 聚合文本,自动去除行号与首尾空行
  • 经典编辑器按钮:将“代码高亮”按钮改为插入短代码 [ precode]…[/precode],统一渲染路径

代码寻找

  • 短代码定义与清理:wp-content/themes/lolimeow/core/module/fun-shortcode.php:136-156
  • 复制逻辑修复:wp-content/themes/lolimeow/assets/js/boxmoe.js:590-615
  • 经典按钮替换:wp-content/themes/lolimeow/assets/js/quicktags.js:8

使用示例

  • 基本:[ precode]你的代码[/precode]
  • 指定语言:[ precode lang="js"]const a=1;[/precode]
  • 关闭行号:[ precode linenums="0"]...[/precode]

 
 
 
 

🌙 暗色模式代码块浅紫配色

文件位置: assets/css/style.css

  • 行号栏浅紫:在暗色模式([data-bs-theme="dark"])下,将行号背景与边框改为浅紫 #f3e8ff / #e9d5ff,行号文本为 #7c3aed
  • 主体保持深色:代码主体维持深色编辑器风格,保证可读性与对比度

代码寻找

  • 规则入口:wp-content/themes/lolimeow/assets/css/style.css:533-537(新增以 [data-bs-theme="dark"] 开头的 3 条规则)

 
 
 
 

🧼 移除代码块内文字背景(仅限 < pre>< code>

文件位置: assets/css/style.css

  • 背景覆盖:为避免全局 .single-content code{ background-color:#f9f2f4 } 影响代码块,新增覆盖规则使 < pre>< code> 内的 code 背景透明

代码寻找

  • 覆盖规则:wp-content/themes/lolimeow/assets/css/style.css:519, 538pre.prettyprint code{ background:transparent!important; ... }

 
 
 
 

🧾 代码短代码深度优化([ precode] 防自动分行/粘贴清理)

文件位置: core/module/fun-shortcode.php · assets/js/tinymce-precode-paste.js · assets/js/tinymce-clear-format.js · assets/js/clear-format-quicktags.js · core/module/fun-admin.php · assets/css/style.css

  • 服务端清洗:在短代码渲染阶段彻底移除编辑器注入的块级标签,将
    归一化为单换行,并压缩多余空行(fun-shortcode.php:116–123
  • 粘贴前拦截:TinyMCE 在粘贴含 [ precode] 的内容时,自动清理内部的
    /

    //
    包装并归一化换行,避免将样式粘入代码块(assets/js/tinymce-precode-paste.js:1–61,注册于 core/module/fun-admin.php:47–50

  • 清除格式增强:可视化编辑器与文本编辑器的“清除格式”按钮同时支持标签剥离与换行归一化(tinymce-clear-format.js:41–53clear-format-quicktags.js:41–55
  • 显示层禁止折行:对 .prettyprint 及其子节点(含 ol.linenums/li/code/span)统一强制 white-space: pre 并禁用断词,长行以水平滚动呈现(assets/css/style.css:518–522

 
 
 
 

🖱️ 全局右键菜单增强 (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 实现站内跨页粘贴,并提示“已粘贴站内内容 (外部内容受浏览器安全限制)”。

 
 
 
 

� Banner内容显示修复

文件位置: assets/js/boxmoe.js

  • 问题描述: Banner区域的欢迎语和一言功能不显示
  • 根本原因:

– CSS中.site-main元素默认设置为隐藏状态(opacity: 0
– 依赖banner图片的load事件添加.loaded类来显示内容
– 缺少图片加载失败的处理机制,导致图片无法加载时内容一直隐藏

  • 修复方案: 修改initBannerImage()函数,添加三重保障机制

1. 保持原有图片加载成功处理逻辑
2. 新增error事件监听,图片加载失败时也能显示内容
3. 添加3秒超时机制,无论图片是否加载,最终都会显示内容

  • 代码寻找

– 修复前代码:wp-content/themes/lolimeow/assets/js/boxmoe.js:241-261
– 修复后代码:wp-content/themes/lolimeow/assets/js/boxmoe.js:241-267

修复效果

  • 确保Banner区域的欢迎语和一言功能始终能正常显示
  • 提高了页面的容错性和稳定性
  • 避免了因图片加载问题导致内容一直隐藏的情况

 
 
 
 

📦 后台菜单名称优化

  • 功能描述:将后台外观菜单下的”小工具”名称修改为”页面小部件”,统一后台术语风格
  • 实现方式:通过修改后台菜单数组和翻译过滤器实现全局替换
  • 代码寻找

– 菜单修改:wp-content/themes/lolimeow/core/module/fun-admin.php:570-582
– 翻译过滤器:wp-content/themes/lolimeow/core/module/fun-admin.php:584-592

 
 
 
 

🔄 修复后台访问重定向循环问题

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

  • 问题描述:部分设备访问后台链接时出现”当前无法使用此页面 – gl.baimu.live 重定向你太多次”错误(ERR_TOO_MANY_REDIRECTS)

 
 

🔹 修复方案

1. 修复登录页面重定向函数 (boxmoe_custom_login_redirect)
  • 增强循环检测:添加HTTP_REFERER检查,避免从本站重定向时导致循环
  • 优化redirect_to参数处理:检查redirect_to是否会导致循环,避免重定向到wp-login.php本身
  • 安全重定向逻辑:确保自定义登录页面不是wp-login.php,防止循环重定向

 
 

2. 修复后台访问限制函数 (boxmoe_restrict_admin_access)
  • AJAX请求排除:添加wp_doing_ajax()检查,避免影响正常的AJAX操作
  • 认证页面排除:排除登录、注册和密码重置页面,确保用户可以正常认证
  • 首页循环防护:添加首页检查,避免重定向循环到首页

 
 

🔹 修复效果

  • 管理员可以正常访问后台
  • 非管理员用户被正确重定向
  • 登录页面重定向不会导致循环
  • 各种边缘情况都得到了妥善处理

 
 

🔹 代码寻找

  • 登录页面重定向修复:core/module/fun-user.php:376-402
  • 后台访问限制修复:core/module/fun-admin.php:86-105

 
 
 
 

🎨 注销提示页面美化与修复

文件位置: functions.php

  • 美化设计:将默认的注销提示页面替换为与主题风格一致的玻璃拟态设计,包括全屏背景、圆角卡片和主题配色
  • 修复常量重复定义:在定义DONOTCACHEPAGE常量前添加检查,避免重复定义警告
  • 修复favicon路径:正确处理favicon.ico文件路径,确保图标正常显示
  • 修复语言属性输出:使用输出缓冲捕获language_attributes()函数输出,避免纯文本显示
  • 修复logo位置:将logo正确放置在div卡片内上方,使用输出缓冲捕获boxmoe_logo()函数输出
  • 修复注销功能:将表单提交方式从GET改为POST,添加必要的隐藏字段,确保注销功能正常工作
  • 背景图片绑定:将注销页面背景绑定到后台主题设置的Banner随机图片配置,支持API图片、随机图片和固定图片

代码寻找

  • 主要实现:wp-content/themes/lolimeow/functions.php:150-412

 
 
 
 

📝 系统优化默认值调整

  • 功能描述:将后台主题设置中”系统优化”的”关闭古腾堡编辑器”选项默认值从关闭改为开启
  • 实现方式:修改设置面板的默认值配置
  • 代码寻找wp-content/themes/lolimeow/core/panel/settings/set-optimize.php:24
  • 影响范围:新安装主题或重置设置时,古腾堡编辑器将默认关闭,使用经典编辑器

 
 
 
 

🏷️ 页面标语默认值优化

  • 功能描述:将后台主题设置中”页面标语设置”的所有英文默认值改为中文
  • 修改项

– HOME → 首页
– CATEGORY → 分类
– TAG → 标签
– SEARCH → 搜索
– AUTHOR → 作者
– DATE → 日期
– ARCHIVE → 归档
– POST → 文章
– PAGE → 页面
– MY friend → 我的朋友
– user center → 会员中心

  • 实现方式:修改设置面板的默认值配置
  • 代码寻找wp-content/themes/lolimeow/core/panel/settings/set-slogan.php
  • 影响范围:新安装主题或重置设置时,所有页面标语将默认显示中文

 
 
 
 

🖼️ Banner背景图默认值修复

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

  • 问题描述: 后台自定义banner背景图的默认值路径不正确,导致生成的URL无效
  • 根本原因: 原始代码中存在路径重复问题,$image_path 已包含 /assets/images/ 路径,却又额外添加了 /banner/assets/images/ 路径
  • 修复方案: 修改默认值配置,将 'std' => $image_path.'/banner/assets/images/banner.jpg' 改为 'std' => $image_path.'banner.jpg'
  • 代码寻找: wp-content/themes/lolimeow/core/panel/settings/set-banner.php:75
  • 影响范围: 新安装主题或重置设置时,banner背景图默认值将正确指向 wp-content/themes/lolimeow/assets/images/banner.jpg

 
 
 
 

🔒 重置密码页面样式统一

文件位置: page/p-reset_password.php

  • 样式统一:将重置密码页面样式修改为与登录页面一致,采用现代化玻璃拟态设计
  • 视觉效果增强

– 全屏背景图片和模糊效果
– 玻璃拟态卡片设计
– 浮动标签表单效果
– 暗色模式适配
– 按钮扫光动画
– 粒子效果背景

  • HTML结构优化

– 新增全屏背景容器
– 使用玻璃拟态卡片包裹内容
– 改进Logo和标题区域
– 优化返回登录链接样式
– 添加底部版权信息

  • JavaScript增强

– 添加加载动画效果
– 改进表单提交处理
– 优化错误和成功消息显示
– 集成粒子效果脚本

 
 
 
 

📱 响应式设计优化

文件位置: header.php · assets/css/style.css · assets/js/boxmoe.js · assets/css/image-viewer.css

 
 

🔹 基础响应式设置

  • Viewport优化: 更新了header.php中的viewport meta标签,添加viewport-fit=cover以提高iPhone兼容性
  • 全局响应式规则: 新增了全局图片响应式规则:img, video, iframe { max-width: 100%; height: auto; display: block; }
  • 断点统一: 将所有媒体查询断点从768px调整为985px,确保更一致的响应式体验

 
 

🔹 布局优化

  • Profile-social布局: 在1401px+尺寸下,将.profile-social设置为grid布局,显示5个项目/行
css
  @media (min-width: 1401px) {
      .profile-social { display: grid; grid-template-columns: repeat(5, 1fr); }
  }
  
  • 导航栏优化: 修复1199px尺寸下导航栏文字分行问题,添加flex-wrap: wrap确保正常换行

 
 

🔹 汉堡菜单修复

  • 按钮变形修复: 修复991px尺寸下汉堡菜单按钮变形问题,添加自适应大小
  • 线条样式修复: 修复汉堡菜单显示方形而非线条的问题,重置Bootstrap默认样式
  • 交互优化: 实现点击汉堡菜单后线条隐藏,然后按钮完全消失

– 使用JavaScript添加active类切换
– 在CSS中添加active状态样式,确保完全隐藏

 
 

🔹 主题切换布局

  • 移动端主题切换: 优化移动端主题切换ul布局,改为一行三个显示

– 设置flex-wrap: nowrap确保不换行
– 使用flex: 1使三个选项平均分配宽度
– 添加text-align: center确保文字居中
– 调整padding确保在移动端有足够空间
– 增加min-width确保容器有足够宽度

 
 

🔹 Banner文字优化

  • 文字大小调整: 在移动端(985px以下)优化Banner文字大小

– 欢迎语(.boxmoe-typing-animation)设置为font-size: 1.6rem
– 一言文字(.main-title)设置为font-size: 0.8rem
– 实现欢迎语字体大小是一言文字的2倍

 
 

🔹 修复详情

  1. viewport meta标签: 更新header.php添加viewport-fit=cover
  2. 全局图片响应式: 在style.css中添加全局响应式规则
  3. 媒体查询断点: 将所有768px断点改为985px
  4. Profile-social网格: 添加1401px+的grid布局
  5. 导航栏换行: 添加flex-wrap: wrap修复导航栏文字分行
  6. 汉堡菜单样式: 重置Bootstrap默认样式,修复显示问题
  7. 汉堡菜单交互: 添加JavaScript事件监听和CSS active状态样式
  8. 主题切换布局: 优化ul和li样式,实现一行三个显示
  9. Banner文字大小: 添加媒体查询,调整欢迎语和一言文字大小

实现效果:

  • 985px及以下显示完整移动样式
  • profile-social在1401px+显示5个项目
  • 导航栏文本在1199px正常换行
  • 汉堡菜单按钮在991px正常显示,点击后完全隐藏
  • 移动端主题切换选项显示为一行三个
  • 移动端Banner欢迎语字体大小是一言文字的2倍

 
 
 
 

🔐 erphpdown插件登录状态显示问题修复

文件位置: wp-content/plugins/erphpdown/includes/init.php · wp-content/themes/lolimeow/page/p-signin.php

  • 问题描述:erphpdown插件导致登录状态偶尔显示为未登录,点击登录按钮等同于刷新页面
  • 修复方案

会话管理修复:在 erphpdown_nologinpay_check 函数中添加会话状态检查,只有在会话未启动时才启动会话,避免干扰WordPress的cookie-based身份验证
ajax_object未定义修复:在登录页面中直接定义 ajax_object 变量,避免依赖主题脚本加载

  • 代码寻找

– 会话状态检查:wp-content/plugins/erphpdown/includes/init.php:131-134
– ajax_object定义:wp-content/themes/lolimeow/page/p-signin.php:339-343

  • 修复效果

– 登录状态显示稳定,不再偶尔变为未登录状态
– 点击登录按钮正常执行AJAX登录请求,不再等同于刷新页面

 
 
 
 

🎨 ErphpDown插件UI界面重构

文件位置: wp-content/plugins/erphpdown/ 目录下多个文件

功能概述

将ErphpDown下载管理系统的插件界面UI,与ImageShiroki主题的后台设置页面UI完全统一美化,导航移至插件界面内部,而非后台列表中。

核心特性

  1. 统一设计语言:所有UI元素(按钮、表单、卡片、标签)均遵循主题的设计语言
  2. 标签式导航:将原有的多子菜单结构整合为单一主界面,导航移至插件内部
  3. 卡片式布局:采用主题的卡片式设计,增强视觉层次感
  4. 现代UI元素:实现了浮动标签输入字段、渐变设计元素、圆角输入框等
  5. 响应式设计:确保界面在不同屏幕尺寸下均能正常工作
  6. CSS过渡与动画:添加了平滑的过渡效果和悬停动画

修改的主要文件

  1. erphp-main.php:主界面模板,包含标签式导航

– 修改为匹配主题的HTML结构,采用卡片式布局
– 添加了渐变标题和适当的类名
– 整合了所有子菜单为标签式导航

  1. erphp-main.css:主题样式文件

– 创建了与主题一致的CSS样式
– 实现了浮动标签效果、卡片设计和渐变按钮
– 覆盖了插件的默认样式

  1. erphp-settings.php:设置页面

– 更新为使用主题的卡片式布局和表单样式
– 添加了浮动标签和卡片容器的适当类名
– 优化了表单结构和分组

技术实现要点

  1. 菜单重组:修改插件的菜单系统,只显示一个主菜单项

– 使用add_menu_page注册单一主菜单
– 移除了所有子菜单注册

  1. 主题CSS集成

– 加载主题的CSS样式文件
– 定义了与主题一致的CSS变量
– 实现了主题的设计语言

  1. 浮动标签效果
css
   .ish-field .ish-input:focus + .ish-float,
   .ish-field .ish-input:not(:placeholder-shown) + .ish-float {
       top: -9px !important;
       transform: none !important;
       font-size: 12px !important;
       color: var(--ish-primary) !important;
   }
   
  1. 卡片式布局
css
   .ish-admin-card {
       padding: 18px !important;
       border-radius: 18px !important;
       background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,255,0.92)) !important;
       border: 1px solid var(--ish-border) !important;
       box-shadow: 0 8px 24px rgba(22,32,58,0.06) !important;
       margin-bottom: 18px !important;
   }
   
  1. 渐变按钮样式
css
   .ish-admin .button-primary {
       background: linear-gradient(90deg, #FF9F43, #FF7A59) !important;
       box-shadow: 0 10px 20px rgba(255,159,67,0.25) !important;
       color: #fff !important;
       border: none !important;
       border-radius: 999px !important;
   }
   

修复的问题

  1. Edit工具中的字符串替换问题:通过先读取确切的文件内容,然后进行精确编辑来修复
  2. 多次菜单注册尝试:仔细删除了旧的菜单注册调用
  3. CSS特异性问题:创建了具有更高特异性选择器的专用CSS文件
  4. HTML结构不匹配:更新了HTML结构以匹配主题的容器类
  5. $wpdb变量未定义错误:在所有使用$wpdb的文件中添加了global $wpdb声明

效果展示

  • 插件在WordPress后台侧边栏中只有一个主菜单项
  • 所有插件设置都通过与主题设置页面设计相同的标签式界面访问
  • 实现了卡片式布局、浮动标签和渐变按钮
  • 应用了响应式设计原则,适配不同屏幕尺寸
  • 界面与主题的设计一样,导航移至插件内部

🚨 erphpdown插件致命错误修复(停用钩子函数缺失)

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

  • 问题描述: 停用erphpdown插件时出现致命错误:Fatal error: Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, function "erphpdown_uninstall" not found or invalid function name
  • 修复内容:

1. 添加缺失的停用函数: 在erphpdown.php文件中添加了erphpdown_uninstall函数,防止停用插件时出现回调函数不存在的错误
2. 添加缺失的激活函数: 同时添加了erphpdown_install函数,确保插件激活时也能正常工作
3. 遵循代码注释规范: 为新函数添加了符合规范的emoji标题注释

  • 解决效果: 插件可以正常激活和停用,不再出现致命错误

代码修改:

php
// 🔧 插件激活函数
function erphpdown_install() {
    // 空函数,防止激活插件时出现错误
}

// 🥳 插件停用函数
function erphpdown_uninstall() {
    // 空函数,防止停用插件时出现错误
}

影响范围: 仅修改了erphpdown插件的主文件,不影响插件的其他功能和主题的正常运行

🐛 PHP 8.0+ 兼容性修复(erphpdown)

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

  • 问题描述: Inteliphense诊断报错,包括类型不匹配和废弃函数调用
  • 修复的错误:

Expected type 'object|array'. Found 'string'(第339行)
'curl_close' is deprecated(第377、393、410行)

  • 修复内容:

1. 类型安全处理: 在erphpdown_file_post函数中添加类型检查,确保http_build_query()只接收数组或对象类型参数
2. 废弃函数移除: 删除所有curl_close()调用,PHP 8.0+中不再需要显式关闭cURL资源,会自动处理资源释放

  • 解决效果: 消除了所有Inteliphense诊断错误,确保代码在PHP 8.0+环境中正常运行

🔒 登录状态显示修复

文件位置: assets/js/boxmoe.js · wp-content/plugins/erphpdown/includes/init.php · core/module/fun-user.php

  • 问题描述: 用户登录后不显示登录状态,点击登录按钮等同于刷新页面,出现”安全认证失败,请刷新页面重试”错误
  • 修复内容:

1. JavaScript冲突修复: 修改boxmoe.js中的validation函数,排除登录表单#loginform,避免与AJAX登录提交事件冲突
2. PHP会话干扰解决: 修改erphpdown插件的erphpdown_nologinpay_check函数,仅在非登录状态下启动会话,避免干扰WordPress cookie-based身份验证机制
3. 优化nonce验证机制: 修改handle_user_login函数,避免因页面停留时间过长导致nonce过期无法登录的问题
4. 登录状态持久化: 确保is_user_logged_in()函数正确返回用户登录状态,修复登录后不显示会员中心等问题

  • 解决效果: 登录功能恢复正常,用户登录后显示正确的会员信息,点击登录按钮执行正常的AJAX登录请求

 
 
 
 

� 管理员后台访问权限修复

问题描述: 部分设备偶然性登录后,管理员身份无法访问后台管理页面,打开链接直接跳转到首页

修复范围:

  1. 主题文件修复: wp-content/themes/lolimeow/core/module/fun-admin.php
  2. 插件文件修复: wp-content/plugins/erphpdown/includes/init.php

主题修复内容:

  • 函数: boxmoe_restrict_admin_access
  • 修复点:

– 将钩子从 admin_init 改为 admin_menu,确保用户身份完全确认后再执行重定向
– 添加 is_user_logged_in() 检查,只对已登录用户进行重定向
– 保留 current_user_can('manage_options') 检查,确保只有非管理员才会被重定向

插件修复内容:

  • 函数: erphpdown_noadmin_redirect
  • 修复点:

– 将钩子从 init 改为 admin_init,确保用户身份完全确认后再执行重定向
– 添加 is_user_logged_in() 检查,只对已登录用户进行重定向
– 添加 current_user_can('manage_options') 检查,确保管理员不会被重定向
– 添加 exit 语句,确保重定向后立即终止脚本执行

修复原理:

  1. 钩子执行时机问题: 原代码使用过早的钩子(admin_initinit),在用户身份完全确认之前就执行了重定向逻辑
  2. 权限检查不完整: 缺少对管理员权限的明确检查,导致管理员也可能被错误重定向
  3. 重定向逻辑缺陷: 缺少对用户登录状态的检查,可能导致未登录用户也被重定向

修复效果:

  • 管理员用户在登录后能够正常访问后台管理页面
  • 无论是通过点击”访问后台”链接还是直接访问后台URL,都不会被错误地重定向到首页
  • 非管理员用户仍然被正确重定向到首页,保持了原有的安全控制
  • 修复了部分设备偶然性登录后无法访问后台的问题

 
 
 
 

📱 移动端导航栏优化与暗色模式修复

文件位置: assets/css/style.css

  • 修复内容

1. 移动端搜索图标对齐修复:调整 .search-btn iline-height.mobile-search-btn 的内边距,使其与LOGO和用户信息图标平齐
2. 暗色模式菜单按钮样式:确保移动端导航栏菜单按钮在暗色模式下显示为白色,修复 --bs-white 变量在暗色模式下被重新定义为深色的问题
3. 新增纯白色CSS变量:在 :root[data-bs-theme="dark"] 中添加 --pure-white: #fff,统一管理白色主 题色
4. 统一移动端按钮样式:调整搜索按钮内边距,与用户按钮样式保持一致
5. 修复暗色模式背景色:确保暗色模式下导航菜单背景色正确显示为白色

代码寻找
– CSS变量定义:wp-content/themes/lolimeow/assets/css/style.css:27, 39
– 移动端搜索样式:wp-content/themes/lolimeow/assets/css/style.css:502-504
– 暗色模式菜单样式:wp-content/themes/lolimeow/assets/css/style.css:660-662, 672-674, 820-822, 832-834

 
 
 
 

🎨 导航栏样式优化

  • 气泡效果移除:去掉了亮色和暗色模式下导航非悬停状态的气泡效果,使导航栏更加简洁
  • 扫光动画优化:确保导航栏扫光动画元素在非悬停状态下完全透明,仅在悬停时显示动画效果
  • 设备兼容性增强:避免了部分设备不兼容扫光动画样式而显示异常的问题
  • 代码位置

– 主要样式:wp-content/themes/lolimeow/assets/css/style.css:494-498
– 深色模式适配:wp-content/themes/lolimeow/assets/css/style.css:103-117

 
 
 
 

🔍 搜索框样式优化(暗色模式)

文件位置: assets/css/style.css

修复内容

  1. 暗色模式下搜索框白色描边

– 为侧边栏和底部栏搜索框添加白色描边效果,增强暗色模式下的可见性
– 使用 outline: 2px solid rgba(255, 255, 255, 0.9) !important 实现
– 调整描边位置:outline-offset: -2px !important

  1. 保留漫画风边框效果

– 修复了之前修改破坏漫画风边框效果的问题
– 恢复了透明背景:background: transparent !important
– 移除了多余阴影:box-shadow: none !important
– 保留了原本的边框和文字颜色

  1. 导航栏搜索框修复

– 确保导航栏搜索框在暗色模式下也能显示漫画风效果
– 在暗色模式下,将导航栏搜索框的边框和阴影颜色改为白色
– 将背景色改为暗色背景,文字颜色改为白色
– 移除了可能冲突的白色描边

  1. 样式优先级优化

– 使用了 !important 确保白色描边样式生效
– 使用了多重选择器确保样式能应用到所有相关元素
– 为不同边框样式添加了样式规则

  1. 底部栏搜索框修复

– 修复了底部栏搜索框的样式问题
– 确保底部栏搜索框在暗色模式下也能显示白色描边
– 保留了原本的漫画风边框效果

 
 

使用效果

  • 暗色模式下,侧边栏和底部栏搜索框显示明显的白色描边,提高了可见性
  • 所有搜索框在暗色模式下都能保留原本的漫画风边框效果
  • 导航栏搜索框在暗色模式下显示白色边框和阴影,与主题风格保持一致
  • 搜索框在不同位置(导航栏、侧边栏、底部栏)都能显示正确的样式

 
 

实现要点

  • 使用了 outline 属性而不是 border,避免破坏原本的边框样式
  • 调整了 outline-offset 确保描边位置合适
  • 为不同位置的搜索框添加了针对性的样式规则
  • 确保了样式的优先级,避免被其他样式覆盖
  • 保留了主题原本的设计风格和漫画风边框效果

修复内容:

  • 修复了底部栏小部件功能丢失问题
  • 修复了当前用户信息的头像样式
  • 修复了书签的图片显示问题
  • 优化了文字布局
  • 同步了底部栏和侧边栏的书签样式
  • 修复了漫画风边框时非悬停状态下底座样式显示问题
  • 统一了搜索小部件样式,使其与侧边栏样式一致
  • 修复了搜索小部件不显示问题
  • 确保搜索小部件样式绑定到主题布局边框设置
  • 修复了侧边栏和底部栏链接小部件样式不一致问题,确保头像和标题显示样式统一
  • 统一了链接小部件的布局、头像大小、标题样式和交互效果
  • 修复了底部栏链接小部件的卡片样式,使其与侧边栏保持一致
  • 确保所有链接小部件在不同位置(侧边栏、底部栏)显示方式完全一致

 
 
 
 

🐛 会员插件修复(ErphpDown)

🚀 修复插件设置页面访问错误

文件位置:

  • erphpdown/includes/functions.erphp.php
  • erphpdown/includes/init.php
  • erphpdown/admin/erphp-main.php
  • erphpdown/admin/erphp-settings.php
  • erphpdown/admin/erphp-front.php
  • erphpdown/admin/erphp-payment.php
  • erphpdown/admin/erphp-vip-setting.php

修复内容

  1. 插件安装提示链接修复

– 修复了插件安装后提示信息中”去设置”链接的访问错误
– 将链接从 admin.php?page=erphpdown/admin/erphp-settings.php 改为 admin.php?page=erphpdown-main&tab=settings

  1. 表单提交URL修复

– 修复了【显示设置】、【支付设置】、【VIP设置】等页面的表单提交URL错误
– 将所有设置页面的表单 action 属性修改为正确的标签页格式
– 例如:admin.php?page=erphpdown-main&tab=front 代替直接访问文件的URL

  1. 权限统一修复

– 修复了菜单注册权限与页面访问权限不一致的问题
– 将菜单注册的权限从 activate_plugins 改为 manage_options
– 确保与 erphp-main.php 中的权限检查保持一致

  1. 全局保护机制

– 在 functions.erphp.php 中添加了 erphpdown_protect_admin_files() 函数
– 处理所有直接访问admin目录下文件的请求,自动重定向到正确的标签页URL
– 定义了文件名到标签页名称的映射关系,确保正确重定向

修复原理

  1. URL格式问题:WordPress只注册了 erphpdown-main 作为合法菜单项,直接访问 erphpdown/admin/erphp-settings.php 会被权限系统拒绝
  2. 权限不一致:菜单注册和页面访问使用了不同的权限,导致管理员用户在某些情况下无法正常访问
  3. 表单提交错误:多个设置页面的表单提交到了错误的URL,导致保存后出现权限错误

修复效果

  • 插件安装后点击”去设置”链接能正确跳转到设置页面
  • 所有设置页面点击”保存设置”按钮后能正确处理,不会出现权限错误
  • 管理员用户能正常访问所有设置页面
  • 统一了插件的权限设置,避免了权限不一致导致的访问问题
  • 修复了部分用户在某些设备上无法访问插件设置页面的问题

技术说明

  • 插件使用了标签页模式管理所有设置页面,通过 erphpdown-main 主页面和 tab 参数来区分不同的设置页面
  • 修复后,所有设置页面的访问和表单提交都通过正确的标签页URL进行,符合WordPress的权限管理机制
  • 新增的全局保护机制确保了即使有其他地方使用了错误的URL,也能被正确重定向,提高了插件的健壮性

 
 
 
 

📱 移动端文章列表布局优化

文件位置: page/template/blog-list.php · assets/css/style.css

  • 功能描述: 优化移动端文章列表布局,实现一行两个四方形卡片展示,文字溢出显示省略号
  • 核心优化点

– 将所有文章列表统一改为栅格布局,使用 col-sm-6 确保移动端一行两个卡片
– 实现四方形图片容器,使用 padding-top: 75% 保持 4:3 比例
– 标题溢出显示省略号(最多2行)
– 内容溢出显示省略号(最多3行)
– 确保卡片高度一致,内容区域填满卡片
– 保持上图下文的布局结构

  • 代码修改

– 模板文件:page/template/blog-list.php – 统一使用栅格布局
– CSS样式:assets/css/style.css – 添加移动端四方形卡片样式

  • 使用效果

– 移动端文章列表以一行两个四方形卡片形式呈现
– 文字超过四方形容器时显示省略号
– 卡片内部保持上图下文布局
– 提升了移动端的视觉体验和浏览效率

 
 
 
 

📅 日期显示优化

文件位置: assets/css/style.css

  • 问题描述: 修复移动端文章卡片中日期分行显示的问题
  • 修复方案

– 将 .list-three .list-post-authordisplayblock 改为 inline-flex
– 添加 flex-wrap: nowrap 确保内容不换行
– 添加 white-space: nowrap 确保文本不折行
– 调整分隔符 .dotmargin0 5px,优化间距
– 在媒体查询中应用相同修复,确保移动端显示一致

  • 代码修改

– CSS样式:assets/css/style.css – 修改 .list-three .list-post-author 相关样式

  • 修复效果

– 作者名和日期在同一行显示
– 消除了日期分行的问题
– 提升了卡片的整体美观性
– 保持了一致的视觉体验

 
 
 
 

🎨 后台侧边栏菜单样式优化

文件位置: assets/css/admin-flat-rounded.css

  • 功能描述: 修改后台侧边栏菜单选中状态的文字颜色,从白色改为深紫色
  • 核心优化点

– 将主菜单选中状态文字颜色从白色改为深紫色
– 将子菜单选中状态文字颜色从白色改为深紫色
– 保持与主题整体风格的一致性
– 提升选中状态的视觉辨识度

  • 代码修改

– CSS样式:assets/css/admin-flat-rounded.css
– 第29行:修改主菜单选中状态样式 color:#ffffff !importantcolor:#4b0082 !important
– 第30行:修改子菜单选中状态样式 color:#ffffff !importantcolor:#4b0082 !important

  • 优化效果

– 后台侧边栏菜单选中时显示深紫色文字
– 提高了选中状态的视觉对比度
– 增强了用户操作的反馈体验
– 保持了主题的一致性设计

感谢您的支持
微信赞赏

微信扫一扫

支付宝赞赏

支付宝扫一扫



评论(0)

查看评论列表

暂无评论


发表评论

表情 颜文字
插入代码

广告版 ne-2058250819

后退
前进
刷新
复制
粘贴
全选
删除
返回首页