Files
wordpress-theme-aksrt/inc/classes/widgets/class-aksrt-cover-cards-widget.php
T

130 lines
5.7 KiB
PHP

<?php
/**
* AKSRT Cover Cards Widget — 图文封面卡片
*
* 支持图片/视频背景 + 文字叠加的卡片组件。
*
* @package AKSRT
*/
defined('ABSPATH') || exit;
class AKSRT_Widget_Cover_Cards extends WP_Widget {
public function __construct() {
parent::__construct(
'aksrt_cover_cards',
__('图文封面卡片', 'aksrt'),
['description' => __('图片背景 + 文字叠加的卡片网格。', 'aksrt')]
);
}
public function widget($args, $instance): void {
$title = !empty($instance['title']) ? $instance['title'] : '';
$items_json = !empty($instance['items']) ? $instance['items'] : '[]';
$columns = max(1, min(4, (int) ($instance['columns'] ?? 2)));
$items = json_decode($items_json, true);
if (!is_array($items) || empty($items)) return;
echo $args['before_widget'];
if ($title) {
echo $args['before_title'] . esc_html($title) . $args['after_title'];
}
echo '<div class="aksrt-cover-cards" style="--cols: ' . esc_attr((string) $columns) . ';">';
foreach ($items as $item) {
$image = esc_url($item['image'] ?? '');
$link = esc_url($item['link'] ?? '');
$card_title = sanitize_text_field($item['title'] ?? '');
$desc = sanitize_text_field($item['desc'] ?? '');
$overlay = sanitize_hex_color($item['overlay'] ?? '');
$text_color = sanitize_hex_color($item['text_color'] ?? '');
$height = sanitize_text_field($item['height'] ?? '');
$card_style = '';
if ($height) $card_style .= 'height:' . esc_attr($height) . ';';
$overlay_style = '';
if ($overlay) $overlay_style .= 'background:' . esc_attr($overlay) . ';';
$text_style = '';
if ($text_color) $text_style .= 'color:' . esc_attr($text_color) . ';';
echo '<div class="aksrt-cover-card"' . ($card_style ? ' style="' . esc_attr($card_style) . '"' : '') . '>';
if ($image) {
echo '<div class="aksrt-cover-card__bg">';
echo '<img src="' . esc_url($image) . '" alt="' . esc_attr($card_title) . '"' . (function_exists('aksrt_lazy_loading') ? aksrt_lazy_loading('widget') : ' loading="lazy"') . '>';
echo '</div>';
}
if ($overlay_style) {
echo '<div class="aksrt-cover-card__overlay" style="' . esc_attr($overlay_style) . '"></div>';
}
echo '<div class="aksrt-cover-card__content"' . ($text_style ? ' style="' . esc_attr($text_style) . '"' : '') . '>';
if ($link) {
echo '<a href="' . esc_url($link) . '" class="aksrt-cover-card__link">';
}
if ($card_title) {
echo '<h3 class="aksrt-cover-card__title">' . esc_html($card_title) . '</h3>';
}
if ($desc) {
echo '<p class="aksrt-cover-card__desc">' . esc_html($desc) . '</p>';
}
if ($link) {
echo '</a>';
}
echo '</div>';
echo '</div>';
}
echo '</div>';
echo $args['after_widget'];
}
public function form($instance): void {
$title = !empty($instance['title']) ? $instance['title'] : '';
$items = !empty($instance['items']) ? $instance['items'] : '[]';
$columns = !empty($instance['columns']) ? (int) $instance['columns'] : 2;
?>
<p>
<label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('标题(可选):', 'aksrt'); ?></label>
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
</p>
<p>
<label for="<?php echo esc_attr($this->get_field_id('columns')); ?>"><?php esc_html_e('列数:', 'aksrt'); ?></label>
<select class="widefat" id="<?php echo esc_attr($this->get_field_id('columns')); ?>" name="<?php echo esc_attr($this->get_field_name('columns')); ?>">
<option value="1" <?php selected($columns, 1); ?>><?php esc_html_e('1 列', 'aksrt'); ?></option>
<option value="2" <?php selected($columns, 2); ?>><?php esc_html_e('2 列', 'aksrt'); ?></option>
<option value="3" <?php selected($columns, 3); ?>><?php esc_html_e('3 列', 'aksrt'); ?></option>
<option value="4" <?php selected($columns, 4); ?>><?php esc_html_e('4 列', 'aksrt'); ?></option>
</select>
</p>
<p>
<label for="<?php echo esc_attr($this->get_field_id('items')); ?>"><?php esc_html_e('卡片数据 (JSON):', 'aksrt'); ?></label>
<textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('items')); ?>" name="<?php echo esc_attr($this->get_field_name('items')); ?>" rows="6" placeholder='[{"image":"https://...","title":"标题","desc":"描述","link":"https://..."}]'><?php echo esc_textarea($items); ?></textarea>
<small><?php esc_html_e('JSON 数组,每项支持: image, title, desc, link, overlay, text_color, height', 'aksrt'); ?></small>
</p>
<?php
}
public function update($new_instance, $old_instance): array {
$instance = [];
$instance['title'] = sanitize_text_field($new_instance['title'] ?? '');
$instance['columns'] = max(1, min(4, (int) ($new_instance['columns'] ?? 2)));
$items_raw = $new_instance['items'] ?? '[]';
$items = json_decode($items_raw, true);
$instance['items'] = is_array($items) ? wp_json_encode($items) : '[]';
return $instance;
}
}