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

feat(widgets): IconCards + IconCoverCards via shared icon helpers

Browse Source 
Rebuild vertical/horizontal icon card widgets on aksrt_icon_card and
aksrt_icon_cover_card with row gutters and optional scroll animation.
This commit is contained in:
kate522
2026-07-21 09:22:00 +08:00
parent 89f2ca45c4
commit a54bbee80b
2 changed files with 200 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AKSRT/Widgets/IconCardsWidget.php
+136 -72
View File
@@ -1,6 +1,6 @@
<?php
/**
* Vertical icon cards grid (zibll zib_widget_ui_icon_card).
* Vertical icon cards grid (zibll zib_widget_ui_icon_card → aksrt_icon_card).
*
* @package AKSRT
*/
@@ -14,72 +14,149 @@ class IconCardsWidget extends \WP_Widget {
public function __construct() {
parent::__construct('aksrt_icon_cards', esc_html__('AKSRT 图标卡片', 'aksrt'), [
'description' => esc_html__('图标在上、文案在下的竖版图标卡片网格。', 'aksrt'),
'classname' => 'widget_aksrt_icon_cards',
]);
}
/**
* @param array<string,mixed> $args
* @param array<string,mixed> $instance
*/
public function widget($args, $instance): void {
$cards = isset($instance['cards']) && is_array($instance['cards']) ? $instance['cards'] : [];
$columns = max(1, min(4, (int) ($instance['columns'] ?? $instance['pc_row'] ?? 2)));
$m_cols = max(1, min(3, (int) ($instance['m_row'] ?? 2)));
$go_link = !empty($instance['go_link']);
$show_bg = !isset($instance['show_widget_bg']) || !empty($instance['show_widget_bg']);
$icon_size = max(18, min(48, (int) ($instance['icon_size'] ?? 28)));
$valid = [];
foreach ($cards as $card) {
if (!is_array($card)) {
continue;
}
$title = sanitize_text_field((string) ($card['title'] ?? ''));
if ($title === '') {
continue;
}
$url = esc_url_raw(trim((string) ($card['link'] ?? $card['url'] ?? '')));
if ($url !== '' && $go_link && function_exists('aksrt_go_link')) {
$url = aksrt_go_link($url, true);
}
$valid[] = [
'title' => $title,
'icon' => sanitize_text_field((string) ($card['icon'] ?? '')),
'desc' => sanitize_text_field((string) ($card['description'] ?? $card['desc'] ?? '')),
'url' => $url,
];
}
if (!$valid) {
$cards = $this->normalize($instance['cards'] ?? []);
if (!$cards) {
return;
}
$pc_row = max(1, min(6, (int) ($instance['columns'] ?? $instance['pc_row'] ?? 2)));
$m_row = max(1, min(4, (int) ($instance['m_row'] ?? 2)));
$go_link = !empty($instance['go_link']);
$show_bg = !isset($instance['show_widget_bg']) || !empty($instance['show_widget_bg']);
$icon_size = max(0, min(64, (int) ($instance['icon_size'] ?? $instance['size'] ?? 0)));
$icon_radius = !empty($instance['icon_radius']);
$anim = sanitize_key((string) ($instance['obs_animation'] ?? ''));
$anim_repeat = !empty($instance['animation_repeat']);
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$title = apply_filters('widget_title', (string) ($instance['title'] ?? ''), $instance, $this->id_base);
if ($title !== '') {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
$style = sprintf('--ic-columns:%d;--ic-m-columns:%d;--ic-icon:%dpx;', $columns, $m_cols, $icon_size);
echo '<div class="widget-icon-cards' . ($show_bg ? '' : ' is-bare') . '" style="' . esc_attr($style) . '">';
foreach ($valid as $card) {
$tag = $card['url'] !== '' ? 'a' : 'div';
$extra = $card['url'] !== '' ? ' href="' . esc_url($card['url']) . '" target="_blank" rel="noopener noreferrer"' : '';
echo '<' . $tag . ' class="widget-icon-cards__item is-vertical"' . $extra . '>';
if ($card['icon'] !== '') {
echo '<div class="widget-icon-cards__icon"><i class="' . esc_attr($card['icon']) . '" aria-hidden="true"></i></div>';
$is_row = count($cards) > 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 : '');
echo $show_bg ? '<div class="zib-widget nobottom notop">' : '<div class="clear">';
if ($is_row) {
echo '<div class="row gutters-5">';
}
echo '<div class="widget-icon-cards__text">';
echo '<div class="widget-icon-cards__title">' . esc_html($card['title']) . '</div>';
if ($card['desc'] !== '') {
echo '<div class="widget-icon-cards__desc">' . esc_html($card['desc']) . '</div>';
$idx = 0;
foreach ($cards as $card) {
$url = (string) ($card['url'] ?? '');
if ($url !== '' && $go_link && function_exists('aksrt_go_link')) {
$url = aksrt_go_link($url, true);
}
echo '</div></' . $tag . '>';
$card_args = [
'class' => $show_bg ? 'box-body nopw-sm' : 'mb20',
'icon' => (string) ($card['icon'] ?? ''),
'icon_image' => (string) ($card['icon_image'] ?? ''),
'icon_size' => $icon_size > 0 ? (16 + $icon_size) : 0,
'icon_radius' => $icon_radius || !empty($card['icon_radius']),
'icon_color' => (string) ($card['icon_color'] ?? ''),
'icon_class' => (string) ($card['icon_class'] ?? ''),
'title' => (string) ($card['title'] ?? ''),
'desc' => (string) ($card['desc'] ?? ''),
'link' => [
'url' => $url,
'target' => (string) ($card['target'] ?? ''),
],
];
$anim_pack = function_exists('aksrt_obs_animate_attrs')
? aksrt_obs_animate_attrs($anim, $anim_repeat, $idx * 0.08)
: ['class' => '', 'attr' => ''];
if ($is_row) {
echo '<div class="' . esc_attr(trim($row_class . $anim_pack['class'])) . '"' . $anim_pack['attr'] . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
} elseif ($anim_pack['class'] !== '') {
echo '<div class="' . esc_attr(trim($anim_pack['class'])) . '"' . $anim_pack['attr'] . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
if (function_exists('aksrt_icon_card')) {
echo aksrt_icon_card($card_args); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
if ($is_row || $anim_pack['class'] !== '') {
echo '</div>';
}
$idx++;
}
if ($is_row) {
echo '</div>';
}
echo '</div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/**
* @param mixed $raw
* @return array<int, array<string,string>>
*/
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 $card) {
if (!is_array($card)) {
continue;
}
$title = sanitize_text_field((string) ($card['title'] ?? ''));
$icon = sanitize_text_field((string) ($card['icon'] ?? ''));
$icon_image = esc_url_raw(trim((string) ($card['icon_image'] ?? $card['customize_icon'] ?? '')));
if ($title === '' && $icon === '' && $icon_image === '') {
continue;
}
$url = esc_url_raw(trim((string) ($card['link'] ?? $card['url'] ?? '')));
if (is_array($card['link'] ?? null)) {
$url = esc_url_raw(trim((string) ($card['link']['url'] ?? '')));
$target = sanitize_text_field((string) ($card['link']['target'] ?? ''));
} else {
$target = sanitize_text_field((string) ($card['target'] ?? ''));
}
$out[] = [
'title' => $title,
'desc' => sanitize_text_field((string) ($card['description'] ?? $card['desc'] ?? '')),
'icon' => $icon,
'icon_image' => $icon_image,
'icon_color' => sanitize_html_class((string) ($card['icon_color'] ?? '')),
'icon_class' => sanitize_html_class((string) ($card['icon_class'] ?? '')),
'url' => $url,
'target' => $target,
];
if (count($out) >= 12) {
break;
}
}
return $out;
}
/**
* @param array<string,mixed> $instance
*/
public function form($instance): void {
$cards = isset($instance['cards']) && is_array($instance['cards']) ? $instance['cards'] : [];
$cards = $this->normalize($instance['cards'] ?? []);
while (count($cards) < 4) {
$cards[] = ['title' => '', 'icon' => '', 'link' => '', 'description' => ''];
$cards[] = ['title' => '', 'icon' => '', 'url' => '', 'desc' => ''];
}
?>
<p>
@@ -89,56 +166,43 @@ class IconCardsWidget extends \WP_Widget {
</p>
<p>
<label><?php esc_html_e('PC 列数:', 'aksrt'); ?>
<input class="tiny-text" type="number" min="1" max="4" name="<?php echo esc_attr($this->get_field_name('columns')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['columns'] ?? 2))); ?>">
<input class="tiny-text" type="number" min="1" max="6" name="<?php echo esc_attr($this->get_field_name('columns')); ?>" value="<?php echo esc_attr((string) ((int) ($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'] ?? 2))); ?>">
<input class="tiny-text" type="number" min="1" max="4" name="<?php echo esc_attr($this->get_field_name('m_row')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['m_row'] ?? 2))); ?>">
</label>
</p>
<p>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('go_link')); ?>" value="1" <?php checked(!empty($instance['go_link'])); ?>> <?php esc_html_e('外链跳转页', 'aksrt'); ?></label>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('show_widget_bg')); ?>" value="1" <?php checked(!isset($instance['show_widget_bg']) || !empty($instance['show_widget_bg'])); ?>> <?php esc_html_e('卡片背景', 'aksrt'); ?></label>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('icon_radius')); ?>" value="1" <?php checked(!empty($instance['icon_radius'])); ?>> <?php esc_html_e('圆形底图标', 'aksrt'); ?></label>
</p>
<hr>
<?php foreach ($cards as $i => $card) : ?>
<div style="border:1px solid #ddd;padding:6px;margin-bottom:6px;border-radius:4px;">
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("cards[{$i}][title]")); ?>" value="<?php echo esc_attr((string) ($card['title'] ?? '')); ?>" placeholder="<?php esc_attr_e('标题', 'aksrt'); ?>">
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("cards[{$i}][icon]")); ?>" value="<?php echo esc_attr((string) ($card['icon'] ?? '')); ?>" placeholder="<?php esc_attr_e('图标类名', 'aksrt'); ?>">
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("cards[{$i}][description]")); ?>" value="<?php echo esc_attr((string) ($card['description'] ?? '')); ?>" placeholder="<?php esc_attr_e('描述', 'aksrt'); ?>">
<input class="widefat" type="url" name="<?php echo esc_attr($this->get_field_name("cards[{$i}][link]")); ?>" value="<?php echo esc_attr((string) ($card['link'] ?? '')); ?>" placeholder="<?php esc_attr_e('链接', 'aksrt'); ?>">
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("cards[{$i}][desc]")); ?>" value="<?php echo esc_attr((string) ($card['desc'] ?? '')); ?>" placeholder="<?php esc_attr_e('描述', 'aksrt'); ?>">
<input class="widefat" type="url" name="<?php echo esc_attr($this->get_field_name("cards[{$i}][url]")); ?>" value="<?php echo esc_attr((string) ($card['url'] ?? '')); ?>" placeholder="<?php esc_attr_e('链接', 'aksrt'); ?>">
</div>
<?php endforeach;
}
/**
* @param array<string,mixed> $new_instance
* @param array<string,mixed> $old_instance
* @return array<string,mixed>
*/
public function update($new_instance, $old_instance): array {
$cards = [];
if (isset($new_instance['cards']) && is_array($new_instance['cards'])) {
foreach ($new_instance['cards'] as $card) {
if (!is_array($card)) {
continue;
}
$title = sanitize_text_field((string) ($card['title'] ?? ''));
if ($title === '') {
continue;
}
$cards[] = [
'title' => $title,
'icon' => sanitize_text_field((string) ($card['icon'] ?? '')),
'link' => esc_url_raw(trim((string) ($card['link'] ?? ''))),
'description' => sanitize_text_field((string) ($card['description'] ?? '')),
];
if (count($cards) >= 12) {
break;
}
}
}
return [
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'columns' => max(1, min(4, (int) ($new_instance['columns'] ?? 2))),
'm_row' => max(1, min(3, (int) ($new_instance['m_row'] ?? 2))),
'columns' => max(1, min(6, (int) ($new_instance['columns'] ?? 2))),
'm_row' => max(1, min(4, (int) ($new_instance['m_row'] ?? 2))),
'go_link' => !empty($new_instance['go_link']) ? 1 : 0,
'show_widget_bg' => !empty($new_instance['show_widget_bg']) ? 1 : 0,
'cards' => $cards,
'icon_radius' => !empty($new_instance['icon_radius']) ? 1 : 0,
'obs_animation' => sanitize_key((string) ($new_instance['obs_animation'] ?? '')),
'cards' => $this->normalize($new_instance['cards'] ?? []),
];
}
}
src/AKSRT/Widgets/WidgetIconCoverCards.php
+55 -20
View File
@@ -1,6 +1,6 @@
<?php
/**
* Icon cover cards (zibll zib_widget_ui_icon_cover_card).
* Icon cover cards (zibll zib_widget_ui_icon_cover_card → aksrt_icon_cover_card).
*
* @package AKSRT
*/
@@ -22,16 +22,21 @@ class WidgetIconCoverCards extends \WP_Widget {
);
}
/**
* @param array<string,mixed> $args
* @param array<string,mixed> $instance
*/
public function widget($args, $instance): void {
$cards = $this->normalize($instance['cards'] ?? []);
if (!$cards) {
return;
}
$cols = max(1, min(4, (int) ($instance['pc_row'] ?? 2)));
$m_cols = max(1, min(2, (int) ($instance['m_row'] ?? 1)));
$pc_row = max(1, min(4, (int) ($instance['pc_row'] ?? 2)));
$m_row = max(1, min(2, (int) ($instance['m_row'] ?? 1)));
$icon_size = max(16, min(48, (int) ($instance['icon_size'] ?? 25)));
$radius = !empty($instance['icon_radius4']);
$go_link = !empty($instance['go_link']);
$show_bg = !empty($instance['show_widget_bg']);
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$title = apply_filters('widget_title', (string) ($instance['title'] ?? ''), $instance, $this->id_base);
@@ -39,31 +44,49 @@ class WidgetIconCoverCards extends \WP_Widget {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
$style = sprintf('--aksrt-icc-pc:%d;--aksrt-icc-m:%d;--aksrt-icc-icon:%dpx;', $cols, $m_cols, $icon_size);
echo '<div class="aksrt-icon-cover' . ($radius ? ' is-radius' : '') . '" style="' . esc_attr($style) . '">';
$is_row = count($cards) > 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 : '');
echo $show_bg ? '<div class="zib-widget padding-10">' : '<div class="mb10">';
if ($is_row) {
echo '<div class="row gutters-5">';
}
foreach ($cards as $card) {
$url = $card['url'];
$url = (string) ($card['url'] ?? '');
if ($url !== '' && $go_link && function_exists('aksrt_go_link')) {
$url = aksrt_go_link($url, true);
}
$tag = $url !== '' ? 'a' : 'div';
$href = $url !== '' ? ' href="' . esc_url($url) . '"' . ($card['target'] !== '' ? ' target="' . esc_attr($card['target']) . '" rel="noopener noreferrer"' : '') : '';
echo '<' . $tag . ' class="aksrt-icon-cover__item"' . $href . '>';
echo '<div class="aksrt-icon-cover__icon">';
if ($card['icon_image'] !== '') {
echo '<img src="' . esc_url($card['icon_image']) . '" alt="" loading="lazy" />';
} elseif ($card['icon'] !== '') {
echo '<i class="' . esc_attr($card['icon']) . '" aria-hidden="true"></i>';
$card_args = [
'class' => $show_bg ? 'padding-10' : 'zib-widget mb10',
'icon' => (string) ($card['icon'] ?? ''),
'icon_image' => (string) ($card['icon_image'] ?? ''),
'icon_size' => $icon_size,
'icon_class' => $radius ? 'radius4' : '',
'icon_color' => (string) ($card['icon_color'] ?? ''),
'title' => (string) ($card['title'] ?? ''),
'desc' => (string) ($card['desc'] ?? ''),
'link' => [
'url' => $url,
'target' => (string) ($card['target'] ?? ''),
],
];
if ($is_row) {
echo '<div class="' . esc_attr($row_class) . '">';
}
if (function_exists('aksrt_icon_cover_card')) {
echo aksrt_icon_cover_card($card_args); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
if ($is_row) {
echo '</div>';
echo '<div class="aksrt-icon-cover__text">';
if ($card['title'] !== '') {
echo '<div class="aksrt-icon-cover__title">' . esc_html($card['title']) . '</div>';
}
if ($card['desc'] !== '') {
echo '<div class="aksrt-icon-cover__desc">' . esc_html($card['desc']) . '</div>';
}
echo '</div></' . $tag . '>';
if ($is_row) {
echo '</div>';
}
echo '</div>';
@@ -94,6 +117,7 @@ class WidgetIconCoverCards extends \WP_Widget {
continue;
}
$url = '';
$target = '';
if (is_array($row['link'] ?? null)) {
$url = esc_url_raw(trim((string) ($row['link']['url'] ?? '')));
$target = sanitize_text_field((string) ($row['link']['target'] ?? ''));
@@ -106,6 +130,7 @@ class WidgetIconCoverCards extends \WP_Widget {
'desc' => sanitize_text_field((string) ($row['desc'] ?? '')),
'icon' => $icon,
'icon_image' => $icon_image,
'icon_color' => sanitize_html_class((string) ($row['icon_color'] ?? '')),
'url' => $url,
'target' => $target,
];
@@ -116,6 +141,9 @@ class WidgetIconCoverCards extends \WP_Widget {
return $out;
}
/**
* @param array<string,mixed> $instance
*/
public function form($instance): void {
$json = is_string($instance['cards'] ?? null)
? (string) $instance['cards']
@@ -144,11 +172,17 @@ class WidgetIconCoverCards extends \WP_Widget {
</p>
<p>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('icon_radius4')); ?>" value="1" <?php checked(!empty($instance['icon_radius4'])); ?>> <?php esc_html_e('图标圆角方形', 'aksrt'); ?></label><br>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('show_widget_bg')); ?>" value="1" <?php checked(!empty($instance['show_widget_bg'])); ?>> <?php esc_html_e('模块背景', 'aksrt'); ?></label><br>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('go_link')); ?>" value="1" <?php checked(!empty($instance['go_link'])); ?>> <?php esc_html_e('外链跳转页', 'aksrt'); ?></label>
</p>
<?php
}
/**
* @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'] ?? '')),
@@ -157,6 +191,7 @@ class WidgetIconCoverCards extends \WP_Widget {
'm_row' => max(1, min(2, (int) ($new_instance['m_row'] ?? 1))),
'icon_size' => max(16, min(48, (int) ($new_instance['icon_size'] ?? 25))),
'icon_radius4' => !empty($new_instance['icon_radius4']) ? 1 : 0,
'show_widget_bg' => !empty($new_instance['show_widget_bg']) ? 1 : 0,
'go_link' => !empty($new_instance['go_link']) ? 1 : 0,
];
}