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

feat(widgets): oneline posts scroller + tilt showcase cases

Browse Source 
Add remaining high-traffic zibll marketing widgets: horizontal posts
rail and left-copy/right-image tilt cases, with CSS registration.
This commit is contained in:
kate522
2026-07-19 00:35:00 +08:00
parent bf28ab64b8
commit 2f81e2a0b5
5 changed files with 581 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/widget-batch3f.css
+157
View File
@@ -0,0 +1,157 @@
/**
* Batch3f: oneline posts + tilt cases.
*/
.aksrt-oneline { margin-bottom: 12px; }
.aksrt-oneline__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(180px, 220px);
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
.aksrt-oneline.style-mini .aksrt-oneline__track {
grid-auto-columns: minmax(140px, 160px);
}
.aksrt-oneline__item {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-line, #e5e7eb);
background: var(--surface-1, #fff);
text-decoration: none;
color: inherit;
scroll-snap-align: start;
min-width: 0;
}
.aksrt-oneline.style-list .aksrt-oneline__item {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 8px;
}
.aksrt-oneline__thumb {
height: 110px;
background: var(--surface-2, #f3f4f6) center/cover no-repeat;
overflow: hidden;
}
.aksrt-oneline.style-mini .aksrt-oneline__thumb { height: 90px; }
.aksrt-oneline.style-list .aksrt-oneline__thumb {
width: 64px;
height: 64px;
border-radius: 8px;
flex-shrink: 0;
}
.aksrt-oneline__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aksrt-oneline__thumb.is-empty { background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
.aksrt-oneline__body { padding: 10px 12px 12px; min-width: 0; }
.aksrt-oneline.style-list .aksrt-oneline__body { padding: 0; }
.aksrt-oneline__title {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aksrt-oneline__meta { margin-top: 4px; font-size: 11px; color: var(--muted-2-color, #999); }
.aksrt-tilt {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 28px;
align-items: center;
margin-bottom: 18px;
}
@media (max-width: 991.98px) {
.aksrt-tilt { grid-template-columns: 1fr; }
}
.aksrt-tilt__badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
background: #eff6ff;
color: #2563eb;
margin-bottom: 12px;
}
.aksrt-tilt__title {
font-size: 30px;
line-height: 1.25;
margin: 0 0 12px;
}
.aksrt-tilt__hl {
font-style: normal;
background: linear-gradient(90deg, #3b82f6, #a855f7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.aksrt-tilt__subtitle {
font-size: 14px;
color: var(--muted-2-color, #666);
line-height: 1.7;
margin: 0 0 14px;
}
.aksrt-tilt__features {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 13px;
}
.aksrt-tilt__features i { color: var(--color-primary, #3b82f6); margin-right: 4px; }
.aksrt-tilt__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.aksrt-tilt__btn {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
background: var(--color-primary, #3b82f6);
color: #fff !important;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.aksrt-tilt__showcase {
position: relative;
min-height: 260px;
}
.aksrt-tilt__img {
position: absolute;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0,0,0,.12);
background: var(--surface-2, #f3f4f6);
}
.aksrt-tilt__img.is-main {
position: relative;
width: 100%;
aspect-ratio: 4/3;
}
.aksrt-tilt__img:not(.is-main) {
width: 42%;
aspect-ratio: 4/3;
right: -4%;
bottom: -8%;
z-index: 2;
}
.aksrt-tilt__img:nth-child(3) {
left: -4%;
top: -6%;
right: auto;
bottom: auto;
width: 38%;
z-index: 1;
}
.aksrt-tilt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aksrt-tilt__img.is-empty { background: linear-gradient(135deg, #dbeafe, #ede9fe); }
assets/css/frontend/widgets.css
+1
View File
@@ -7,3 +7,4 @@
@import url("widget-batch3c.css");
@import url("widget-batch3d.css");
@import url("widget-batch3e.css");
@import url("widget-batch3f.css");
inc/modules/widgets-register.php
+2
View File
@@ -72,6 +72,8 @@ function aksrt_register_widgets() {
register_widget('\AKSRT\Widgets\WidgetTermCards');
register_widget('\AKSRT\Widgets\WidgetPaidPosts');
register_widget('\AKSRT\Widgets\WidgetAuthorCard');
register_widget('\AKSRT\Widgets\WidgetOnelinePosts');
register_widget('\AKSRT\Widgets\WidgetTiltCases');
// Forum widgets
src/AKSRT/Widgets/WidgetOnelinePosts.php
+163
View File
@@ -0,0 +1,163 @@
<?php
/**
* Horizontal one-line posts scroller (zibll widget_ui_oneline_posts lite).
*
* @package AKSRT
*/
namespace AKSRT\Widgets;
defined('ABSPATH') || exit;
class WidgetOnelinePosts extends \WP_Widget {
public function __construct() {
parent::__construct(
'aksrt_oneline_posts',
esc_html__('AKSRT 横向文章', 'aksrt'),
[
'description' => esc_html__('横向滚动的文章卡片/迷你列表。', 'aksrt'),
'classname' => 'widget_aksrt_oneline_posts',
]
);
}
public function widget($args, $instance): void {
$count = max(1, min(20, (int) ($instance['count'] ?? 8)));
$style = sanitize_key((string) ($instance['style'] ?? 'card'));
if (!in_array($style, ['card', 'mini', 'list'], true)) {
$style = 'card';
}
$orderby = sanitize_key((string) ($instance['orderby'] ?? 'date'));
$cat = (int) ($instance['cat'] ?? 0);
$limit_day = max(0, (int) ($instance['limit_day'] ?? 0));
$query = [
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => $count,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
];
if ($cat > 0) {
$query['cat'] = $cat;
}
if ($limit_day > 0) {
$query['date_query'] = [['after' => $limit_day . ' days ago']];
}
switch ($orderby) {
case 'views':
$query['meta_key'] = 'aksrt_post_views';
$query['orderby'] = 'meta_value_num';
$query['order'] = 'DESC';
break;
case 'comments':
$query['orderby'] = 'comment_count';
$query['order'] = 'DESC';
break;
case 'rand':
$query['orderby'] = 'rand';
break;
default:
$query['orderby'] = 'date';
$query['order'] = 'DESC';
}
$q = new \WP_Query($query);
if (!$q->have_posts()) {
wp_reset_postdata();
return;
}
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
}
echo '<div class="aksrt-oneline style-' . esc_attr($style) . '"><div class="aksrt-oneline__track">';
while ($q->have_posts()) {
$q->the_post();
$thumb = get_the_post_thumbnail_url(get_the_ID(), $style === 'card' ? 'medium' : 'thumbnail');
echo '<a class="aksrt-oneline__item" href="' . esc_url(get_permalink()) . '">';
if ($thumb) {
echo '<div class="aksrt-oneline__thumb"><img src="' . esc_url($thumb) . '" alt="" loading="lazy" /></div>';
} else {
echo '<div class="aksrt-oneline__thumb is-empty"></div>';
}
echo '<div class="aksrt-oneline__body">';
echo '<div class="aksrt-oneline__title">' . esc_html(get_the_title()) . '</div>';
if ($style !== 'mini') {
echo '<div class="aksrt-oneline__meta">' . esc_html(get_the_date()) . '</div>';
}
echo '</div></a>';
}
echo '</div></div>';
wp_reset_postdata();
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
public function form($instance): void {
?>
<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('数量', 'aksrt'); ?>
<input class="tiny-text" type="number" min="1" max="20" name="<?php echo esc_attr($this->get_field_name('count')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['count'] ?? 8))); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('样式', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('style')); ?>">
<option value="card" <?php selected(($instance['style'] ?? 'card'), 'card'); ?>><?php esc_html_e('卡片', 'aksrt'); ?></option>
<option value="mini" <?php selected(($instance['style'] ?? ''), 'mini'); ?>><?php esc_html_e('迷你', 'aksrt'); ?></option>
<option value="list" <?php selected(($instance['style'] ?? ''), 'list'); ?>><?php esc_html_e('列表', 'aksrt'); ?></option>
</select>
</label>
</p>
<p>
<label><?php esc_html_e('排序', 'aksrt'); ?>
<select name="<?php echo esc_attr($this->get_field_name('orderby')); ?>">
<option value="date" <?php selected(($instance['orderby'] ?? 'date'), 'date'); ?>><?php esc_html_e('时间', 'aksrt'); ?></option>
<option value="views" <?php selected(($instance['orderby'] ?? ''), 'views'); ?>><?php esc_html_e('浏览', 'aksrt'); ?></option>
<option value="comments" <?php selected(($instance['orderby'] ?? ''), 'comments'); ?>><?php esc_html_e('评论', 'aksrt'); ?></option>
<option value="rand" <?php selected(($instance['orderby'] ?? ''), 'rand'); ?>><?php esc_html_e('随机', 'aksrt'); ?></option>
</select>
</label>
</p>
<p>
<label><?php esc_html_e('分类 ID（0=全部）', 'aksrt'); ?>
<input class="tiny-text" type="number" min="0" name="<?php echo esc_attr($this->get_field_name('cat')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['cat'] ?? 0))); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('限制最近 N 天（0=不限）', 'aksrt'); ?>
<input class="tiny-text" type="number" min="0" name="<?php echo esc_attr($this->get_field_name('limit_day')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['limit_day'] ?? 0))); ?>">
</label>
</p>
<?php
}
public function update($new_instance, $old_instance): array {
$style = sanitize_key((string) ($new_instance['style'] ?? 'card'));
if (!in_array($style, ['card', 'mini', 'list'], true)) {
$style = 'card';
}
$orderby = sanitize_key((string) ($new_instance['orderby'] ?? 'date'));
if (!in_array($orderby, ['date', 'views', 'comments', 'rand'], true)) {
$orderby = 'date';
}
return [
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
'count' => max(1, min(20, (int) ($new_instance['count'] ?? 8))),
'style' => $style,
'orderby' => $orderby,
'cat' => max(0, (int) ($new_instance['cat'] ?? 0)),
'limit_day' => max(0, (int) ($new_instance['limit_day'] ?? 0)),
];
}
}
src/AKSRT/Widgets/WidgetTiltCases.php
+258
View File
@@ -0,0 +1,258 @@
<?php
/**
* Tilt cases / showcase intro (zibll zib_widget_ui_tilt_cases lite, no JS tilt).
*
* @package AKSRT
*/
namespace AKSRT\Widgets;
defined('ABSPATH') || exit;
class WidgetTiltCases extends \WP_Widget {
public function __construct() {
parent::__construct(
'aksrt_tilt_cases',
esc_html__('AKSRT 案例展示', 'aksrt'),
[
'description' => esc_html__('左文案 + 右侧叠层图片案例展示。', 'aksrt'),
'classname' => 'widget_aksrt_tilt_cases',
]
);
}
public function widget($args, $instance): void {
$title = trim((string) ($instance['intro_title'] ?? ''));
$subtitle = trim((string) ($instance['intro_subtitle'] ?? ''));
$badge = trim((string) ($instance['intro_badge_text'] ?? ''));
$images = $this->normalize_images($instance['intro_showcase_images'] ?? []);
$features = $this->normalize_features($instance['intro_features'] ?? []);
$buttons = $this->normalize_buttons($instance['intro_buttons'] ?? []);
if ($title === '' && $subtitle === '' && !$images) {
return;
}
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<div class="aksrt-tilt">';
echo '<div class="aksrt-tilt__text">';
if ($badge !== '') {
$icon = sanitize_text_field((string) ($instance['intro_badge_icon'] ?? ''));
echo '<div class="aksrt-tilt__badge">';
if ($icon !== '') {
echo '<i class="' . esc_attr($icon) . '" aria-hidden="true"></i> ';
}
echo esc_html($badge) . '</div>';
}
if ($title !== '') {
$highlight = trim((string) ($instance['intro_title_highlight'] ?? ''));
$title_html = esc_html($title);
if ($highlight !== '') {
$h = esc_html($highlight);
$title_html = str_replace($h, '<em class="aksrt-tilt__hl">' . $h . '</em>', $title_html);
}
echo '<h2 class="aksrt-tilt__title">' . $title_html . '</h2>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
if ($subtitle !== '') {
echo '<p class="aksrt-tilt__subtitle">' . esc_html($subtitle) . '</p>';
}
if ($features) {
echo '<ul class="aksrt-tilt__features">';
foreach ($features as $f) {
echo '<li>';
if ($f['icon'] !== '') {
echo '<i class="' . esc_attr($f['icon']) . '" aria-hidden="true"></i> ';
}
echo esc_html($f['text']) . '</li>';
}
echo '</ul>';
}
if ($buttons) {
echo '<div class="aksrt-tilt__actions">';
foreach ($buttons as $b) {
$url = $b['url'];
if ($url !== '' && !empty($instance['go_link']) && function_exists('aksrt_go_link')) {
$url = aksrt_go_link($url, true);
}
echo '<a class="aksrt-tilt__btn" href="' . esc_url($url !== '' ? $url : '#') . '">' . esc_html($b['text']) . '</a>';
}
echo '</div>';
}
echo '</div>';
echo '<div class="aksrt-tilt__showcase">';
if ($images) {
foreach ($images as $i => $img) {
$cls = $i === 0 ? ' is-main' : '';
echo '<div class="aksrt-tilt__img' . esc_attr($cls) . '"><img src="' . esc_url($img) . '" alt="" loading="lazy" /></div>';
}
} else {
echo '<div class="aksrt-tilt__img is-main is-empty"></div>';
}
echo '</div></div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
/** @param mixed $raw @return array<int,string> */
private function normalize_images($raw): array {
if (is_string($raw)) {
$decoded = json_decode($raw, true);
if (is_array($decoded)) {
$raw = $decoded;
} else {
$parts = preg_split('/\r\n|\r|\n|,/', $raw) ?: [];
$raw = $parts;
}
}
if (!is_array($raw)) {
return [];
}
$out = [];
foreach ($raw as $row) {
if (is_array($row)) {
$url = esc_url_raw(trim((string) ($row['image'] ?? $row['url'] ?? '')));
} else {
$url = esc_url_raw(trim((string) $row));
}
if ($url !== '') {
$out[] = $url;
}
if (count($out) >= 5) {
break;
}
}
return $out;
}
/** @param mixed $raw @return array<int, array{text:string,icon:string}> */
private function normalize_features($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_string($row)) {
$text = sanitize_text_field($row);
$icon = '';
} elseif (is_array($row)) {
$text = sanitize_text_field((string) ($row['text'] ?? ''));
$icon = sanitize_text_field((string) ($row['icon'] ?? ''));
} else {
continue;
}
if ($text === '') {
continue;
}
$out[] = ['text' => $text, 'icon' => $icon];
if (count($out) >= 8) {
break;
}
}
return $out;
}
/** @param mixed $raw @return array<int, array{text:string,url:string}> */
private function normalize_buttons($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;
}
$text = sanitize_text_field((string) ($row['text'] ?? $row['btn']['text'] ?? ''));
$url = esc_url_raw(trim((string) ($row['url'] ?? $row['btn']['url'] ?? '')));
if ($text === '') {
continue;
}
$out[] = ['text' => $text, 'url' => $url];
if (count($out) >= 4) {
break;
}
}
return $out;
}
public function form($instance): void {
$images = is_string($instance['intro_showcase_images'] ?? null)
? (string) $instance['intro_showcase_images']
: wp_json_encode($this->normalize_images($instance['intro_showcase_images'] ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
$features = is_string($instance['intro_features'] ?? null)
? (string) $instance['intro_features']
: wp_json_encode($this->normalize_features($instance['intro_features'] ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
$buttons = is_string($instance['intro_buttons'] ?? null)
? (string) $instance['intro_buttons']
: wp_json_encode($this->normalize_buttons($instance['intro_buttons'] ?? []), 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('intro_badge_text')); ?>" value="<?php echo esc_attr((string) ($instance['intro_badge_text'] ?? '')); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('角标图标 class', 'aksrt'); ?>
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('intro_badge_icon')); ?>" value="<?php echo esc_attr((string) ($instance['intro_badge_icon'] ?? '')); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('标题', 'aksrt'); ?>
<textarea class="widefat" rows="2" name="<?php echo esc_attr($this->get_field_name('intro_title')); ?>"><?php echo esc_textarea((string) ($instance['intro_title'] ?? '')); ?></textarea>
</label>
</p>
<p>
<label><?php esc_html_e('标题高亮词', 'aksrt'); ?>
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('intro_title_highlight')); ?>" value="<?php echo esc_attr((string) ($instance['intro_title_highlight'] ?? '')); ?>">
</label>
</p>
<p>
<label><?php esc_html_e('副标题', 'aksrt'); ?>
<textarea class="widefat" rows="2" name="<?php echo esc_attr($this->get_field_name('intro_subtitle')); ?>"><?php echo esc_textarea((string) ($instance['intro_subtitle'] ?? '')); ?></textarea>
</label>
</p>
<p>
<label><?php esc_html_e('特性 JSON', 'aksrt'); ?>
<textarea class="widefat" rows="3" name="<?php echo esc_attr($this->get_field_name('intro_features')); ?>"><?php echo esc_textarea((string) $features); ?></textarea>
</label>
</p>
<p>
<label><?php esc_html_e('按钮 JSON', 'aksrt'); ?>
<textarea class="widefat" rows="3" name="<?php echo esc_attr($this->get_field_name('intro_buttons')); ?>"><?php echo esc_textarea((string) $buttons); ?></textarea>
</label>
</p>
<p>
<label><?php esc_html_e('展示图 JSON/URL 列表', 'aksrt'); ?>
<textarea class="widefat" rows="4" name="<?php echo esc_attr($this->get_field_name('intro_showcase_images')); ?>"><?php echo esc_textarea((string) $images); ?></textarea>
</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>
</p>
<?php
}
public function update($new_instance, $old_instance): array {
return [
'intro_badge_text' => sanitize_text_field((string) ($new_instance['intro_badge_text'] ?? '')),
'intro_badge_icon' => sanitize_text_field((string) ($new_instance['intro_badge_icon'] ?? '')),
'intro_title' => sanitize_textarea_field((string) ($new_instance['intro_title'] ?? '')),
'intro_title_highlight' => sanitize_text_field((string) ($new_instance['intro_title_highlight'] ?? '')),
'intro_subtitle' => sanitize_textarea_field((string) ($new_instance['intro_subtitle'] ?? '')),
'intro_features' => $this->normalize_features($new_instance['intro_features'] ?? []),
'intro_buttons' => $this->normalize_buttons($new_instance['intro_buttons'] ?? []),
'intro_showcase_images' => $this->normalize_images($new_instance['intro_showcase_images'] ?? []),
'go_link' => !empty($new_instance['go_link']) ? 1 : 0,
];
}
}