feat(header): add 叠加组件 with after_html per background item
「顶部多功能组件 → 背景内容」的每个背景项目新增「叠加组件」手风琴, 其中提供「组件下方额外内容」(after_html) 输入框,支持 HTML。 - 后台 schema:slider_item_fields 增加 overlay accordion(sanitize_type html), 默认值与 PageConfigMetaBox / DisplayPageGroups 的默认项目同步带上空 overlay - 保存:页面独立配置(page_config 元数据)按项目写入 overlay.after_html, 沿用 wp_kses_post() 过滤 - 前端:after_html 作为 .slide-overlay-after 覆盖层输出在所属幻灯片内 (幻灯片是 overflow:hidden 的定位层,放到幻灯片外会被裁掉), 默认贴底居中、仅其中的链接与表单接收点击 - main.min.css 由 tools/build-public-assets.mjs 重新生成 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
44a03fd5f4
commit
c2733017fd
10 files changed
+89
-4
No files matched your search
@@ -354,12 +354,24 @@ if (!function_exists('jio_get_header_slider_markup')) {
|
||||
$slide_class .= ' gradient-bg';
|
||||
$slide_attrs .= ' data-opacity="0.2"';
|
||||
}
|
||||
|
||||
// 叠加组件:每个背景项目可以带一段附加 HTML,显示在背景内容下方。
|
||||
// 值在保存时已经过 wp_kses_post(),这里保持作者写的结构。
|
||||
$overlay = is_array($slide['overlay'] ?? null) ? $slide['overlay'] : [];
|
||||
$overlay_html = '';
|
||||
if (trim((string) ($overlay['after_html'] ?? '')) !== '') {
|
||||
$overlay_html = '<div class="slide-overlay-after">'
|
||||
. wp_kses_post((string) $overlay['after_html'])
|
||||
. '</div>';
|
||||
}
|
||||
|
||||
$url = esc_url((string) ($link['url'] ?? ''));
|
||||
$target = !empty($link['target']) ? ' target="_blank" rel="noopener noreferrer"' : '';
|
||||
$slides_html .= '<div class="swiper-slide ' . esc_attr(trim($slide_class)) . '"' . $slide_attrs . '>' . $blur_html;
|
||||
$slides_html .= $url !== '' ? '<a href="' . esc_url($url) . '"' . $target . '>' : '<span>';
|
||||
$slides_html .= $background_html . $layers_html . $text_html;
|
||||
$slides_html .= $url !== '' ? '</a>' : '</span>';
|
||||
$slides_html .= $overlay_html;
|
||||
$slides_html .= '</div>';
|
||||
$slide_count++;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user