kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(hero): align header slider title/search stack with zibll

Browse Source 
Put hero main title/subtitle in search before_html (document flow),
move the search overlay outside the swiper as a sibling, and reset
search/slide-text positioning to zibll tops so title and search no
longer overlap.
This commit is contained in:
kate522 committed 2026-07-17 23:00:33 +08:00
1 parent e7ccc4f069
commit 397231ca75
12 files changed
+476 -439
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/parts/home-modules/module-hero.php
+161 -110
View File
@@ -2,8 +2,11 @@
/**
* 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.1.0
* @version 4.2.0
*/
defined('ABSPATH') || exit;
@@ -18,7 +21,16 @@ if (!is_array($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' => []];
$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'] : [];
@@ -52,14 +64,25 @@ $search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_ge
$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); ?>">
@@ -108,12 +131,17 @@ $render_hero_search = static function (string $search_id) use ($search_placehold
</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 (!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; ?>
<?php if (trim($_after) !== '') : ?>
<div class="header-slider-search-more text-center after">
<?php echo wp_kses_post($_after); ?>
</div>
<?php endif; ?>
</div>
@@ -186,104 +214,121 @@ if (!empty($hero_banners)) :
}
?>
<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>
<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 ($has_subtitle) : ?>
<div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
<?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_description) : ?>
<div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
<?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>
<?php endif; ?>
</div>
<?php endforeach; ?>
<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>
<?php if ($show_search) : ?>
<?php $render_hero_search('header-search-input'); ?>
<?php endif; ?>
</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">
@@ -299,21 +344,27 @@ if (!empty($hero_banners)) :
?>
<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'); ?>
</p>
<?php endif; ?>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search('header-search-input-fallback'); ?>
<?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">