'https://...', * 'link' => 'https://...', * 'title' => '标题', * 'desc' => '描述', * 'alt' => '图片 alt', * 'bg_color' => '#f0f0f0', // 背景色 * 'target' => '_blank', * ] * * @return string HTML */ function aksrt_render_slider(array $args = []): string { $defaults = [ 'slides' => [], 'effect' => 'slide', 'loop' => true, 'autoplay' => true, 'interval' => 5000, 'speed' => 0, 'direction' => 'horizontal', 'spaceBetween' => 0, 'pagination_type' => 'bullets', 'pc_height' => 'auto', 'm_height' => 'auto', 'scale_height' => false, 'scale_ratio' => 0.45, 'wrapper_class' => '', 'slider_class' => '', 'show_nav' => true, 'show_pagination' => true, // Optional absolute overlay HTML (e.g. single cover title/meta). Not escaped. 'overlay_html' => '', ]; $args = wp_parse_args($args, $defaults); $slides = $args['slides']; if (empty($slides) || !is_array($slides)) { return ''; } // 构建 data 属性 $data_attrs = []; $data_attrs[] = 'data-effect="' . esc_attr($args['effect']) . '"'; if ($args['loop']) $data_attrs[] = 'data-loop'; if ($args['autoplay']) { $data_attrs[] = 'data-autoplay'; $data_attrs[] = 'data-interval="' . esc_attr((string) $args['interval']) . '"'; } if ($args['speed'] > 0) $data_attrs[] = 'data-speed="' . esc_attr((string) $args['speed']) . '"'; if ($args['direction'] !== 'horizontal') $data_attrs[] = 'data-direction="' . esc_attr($args['direction']) . '"'; if ($args['spaceBetween'] > 0) $data_attrs[] = 'data-spaceBetween="' . esc_attr((string) $args['spaceBetween']) . '"'; if ($args['pagination_type'] !== 'bullets') $data_attrs[] = 'data-pagination-type="' . esc_attr($args['pagination_type']) . '"'; // 高度样式 $height_style = ''; if ($args['scale_height']) { // padding-bottom percentage for ratio box (Zibll graphic cover style). $ratio_pct = max(10, min(100, (float) $args['scale_ratio'] * 100)); $height_style = sprintf( '--pc-height:auto;--m-height:auto;--scale-ratio:%s;padding-bottom:%s%%;', esc_attr((string) $args['scale_ratio']), esc_attr((string) $ratio_pct) ); } else { $height_style = sprintf('--pc-height:%s;--m-height:%s;', esc_attr($args['pc_height']), esc_attr($args['m_height'])); } // CSS 类 $slider_classes = ['new-swiper', 'slide-index']; if ($args['slider_class']) $slider_classes[] = $args['slider_class']; $slider_class_str = implode(' ', $slider_classes); $wrapper_classes = ['aksrt-slider-wrapper']; if ($args['wrapper_class']) $wrapper_classes[] = $args['wrapper_class']; if ($args['scale_height']) $wrapper_classes[] = 'aksrt-slider-wrapper--scale'; if ((string) $args['overlay_html'] !== '') $wrapper_classes[] = 'aksrt-slider-wrapper--has-overlay'; $wrapper_class_str = implode(' ', $wrapper_classes); // 渲染 HTML $html = '
'; $html .= '
'; $html .= '
'; foreach ($slides as $slide) { $image = esc_url($slide['image'] ?? ''); $link = esc_url($slide['link'] ?? ''); $title = sanitize_text_field($slide['title'] ?? ''); $desc = sanitize_text_field($slide['desc'] ?? ''); $alt = sanitize_text_field($slide['alt'] ?? $title); $bg_color = sanitize_hex_color($slide['bg_color'] ?? ''); $target = ($slide['target'] ?? '') === '_blank' ? '_blank' : '_self'; $slide_style = $bg_color ? 'background-color:' . esc_attr($bg_color) . ';' : ''; $html .= '
'; if ($link) { $html .= ''; } if ($image) { $html .= '' . esc_attr($alt) . ''; $html .= '
'; } if ($link) { $html .= '
'; } // 文字覆盖层 if ($title || $desc) { $html .= '
'; if ($title) $html .= '
' . esc_html($title) . '
'; if ($desc) $html .= '
' . esc_html($desc) . '
'; $html .= '
'; } $html .= '
'; } $html .= '
'; // .swiper-wrapper if ($args['show_nav']) { $html .= '
'; $html .= '
'; } if ($args['show_pagination']) { $html .= '
'; } $html .= '
'; // .new-swiper // Cover title/meta overlay (trusted HTML from single cover renderer). if ((string) $args['overlay_html'] !== '') { $html .= '
' . $args['overlay_html'] . '
'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } $html .= '
'; // .aksrt-slider-wrapper return $html; } /** * 渲染水平滚动器(Tab 导航、横向内容列表) * * @param array $args { * @type array $items 内容数组 * @type string $wrapper_class 额外 wrapper 类 * @type bool $autoplay 是否自动播放 * @type int $interval 自动播放间隔 * @type string $render_item 自定义渲染回调 (callable) * } * @return string HTML */ function aksrt_render_scroll_slider(array $args = []): string { $defaults = [ 'items' => [], 'wrapper_class' => '', 'autoplay' => false, 'interval' => 4000, 'render_item' => null, ]; $args = wp_parse_args($args, $defaults); $items = $args['items']; if (empty($items)) return ''; $data_attrs = ['class="swiper-scroll' . ($args['wrapper_class'] ? ' ' . esc_attr($args['wrapper_class']) : '') . '"']; if ($args['autoplay']) { $data_attrs[] = 'data-autoplay'; $data_attrs[] = 'data-interval="' . esc_attr((string) $args['interval']) . '"'; } $html = '
'; $html .= '
'; foreach ($items as $i => $item) { $html .= '
'; if (is_callable($args['render_item'])) { $html .= call_user_func($args['render_item'], $item, $i); } else { $html .= '
' . esc_html($item['label'] ?? '') . '
'; } $html .= '
'; } $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; }