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

feat(widgets): CoverCards via aksrt_graphic_card + batch14 CSS

Browse Source 
Rebuild cover cards on shared graphic helper with height/mask/video
and row gutters; add comment/friend/iframe/cover polish styles.
This commit is contained in:
kate522 committed 2026-07-21 08:59:27 +08:00
1 parent 8e3b86a21b
commit 0374a08bff
2 files changed
+314 -105
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/AKSRT/Widgets/WidgetCoverCards.php
+191 -105
View File
@@ -1,5 +1,7 @@
<?php
/**
* Graphic cover cards (zibll zib_widget_ui_graphic_cover → aksrt_graphic_card).
*
* @package AKSRT
*/
@@ -9,124 +11,208 @@ defined('ABSPATH') || exit;
class WidgetCoverCards extends \WP_Widget {
public function __construct() {
parent::__construct(
'aksrt_cover_cards',
__('图文封面卡片', 'aksrt'),
['description' => __('图片背景 + 文字叠加的卡片网格。', 'aksrt')]
);
}
public function __construct() {
parent::__construct(
'aksrt_cover_cards',
__('图文封面卡片', 'aksrt'),
['description' => __('图片/视频封面 + 文字叠加的图文卡片（共享 graphic_card）。', '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)));
/**
* @param array<string,mixed> $args
* @param array<string,mixed> $instance
*/
public function widget($args, $instance): void {
$title = !empty($instance['title']) ? (string) $instance['title'] : '';
$items = $this->normalize($instance['items'] ?? []);
if (!$items) {
return;
}
$items = json_decode($items_json, true);
if (!is_array($items) || empty($items)) return;
$pc_row = max(1, min(6, (int) ($instance['pc_row'] ?? $instance['columns'] ?? 2)));
$m_row = max(1, min(3, (int) ($instance['m_row'] ?? 1)));
$height_scale = max(30, min(120, (int) ($instance['height_scale'] ?? 70)));
$mask_opacity = max(0, min(80, (int) ($instance['mask_opacity'] ?? 20)));
$font_size_pc = max(12, min(32, (int) ($instance['font_size_pc'] ?? 18)));
$font_size_m = max(11, min(24, (int) ($instance['font_size_m'] ?? 14)));
$font_bold = !empty($instance['font_bold']);
$font_color = sanitize_hex_color((string) ($instance['font_color'] ?? '')) ?: '';
echo $args['before_widget'];
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if ($title) {
echo $args['before_title'] . esc_html($title) . $args['after_title'];
}
if ($title !== '') {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
echo '<div class="aksrt-cover-cards" style="--cols: ' . esc_attr((string) $columns) . ';">';
$is_row = count($items) > 1;
$pc_span = max(1, (int) floor(12 / $pc_row));
$m_span = max(1, (int) floor(12 / $m_row));
$row_class = 'col-sm-' . $pc_span . ($m_row > 1 ? ' col-xs-' . $m_span : '');
foreach ($items as $item) {
$image = esc_url($item['image'] ?? '');
$video = esc_url($item['video'] ?? '');
$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'] ?? '');
$style = '';
if ($font_size_pc !== 14) {
$style .= '--font-size:' . $font_size_pc . 'px;';
}
if ($font_size_m !== 14) {
$style .= '--font-size-sm:' . $font_size_m . 'px;';
}
if ($font_bold) {
$style .= '--font-weight:bold;--font-weight-sm:bold;';
}
if ($font_color !== '') {
$style .= '--color:' . $font_color . ';--color-sm:' . $font_color . ';';
}
$card_style = '';
if ($height) $card_style .= 'height:' . esc_attr($height) . ';';
echo '<div class="widget-graphic-cover aksrt-cover-cards' . ($is_row ? ' mb10' : ' mb20') . '"' . ($style !== '' ? ' style="' . esc_attr($style) . '"' : '') . '>';
if ($is_row) {
echo '<div class="row gutters-5">';
}
$overlay_style = '';
if ($overlay) $overlay_style .= 'background:' . esc_attr($overlay) . ';';
foreach ($items as $item) {
$hide = sanitize_key((string) ($item['hide'] ?? ''));
if ($hide === 'pc' || $hide === 'm') {
$is_mobile = function_exists('wp_is_mobile') ? wp_is_mobile() : false;
if ((!$is_mobile && $hide === 'pc') || ($is_mobile && $hide === 'm')) {
continue;
}
}
$card_title = (string) ($item['title'] ?? '');
$more = $card_title !== ''
? '<div class="abs-center text-center graphic-text this-font">' . esc_html($card_title) . '</div>'
: '';
$text_style = '';
if ($text_color) $text_style .= 'color:' . esc_attr($text_color) . ';';
$card = [
'class' => 'noshadow mb10',
'img' => (string) ($item['image'] ?? ''),
'video' => (string) ($item['video'] ?? ''),
'alt' => wp_strip_all_tags($card_title),
'link' => [
'url' => (string) ($item['link'] ?? ''),
'target' => (string) ($item['target'] ?? ''),
],
'lazy' => true,
'more' => $more,
'height_scale' => !empty($item['height']) && is_numeric($item['height'])
? (int) $item['height']
: $height_scale,
'mask_opacity' => isset($item['mask']) ? (int) $item['mask'] : $mask_opacity,
];
echo '<div class="aksrt-cover-card"' . ($card_style ? ' style="' . esc_attr($card_style) . '"' : '') . '>';
if ($is_row) {
echo '<div class="' . esc_attr($row_class) . '">';
}
if (function_exists('aksrt_graphic_card')) {
echo aksrt_graphic_card($card); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
if ($is_row) {
echo '</div>';
}
}
if ($video) {
echo '<div class="aksrt-cover-card__bg is-video">';
echo '<video src="' . esc_url($video) . '" muted loop autoplay playsinline></video>';
echo '</div>';
} elseif ($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 ($is_row) {
echo '</div>';
}
echo '</div>';
if ($overlay_style) {
echo '<div class="aksrt-cover-card__overlay" style="' . esc_attr($overlay_style) . '"></div>';
}
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
echo '<div class="aksrt-cover-card__content"' . ($text_style ? ' style="' . esc_attr($text_style) . '"' : '') . '>';
/**
* @param mixed $raw
* @return array<int, array<string,mixed>>
*/
private function normalize($raw): array {
if (is_string($raw)) {
$decoded = json_decode($raw, true);
$raw = is_array($decoded) ? $decoded : [];
}
if (!is_array($raw)) {
return [];
}
$out = [];
foreach ($raw as $row) {
if (!is_array($row)) {
continue;
}
$image = esc_url_raw(trim((string) ($row['image'] ?? '')));
$video = esc_url_raw(trim((string) ($row['video'] ?? '')));
if ($image === '' && $video === '') {
continue;
}
$out[] = [
'title' => sanitize_text_field((string) ($row['title'] ?? '')),
'desc' => sanitize_text_field((string) ($row['desc'] ?? '')),
'image' => $image,
'video' => $video,
'link' => esc_url_raw(trim((string) ($row['link'] ?? ''))),
'target' => sanitize_text_field((string) ($row['target'] ?? '')),
'hide' => sanitize_key((string) ($row['hide'] ?? '')),
'height' => isset($row['height']) ? (int) $row['height'] : 0,
'mask' => isset($row['mask']) ? (int) $row['mask'] : null,
];
if (count($out) >= 12) {
break;
}
}
return $out;
}
if ($link) {
echo '<a href="' . esc_url($link) . '" class="aksrt-cover-card__link">';
}
/**
* @param array<string,mixed> $instance
*/
public function form($instance): void {
$items = $this->normalize($instance['items'] ?? []);
$json = wp_json_encode($items, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
?>
<p>
<label><?php esc_html_e('标题（可选）:', 'aksrt'); ?>
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('title')); ?>" value="<?php echo esc_attr((string) ($instance['title'] ?? '')); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('PC 列', 'aksrt'); ?>
<input class="tiny-text" type="number" min="1" max="6" name="<?php echo esc_attr($this->get_field_name('pc_row')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['pc_row'] ?? $instance['columns'] ?? 2))); ?>">
</label>
<label><?php esc_html_e('移动列', 'aksrt'); ?>
<input class="tiny-text" type="number" min="1" max="3" name="<?php echo esc_attr($this->get_field_name('m_row')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['m_row'] ?? 1))); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('高度占比 %', 'aksrt'); ?>
<input class="tiny-text" type="number" min="30" max="120" name="<?php echo esc_attr($this->get_field_name('height_scale')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['height_scale'] ?? 70))); ?>">
</label>
<label><?php esc_html_e('遮罩 0-80', 'aksrt'); ?>
<input class="tiny-text" type="number" min="0" max="80" name="<?php echo esc_attr($this->get_field_name('mask_opacity')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['mask_opacity'] ?? 20))); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('卡片 JSON', 'aksrt'); ?>
<textarea class="widefat" rows="6" name="<?php echo esc_attr($this->get_field_name('items')); ?>" placeholder='[{"image":"https://...","title":"标题","link":"https://..."}]'><?php echo esc_textarea((string) $json); ?></textarea>
</label>
<small><?php esc_html_e('字段: image, video, title, link, target, hide(pc|m), height, mask', 'aksrt'); ?></small>
</p>
<?php
}
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;
}
/**
* @param array<string,mixed> $new_instance
* @param array<string,mixed> $old_instance
* @return array<string,mixed>
*/
public function update($new_instance, $old_instance): array {
return [
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'pc_row' => max(1, min(6, (int) ($new_instance['pc_row'] ?? 2))),
'm_row' => max(1, min(3, (int) ($new_instance['m_row'] ?? 1))),
'columns' => max(1, min(6, (int) ($new_instance['pc_row'] ?? $new_instance['columns'] ?? 2))),
'height_scale' => max(30, min(120, (int) ($new_instance['height_scale'] ?? 70))),
'mask_opacity' => max(0, min(80, (int) ($new_instance['mask_opacity'] ?? 20))),
'font_size_pc' => max(12, min(32, (int) ($new_instance['font_size_pc'] ?? 18))),
'font_size_m' => max(11, min(24, (int) ($new_instance['font_size_m'] ?? 14))),
'font_bold' => !empty($new_instance['font_bold']) ? 1 : 0,
'font_color' => sanitize_hex_color((string) ($new_instance['font_color'] ?? '')) ?: '',
'items' => $this->normalize($new_instance['items'] ?? []),
];
}
}