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

白木 2025年8月27日 2026年4月3日 2.92k

2 评论

优化特性:

• 亮色模式下标题悬停颜色变为粉色
• 暗色模式下标题悬停颜色变为紫色
• 折叠卡片悬停时有向上移动5px的动画效果
• 标题文字与箭头图标保持合适间距，避免遮挡
• 适配亮色和暗色两种主题模式
• 平滑的过渡动画，提升用户体验

🔄 文章列表无限加载功能

文件位置: core/panel/settings/set-artice.php · core/module/fun-article.php · page/template/blog-list.php · assets/js/boxmoe.js

• 功能描述: 在后台主题设置的文章设置中新增无限加载选项，实现文章列表滚动到底部自动加载更多文章，加载时显示动画，加载完成的文章以上移渐显方式呈现
• 实现要点:

- 添加后台选项: 在文章设置的【文章列表分页模式】中新增"无限加载"选项
- 修改分页函数: 更新 boxmoe_pagination() 函数，添加无限加载模式的支持
- 添加前端结构: 在文章列表模板中添加加载动画和结束消息的HTML结构
- 实现滚动加载: 使用 fetch API 实现异步加载，监听滚动事件，当滚动到页面底部200px时自动加载
- 优化加载动画: 采用柔和的脉冲动画，避免旋转动画导致的"反转色块"问题
- 文章入场动画: 新加载的文章以上移渐显方式呈现，提升用户体验
- 结束消息样式: 全部加载完成后显示"完"字，继承激活页码样式（粉色背景，白色文字）

• 代码寻找:

- 后台选项添加：core/panel/settings/set-artice.php:115
- 分页函数修改：core/module/fun-article.php:359-361
- 前端结构添加：page/template/blog-list.php:142-166
- 无限加载逻辑：assets/js/boxmoe.js:2496-2672
- 加载动画样式：assets/js/boxmoe.js:2576-2628

使用步骤:

1. 后台 → 外观 → 盒子萌主题设置 → 文章设置
2. 找到"文章列表分页模式"选项，选择"无限加载"
3. 保存设置后，前端文章列表会启用无限加载功能

实现效果:

• 访问文章列表页，滚动到底部会自动加载更多文章
• 加载过程中显示柔和的脉冲动画
• 新加载的文章平滑上移渐显
• 全部文章加载完成后显示"完"字，样式与激活页码一致

优化特性:

• 平滑的加载体验，提升用户体验
• 柔和的脉冲动画，避免视觉冲突
• 文章上移渐显动画，增强页面活力
• 结束消息样式与主题风格统一
• 兼容现有主题功能
• 无需额外配置，启用即可使用

📧 SMTP功能增强

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

• SMTP连接测试功能：新增了直接测试SMTP连接的功能

- 功能：在发送测试邮件前，可先测试SMTP连接是否正常
- 入口：SMTP设置页面新增"测试SMTP连接"按钮
- 实现：直接创建PHPMailer实例测试连接，不发送实际邮件
- 反馈：显示连接成功或失败的详细信息

• 邮件模板美化：优化了所有邮件模板的设计

- 采用玻璃卡片设计风格
- 紫色渐变主题
- 响应式布局
- 清晰的视觉层次

📚 首页文章数量控制

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

• 首页文章显示数量设置项: 在后台主题设置的【文章设置】中新增了【首页文章显示数量】设置项

- 功能：可灵活调整首页显示的文章数量，默认3篇
- 设置项ID：boxmoe_home_posts_per_page
- 默认值：3
- 位置：放在【开启所有文章形式支持】下面，【首页文章仅显示分类】上面
- 类型：文本输入框，支持自定义数字

• 首页文章数量控制实现：

- 在boxmoe_custom_post_order函数中添加了首页文章数量控制逻辑
- 通过get_boxmoe('boxmoe_home_posts_per_page', 3)获取设置值，默认值为3
- 使用intval()确保获取到的是整数类型
- 应用于首页文章查询，控制每页显示数量

• 分页功能：系统已自带完善的分页功能，支持多种分页类型（多页导航、上/下页按钮、无限加载），可通过后台设置选择

🎯 Banner设置增强

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

• 关闭打字效果设置项：在后台主题设置的【Banner设置】中新增了"关闭打字效果"设置项

- 功能：开启后欢迎语将直接显示，不显示打字动画
- 设置项ID：boxmoe_banner_typing_switch
- 默认为关闭状态（显示打字动画）
- 前端逻辑：根据设置值决定是否使用boxmoe-typing-animation类

• 欢迎语预设值更新：将Banner欢迎语的默认预设值更新为

- 旧值：Hello! 欢迎来到盒子萌！
- 新值：Hello! 欢迎来到盒子萌-🎉纸鸢版！

• 关闭自动换图功能：在后台主题设置的【Banner设置】中新增了"关闭自动换图功能"设置项

- 功能：开启后Banner图片将保持静态显示，不再自动轮播
- 设置项ID：boxmoe_banner_auto_switch
- 默认为关闭状态（启用自动换图）
- 前端逻辑：根据设置值决定是否启动自动换图功能
- 实现方式：在initBannerRandomSwitch()函数中添加条件判断，当设置为true时不启动自动换图

🌐 WPJAM菜单中文翻译

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

• 翻译WPJAM插件侧边栏菜单名称：将wpjam-basic插件在侧边栏菜单的名称从英文翻译为中文

- 功能：将"WPJAM"主菜单名称改为"WPJAM 基础设置"
- 子菜单标题保持为中文"优化设置"
- 使用admin_menu钩子确保在插件注册菜单后执行
- 翻译效果持久，不会被插件更新覆盖
- 保持了主题的一致性和美观性

SMTP邮件设置新增消息接受邮箱

🎯 功能目标

在主题SMTP邮件设置中新增消息接受邮箱配置，允许用户自定义接收新评论和新会员注册通知的邮箱地址，提高邮件通知系统的灵活性和可配置性。

#🔧 实现方法

修改了以下文件：

1. core/panel/settings/set-smtp.php - 在主题选项框架中添加消息接受邮箱设置项
2. core/module/fun-smtp.php - 在独立SMTP设置页面添加消息接受邮箱设置项
3. core/module/fun-msg.php - 优化邮件发送逻辑，支持从多个设置源获取设置值

✏️ 具体修改内容

1. 在主题选项框架中添加设置项：

- 在SMTP发件消息通知设置开关部分新增了"消息接受邮箱"设置项
- 允许用户配置接收新评论和新会员注册通知的邮箱地址

2. 在独立SMTP设置页面添加设置项：

- 在保存设置的逻辑中添加了保存boxmoe_smtp_receive_email选项的代码
- 在设置表单中添加了消息接受邮箱的输入字段，位置在发件人名称字段之后

3. 优化邮件发送逻辑：

- 修改了boxmoe_new_user_register函数，使其优先使用配置的消息接受邮箱
- 修改了boxmoe_comment_notification函数，使其优先使用配置的消息接受邮箱
- 实现了多源设置值获取逻辑，确保设置的一致性和可靠性

🎨 实现效果

• 可以在主题选项框架的SMTP设置页面配置消息接受邮箱
• 可以在独立的SMTP设置页面配置消息接受邮箱
• 系统会优先使用独立SMTP设置页面的设置值
• 若未设置则回退到使用系统管理员邮箱或文章作者邮箱
• 提高了邮件通知系统的灵活性和可配置性

📝 技术要点

• 采用了多源设置值获取策略，确保设置的可靠性
• 优先从独立SMTP设置页面（get_option）获取设置值
• 其次从主题选项框架（get_boxmoe）获取设置值
• 最后使用默认值（系统管理员邮箱或文章作者邮箱）
• 保持了与主题原有代码风格的一致性

🏞️ 新增菜单【导航】自定义图标链接功能

功能概述

为WordPress主题添加了菜单自定义图标链接功能，允许用户在菜单编辑页面为每个菜单项添加自定义图标，支持PNG、SVG、JPG格式，图标尺寸与文字大小一致。

功能实现

添加菜单自定义图标字段

文件位置: h:/shiroki-wordpress/shiroki/shiroki/app/public/wp-content/themes/lolimeow-shiroki/core/module/fun-basis.php

• 添加了菜单图标字段的注册和保存功能
• 支持上传或输入图片URL，支持PNG、SVG、JPG格式
• 在菜单编辑页面右侧添加了"🥳 菜单图标设置"元框
• 实现了图标预览功能

修改导航菜单Walker类

文件位置: h:/shiroki-wordpress/shiroki/shiroki/app/public/wp-content/themes/lolimeow-shiroki/core/module/fun-navwalker.php

• 在bootstrap_5_wp_nav_menu_walker类中添加了图标显示功能
• 在菜单项前显示自定义图标，与文字垂直对齐
• 使用get_post_meta()函数获取菜单图标的URL

添加CSS样式

文件位置: h:/shiroki-wordpress/shiroki/shiroki/app/public/wp-content/themes/lolimeow-shiroki/assets/css/style.css

• 图标尺寸设置为1em x 1em，与文字大小一致
• 图标与文字之间添加了0.10em的间距
• 图标使用vertical-align: middle实现垂直对齐
• 支持响应式设计

使用方法

1. 登录WordPress后台，进入外观 > 菜单页面
2. 在菜单结构中展开任意菜单项
3. 在右侧的"🥳 菜单图标设置"区域，点击"选择图片"按钮上传图片，或直接输入图片URL
4. 可以实时预览图标效果
5. 点击"保存菜单"按钮保存设置
6. 刷新网站前端，即可看到带有图标的菜单项

功能特点

• ✅ 支持PNG、SVG、JPG等多种图片格式
• ✅ 图标尺寸与文字大小一致（1:1比例）
• ✅ 图标与文字垂直对齐，视觉效果美观
• ✅ 支持实时预览图标效果
• ✅ 与主题的亮色/暗色模式无缝集成
• ✅ 操作简单，界面友好

Bug修复

问题描述

菜单图标链接保存后再次打开被清空，但是前端正常显示图标。

问题原因

JavaScript代码在保存菜单时，将当前图标值赋给了所有菜单项的隐藏字段，导致只有最后一次编辑的菜单项能保存图标，其他菜单项的图标会被清空。

解决方案

1. 添加菜单项选择机制：

- 当用户点击菜单项的编辑按钮（展开菜单项）时，将当前菜单项标记为"当前选中"
- 其他菜单项移除"当前选中"状态

2. 优化图标值填充逻辑：

- 只在菜单项展开时，将该菜单项的图标值填充到右侧元框
- 修复了setTimeout回调函数中this上下文的问题

3. 改进保存机制：

- 保存菜单时，只将右侧元框中的图标值保存到当前选中的菜单项中
- 其他菜单项保持原有图标值不变

4. 添加实时更新功能：

- 当右侧元框中的图标值变化时，实时更新当前选中菜单项的隐藏字段
- 确保用户在保存前就能看到图标值的变化

技术细节

菜单图标字段注册

function shiroki_menu_item_icon_field() {
    // 注册菜单图标元框
    add_meta_box(
        'shiroki_menu_item_icon',
        '🥳 菜单图标设置',
        'shiroki_menu_item_icon_field_html',
        'nav-menus',
        'side',
        'default'
    );
}
add_action( 'admin_init', 'shiroki_menu_item_icon_field' );

菜单图标保存

function shiroki_save_menu_item_icon_fields($menu_id, $menu_item_db_id) {
    if (isset($_POST['menu_item_icon'][$menu_item_db_id])) {
        update_post_meta(
            $menu_item_db_id,
            '_shiroki_menu_icon',
            esc_url_raw($_POST['menu_item_icon'][$menu_item_db_id])
        );
    } else {
        delete_post_meta($menu_item_db_id, '_shiroki_menu_icon');
    }
}
add_action( 'wp_update_nav_menu_item', 'shiroki_save_menu_item_icon_fields', 10, 2 );

图标显示

// 获取菜单图标
$icon_url = get_post_meta($item->ID, '_shiroki_menu_icon', true);
$icon_html = '';

if ($icon_url) {
    $icon_html = '<img src="' . esc_url($icon_url) . '" alt="' . esc_attr($item->title) . '" class="shiroki-menu-icon" style="vertical-align: middle;" /> ';
}

CSS样式

.shiroki-menu-icon {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
}