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

feat(widgets): buttons/text-title/yiyan depth + batch15 CSS

Browse Source 
Buttons gain zibll but/hollow/color + obs animation; text-title supports
per-char entrance; yiyan wraps main-bg shell with affix/animate options.
This commit is contained in:
kate522
2026-07-21 09:22:01 +08:00
parent a54bbee80b
commit 66ee624cb9
4 changed files with 457 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/widget-batch5.css
+184
View File
@@ -1825,3 +1825,187 @@
font-weight: var(--font-weight-sm, 600);
}
}
/* ===== Batch15: icon-card / icon-cover / buttons / yiyan / text-title ===== */
.icon-card {
text-align: center;
padding: 16px 10px;
}
.icon-card .card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
color: var(--theme-color, var(--focus-color, #f04494));
}
.icon-card .card-icon.toggle-radius {
width: 3.2em;
height: 3.2em;
border-radius: 50%;
background: rgba(240, 68, 148, 0.1);
}
.icon-card .card-icon img {
width: 1em;
height: 1em;
object-fit: contain;
}
.icon-card .main-color {
color: inherit;
text-decoration: none;
}
.icon-card .main-color:hover {
color: var(--theme-color, var(--focus-color, #f04494));
}
.icon-cover-card {
display: flex;
align-items: center;
gap: 0;
padding: 12px;
border-radius: 8px;
background: var(--surface-1, #fff);
border: 1px solid var(--color-line, #e5e7eb);
transition: box-shadow .2s ease, transform .2s ease;
}
a.main-color > .icon-cover-card:hover,
.icon-cover-card:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transform: translateY(-1px);
}
.icon-cover-icon.badg.cir {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4em;
height: 2.4em;
min-width: 2.4em;
border-radius: 50%;
background: rgba(59, 130, 246, 0.12);
color: #2563eb;
flex-shrink: 0;
}
.icon-cover-icon.radius4 {
border-radius: 10px !important;
}
.icon-cover-icon img {
width: 70%;
height: 70%;
object-fit: contain;
}
.icon-cover-desc {
min-width: 0;
}
.icon-cover-desc .font-bold {
font-weight: 700;
}
/* Buttons wrap (zibll flex hh) */
.widget-buttons .widget-buttons-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pc-gap, 12px);
}
.widget-buttons .widget-buttons-wrap.align-center { justify-content: center; }
.widget-buttons .widget-buttons-wrap.align-left { justify-content: flex-start; }
.widget-buttons .widget-buttons-wrap.align-right { justify-content: flex-end; }
.widget-buttons .widget-buttons-wrap .but {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
font-size: 14px;
line-height: 1.3;
background: var(--theme-color, #3b82f6);
color: #fff;
border: 1px solid transparent;
min-width: var(--pc-width, auto);
}
.widget-buttons .widget-buttons-wrap .but.radius {
border-radius: 999px;
}
.widget-buttons .widget-buttons-wrap .but.hollow {
background: transparent;
color: var(--theme-color, #3b82f6);
border-color: currentColor;
}
.widget-buttons .widget-buttons-wrap .but.c-blue { background: #3b82f6; }
.widget-buttons .widget-buttons-wrap .but.c-green { background: #22c55e; }
.widget-buttons .widget-buttons-wrap .but.c-yellow { background: #eab308; color: #1a1a1a; }
.widget-buttons .widget-buttons-wrap .but.c-red { background: #ef4444; }
.widget-buttons .widget-buttons-wrap .but.c-purple { background: #a855f7; }
.widget-buttons .widget-buttons-wrap .but.hollow.c-blue { color: #3b82f6; background: transparent; }
.widget-buttons .widget-buttons-wrap .but.hollow.c-green { color: #22c55e; background: transparent; }
.widget-buttons .widget-buttons-wrap .but.hollow.c-red { color: #ef4444; background: transparent; }
.widget-buttons .widget-buttons-wrap .but.hollow.c-purple { color: #a855f7; background: transparent; }
.widget-buttons .widget-buttons-wrap .but.hollow.c-yellow { color: #ca8a04; background: transparent; }
.widget-buttons.pc-size-small .but { padding: 4px 10px; font-size: 12px; }
.widget-buttons.pc-size-medium .but { padding: 6px 14px; font-size: 13px; }
.widget-buttons.pc-size-large .but { padding: 10px 18px; font-size: 15px; }
@media (max-width: 767px) {
.widget-buttons .widget-buttons-wrap {
gap: var(--m-gap, 6px);
}
.widget-buttons .widget-buttons-wrap .but {
min-width: var(--m-width, auto);
}
.widget-buttons.m-size-small .but { padding: 4px 10px; font-size: 12px; }
.widget-buttons.m-size-medium .but { padding: 6px 12px; font-size: 13px; }
.widget-buttons.m-size-large .but { padding: 8px 14px; font-size: 14px; }
}
/* Yiyan shell */
.yiyan-box.main-bg,
.yiyan-box-wrap .yiyan-box {
background: var(--surface-1, #fff);
border-radius: 8px;
box-shadow: 0 0 10px var(--main-shadow, rgba(116,116,116,.08));
padding: 18px 16px;
text-align: center;
}
.yiyan-box .aksrt-yiyan,
.yiyan-box .yiyan {
margin: 0;
}
/* Text title char animation inherits data-aksrt-animate */
.aksrt-text-title__main > span[data-aksrt-animate] {
display: inline-block;
}
/* Shared icon grid columns (reuse term-cards pattern) */
.widget_aksrt_icon_cards .row.gutters-5,
.widget_aksrt_icon_cover_cards .row.gutters-5 {
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
}
.widget_aksrt_icon_cards .row.gutters-5 > [class*="col-"],
.widget_aksrt_icon_cover_cards .row.gutters-5 > [class*="col-"] {
padding: 0 4px;
box-sizing: border-box;
}
.widget_aksrt_icon_cards .col-sm-12,
.widget_aksrt_icon_cover_cards .col-sm-12 { width: 100%; }
.widget_aksrt_icon_cards .col-sm-6,
.widget_aksrt_icon_cover_cards .col-sm-6 { width: 50%; }
.widget_aksrt_icon_cards .col-sm-4,
.widget_aksrt_icon_cover_cards .col-sm-4 { width: 33.333%; }
.widget_aksrt_icon_cards .col-sm-3,
.widget_aksrt_icon_cover_cards .col-sm-3 { width: 25%; }
.widget_aksrt_icon_cards .col-sm-2,
.widget_aksrt_icon_cover_cards .col-sm-2 { width: 16.666%; }
@media (max-width: 767px) {
.widget_aksrt_icon_cards .col-xs-12,
.widget_aksrt_icon_cover_cards .col-xs-12 { width: 100%; }
.widget_aksrt_icon_cards .col-xs-6,
.widget_aksrt_icon_cover_cards .col-xs-6 { width: 50%; }
.widget_aksrt_icon_cards .col-xs-4,
.widget_aksrt_icon_cover_cards .col-xs-4 { width: 33.333%; }
.widget_aksrt_icon_cards .col-xs-3,
.widget_aksrt_icon_cover_cards .col-xs-3 { width: 25%; }
}
src/AKSRT/Widgets/ButtonsWidget.php
+127 -55
View File
@@ -1,6 +1,6 @@
<?php
/**
* Custom buttons group (zibll zib_widget_ui_buttons lite).
* Custom buttons group (zibll zib_widget_ui_buttons).
*
* @package AKSRT
*/
@@ -13,16 +13,22 @@ class ButtonsWidget extends \WP_Widget {
public function __construct() {
parent::__construct('aksrt_buttons', esc_html__('AKSRT 按钮组', 'aksrt'), [
'description' => esc_html__('显示一组自定义按钮，支持外链跳转与样式。', 'aksrt'),
'description' => esc_html__('显示一组自定义按钮，支持外链跳转、色系与入场动画。', 'aksrt'),
'classname' => 'widget_aksrt_buttons',
]);
}
/**
* @param array<string,mixed> $args
* @param array<string,mixed> $instance
*/
public function widget($args, $instance): void {
$buttons = isset($instance['buttons']) && is_array($instance['buttons']) ? $instance['buttons'] : [];
$layout = sanitize_key((string) ($instance['layout'] ?? 'horizontal'));
if (!in_array($layout, ['vertical', 'horizontal'], true)) {
$layout = 'horizontal';
// Also accept zibll-style `items`.
if (!$buttons && isset($instance['items']) && is_array($instance['items'])) {
$buttons = $instance['items'];
}
$align = sanitize_key((string) ($instance['align'] ?? 'center'));
if (!in_array($align, ['left', 'center', 'right'], true)) {
$align = 'center';
@@ -30,31 +36,94 @@ class ButtonsWidget extends \WP_Widget {
$radius = !empty($instance['radius']);
$hollow = !empty($instance['hollow']);
$go_link = !empty($instance['go_link']);
$gap = max(4, min(30, (int) ($instance['gap'] ?? 10)));
$pc_gap = max(0, min(40, (int) ($instance['pc_gap'] ?? $instance['gap'] ?? 12)));
$m_gap = max(0, min(30, (int) ($instance['m_gap'] ?? 6)));
$pc_pad = sanitize_key((string) ($instance['pc_padding'] ?? 'large'));
$m_pad = sanitize_key((string) ($instance['m_padding'] ?? 'medium'));
if (!in_array($pc_pad, ['small', 'medium', 'large'], true)) {
$pc_pad = 'large';
}
if (!in_array($m_pad, ['small', 'medium', 'large'], true)) {
$m_pad = 'medium';
}
$anim = sanitize_key((string) ($instance['obs_animation'] ?? ''));
$anim_repeat = !empty($instance['animation_repeat']);
$pc_width = max(0, min(400, (int) ($instance['pc_width'] ?? 0)));
$m_width = max(0, min(400, (int) ($instance['m_width'] ?? 0)));
$items = [];
$but_class = 'but';
if ($radius) {
$but_class .= ' radius';
}
if ($hollow) {
$but_class .= ' hollow';
}
$buts = '';
$key = 0;
foreach ($buttons as $btn) {
if (!is_array($btn)) {
continue;
}
$text = sanitize_text_field((string) ($btn['text'] ?? ''));
$url = esc_url_raw(trim((string) ($btn['url'] ?? '')));
if ($text === '') {
continue;
}
$url = '';
$target = '';
if (is_array($btn['link'] ?? null)) {
$url = esc_url_raw(trim((string) ($btn['link']['url'] ?? '')));
$target = sanitize_text_field((string) ($btn['link']['target'] ?? ''));
} else {
$url = esc_url_raw(trim((string) ($btn['url'] ?? '')));
$target = !empty($btn['new_window']) || !empty($btn['target']) ? '_blank' : '';
}
if ($url !== '' && $go_link && function_exists('aksrt_go_link')) {
$url = aksrt_go_link($url, true);
}
$items[] = [
'text' => $text,
'url' => $url,
'style' => sanitize_key((string) ($btn['style'] ?? 'primary')),
'icon' => sanitize_text_field((string) ($btn['icon'] ?? $btn['icon_left'] ?? '')),
'icon_right' => sanitize_text_field((string) ($btn['icon_right'] ?? '')),
'new_window' => !empty($btn['new_window']) || !empty($btn['target']),
if ($url === '') {
$url = 'javascript:void(0)';
}
$color = sanitize_html_class((string) ($btn['color'] ?? $btn['style'] ?? ''));
// Map legacy style keys to color classes.
$style_map = [
'primary' => 'c-blue',
'secondary' => 'c-blue-2',
'outline' => '',
'text' => '',
'pink' => 'c-red',
'blue' => 'c-blue',
'green' => 'c-green',
'yellow' => 'c-yellow',
'purple' => 'c-purple',
];
if (isset($style_map[$color])) {
$color = $style_map[$color];
}
$item_class = trim($but_class . ' ' . $color);
$icon_left = sanitize_text_field((string) ($btn['icon'] ?? $btn['icon_left'] ?? ''));
$icon_right = sanitize_text_field((string) ($btn['icon_right'] ?? ''));
$left_html = $icon_left !== '' ? '<i class="' . esc_attr($icon_left) . '" aria-hidden="true"></i> ' : '';
$right_html = $icon_right !== '' ? ' <span class="ml6"><i class="' . esc_attr($icon_right) . '" aria-hidden="true"></i></span>' : '';
$anim_pack = function_exists('aksrt_obs_animate_attrs')
? aksrt_obs_animate_attrs($anim, $anim_repeat, $key * 0.15)
: ['class' => '', 'attr' => ''];
$tgt = $target !== '' && strpos($url, 'javascript:') !== 0
? ' target="' . esc_attr($target) . '" rel="noopener noreferrer"'
: '';
$buts .= '<div class="' . esc_attr(trim($anim_pack['class'])) . '"' . $anim_pack['attr'] . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$buts .= '<a class="' . esc_attr($item_class) . '" href="' . esc_url($url) . '"' . $tgt . '>'
. $left_html . esc_html($text) . $right_html . '</a>';
$buts .= '</div>';
$key++;
}
if (!$items) {
if ($buts === '') {
return;
}
@@ -64,36 +133,26 @@ class ButtonsWidget extends \WP_Widget {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
$wrap = 'widget-buttons widget-buttons--' . $layout . ' align-' . $align;
if ($radius) {
$wrap .= ' is-radius';
$style_attr = '';
if ($pc_width > 0) {
$style_attr .= '--pc-width:' . $pc_width . 'px;';
}
if ($hollow) {
$wrap .= ' is-hollow';
if ($m_width > 0) {
$style_attr .= '--m-width:' . $m_width . 'px;';
}
echo '<div class="' . esc_attr($wrap) . '" style="--btn-gap:' . esc_attr((string) $gap) . 'px">';
foreach ($items as $btn) {
$style = in_array($btn['style'], ['primary', 'secondary', 'outline', 'text', 'pink', 'blue', 'green', 'yellow', 'purple'], true)
? $btn['style']
: 'primary';
$cls = 'widget-buttons__btn widget-buttons__btn--' . $style;
$href = $btn['url'] !== '' ? $btn['url'] : 'javascript:void(0)';
$tgt = $btn['new_window'] && $btn['url'] !== '' ? ' target="_blank" rel="noopener noreferrer"' : '';
echo '<a href="' . esc_url($href) . '" class="' . esc_attr($cls) . '"' . $tgt . '>';
if ($btn['icon'] !== '') {
echo '<i class="' . esc_attr($btn['icon']) . '" aria-hidden="true"></i> ';
}
echo esc_html($btn['text']);
if ($btn['icon_right'] !== '') {
echo ' <i class="' . esc_attr($btn['icon_right']) . '" aria-hidden="true"></i>';
}
echo '</a>';
}
echo '</div>';
$style_attr .= '--pc-gap:' . $pc_gap . 'px;--m-gap:' . $m_gap . 'px;--btn-gap:' . $pc_gap . 'px;';
echo '<div class="widget-buttons mb20 pc-size-' . esc_attr($pc_pad) . ' m-size-' . esc_attr($m_pad) . '">';
echo '<div class="widget-buttons-wrap flex hh align-' . esc_attr($align) . '" style="' . esc_attr($style_attr) . '">';
echo $buts; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '</div></div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/**
* @param array<string,mixed> $instance
*/
public function form($instance): void {
$buttons = isset($instance['buttons']) && is_array($instance['buttons']) ? $instance['buttons'] : [];
while (count($buttons) < 4) {
@@ -106,12 +165,6 @@ class ButtonsWidget extends \WP_Widget {
</label>
</p>
<p>
<label><?php esc_html_e('布局', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('layout')); ?>">
<option value="horizontal" <?php selected(($instance['layout'] ?? 'horizontal'), 'horizontal'); ?>><?php esc_html_e('水平', 'aksrt'); ?></option>
<option value="vertical" <?php selected(($instance['layout'] ?? ''), 'vertical'); ?>><?php esc_html_e('垂直', 'aksrt'); ?></option>
</select>
</label>
<label><?php esc_html_e('对齐', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('align')); ?>">
<option value="center" <?php selected(($instance['align'] ?? 'center'), 'center'); ?>><?php esc_html_e('居中', 'aksrt'); ?></option>
@@ -125,6 +178,17 @@ class ButtonsWidget extends \WP_Widget {
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('hollow')); ?>" value="1" <?php checked(!empty($instance['hollow'])); ?>> <?php esc_html_e('镂空', 'aksrt'); ?></label>
<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>
<p>
<label><?php esc_html_e('入场动画', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('obs_animation')); ?>">
<option value="" <?php selected(($instance['obs_animation'] ?? ''), ''); ?>><?php esc_html_e('无', 'aksrt'); ?></option>
<option value="fade" <?php selected(($instance['obs_animation'] ?? ''), 'fade'); ?>><?php esc_html_e('淡入', 'aksrt'); ?></option>
<option value="slideup" <?php selected(($instance['obs_animation'] ?? ''), 'slideup'); ?>><?php esc_html_e('上滑', 'aksrt'); ?></option>
<option value="slideright" <?php selected(($instance['obs_animation'] ?? ''), 'slideright'); ?>><?php esc_html_e('右滑', 'aksrt'); ?></option>
<option value="zoomin" <?php selected(($instance['obs_animation'] ?? ''), 'zoomin'); ?>><?php esc_html_e('放大', 'aksrt'); ?></option>
</select>
</label>
</p>
<?php foreach ($buttons as $i => $btn) : ?>
<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("buttons[{$i}][text]")); ?>" value="<?php echo esc_attr((string) ($btn['text'] ?? '')); ?>" placeholder="<?php esc_attr_e('按钮文字', 'aksrt'); ?>">
@@ -132,7 +196,7 @@ class ButtonsWidget extends \WP_Widget {
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("buttons[{$i}][icon]")); ?>" value="<?php echo esc_attr((string) ($btn['icon'] ?? '')); ?>" placeholder="<?php esc_attr_e('左图标 class', 'aksrt'); ?>">
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("buttons[{$i}][icon_right]")); ?>" value="<?php echo esc_attr((string) ($btn['icon_right'] ?? '')); ?>" placeholder="<?php esc_attr_e('右图标 class', 'aksrt'); ?>">
<select class="widefat" name="<?php echo esc_attr($this->get_field_name("buttons[{$i}][style]")); ?>">
<?php foreach (['primary' => '主要', 'secondary' => '次要', 'outline' => '线框', 'text' => '文字', 'pink' => '粉', 'blue' => '蓝', 'green' => '绿'] as $k => $lab) : ?>
<?php foreach (['primary' => '主要', 'secondary' => '次要', 'outline' => '线框', 'text' => '文字', 'pink' => '粉', 'blue' => '蓝', 'green' => '绿', 'yellow' => '黄', 'purple' => '紫'] as $k => $lab) : ?>
<option value="<?php echo esc_attr($k); ?>" <?php selected(($btn['style'] ?? 'primary'), $k); ?>><?php echo esc_html($lab); ?></option>
<?php endforeach; ?>
</select>
@@ -141,6 +205,11 @@ class ButtonsWidget extends \WP_Widget {
<?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 {
$buttons = [];
if (isset($new_instance['buttons']) && is_array($new_instance['buttons'])) {
@@ -166,14 +235,17 @@ class ButtonsWidget extends \WP_Widget {
}
}
return [
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'layout' => ($new_instance['layout'] ?? '') === 'vertical' ? 'vertical' : 'horizontal',
'align' => in_array(($new_instance['align'] ?? ''), ['left', 'center', 'right'], true) ? $new_instance['align'] : 'center',
'radius' => !empty($new_instance['radius']) ? 1 : 0,
'hollow' => !empty($new_instance['hollow']) ? 1 : 0,
'go_link' => !empty($new_instance['go_link']) ? 1 : 0,
'gap' => max(4, min(30, (int) ($new_instance['gap'] ?? 10))),
'buttons' => $buttons,
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'align' => in_array(($new_instance['align'] ?? ''), ['left', 'center', 'right'], true) ? $new_instance['align'] : 'center',
'radius' => !empty($new_instance['radius']) ? 1 : 0,
'hollow' => !empty($new_instance['hollow']) ? 1 : 0,
'go_link' => !empty($new_instance['go_link']) ? 1 : 0,
'gap' => max(4, min(30, (int) ($new_instance['gap'] ?? 12))),
'pc_gap' => max(0, min(40, (int) ($new_instance['pc_gap'] ?? $new_instance['gap'] ?? 12))),
'm_gap' => max(0, min(30, (int) ($new_instance['m_gap'] ?? 6))),
'obs_animation' => sanitize_key((string) ($new_instance['obs_animation'] ?? '')),
'animation_repeat'=> !empty($new_instance['animation_repeat']) ? 1 : 0,
'buttons' => $buttons,
];
}
}
src/AKSRT/Widgets/WidgetTextTitle.php
+83 -21
View File
@@ -1,6 +1,6 @@
<?php
/**
* Text title / section heading (zibll zib_widget_ui_text_title lite).
* Text title / section heading (zibll zib_widget_ui_text_title).
*
* @package AKSRT
*/
@@ -16,12 +16,16 @@ class WidgetTextTitle extends \WP_Widget {
'aksrt_text_title',
esc_html__('AKSRT 文字标题', 'aksrt'),
[
'description' => esc_html__('自定义标题 + 副标题区块，用于模块分隔。', 'aksrt'),
'description' => esc_html__('自定义标题 + 副标题区块，支持逐字入场动画。', 'aksrt'),
'classname' => 'widget_aksrt_text_title',
]
);
}
/**
* @param array<string,mixed> $args
* @param array<string,mixed> $instance
*/
public function widget($args, $instance): void {
$title = trim((string) ($instance['title'] ?? ''));
$desc = trim((string) ($instance['desc'] ?? ''));
@@ -39,6 +43,9 @@ class WidgetTextTitle extends \WP_Widget {
$desc_size = max(11, min(24, (int) ($instance['desc_size'] ?? 14)));
$title_color = sanitize_hex_color((string) ($instance['title_color'] ?? '')) ?: '';
$desc_color = sanitize_hex_color((string) ($instance['desc_color'] ?? '')) ?: '';
$anim = sanitize_key((string) ($instance['obs_animation'] ?? ''));
$anim_repeat = !empty($instance['animation_repeat']);
$icon_width = max(0, min(64, (int) ($instance['title_icon_width'] ?? 0)));
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
@@ -50,26 +57,63 @@ class WidgetTextTitle extends \WP_Widget {
$desc_color !== '' ? '--aksrt-tt-desc-color:' . $desc_color . ';' : ''
);
echo '<div class="aksrt-text-title align-' . esc_attr($align) . '" style="' . esc_attr($style) . '">';
if ($title !== '') {
echo '<div class="aksrt-text-title__main">';
if ($icon_left !== '') {
echo '<span class="aksrt-text-title__icon"><i class="' . esc_attr($icon_left) . '" aria-hidden="true"></i></span>';
$icon_w_attr = $icon_width > 0 ? ' style="--icon-width:' . (int) $icon_width . 'px;"' : '';
$left_html = $icon_left !== ''
? '<span class="text-title-icon aksrt-text-title__icon mr6"' . $icon_w_attr . '><i class="' . esc_attr($icon_left) . '" aria-hidden="true"></i></span>'
: '';
$right_html = $icon_right !== ''
? '<span class="text-title-icon aksrt-text-title__icon ml6"' . $icon_w_attr . '><i class="' . esc_attr($icon_right) . '" aria-hidden="true"></i></span>'
: '';
$title_html = '';
if ($title !== '' && $anim !== '' && function_exists('aksrt_obs_animate_attrs')) {
// Split title into per-char spans with staggered delay (zibll).
$chars = preg_split('//u', $title, -1, PREG_SPLIT_NO_EMPTY) ?: [];
$pieces = [];
if ($left_html !== '') {
$pieces[] = $left_html;
}
echo '<span class="aksrt-text-title__text">' . esc_html($title) . '</span>';
if ($icon_right !== '') {
echo '<span class="aksrt-text-title__icon"><i class="' . esc_attr($icon_right) . '" aria-hidden="true"></i></span>';
foreach ($chars as $ch) {
$pieces[] = $ch;
}
echo '</div>';
if ($right_html !== '') {
$pieces[] = $right_html;
}
foreach ($pieces as $i => $piece) {
$pack = aksrt_obs_animate_attrs($anim, $anim_repeat, $i * 0.05);
$is_html = str_starts_with((string) $piece, '<');
$inner = $is_html ? $piece : esc_html((string) $piece);
$title_html .= '<span class="' . esc_attr(trim($pack['class'])) . '"' . $pack['attr']
. ' style="--delay:' . esc_attr((string) ($i * 0.05)) . 's;">' . $inner . '</span>';
}
} elseif ($title !== '') {
$title_html = $left_html . esc_html($title) . $right_html;
}
$desc_html = '';
if ($desc !== '') {
echo '<div class="aksrt-text-title__desc">' . esc_html($desc) . '</div>';
if ($anim !== '' && function_exists('aksrt_obs_animate_attrs')) {
$pack = aksrt_obs_animate_attrs($anim, $anim_repeat, 0.6);
$desc_html = '<div class="aksrt-text-title__desc' . esc_attr($pack['class']) . '"' . $pack['attr']
. ' style="--delay:.6s;">' . esc_html($desc) . '</div>';
} else {
$desc_html = '<div class="aksrt-text-title__desc">' . esc_html($desc) . '</div>';
}
}
echo '<div class="aksrt-text-title text-title align-' . esc_attr($align) . '" style="' . esc_attr($style) . '">';
if ($title_html !== '') {
echo '<div class="aksrt-text-title__main">' . $title_html . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
echo $desc_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '</div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/**
* @param array<string,mixed> $instance
*/
public function form($instance): void {
?>
<p>
@@ -109,6 +153,16 @@ class WidgetTextTitle extends \WP_Widget {
<input class="tiny-text" type="number" min="11" max="24" name="<?php echo esc_attr($this->get_field_name('desc_size')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['desc_size'] ?? 14))); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('入场动画', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('obs_animation')); ?>">
<option value="" <?php selected(($instance['obs_animation'] ?? ''), ''); ?>><?php esc_html_e('无', 'aksrt'); ?></option>
<option value="fade" <?php selected(($instance['obs_animation'] ?? ''), 'fade'); ?>><?php esc_html_e('淡入', 'aksrt'); ?></option>
<option value="slideup" <?php selected(($instance['obs_animation'] ?? ''), 'slideup'); ?>><?php esc_html_e('上滑', 'aksrt'); ?></option>
<option value="zoomin" <?php selected(($instance['obs_animation'] ?? ''), 'zoomin'); ?>><?php esc_html_e('放大', 'aksrt'); ?></option>
</select>
</label>
</p>
<p>
<label><?php esc_html_e('标题色 #hex', 'aksrt'); ?>
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('title_color')); ?>" value="<?php echo esc_attr((string) ($instance['title_color'] ?? '')); ?>">
@@ -122,17 +176,25 @@ class WidgetTextTitle extends \WP_Widget {
<?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'] ?? '')),
'desc' => sanitize_text_field((string) ($new_instance['desc'] ?? '')),
'align' => in_array(($new_instance['align'] ?? ''), ['left', 'center', 'right'], true) ? $new_instance['align'] : 'center',
'title_icon_left' => sanitize_text_field((string) ($new_instance['title_icon_left'] ?? '')),
'title_icon_right' => sanitize_text_field((string) ($new_instance['title_icon_right'] ?? '')),
'title_size' => max(12, min(48, (int) ($new_instance['title_size'] ?? 22))),
'desc_size' => max(11, min(24, (int) ($new_instance['desc_size'] ?? 14))),
'title_color' => sanitize_hex_color((string) ($new_instance['title_color'] ?? '')) ?: '',
'desc_color' => sanitize_hex_color((string) ($new_instance['desc_color'] ?? '')) ?: '',
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'desc' => sanitize_text_field((string) ($new_instance['desc'] ?? '')),
'align' => in_array(($new_instance['align'] ?? ''), ['left', 'center', 'right'], true) ? $new_instance['align'] : 'center',
'title_icon_left' => sanitize_text_field((string) ($new_instance['title_icon_left'] ?? '')),
'title_icon_right' => sanitize_text_field((string) ($new_instance['title_icon_right'] ?? '')),
'title_size' => max(12, min(48, (int) ($new_instance['title_size'] ?? 22))),
'desc_size' => max(11, min(24, (int) ($new_instance['desc_size'] ?? 14))),
'title_color' => sanitize_hex_color((string) ($new_instance['title_color'] ?? '')) ?: '',
'desc_color' => sanitize_hex_color((string) ($new_instance['desc_color'] ?? '')) ?: '',
'obs_animation' => sanitize_key((string) ($new_instance['obs_animation'] ?? '')),
'animation_repeat' => !empty($new_instance['animation_repeat']) ? 1 : 0,
'title_icon_width' => max(0, min(64, (int) ($new_instance['title_icon_width'] ?? 0))),
];
}
}
src/AKSRT/Widgets/WidgetYiyan.php
+63 -22
View File
@@ -1,5 +1,7 @@
<?php
/**
* Yiyan / Hitokoto widget (zibll widget_ui_yiyan shell + aksrt_render_yiyan_block).
*
* @package AKSRT
*/
@@ -10,8 +12,6 @@ defined('ABSPATH') || exit;
class WidgetYiyan extends \WP_Widget {
/**
* Hitokoto category codes → labels (API `c` param).
*
* @return array<string,string>
*/
private static function type_labels(): array {
@@ -32,9 +32,6 @@ class WidgetYiyan extends \WP_Widget {
];
}
/**
* Sanitize stored type to a valid Hitokoto category letter or empty.
*/
private static function sanitize_type(string $type): string {
$type = strtolower(trim($type));
return preg_match('/^[a-l]$/', $type) ? $type : '';
@@ -44,35 +41,54 @@ class WidgetYiyan extends \WP_Widget {
parent::__construct(
'aksrt_yiyan',
__('一言轮播', 'aksrt'),
['description' => __('显示随机一言/每日语录，支持自动轮播。', 'aksrt')]
[
'description' => __('显示随机一言/每日语录，支持自动轮播。', 'aksrt'),
'classname' => 'widget_aksrt_yiyan yiyan-box',
]
);
}
/**
* @param array<string,mixed> $args
* @param array<string,mixed> $instance
*/
public function widget($args, $instance): void {
$title = !empty($instance['title']) ? $instance['title'] : '';
$title = !empty($instance['title']) ? (string) $instance['title'] : '';
$count = !empty($instance['count']) ? max(1, min(10, (int) $instance['count'])) : 5;
$interval = !empty($instance['interval']) ? max(3, min(30, (int) $instance['interval'])) : 5;
$type = self::sanitize_type((string) ($instance['type'] ?? ''));
$icon = !empty($instance['icon']) ? $instance['icon'] : 'fas fa-quote-left';
$icon = !empty($instance['icon']) ? (string) $instance['icon'] : 'fas fa-quote-left';
$in_affix = !empty($instance['in_affix']);
$anim = sanitize_key((string) ($instance['obs_animation'] ?? ''));
$anim_repeat = !empty($instance['animation_repeat']);
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if ($title) {
if ($title !== '') {
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
// zibll shell: theme-box + yiyan-box main-bg text-center box-body radius8 main-shadow.
$pack = function_exists('aksrt_obs_animate_attrs')
? aksrt_obs_animate_attrs($anim, $anim_repeat, 0)
: ['class' => '', 'attr' => ''];
$affix = $in_affix ? ' data-affix="true"' : '';
$box_class = 'theme-box yiyan-box-wrap' . $pack['class'];
echo '<div' . $affix . ' class="' . esc_attr(trim($box_class)) . '"' . $pack['attr'] . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<div class="yiyan-box main-bg text-center box-body radius8 main-shadow">';
if (function_exists('aksrt_render_yiyan_block')) {
aksrt_render_yiyan_block([
'class' => 'aksrt-yiyan',
'class' => 'aksrt-yiyan yiyan',
'type' => $type,
'count' => $count,
'interval' => $interval,
'icon' => $icon,
]);
} else {
// Fallback if single-render helpers are not loaded.
?>
<div class="aksrt-yiyan"
<div class="aksrt-yiyan yiyan"
data-aksrt-yiyan
data-count="<?php echo esc_attr((string) $count); ?>"
data-interval="<?php echo esc_attr((string) $interval); ?>"
@@ -87,17 +103,21 @@ class WidgetYiyan extends \WP_Widget {
<?php
}
echo '</div></div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/**
* @param array<string,mixed> $instance
*/
public function form($instance): void {
$title = !empty($instance['title']) ? $instance['title'] : '一言';
$title = !empty($instance['title']) ? (string) $instance['title'] : '一言';
$count = !empty($instance['count']) ? (int) $instance['count'] : 5;
$interval = !empty($instance['interval']) ? (int) $instance['interval'] : 5;
$type = self::sanitize_type((string) ($instance['type'] ?? ''));
$icon = !empty($instance['icon']) ? $instance['icon'] : 'fas fa-quote-left';
$icon = !empty($instance['icon']) ? (string) $instance['icon'] : 'fas fa-quote-left';
$labels = self::type_labels();
// Curated subset for the form (full map still used for sanitization).
$form_types = ['', 'a', 'd', 'i', 'k', 'h', 'j'];
?>
<p>
@@ -135,16 +155,37 @@ class WidgetYiyan extends \WP_Widget {
name="<?php echo esc_attr($this->get_field_name('icon')); ?>" type="text"
value="<?php echo esc_attr($icon); ?>">
</p>
<p>
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name('in_affix')); ?>" value="1" <?php checked(!empty($instance['in_affix'])); ?>> <?php esc_html_e('侧栏随动', 'aksrt'); ?></label>
</p>
<p>
<label><?php esc_html_e('入场动画', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('obs_animation')); ?>">
<option value="" <?php selected(($instance['obs_animation'] ?? ''), ''); ?>><?php esc_html_e('无', 'aksrt'); ?></option>
<option value="fade" <?php selected(($instance['obs_animation'] ?? ''), 'fade'); ?>><?php esc_html_e('淡入', 'aksrt'); ?></option>
<option value="slideup" <?php selected(($instance['obs_animation'] ?? ''), 'slideup'); ?>><?php esc_html_e('上滑', 'aksrt'); ?></option>
<option value="zoomin" <?php selected(($instance['obs_animation'] ?? ''), 'zoomin'); ?>><?php esc_html_e('放大', 'aksrt'); ?></option>
</select>
</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 {
$instance = [];
$instance['title'] = sanitize_text_field($new_instance['title'] ?? '');
$instance['count'] = max(1, min(10, absint($new_instance['count'] ?? 5)));
$instance['interval'] = max(3, min(30, absint($new_instance['interval'] ?? 5)));
$instance['type'] = self::sanitize_type((string) ($new_instance['type'] ?? ''));
$instance['icon'] = sanitize_text_field($new_instance['icon'] ?? 'fas fa-quote-left');
return $instance;
return [
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'count' => max(1, min(10, absint($new_instance['count'] ?? 5))),
'interval' => max(3, min(30, absint($new_instance['interval'] ?? 5))),
'type' => self::sanitize_type((string) ($new_instance['type'] ?? '')),
'icon' => sanitize_text_field((string) ($new_instance['icon'] ?? 'fas fa-quote-left')),
'in_affix' => !empty($new_instance['in_affix']) ? 1 : 0,
'obs_animation' => sanitize_key((string) ($new_instance['obs_animation'] ?? '')),
'animation_repeat' => !empty($new_instance['animation_repeat']) ? 1 : 0,
];
}
}