wordpress-theme-aksrt/templates/parts/home-modules/module-hero.php

<?php
/**
 * Home module: header components hero + floating search + icon cards.
 *
 * @package AKSRT
 * @version 4.1.0
 */
defined('ABSPATH') || exit;

if (class_exists('AKSRT_Settings') && !AKSRT_Settings::homepage_module_hero_enabled()) {
    return;
}

// Device visibility gate: header_components_device_visibility ('' = all, 'only_pc' = PC only, 'only_sm' = mobile only)
$_hero_show_type = '';
if (class_exists('AKSRT_Settings')) {
    $_hero_slider_cfg = AKSRT_Settings::get_header_components_settings();
    $_hero_show_type = $_hero_slider_cfg['show_type'] ?? '';
}
if ($_hero_show_type === 'only_pc' && wp_is_mobile()) {
    return;
}
if ($_hero_show_type === 'only_sm' && !wp_is_mobile()) {
    return;
}

$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') ? AKSRT_Settings::get_header_components_search_config() : ['show' => false, 'keywords' => [], 'categories' => [], 'type_options' => []];
$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';

$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);
    ?>
    <div class="header-slider-search header-components-search abs-center">
        <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>
        </div>
        <?php if (!empty($_kw)) : ?>
            <div class="header-components-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"><?php echo esc_html($_kw_text); ?></a>
                <?php endforeach; ?>
            </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() : [];
    $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']);
                    $text_style = '';
                    if (!empty($slide['text_size_pc'])) {
                        $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
                    }
                    if (!empty($slide['text_size_m'])) {
                        $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
                        $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'] ?? 'left';
                        ?>
                        <?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
                            <div class="header-components__content slide-text<?php echo $text_align !== 'left' ? ' text-' . esc_attr($text_align) : ''; ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
                                <?php if ($has_title) : ?>
                                    <h2 class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></h2>
                                <?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>


            <?php if ($show_search) : ?>
                <?php $render_hero_search('header-search-input'); ?>
            <?php endif; ?>
        </div>
        </div>

        <?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/header-components', __('顶部组件设置', 'aksrt')); ?>
        </div>
        <?php endif; ?>
    </div>

<?php else : ?>
    <?php
    $is_admin_user = current_user_can('manage_options');
    $hero_admin_url = admin_url('admin.php?page=aksrt-settings#/content/hero');
    ?>
    <div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
        <div class="header-components slide-header header-components--gradient">
            <div class="header-components__content slide-text text-center">
                <h1 class="header-components__title slide-title"><?php bloginfo('name'); ?></h1>
                <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'); ?>
                        <a class="header-components__admin-link" href="<?php echo esc_url($hero_admin_url); ?>">
                            <?php esc_html_e('Go to Content -> Hero Components', 'aksrt'); ?>
                        </a>
                    </p>
                <?php endif; ?>
            </div>

            <?php if ($show_search) : ?>
                <?php $render_hero_search('header-search-input-fallback'); ?>
            <?php endif; ?>
        </div>

        <?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/header-components', __('顶部组件设置', 'aksrt')); ?>
        </div>
        <?php endif; ?>
    </div>
<?php endif; ?>