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
2026-07-21 08:59:27 +08:00
parent 8e3b86a21b
commit 0374a08bff
2 changed files with 314 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/widget-batch5.css
+123
View File
@@ -1702,3 +1702,126 @@
.term-aggregation .hide-sm { display: none !important; }
.aksrt-oneline-swiper .swiper-slide { max-width: 72%; min-width: 140px; }
}
/* ===== Batch14: recent comments mini + friend links + iframe + cover ===== */
.comment-mini-lists.widget-recent-comments,
.comment-mini-lists.zib-widget {
padding: 4px 0;
}
.comment-mini-lists .posts-mini {
display: flex;
align-items: flex-start;
gap: 0;
padding: 10px 0;
border-bottom: 1px solid var(--color-line, rgba(0,0,0,.06));
}
.comment-mini-lists .posts-mini:last-child {
border-bottom: 0;
}
.comment-mini-lists .avatar-img {
flex: 0 0 auto;
--this-size: 36px;
}
.comment-mini-lists .avatar-img img.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.comment-mini-lists .posts-mini-con {
min-width: 0;
flex: 1;
}
.comment-mini-lists .posts-mini-con > p.flex {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 4px;
gap: 8px;
}
.comment-mini-lists .icon-spot:before {
content: "·";
margin: 0 6px;
opacity: .5;
}
.comment-mini-lists a.muted-color {
color: var(--muted-2-color, #666);
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
}
.comment-mini-lists a.muted-color:hover {
color: var(--theme-color, var(--focus-color, #f04494));
}
/* Friend links reuse bookmark-links styles */
.aksrt-friend-links.links-box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.aksrt-friend-links.style-simple {
gap: 6px 12px;
}
.aksrt-friend-links.style-image {
gap: 8px;
}
/* Iframe lazy shell */
.wp-block-embed.is-type-video.relative-h,
.aksrt-iframe-embed .relative-h {
position: relative;
overflow: hidden;
border-radius: 8px;
background: #0f172a;
}
.aksrt-iframe-ratio {
position: relative;
width: 100%;
height: 0;
}
.aksrt-iframe-ratio iframe,
.aksrt-iframe-el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Cover cards row already covered by term-cards col rules — scope shared */
.widget-graphic-cover .row.gutters-5 {
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
}
.widget-graphic-cover .row.gutters-5 > [class*="col-"] {
padding: 0 4px;
box-sizing: border-box;
}
.widget-graphic-cover .col-sm-12 { width: 100%; }
.widget-graphic-cover .col-sm-6 { width: 50%; }
.widget-graphic-cover .col-sm-4 { width: 33.333%; }
.widget-graphic-cover .col-sm-3 { width: 25%; }
.widget-graphic-cover .col-sm-2 { width: 16.666%; }
@media (max-width: 767px) {
.widget-graphic-cover .col-xs-12 { width: 100%; }
.widget-graphic-cover .col-xs-6 { width: 50%; }
.widget-graphic-cover .col-xs-4 { width: 33.333%; }
}
.widget-graphic-cover .this-font {
font-size: var(--font-size, 18px);
font-weight: var(--font-weight, 600);
color: var(--color, #fff);
}
@media (max-width: 767px) {
.widget-graphic-cover .this-font {
font-size: var(--font-size-sm, 14px);
font-weight: var(--font-weight-sm, 600);
}
}
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'] ?? []),
];
}
}