🎎 新增前端看板形象’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- 功能描述：开发了功能完整的时钟页面小部件，允许用户自定义选择时区，实时显示当前时间并根据所选时区自动调整
- 核心特性：
- 后台显示名称：”时钟小部件_shiroki”
- 后台 → 外观 → 小部件
- 将”时钟小部件_shiroki”小部件拖拽到侧边栏或其他小部件区域
- 配置时区和标题选项，保存后前端即可显示时钟
- 修复下拉框不显示问题：简化了
form()函数，使用直接 echo 语句，添加翻译域，确保 HTML 结构正确 - 修复时间不渲染问题：使用
getHours()而不是getUTCHours()计算目标时区时间，确保时间显示正确 - 修复暗色模式显示问题：确保所有必要的 CSS 属性（
background-clip、text-fill-color）都明确设置，防止文本被色块覆盖 - 优化时区标题格式：将时区名称改为中文+英文格式，提升用户体验
- 适配多种布局：优化了一排三个布局下的显示，确保时间完整显示
- 响应式设计优化：添加媒体查询，根据屏幕尺寸自动调整字体大小和内边距
- 使用 WordPress Widget API 开发，实现了
__construct()、widget()、form()和update()方法 - 采用 CSS 渐变实现彩色文字效果
- 使用 JavaScript 实现实时时间更新
- 适配主题的亮色/暗色模式切换
- 支持一排三个布局的特殊优化
📐 文章图片自定义尺寸支持
文件位置:core/module/fun-article.php · core/module/fun-markdown.php- 功能描述：修复文章图片无法添加自定义高宽尺寸的问题，支持HTML标签和Markdown语法自定义图片尺寸
- 核心改进：
boxmoe_remove_width_height 函数，不再移除所有图片的宽高属性，只处理没有手动添加尺寸的图片
– 支持Markdown自定义尺寸语法：新增 
- 实现要点：
boxmoe_remove_width_height 函数中添加尺寸属性检测，跳过已手动添加尺寸的图片
– 增强Markdown图片解析正则表达式，支持解析自定义尺寸参数
– 确保懒加载功能与自定义尺寸兼容- 使用方式：
🏞️ 文章编辑图片弹窗优化
文件位置:assets/js/quicktags-shiroki.js · core/module/fun-admin.php- 功能描述：替换了文章编辑工具栏图片按钮的默认浏览器弹窗，实现了高斯模糊的圆角拟态玻璃窗口，支持输入图片链接和图片名称
- 核心改进：
- 实现要点：
- 使用方式：
🔄 文章最后更新时间显示
文件位置:page/template/blog-single.php · page/template/blog-page.php · page/template/blog-page-nosidebar.php · page/template/blog-page-nosidebar-noborder.php · assets/css/style.css- 功能描述: 在前端文章页的文章信息栏中新增文章最后一次更新时间的显示，方便读者了解文章的时效性
- 实现要点:
get_the_modified_date() 获取文章最后更新时间
– 为新添加的 .modified 类添加了 CSS 样式，确保与其他信息项保持一致
– 适配了所有文章模板页面，包括单页、列表页、无侧边栏页和无侧边栏无边框页- 代码寻找:
page/template/blog-single.php:45-46
– 文章列表页模板：page/template/blog-page.php:35-36
– 无侧边栏文章页：page/template/blog-page-nosidebar.php:35-36
– 无侧边栏无边框文章页：page/template/blog-page-nosidebar-noborder.php:35-36
– CSS 样式添加：assets/css/style.css:2800
实现效果: 文章信息栏中会显示类似以下格式的信息：
- 作者：[作者名]
- 发布日期：[发布日期]
- 更新日期：[最后更新日期]
- 浏览量：[浏览数量]
- 与现有文章信息栏样式保持一致
- 使用直观的刷新图标作为视觉标识
- 适配所有文章模板页面
- 无需额外配置，自动显示
- 保持了与主题整体风格的一致性
🥰 全新折叠语法
文件位置:core/module/fun-markdown.php · core/module/fun-shortcode.php · assets/css/style.css- 功能描述: 新增主题自带的折叠语法功能，支持Markdown语法和主题原生短代码，实现可折叠的内容块
- 实现要点:
标题\n内容\n:::
- 代码寻找:
</code>和<summary>标签
- 主题原生短代码: 新增 折叠内容
短代码，支持自定义标题和默认展开状态
- 可视化编辑器支持: 在编辑器下拉菜单中添加折叠短代码选项
- 完整的CSS样式: 包含亮色和暗色模式适配，悬停效果和过渡动画
- 响应式设计: 适配不同屏幕尺寸
- 代码寻找:
- Markdown语法解析: core/module/fun-markdown.php:165-180
- 短代码实现: core/module/fun-shortcode.php:345-356
- 可视化编辑器选项: core/module/fun-shortcode.php:381-382
- CSS样式: assets/css/style.css:1701-1787
使用步骤:<ol><li>Markdown语法: 在文章中输入 <code>
details 折叠标题\n折叠内容\n:::
短代码: 在文章中插入 折叠标题
折叠内容 - 亮色模式下标题悬停颜色变为粉色
- 暗色模式下标题悬停颜色变为紫色
- 折叠卡片悬停时有向上移动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
使用步骤:
- 后台 → 外观 → 盒子萌主题设置 → 文章设置
- 找到”文章列表分页模式”选项，选择”无限加载”
- 保存设置后，前端文章列表会启用无限加载功能
- 访问文章列表页，滚动到底部会自动加载更多文章
- 加载过程中显示柔和的脉冲动画
- 新加载的文章平滑上移渐显
- 全部文章加载完成后显示”完”字，样式与激活页码一致
- 平滑的加载体验，提升用户体验
- 柔和的脉冲动画，避免视觉冲突
- 文章上移渐显动画，增强页面活力
- 结束消息样式与主题风格统一
- 兼容现有主题功能
- 无需额外配置，启用即可使用
📧 SMTP功能增强
文件位置:core/module/fun-smtp.php- SMTP连接测试功能：新增了直接测试SMTP连接的功能
- 邮件模板美化：优化了所有邮件模板的设计
📚 首页文章数量控制
文件位置:core/panel/settings/set-artice.php · core/module/fun-article.php- 首页文章显示数量设置项: 在后台主题设置的【文章设置】中新增了【首页文章显示数量】设置项
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设置】中新增了”关闭打字效果”设置项
boxmoe_banner_typing_switch
– 默认为关闭状态（显示打字动画）
– 前端逻辑：根据设置值决定是否使用boxmoe-typing-animation类
- 欢迎语预设值更新：将Banner欢迎语的默认预设值更新为
Hello! 欢迎来到盒子萌！
– 新值：Hello! 欢迎来到盒子萌-🎉纸鸢版！
- 关闭自动换图功能：在后台主题设置的【Banner设置】中新增了”关闭自动换图功能”设置项
boxmoe_banner_auto_switch
– 默认为关闭状态（启用自动换图）
– 前端逻辑：根据设置值决定是否启动自动换图功能
– 实现方式：在initBannerRandomSwitch()函数中添加条件判断，当设置为true时不启动自动换图
🌐 WPJAM菜单中文翻译
文件位置:core/module/fun-admin.php- 翻译WPJAM插件侧边栏菜单名称：将wpjam-basic插件在侧边栏菜单的名称从英文翻译为中文
SMTP邮件设置新增消息接受邮箱
🎯 功能目标
在主题SMTP邮件设置中新增消息接受邮箱配置，允许用户自定义接收新评论和新会员注册通知的邮箱地址，提高邮件通知系统的灵活性和可配置性。#🔧 实现方法
修改了以下文件：core/panel/settings/set-smtp.php– 在主题选项框架中添加消息接受邮箱设置项core/module/fun-smtp.php– 在独立SMTP设置页面添加消息接受邮箱设置项core/module/fun-msg.php– 优化邮件发送逻辑，支持从多个设置源获取设置值
✏️ 具体修改内容
- 在主题选项框架中添加设置项：
- 在独立SMTP设置页面添加设置项：
boxmoe_smtp_receive_email选项的代码
– 在设置表单中添加了消息接受邮箱的输入字段，位置在发件人名称字段之后
- 优化邮件发送逻辑：
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实现垂直对齐
- 支持响应式设计
使用方法
- 登录WordPress后台，进入外观 > 菜单页面
- 在菜单结构中展开任意菜单项
- 在右侧的”🥳 菜单图标设置”区域，点击”选择图片”按钮上传图片，或直接输入图片URL
- 可以实时预览图标效果
- 点击”保存菜单”按钮保存设置
- 刷新网站前端，即可看到带有图标的菜单项
功能特点
- ✅ 支持PNG、SVG、JPG等多种图片格式
- ✅ 图标尺寸与文字大小一致（1:1比例）
- ✅ 图标与文字垂直对齐，视觉效果美观
- ✅ 支持实时预览图标效果
- ✅ 与主题的亮色/暗色模式无缝集成
- ✅ 操作简单，界面友好
Bug修复
问题描述
菜单图标链接保存后再次打开被清空，但是前端正常显示图标。问题原因
JavaScript代码在保存菜单时，将当前图标值赋给了所有菜单项的隐藏字段，导致只有最后一次编辑的菜单项能保存图标，其他菜单项的图标会被清空。解决方案
- 添加菜单项选择机制：
- 优化图标值填充逻辑：
this上下文的问题
- 改进保存机制：
- 添加实时更新功能：
技术细节
菜单图标字段注册
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;
}
评论（2）