Files
wordpress-theme-aksrt/templates/parts/home-modules/module-hero.php
T
kate522 a25feb4161 fix(header): align header-slider DOM/height with zibll demo
Match demo.zibll.com slide markup (a/span wrap, data-* attrs, --pc/--m height on .new-swiper), keyword chip classes, and height CSS so the top multifunc block renders like the official demo.
2026-07-24 11:02:42 +08:00

493 lines
24 KiB
PHP

<?php
/**
* Home module: header components hero + floating search + icon cards.
*
* DOM mirrors zibll header-slider:
* container > slider | search overlay (before + form + after) | cards
*
* @package AKSRT
* @version 4.2.0
*/
defined('ABSPATH') || exit;
// Visibility (page type + device) is decided by aksrt_header_slide_is_show().
// This partial only renders content when already gated by aksrt_header_slide().
$cfg = get_query_var('aksrt_module_config', []);
if (!is_array($cfg)) {
$cfg = [];
}
$hero_banners = function_exists('aksrt_get_banners') ? aksrt_get_banners(8, 'hero') : [];
$settings = function_exists('aksrt_get_all_settings') ? aksrt_get_all_settings() : [];
$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : [
'pc' => false,
'mobile' => false,
'show' => false,
'show_keywords' => false,
'popular_limit' => 6,
'show_input_cat' => false,
'show_type' => false,
'in_cat' => '',
'in_type' => 'post',
'more_cats' => [],
'before_html' => '',
'after_html' => '',
];
// zibll zib_m_pc_is_show: checkbox arrays with pc_s / m_s.
$is_mobile_req = function_exists('wp_is_mobile') && wp_is_mobile();
$m_pc_show = static function ($opt) use ($is_mobile_req): bool {
$opt = (array) $opt;
return ($is_mobile_req && in_array('m_s', $opt, true)) || (!$is_mobile_req && in_array('pc_s', $opt, true));
};
// Search device gate (zibll header_slider_search_s).
$search_opt = [];
if (!empty($search_cfg['pc'])) {
$search_opt[] = 'pc_s';
}
if (!empty($search_cfg['mobile'])) {
$search_opt[] = 'm_s';
}
// Fallback: master enabled without explicit devices = both (legacy).
if (!$search_opt && !empty($search_cfg['show'])) {
$search_opt = ['pc_s', 'm_s'];
}
$show_search = $m_pc_show($search_opt) || !empty($cfg['with_search']);
// Cards device gate (zibll header_slider_card_s).
$cards_master = !empty($settings['header_components_cards_enabled']);
$card_show_devices = isset($settings['header_components_card_show_devices'])
? (array) $settings['header_components_card_show_devices']
: ['pc', 'mobile'];
$card_opt = [];
if (in_array('pc', $card_show_devices, true)) {
$card_opt[] = 'pc_s';
}
if (in_array('mobile', $card_show_devices, true)) {
$card_opt[] = 'm_s';
}
if (!$card_opt && $cards_master) {
$card_opt = ['pc_s', 'm_s'];
}
$show_cards = $cards_master && $m_pc_show($card_opt);
$icon_cards = isset($settings['header_components_icon_cards']) ? (array) $settings['header_components_icon_cards'] : [];
$card_bg_mode = !empty($settings['header_components_card_shared_bg']) ? 'shared' : 'individual';
$card_icon_shape = $settings['header_components_card_icon_shape'] ?? 'circle';
// Filter blur (zibll header_slider_filter_blur) — independent of cards.
$filter_blur_devices = isset($settings['header_components_filter_blur_devices'])
? (array) $settings['header_components_filter_blur_devices']
: [];
// Legacy: header_components_card_blur true without devices → both.
if (!$filter_blur_devices && !empty($settings['header_components_card_blur'])) {
$filter_blur_devices = ['pc', 'mobile'];
}
$filter_opt = [];
if (in_array('pc', $filter_blur_devices, true)) {
$filter_opt[] = 'pc_s';
}
if (in_array('mobile', $filter_blur_devices, true)) {
$filter_opt[] = 'm_s';
}
$filter_blur_on = $m_pc_show($filter_opt);
$slide_count = count($hero_banners);
// card-N only counts cards actually rendered on this device (zibll parity).
$visible_card_count = 0;
if ($show_cards) {
foreach ($icon_cards as $_c) {
if (is_array($_c) && (trim((string) ($_c['icon'] ?? '')) !== '' || trim((string) ($_c['custom_icon'] ?? '')) !== '' || trim((string) ($_c['customize_icon'] ?? '')) !== '')) {
$visible_card_count++;
} elseif (is_array($_c) && trim((string) ($_c['title'] ?? '')) !== '') {
// Count entries even if icon missing so layout still allocates.
$visible_card_count++;
}
}
}
$container_classes = ['header-slider-container', 'header-components-container', 'relative', 'mb20', 'card-' . $visible_card_count];
if ($filter_blur_on) {
$container_classes[] = 'filter-blur';
}
if (in_array('pc', $filter_blur_devices, true)) {
$container_classes[] = 'has-blur-pc';
}
if (in_array('mobile', $filter_blur_devices, true)) {
$container_classes[] = 'has-blur-mobile';
}
/**
* Search overlay = zibll .header-slider-search.abs-center
* Uses aksrt_get_search_box() (zib_get_search_box parity) for form / keywords / type / cat.
* Title/subtitle live in before_html (same flow stack as the form).
*/
$render_hero_search = static function () use ($search_cfg, $is_mobile_req): void {
$_before = isset($search_cfg['before_html']) ? (string) $search_cfg['before_html'] : '';
$_after = isset($search_cfg['after_html']) ? (string) $search_cfg['after_html'] : '';
$search_args = [
'class' => '',
'show_keywords' => !empty($search_cfg['show_keywords']),
'popular_limit' => max(0, (int) ($search_cfg['popular_limit'] ?? 6)),
'show_history' => false,
'show_posts' => false,
'show_input_cat' => !empty($search_cfg['show_input_cat']),
'more_cats' => !empty($search_cfg['more_cats']) ? (array) $search_cfg['more_cats'] : [],
'in_cat' => (string) ($search_cfg['in_cat'] ?? ''),
'show_type' => !empty($search_cfg['show_type']),
'in_type' => (string) ($search_cfg['in_type'] ?? 'post'),
'in_user' => '',
's' => is_search() ? (string) get_search_query() : '',
];
// Mobile: never show hot keywords (zibll).
if ($is_mobile_req) {
$search_args['show_keywords'] = false;
}
$search_html = function_exists('aksrt_get_search_box')
? (string) aksrt_get_search_box($search_args)
: '';
$before_html = trim($_before) !== ''
? '<div class="header-slider-search-more text-center before">' . wp_kses_post($_before) . '</div>'
: '';
$after_html = trim($_after) !== ''
? '<div class="header-slider-search-more after">' . wp_kses_post($_after) . '</div>'
: '';
echo '<div class="header-slider-search header-components-search abs-center">'
. $before_html
. $search_html
. $after_html
. '</div>';
};
$render_icon_cards = static function () use ($show_cards, $icon_cards, $card_bg_mode, $card_icon_shape): void {
if (!$show_cards || empty($icon_cards)) {
return;
}
/**
* Overlay icon cards — 1:1 zibll zib_header_slide() card module.
*
* show_widget_bg (shared) → outer .zib-widget.padding-10 + each card class=padding-10 in .relative-h
* individual (default) → outer empty div + each card class=zib-widget in .flex1
* Row: .flex.jse.flex-row.gutters-5.flex-col-sm-2
*/
$show_widget_bg = ($card_bg_mode === 'shared');
$icon_radius4 = ($card_icon_shape === 'square');
$slider_card_html = '';
foreach ($icon_cards as $raw) {
if (!is_array($raw)) {
continue;
}
$card = $raw;
$card['class'] = $show_widget_bg ? 'padding-10' : 'zib-widget';
$extra = trim((string) ($card['icon_class'] ?? ''));
if ($icon_radius4 && !str_contains($extra, 'radius4')) {
$extra = trim($extra . ' radius4');
}
$card['icon_class'] = $extra;
unset($card['icon_shape']);
$wrap_class = $show_widget_bg ? 'relative-h' : 'flex1';
$inner = function_exists('aksrt_icon_cover_card')
? aksrt_icon_cover_card($card)
: (function_exists('aksrt_render_icon_cover_card') ? aksrt_render_icon_cover_card($card) : '');
if ($inner === '') {
continue;
}
$slider_card_html .= '<div class="' . esc_attr($wrap_class) . '">' . $inner . '</div>';
}
if ($slider_card_html === '') {
return;
}
?>
<div class="header-slider-card header-components-card container">
<?php if ($show_widget_bg) : ?>
<div class="zib-widget padding-10">
<?php else : ?>
<div class="">
<?php endif; ?>
<div class="flex jse flex-row gutters-5 flex-col-sm-2">
<?php echo $slider_card_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
</div>
</div>
<?php
};
if (!empty($hero_banners)) :
$slider_cfg = function_exists('aksrt_get_slider_config') ? aksrt_get_slider_config() : [];
$_nav_color_for_header = sanitize_hex_color((string) ($slider_cfg['nav_color'] ?? '')) ?: '';
if ($_nav_color_for_header !== '' && strtolower($_nav_color_for_header) !== '#ffffff') {
echo '<style id="aksrt-header-slider-nav-color">body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide{--header-color:' . esc_attr($_nav_color_for_header) . ';}</style>';
}
// zibll zib_new_slider defaults for header_slider_option.
$direction = in_array(($slider_cfg['direction'] ?? 'horizontal'), ['horizontal', 'vertical'], true) ? $slider_cfg['direction'] : 'horizontal';
$effect = sanitize_key((string) ($slider_cfg['effect'] ?? 'slide')) ?: 'slide';
$loop_on = $slide_count > 1 && (!isset($slider_cfg['loop']) || !empty($slider_cfg['loop']));
$button_on = $slide_count > 1 && (!isset($slider_cfg['button']) || !empty($slider_cfg['button']) || !empty($slider_cfg['navigation']));
$pag_on = $slide_count > 1 && (!isset($slider_cfg['pagination']) || !empty($slider_cfg['pagination']));
$autoplay_on = $slide_count > 1 && (!isset($slider_cfg['autoplay']) || !empty($slider_cfg['autoplay']) || !empty($slider_cfg['autoplay_interval']));
$interval_ms = max(1000, min(30000, (int) ($slider_cfg['autoplay_interval'] ?? 4000)));
// zibll stores interval in seconds sometimes (<999).
if ($interval_ms < 999) {
$interval_ms *= 1000;
}
$speed_ms = max(0, (int) ($slider_cfg['speed'] ?? 0));
$space_between = max(0, (int) ($slider_cfg['space_between'] ?? 0));
$scale_height = !empty($slider_cfg['scale_height']);
$scale_pct = max(10, min(100, (int) ($slider_cfg['scale'] ?? 40)));
// Heights: demo uses style="--m-height :300px;--pc-height :560px;" on .new-swiper
$pc_h = trim((string) ($slider_cfg['pc_height'] ?? ''));
$m_h = trim((string) ($slider_cfg['mobile_height'] ?? ''));
// Defaults match zibll header_slider_option (550 / 280).
if ($pc_h === '') {
$pc_h = '550';
}
if ($m_h === '') {
$m_h = '280';
}
// Normalize to unitless px numbers for CSS vars.
$pc_h_num = (int) preg_replace('/[^0-9]/', '', $pc_h) ?: 550;
$m_h_num = (int) preg_replace('/[^0-9]/', '', $m_h) ?: 280;
$swiper_class = 'swiper new-swiper slide-index slide-header';
if ($scale_height && $direction !== 'vertical') {
$swiper_class .= ' scale-height';
}
if ($slide_count === 1) {
$swiper_class .= ' swiper-container-initialized';
}
$style_vars = '';
if ($scale_height && $direction !== 'vertical') {
$style_vars = '--scale-height :' . $scale_pct . '%';
} else {
$style_vars = '--m-height :' . $m_h_num . 'px;--pc-height :' . $pc_h_num . 'px;';
}
// data-* attrs for zibll main.js / our slider.js dual path.
$data_attrs = ' data-direction="' . esc_attr($direction) . '"';
$data_attrs .= ' data-effect="' . esc_attr($effect) . '"';
$data_attrs .= $loop_on ? ' data-loop="true"' : '';
$data_attrs .= $autoplay_on ? ' data-autoplay="1" data-interval="' . esc_attr((string) $interval_ms) . '"' : '';
$data_attrs .= $speed_ms > 299 ? ' data-speed="' . esc_attr((string) $speed_ms) . '"' : '';
$data_attrs .= ' data-spaceBetween="' . esc_attr((string) $space_between) . '"';
$swiper_config = [
'effect' => $effect,
'direction' => $direction,
'loop' => $loop_on,
'speed' => $speed_ms > 299 ? $speed_ms : 600,
'spaceBetween' => $space_between,
'autoplay' => $autoplay_on ? ['delay' => $interval_ms, 'disableOnInteraction' => false] : false,
'keyboard' => ['enabled' => true],
'autoHeight' => false,
];
if ($pag_on) {
$swiper_config['pagination'] = ['clickable' => true];
} else {
$swiper_config['pagination'] = false;
}
if ($button_on) {
$swiper_config['navigation'] = true;
} else {
$swiper_config['navigation'] = false;
}
?>
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
<div class="relative zib-slider">
<div class="<?php echo esc_attr($swiper_class); ?>"<?php echo $data_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>" style="<?php echo esc_attr($style_vars); ?>">
<div class="swiper-wrapper">
<?php foreach ($hero_banners as $index => $slide) :
$is_mobile_now = function_exists('wp_is_mobile') && wp_is_mobile();
$device_vis = (string) ($slide['device_visibility'] ?? ($slide['hide'] ?? 'all'));
// zibll hide / device_visibility: skip when current device is hidden.
if (in_array($device_vis, ['pc', 'only_pc'], true) && $is_mobile_now) {
continue;
}
if (in_array($device_vis, ['m', 'mobile', 'only_sm', 'm-only'], true) && !$is_mobile_now) {
continue;
}
$slide_classes = 'swiper-slide';
$video_url = (string) ($slide['video_url'] ?? $slide['background_video'] ?? '');
$image_url = (string) ($slide['image'] ?? $slide['background'] ?? '');
// Link may be string or zibll link array.
$link_raw = $slide['link'] ?? '';
$link_url = '';
$link_target = '';
if (is_array($link_raw)) {
$link_url = (string) ($link_raw['url'] ?? '');
$link_target = (string) ($link_raw['target'] ?? '');
} else {
$link_url = (string) $link_raw;
$link_target = (string) ($slide['link_target'] ?? '');
}
$blank = ($link_target === '_blank' || $link_target === '1') ? ' target="_blank"' : '';
// Video bg only on desktop (zibll).
$use_video = ($video_url !== '' && !$is_mobile_now);
if ($use_video) {
$slide_classes .= ' slide-background-video';
}
$img_alt = (string) ($slide['title'] ?? '');
if ($img_alt === '') {
$img_alt = get_bloginfo('name');
}
// Decorative text from slide (optional; main copy is search before_html).
$show_text = !isset($slide['show_text']) || $slide['show_text'];
$title = (string) ($slide['title'] ?? ($slide['text']['title'] ?? ''));
$desc = (string) ($slide['subtitle'] ?? $slide['description'] ?? ($slide['text']['desc'] ?? ''));
if (is_array($slide['text'] ?? null)) {
$title = (string) ($slide['text']['title'] ?? $title);
$desc = (string) ($slide['text']['desc'] ?? $desc);
}
$text_align = (string) ($slide['text_align'] ?? ($slide['text']['text_align'] ?? 'left-bottom'));
$text_size_pc = (int) ($slide['text_size_pc'] ?? ($slide['text']['text_size_pc'] ?? 0));
$text_size_m = (int) ($slide['text_size_m'] ?? ($slide['text']['text_size_m'] ?? 0));
$text_parallax = (int) ($slide['text_parallax'] ?? ($slide['text']['parallax'] ?? 0));
$s_text = '';
if ($show_text && ($title !== '' || $desc !== '')) {
$s_text = $title !== '' ? '<div class="slide-title">' . esc_html($title) . '</div>' : '';
$s_text .= $desc !== '' ? '<div class="slide-desc">' . esc_html($desc) . '</div>' : '';
$s_text_class = 'abs-center slide-text';
if ($text_align !== '') {
$s_text_class .= ' ' . sanitize_html_class($text_align);
}
$s_text_style = '';
if ($text_size_pc > 0) {
$s_text_style .= '--text-size-pc:' . $text_size_pc . 'px;';
}
if ($text_size_m > 0) {
$s_text_style .= '--text-size-m:' . $text_size_m . 'px;';
}
$s_text = '<div class="' . esc_attr($s_text_class) . '"' . ($s_text_style !== '' ? ' style="' . esc_attr($s_text_style) . '"' : '') . '>' . $s_text . '</div>';
if ($text_parallax) {
$s_text = '<div class="absolute" data-swiper-parallax="' . esc_attr((string) $text_parallax) . '">' . $s_text . '</div>';
}
}
// Background media (zibll order: video > image).
$s_background = '';
if ($use_video) {
$poster = $image_url !== '' ? ' poster="' . esc_url($image_url) . '"' : '';
$s_background = '<video autoplay loop muted playsinline class="fit-cover radius8" src="' . esc_url($video_url) . '"' . $poster . '></video><div class="absolute"></div>';
} elseif ($image_url !== '') {
$s_background = '<img class="fit-cover radius8' . ($index > 0 ? ' lazyload swiper-lazy' : '') . '"'
. ($index > 0
? ' data-src="' . esc_url($image_url) . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"'
: ' src="' . esc_url($image_url) . '"')
. ' alt="' . esc_attr($img_alt) . '">';
} else {
continue;
}
// Layers (image_layer).
$s_layers = '';
$layers = $slide['layers'] ?? ($slide['image_layer'] ?? []);
if (is_array($layers)) {
foreach ($layers as $layer) {
if (!is_array($layer)) {
continue;
}
$layer_image = (string) ($layer['image'] ?? '');
if ($layer_image === '') {
continue;
}
$layer_img = '<img class="radius8 lazyload swiper-lazy" data-src="' . esc_url($layer_image) . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="' . esc_attr($img_alt) . '">';
$layer_parallax = isset($layer['parallax']) ? (int) $layer['parallax'] : 0;
$layer_attr = $layer_parallax ? ' data-swiper-parallax="' . $layer_parallax . '%"' : '';
$layer_class = !empty($layer['free_size']) ? ' slide-layer' : '';
if (!empty($layer['align'])) {
$layer_class .= ' text-' . sanitize_html_class((string) $layer['align']);
}
$s_layers .= '<div class="absolute' . esc_attr($layer_class) . '"' . $layer_attr . '>' . $layer_img . '</div>';
}
}
?>
<div class="<?php echo esc_attr($slide_classes); ?>">
<?php if ($link_url !== '') : ?>
<a<?php echo $blank; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> href="<?php echo esc_url($link_url); ?>">
<?php else : ?>
<span>
<?php endif; ?>
<?php echo $s_background; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo $s_layers; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo $s_text; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php if ($link_url !== '') : ?>
</a>
<?php else : ?>
</span>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php if ($button_on) : ?>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<?php endif; ?>
<?php if ($pag_on) : ?>
<div class="swiper-pagination kaoyou"></div>
<?php endif; ?>
</div>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search(); ?>
<?php endif; ?>
<?php $render_icon_cards(); ?>
<?php if (function_exists('aksrt_render_admin_quick_link')) : ?>
<div class="home-module__admin-tools">
<?php aksrt_render_admin_quick_link('page-display/hero', __('Hero 轮播管理', 'aksrt')); ?>
<?php aksrt_render_admin_quick_link('page-display/header-components', __('顶部多功能组件', 'aksrt')); ?>
</div>
<?php endif; ?>
</div>
<?php else : ?>
<?php
$is_admin_user = current_user_can('manage_options');
?>
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
<div class="header-components slide-header header-components--gradient">
<?php if (!$show_search) : ?>
<div class="abs-center slide-text header-components__content text-center conter-conter">
<div class="header-components__title slide-title"><?php bloginfo('name'); ?></div>
<div class="header-components__subtitle slide-desc"><?php echo esc_html(get_bloginfo('description', 'display')); ?></div>
<?php if ($is_admin_user) : ?>
<p class="header-components__admin-hint" role="note">
<?php esc_html_e('No Hero slides found. Showing fallback site info.', 'aksrt'); ?>
</p>
<?php endif; ?>
</div>
<?php elseif ($is_admin_user) : ?>
<div class="header-components__admin-hint" role="note" style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;">
<?php esc_html_e('No Hero slides found. Configure slides or search before_html in admin.', 'aksrt'); ?>
</div>
<?php endif; ?>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search(); ?>
<?php endif; ?>
<?php $render_icon_cards(); ?>
<?php if (function_exists('aksrt_render_admin_quick_link')) : ?>
<div class="home-module__admin-tools">
<?php aksrt_render_admin_quick_link('page-display/hero', __('Hero 轮播管理', 'aksrt')); ?>
<?php aksrt_render_admin_quick_link('page-display/header-components', __('顶部多功能组件', 'aksrt')); ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>