wordpress-theme-aksrt/templates/parts/home-modules/module-hero.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() : [
    'show'           => false,
    'keywords'       => [],
    'categories'     => [],
    'type_options'   => [],
    'before_html'    => '',
    'after_html'     => '',
    'show_input_cat' => false,
    'show_type'      => false,
];
$show_search = !empty($search_cfg['show']) || !empty($cfg['with_search']);
$show_cards = !empty($settings['header_components_cards_enabled']);
$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_blur = !empty($settings['header_components_card_blur']);
$filter_blur_devices = isset($settings['header_components_filter_blur_devices']) ? (array) $settings['header_components_filter_blur_devices'] : ($card_blur ? ['pc', 'mobile'] : []);
$card_show_devices = isset($settings['header_components_card_show_devices']) ? (array) $settings['header_components_card_show_devices'] : ['pc', 'mobile'];
$card_icon_shape = $settings['header_components_card_icon_shape'] ?? 'circle';

$slide_count = count($hero_banners);
$visible_card_count = ($show_cards && !empty($icon_cards)) ? count($icon_cards) : 0;

$container_classes = ['header-slider-container', 'header-components-container', 'relative', 'mb20', 'card-' . $visible_card_count];
if (in_array('pc', $filter_blur_devices, true) || in_array('mobile', $filter_blur_devices, true)) {
    $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';
}
if (!in_array('pc', $card_show_devices, true)) {
    $container_classes[] = 'hide-cards-pc';
}
if (!in_array('mobile', $card_show_devices, true)) {
    $container_classes[] = 'hide-cards-mobile';
}

$search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_get_search_placeholder() : __('开启精彩搜索', 'aksrt');
$search_value = trim((string) get_search_query());
$search_type = function_exists('aksrt_get_search_form_type') ? aksrt_get_search_form_type() : 'post';

/**
 * Search overlay = zibll .header-slider-search.abs-center
 * Title/subtitle live in before_html (same flow stack as the form).
 */
$render_hero_search = static function (string $search_id) use ($search_placeholder, $search_value, $search_type, $search_cfg): void {
    $_kw         = $search_cfg['keywords'] ?? [];
    $_cats       = $search_cfg['categories'] ?? [];
    $_types      = $search_cfg['type_options'] ?? [];
    $_show_cat   = !empty($search_cfg['show_input_cat']) && !empty($_cats);
    $_show_type  = !empty($search_cfg['show_type']) && !empty($_types);
    $_before     = isset($search_cfg['before_html']) ? (string) $search_cfg['before_html'] : '';
    $_after      = isset($search_cfg['after_html']) ? (string) $search_cfg['after_html'] : '';
    ?>
    <div class="header-slider-search header-components-search abs-center">
        <?php if (trim($_before) !== '') : ?>
            <div class="header-slider-search-more text-center before">
                <?php echo wp_kses_post($_before); ?>
            </div>
        <?php endif; ?>
        <div class="search-input">
            <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="search-form" data-aksrt-search-form="hero">
                <input type="hidden" name="aksrt_search_type" value="<?php echo esc_attr($search_type); ?>">
                <div class="line-form<?php echo ($_show_cat || $_show_type) ? ' has-addons' : ''; ?>">
                    <?php if ($_show_cat) : ?>
                        <select name="cat" class="header-components-search__cat" aria-label="<?php esc_attr_e('选择分类', 'aksrt'); ?>">
                            <option value=""><?php esc_html_e('全部分类', 'aksrt'); ?></option>
                            <?php foreach ($_cats as $_c) : ?>
                                <option value="<?php echo esc_attr($_c['id']); ?>"><?php echo esc_html($_c['name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    <?php endif; ?>
                    <?php if ($_show_type) : ?>
                        <div class="header-components-search__types">
                            <?php foreach ($_types as $_idx => $_t) : ?>
                                <label class="header-components-search__type-label">
                                    <input type="radio" name="aksrt_search_type" value="<?php echo esc_attr($_t['key']); ?>"<?php echo $_idx === 0 ? ' checked' : ''; ?> class="header-components-search__type-radio">
                                    <span class="header-components-search__type-text"><?php echo esc_html($_t['label']); ?></span>
                                </label>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                    <div class="search-input-text">
                        <label class="screen-reader-text" for="<?php echo esc_attr($search_id); ?>"><?php esc_html_e('搜索', 'aksrt'); ?></label>
                        <input
                            type="search"
                            id="<?php echo esc_attr($search_id); ?>"
                            name="s"
                            class="line-form-input"
                            value="<?php echo esc_attr($search_value); ?>"
                            placeholder=" "
                            autocomplete="off"
                        >
                        <i class="line-form-line"></i>
                        <div class="scale-placeholder<?php echo $search_value !== '' ? ' is-focus' : ''; ?>" default="<?php echo esc_attr($search_placeholder); ?>">
                            <?php echo esc_html($search_placeholder); ?>
                        </div>
                        <div class="abs-right">
                            <button type="submit" class="null header-components-search__submit" aria-label="<?php echo esc_attr__('搜索', 'aksrt'); ?>">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <path d="m21 21-4.3-4.3"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
            <?php if (!empty($_kw)) : ?>
                <div class="header-components-search__keywords search-keywords">
                    <?php foreach ($_kw as $_kw_text) : ?>
                        <a href="<?php echo esc_url(add_query_arg('s', rawurlencode($_kw_text), home_url('/'))); ?>" class="header-components-search__kw-tag search_keywords"><?php echo esc_html($_kw_text); ?></a>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
        <?php if (trim($_after) !== '') : ?>
            <div class="header-slider-search-more text-center after">
                <?php echo wp_kses_post($_after); ?>
            </div>
        <?php endif; ?>
    </div>
    <?php
};

$render_icon_cards = static function () use ($show_cards, $icon_cards, $card_bg_mode, $card_icon_shape): void {
    if (!$show_cards || empty($icon_cards)) {
        return;
    }
    ?>
    <div class="header-slider-card header-components-card container">
        <div class="header-components-card__container container">
            <?php if ($card_bg_mode === 'shared') : ?>
                <div class="header-components-card__wrap header-components-card__wrap--shared">
                    <div class="header-components-card__row">
                        <?php foreach ($icon_cards as $card) : ?>
                            <?php $card['icon_shape'] = $card_icon_shape; ?>
                            <div class="header-components-card__item">
                                <?php echo aksrt_render_icon_cover_card($card); ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php else : ?>
                <div class="header-components-card__row">
                    <?php foreach ($icon_cards as $card) : ?>
                        <?php $card['icon_shape'] = $card_icon_shape; ?>
                        <div class="header-components-card__item">
                            <div class="header-components-card__item-bg">
                                <?php echo aksrt_render_icon_cover_card($card); ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </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">.header.show-slide{--header-color:' . esc_attr($_nav_color_for_header) . ';}</style>';
    }

    $swiper_config = [
        'effect'   => $slider_cfg['effect'] ?? 'fade',
        'loop'     => $slide_count > 1 && ($slider_cfg['loop'] ?? true),
        'speed'    => 600,
        'autoplay' => $slide_count > 1 ? ['delay' => ($slider_cfg['autoplay_interval'] ?? 5000), 'disableOnInteraction' => false] : false,
        'keyboard' => ['enabled' => true],
    ];
    if (!empty($slider_cfg['pagination'])) {
        $swiper_config['pagination'] = ['clickable' => true];
    }
    if (!empty($slider_cfg['navigation'])) {
        $swiper_config['navigation'] = true;
    }
    $pc_height = $slider_cfg['pc_height'] ?? '';
    $mobile_height = $slider_cfg['mobile_height'] ?? '';
    $height_style = '';
    if ($pc_height !== '') {
        $height_style .= '--pc-height:' . esc_attr($pc_height) . ';';
    }
    if ($mobile_height !== '') {
        $height_style .= '--m-height:' . esc_attr($mobile_height) . ';';
    }
    ?>
    <div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components"<?php if ($height_style !== '') : ?> style="<?php echo $height_style; ?>"<?php endif; ?>>
        <div class="relative zib-slider">
            <div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
                <div class="swiper-wrapper">
                    <?php foreach ($hero_banners as $index => $slide) :
                        $device_vis = $slide['device_visibility'] ?? 'all';
                        $slide_classes = 'swiper-slide';
                        if ($device_vis === 'pc') {
                            $slide_classes .= ' hero-slide--pc-only';
                        } elseif ($device_vis === 'mobile') {
                            $slide_classes .= ' hero-slide--mobile-only';
                        }
                        if (!empty($slide['video_url'])) {
                            $slide_classes .= ' hero-slide--has-video';
                        }
                        $link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self';
                        $has_layers = !empty($slide['layers']) && is_array($slide['layers']);
                        $text_parallax = !empty($slide['text_parallax']);
                        // Align CSS vars with zibll --text-size-pc / --text-size-m.
                        $text_style = '';
                        if (!empty($slide['text_size_pc'])) {
                            $text_style .= '--text-size-pc:' . esc_attr((int) $slide['text_size_pc']) . 'px;';
                            $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
                        }
                        if (!empty($slide['text_size_m'])) {
                            $text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;';
                            $text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
                        }
                        if ($text_parallax) {
                            $text_style .= '--hero-text-parallax:1;';
                        }
                    ?>
                        <div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
                            <div class="header-components__slide-bg">
                                <?php if (!empty($slide['video_url'])) : ?>
                                    <video class="header-components__video" autoplay muted loop playsinline preload="metadata">
                                        <source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
                                    </video>
                                <?php endif; ?>
                                <?php if (!empty($slide['image'])) : ?>
                                    <img
                                        src="<?php echo esc_url($slide['image']); ?>"
                                        alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
                                        loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
                                        decoding="async"
                                        class="fit-cover"
                                    >
                                <?php elseif (empty($slide['video_url'])) : ?>
                                    <div class="header-components__slide-fallback"></div>
                                <?php endif; ?>
                                <?php if ($has_layers) : ?>
                                    <?php foreach ($slide['layers'] as $layer) :
                                        if (empty($layer['image'])) continue;
                                        $layer_classes = 'header-components__layer';
                                        if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
                                        if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
                                        $layer_style = '';
                                        if (!empty($layer['align']) && $layer['align'] !== 'center') {
                                            $layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
                                        }
                                        if (!empty($layer['parallax'])) {
                                            $pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
                                            $popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
                                            $layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
                                            $layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
                                        }
                                    ?>
                                        <div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                            <div class="header-components__slide-overlay"></div>
                            <?php
                            // Per-slide decorative text only (zibll .abs-center.slide-text).
                            // Hero main title/subtitle must live in search before_html.
                            $show_text = !isset($slide['show_text']) || $slide['show_text'];
                            $has_title = !empty($slide['title']);
                            $has_subtitle = !empty($slide['subtitle']);
                            $has_description = !empty($slide['description']);
                            $text_align = $slide['text_align'] ?? '';
                            $text_align_class = '';
                            if ($text_align !== '' && $text_align !== 'left') {
                                // zibll uses conter-bottom / left-bottom etc.; keep text-* for existing data.
                                $text_align_class = ' text-' . sanitize_html_class($text_align);
                                if (in_array($text_align, ['center', 'conter-conter', 'conter-bottom'], true)) {
                                    $text_align_class .= ' conter-conter';
                                } elseif ($text_align === 'left-bottom') {
                                    $text_align_class .= ' left-bottom';
                                } elseif ($text_align === 'right-bottom') {
                                    $text_align_class .= ' right-bottom';
                                }
                            }
                            ?>
                            <?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
                                <div class="abs-center slide-text header-components__content<?php echo esc_attr($text_align_class); ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
                                    <?php if ($has_title) : ?>
                                        <div class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></div>
                                    <?php endif; ?>
                                    <?php if ($has_subtitle) : ?>
                                        <div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
                                    <?php endif; ?>
                                    <?php if ($has_description) : ?>
                                        <div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <?php if ($show_search) : ?>
            <?php $render_hero_search('header-search-input'); ?>
        <?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('header-search-input-fallback'); ?>
        <?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; ?>