feat(widgets): multi-tab posts lazy REST load
SSR first tab; other tabs fetch /widgets/tab-posts on switch via widget-set.js (zibll tab_post depth).
This commit is contained in:
kate522 committed
1 parent
46c5fec180
commit
c52651f647
2 files changed
+298
-292
No files matched your search
@@ -17,6 +17,39 @@
|
|||||||
var tabs = widget.querySelectorAll('.widget-tab-posts__tab');
|
var tabs = widget.querySelectorAll('.widget-tab-posts__tab');
|
||||||
var panels = widget.querySelectorAll('.widget-tab-posts__panel');
|
var panels = widget.querySelectorAll('.widget-tab-posts__panel');
|
||||||
if (!tabs.length || !panels.length) return;
|
if (!tabs.length || !panels.length) return;
|
||||||
|
var rest = widget.getAttribute('data-rest') || '';
|
||||||
|
var defaultCount = widget.getAttribute('data-count') || '5';
|
||||||
|
|
||||||
|
function loadPanel(panel, tab) {
|
||||||
|
if (!panel || panel.getAttribute('data-loaded') === '1' || !rest) return;
|
||||||
|
var orderby = tab.getAttribute('data-orderby') || 'date';
|
||||||
|
var cat = tab.getAttribute('data-cat') || '0';
|
||||||
|
var tabCount = tab.getAttribute('data-tab-count') || '0';
|
||||||
|
var qs = new URLSearchParams({
|
||||||
|
count: defaultCount,
|
||||||
|
orderby: orderby,
|
||||||
|
cat: cat,
|
||||||
|
tab_count: tabCount,
|
||||||
|
});
|
||||||
|
var url = rest + (rest.indexOf('?') > -1 ? '&' : '?') + qs.toString();
|
||||||
|
panel.classList.add('is-ajax-loading');
|
||||||
|
var headers = { Accept: 'application/json' };
|
||||||
|
if (window.aksrtData && aksrtData.restNonce) {
|
||||||
|
headers['X-WP-Nonce'] = aksrtData.restNonce;
|
||||||
|
}
|
||||||
|
fetch(url, { credentials: 'same-origin', headers: headers })
|
||||||
|
.then(function (r) { return r.json(); })
|
||||||
|
.then(function (j) {
|
||||||
|
var d = (j && j.data) || j || {};
|
||||||
|
var html = d.html || '';
|
||||||
|
panel.innerHTML = html || '<p class="widget-empty">暂无文章</p>';
|
||||||
|
panel.setAttribute('data-loaded', '1');
|
||||||
|
panel.classList.remove('is-ajax-loading');
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
panel.classList.remove('is-ajax-loading');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
tabs.forEach(function (tab) {
|
tabs.forEach(function (tab) {
|
||||||
tab.addEventListener('click', function () {
|
tab.addEventListener('click', function () {
|
||||||
@@ -33,6 +66,7 @@
|
|||||||
panel.classList.toggle('active', active);
|
panel.classList.toggle('active', active);
|
||||||
if (active) {
|
if (active) {
|
||||||
panel.removeAttribute('hidden');
|
panel.removeAttribute('hidden');
|
||||||
|
loadPanel(panel, tab);
|
||||||
} else {
|
} else {
|
||||||
panel.setAttribute('hidden', '');
|
panel.setAttribute('hidden', '');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
|
* Multi-tab posts (zibll zib_widget_ui_tab_post + lazy REST).
|
||||||
|
*
|
||||||
* @package AKSRT
|
* @package AKSRT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -9,307 +11,277 @@ defined('ABSPATH') || exit;
|
|||||||
|
|
||||||
class TabPostsWidget extends \WP_Widget {
|
class TabPostsWidget extends \WP_Widget {
|
||||||
|
|
||||||
public function __construct() {
|
public function __construct() {
|
||||||
parent::__construct(
|
parent::__construct(
|
||||||
'aksrt_tab_posts',
|
'aksrt_tab_posts',
|
||||||
esc_html__('AKSRT 多栏目文章', 'aksrt'),
|
esc_html__('AKSRT 多栏目文章', 'aksrt'),
|
||||||
[
|
[
|
||||||
'description' => esc_html__('Tab 切换显示不同分类的文章列表', 'aksrt'),
|
'description' => esc_html__('Tab 切换显示不同分类/排序的文章（懒加载）。', 'aksrt'),
|
||||||
'customize_selective_refresh' => true,
|
'customize_selective_refresh' => true,
|
||||||
]
|
]
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Normalize tabs from legacy comma-separated string or structured array.
|
* @param mixed $tabs
|
||||||
*
|
* @return list<array{title:string,category_id:int,orderby:string,count:int,enabled:bool}>
|
||||||
* @param mixed $tabs Raw tabs data.
|
*/
|
||||||
* @return array Normalized structured tabs.
|
public static function normalize_tabs_static($tabs): array {
|
||||||
*/
|
if (is_string($tabs) && $tabs !== '') {
|
||||||
private function normalize_tabs($tabs): array {
|
$legacy_keys = array_map('trim', explode(',', $tabs));
|
||||||
// Legacy comma-separated format
|
$legacy_defs = [
|
||||||
if (is_string($tabs) && $tabs !== '') {
|
'latest' => ['title' => '最新', 'orderby' => 'date'],
|
||||||
$legacy_keys = array_map('trim', explode(',', $tabs));
|
'comments' => ['title' => '热评', 'orderby' => 'comments'],
|
||||||
$legacy_defs = [
|
'random' => ['title' => '随机', 'orderby' => 'rand'],
|
||||||
'latest' => ['title' => '最新', 'orderby' => 'date'],
|
'views' => ['title' => '热门', 'orderby' => 'views'],
|
||||||
'comments' => ['title' => '热评', 'orderby' => 'comments'],
|
];
|
||||||
'random' => ['title' => '随机', 'orderby' => 'rand'],
|
$result = [];
|
||||||
'views' => ['title' => '热门', 'orderby' => 'views'],
|
foreach ($legacy_keys as $key) {
|
||||||
];
|
if (isset($legacy_defs[$key])) {
|
||||||
$result = [];
|
$result[] = [
|
||||||
foreach ($legacy_keys as $key) {
|
'title' => __($legacy_defs[$key]['title'], 'aksrt'),
|
||||||
if (isset($legacy_defs[$key])) {
|
'category_id' => 0,
|
||||||
$result[] = [
|
'orderby' => $legacy_defs[$key]['orderby'],
|
||||||
'title' => __($legacy_defs[$key]['title'], 'aksrt'),
|
'count' => 0,
|
||||||
'category_id' => 0,
|
'enabled' => true,
|
||||||
'orderby' => $legacy_defs[$key]['orderby'],
|
];
|
||||||
'count' => 0,
|
} elseif (is_numeric($key) && absint($key) > 0) {
|
||||||
'enabled' => true,
|
$term = get_term(absint($key), 'category');
|
||||||
];
|
$result[] = [
|
||||||
} elseif (is_numeric($key) && absint($key) > 0) {
|
'title' => ($term && !is_wp_error($term)) ? $term->name : '',
|
||||||
$term = get_term(absint($key), 'category');
|
'category_id' => absint($key),
|
||||||
$result[] = [
|
'orderby' => 'date',
|
||||||
'title' => ($term && !is_wp_error($term)) ? $term->name : '',
|
'count' => 0,
|
||||||
'category_id' => absint($key),
|
'enabled' => true,
|
||||||
'orderby' => 'date',
|
];
|
||||||
'count' => 0,
|
}
|
||||||
'enabled' => true,
|
}
|
||||||
];
|
return $result;
|
||||||
}
|
}
|
||||||
}
|
if (is_array($tabs)) {
|
||||||
return $result;
|
$allowed = ['date', 'modified', 'views', 'likes', 'comments', 'favorites', 'downloads', 'rand'];
|
||||||
}
|
$result = [];
|
||||||
|
foreach ($tabs as $tab) {
|
||||||
|
if (!is_array($tab)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$orderby = sanitize_key($tab['orderby'] ?? 'date');
|
||||||
|
if (!in_array($orderby, $allowed, true)) {
|
||||||
|
$orderby = 'date';
|
||||||
|
}
|
||||||
|
$result[] = [
|
||||||
|
'title' => sanitize_text_field((string) ($tab['title'] ?? '')),
|
||||||
|
'category_id' => absint($tab['category_id'] ?? 0),
|
||||||
|
'orderby' => $orderby,
|
||||||
|
'count' => max(0, min(20, (int) ($tab['count'] ?? 0))),
|
||||||
|
'enabled' => !empty($tab['enabled']),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
// Structured array format
|
private function normalize_tabs($tabs): array {
|
||||||
if (is_array($tabs)) {
|
return self::normalize_tabs_static($tabs);
|
||||||
$allowed_orderby = ['date', 'modified', 'views', 'likes', 'comments', 'favorites', 'downloads', 'rand'];
|
}
|
||||||
$result = [];
|
|
||||||
foreach ($tabs as $tab) {
|
|
||||||
if (!is_array($tab)) continue;
|
|
||||||
$orderby = sanitize_key($tab['orderby'] ?? 'date');
|
|
||||||
if (!in_array($orderby, $allowed_orderby, true)) $orderby = 'date';
|
|
||||||
$result[] = [
|
|
||||||
'title' => sanitize_text_field($tab['title'] ?? ''),
|
|
||||||
'category_id' => absint($tab['category_id'] ?? 0),
|
|
||||||
'orderby' => $orderby,
|
|
||||||
'count' => max(0, min(20, (int) ($tab['count'] ?? 0))),
|
|
||||||
'enabled' => !empty($tab['enabled']),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
return $result;
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
/**
|
||||||
}
|
* Build query for a tab → reuse main posts payload renderer.
|
||||||
|
*
|
||||||
|
* @param array $tab
|
||||||
|
* @param int $default_count
|
||||||
|
* @return array
|
||||||
|
*/
|
||||||
|
public static function tab_to_main_instance(array $tab, int $default_count): array {
|
||||||
|
$count = !empty($tab['count']) ? (int) $tab['count'] : $default_count;
|
||||||
|
return [
|
||||||
|
'count' => max(1, min(30, $count)),
|
||||||
|
'orderby' => sanitize_key((string) ($tab['orderby'] ?? 'date')),
|
||||||
|
'cat' => absint($tab['category_id'] ?? 0),
|
||||||
|
'style' => 'mini',
|
||||||
|
'show_thumb' => 1,
|
||||||
|
'show_meta' => 1,
|
||||||
|
'show_number'=> 0,
|
||||||
|
'paginate' => 'none',
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Build \WP_Query args for a tab's orderby.
|
* REST helper: render one tab list HTML.
|
||||||
*/
|
*/
|
||||||
private function build_tab_query_args(array $tab, int $default_count): array {
|
public static function render_tab_html(array $tab, int $default_count): string {
|
||||||
$count = $tab['count'] > 0 ? $tab['count'] : $default_count;
|
$inst = self::tab_to_main_instance($tab, $default_count);
|
||||||
$args = [
|
if (class_exists('\AKSRT\Widgets\WidgetMainPosts')) {
|
||||||
'post_type' => 'post',
|
$payload = WidgetMainPosts::query_payload($inst, 1);
|
||||||
'post_status' => 'publish',
|
return (string) ($payload['html'] ?? '');
|
||||||
'posts_per_page' => $count,
|
}
|
||||||
'ignore_sticky_posts' => true,
|
return '';
|
||||||
'no_found_rows' => true,
|
}
|
||||||
];
|
|
||||||
|
|
||||||
if ($tab['category_id'] > 0) {
|
public function widget($args, $instance): void {
|
||||||
$args['cat'] = $tab['category_id'];
|
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
}
|
|
||||||
|
|
||||||
switch ($tab['orderby']) {
|
$title = apply_filters('widget_title', (string) ($instance['title'] ?? ''), $instance, $this->id_base);
|
||||||
case 'views':
|
$count = absint($instance['count'] ?? 5);
|
||||||
$args['meta_key'] = 'aksrt_post_views';
|
$tabs = $this->normalize_tabs($instance['tabs'] ?? 'latest,comments,random');
|
||||||
$args['orderby'] = 'meta_value_num';
|
$tabs = array_values(array_filter($tabs, static fn($t) => !empty($t['enabled'])));
|
||||||
$args['order'] = 'DESC';
|
if (!$tabs) {
|
||||||
break;
|
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
case 'likes':
|
return;
|
||||||
$args['meta_key'] = '_aksrt_like_count';
|
}
|
||||||
$args['orderby'] = 'meta_value_num';
|
|
||||||
$args['order'] = 'DESC';
|
|
||||||
break;
|
|
||||||
case 'favorites':
|
|
||||||
$args['meta_key'] = '_aksrt_favorite_count';
|
|
||||||
$args['orderby'] = 'meta_value_num';
|
|
||||||
$args['order'] = 'DESC';
|
|
||||||
break;
|
|
||||||
case 'downloads':
|
|
||||||
$args['meta_key'] = '_aksrt_res_download_count';
|
|
||||||
$args['orderby'] = 'meta_value_num';
|
|
||||||
$args['order'] = 'DESC';
|
|
||||||
break;
|
|
||||||
case 'comments':
|
|
||||||
$args['orderby'] = 'comment_count';
|
|
||||||
$args['order'] = 'DESC';
|
|
||||||
break;
|
|
||||||
case 'rand':
|
|
||||||
$args['orderby'] = 'rand';
|
|
||||||
break;
|
|
||||||
case 'modified':
|
|
||||||
$args['orderby'] = 'modified';
|
|
||||||
$args['order'] = 'DESC';
|
|
||||||
break;
|
|
||||||
case 'date':
|
|
||||||
default:
|
|
||||||
$args['orderby'] = 'date';
|
|
||||||
$args['order'] = 'DESC';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return $args;
|
if ($title !== '') {
|
||||||
}
|
echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
|
}
|
||||||
|
|
||||||
public function widget($args, $instance): void {
|
$widget_id = $this->id;
|
||||||
echo $args['before_widget'];
|
$rest = rest_url('aksrt/v1/widgets/tab-posts');
|
||||||
|
$use_shared = function_exists('aksrt_render_mini_list');
|
||||||
|
?>
|
||||||
|
<div class="widget-tab-posts" id="<?php echo esc_attr($widget_id); ?>-tabs"
|
||||||
|
data-aksrt-tab-posts
|
||||||
|
data-rest="<?php echo esc_url($rest); ?>"
|
||||||
|
data-count="<?php echo esc_attr((string) $count); ?>">
|
||||||
|
<ul class="widget-tab-posts__nav" role="tablist">
|
||||||
|
<?php $first = true; foreach ($tabs as $i => $tab) :
|
||||||
|
$tab_key = 'tab-' . $i;
|
||||||
|
$tab_title = $tab['title'] !== '' ? $tab['title'] : sprintf(__('Tab %d', 'aksrt'), $i + 1);
|
||||||
|
?>
|
||||||
|
<li role="presentation">
|
||||||
|
<button type="button" role="tab"
|
||||||
|
class="widget-tab-posts__tab<?php echo $first ? ' active' : ''; ?>"
|
||||||
|
data-tab="<?php echo esc_attr($tab_key); ?>"
|
||||||
|
data-index="<?php echo (int) $i; ?>"
|
||||||
|
data-orderby="<?php echo esc_attr($tab['orderby']); ?>"
|
||||||
|
data-cat="<?php echo (int) $tab['category_id']; ?>"
|
||||||
|
data-tab-count="<?php echo (int) $tab['count']; ?>"
|
||||||
|
aria-selected="<?php echo $first ? 'true' : 'false'; ?>"
|
||||||
|
><?php echo esc_html($tab_title); ?></button>
|
||||||
|
</li>
|
||||||
|
<?php $first = false; endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
|
||||||
$title = apply_filters('widget_title', $instance['title'] ?? '', $instance, $this->id_base);
|
<?php $first = true; foreach ($tabs as $i => $tab) :
|
||||||
$count = absint($instance['count'] ?? 5);
|
$tab_key = 'tab-' . $i;
|
||||||
$tabs = $this->normalize_tabs($instance['tabs'] ?? 'latest,comments,random');
|
?>
|
||||||
|
<div class="widget-tab-posts__panel<?php echo $first ? ' active' : ''; ?>"
|
||||||
|
data-tab-panel="<?php echo esc_attr($tab_key); ?>"
|
||||||
|
data-loaded="<?php echo $first ? '1' : '0'; ?>"
|
||||||
|
role="tabpanel"<?php echo $first ? '' : ' hidden'; ?>>
|
||||||
|
<?php if ($first) :
|
||||||
|
$html = self::render_tab_html($tab, $count);
|
||||||
|
if ($html !== '') {
|
||||||
|
echo '<div class="widget-tab-posts__list widget-tab-posts__list--mini aksrt-main-posts style-mini">' . $html . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
|
} else {
|
||||||
|
// Fallback to old mini list path.
|
||||||
|
$q = new \WP_Query(WidgetMainPosts::build_query_args(self::tab_to_main_instance($tab, $count), 1));
|
||||||
|
if ($q->have_posts() && $use_shared) {
|
||||||
|
echo '<div class="widget-tab-posts__list widget-tab-posts__list--mini">';
|
||||||
|
aksrt_render_mini_list($q, ['context' => 'sidebar', 'show_thumb' => true, 'show_meta' => true], true);
|
||||||
|
echo '</div>';
|
||||||
|
} else {
|
||||||
|
echo function_exists('aksrt_get_widget_null') ? aksrt_get_widget_null(__('暂无文章', 'aksrt')) : '<p class="widget-empty">' . esc_html__('暂无文章', 'aksrt') . '</p>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
|
}
|
||||||
|
wp_reset_postdata();
|
||||||
|
}
|
||||||
|
else : ?>
|
||||||
|
<div class="post_ajax_loader" data-aksrt-ajax-loader></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php $first = false; endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||||
|
}
|
||||||
|
|
||||||
// Filter enabled tabs
|
public function form($instance): void {
|
||||||
$tabs = array_filter($tabs, fn($t) => !empty($t['enabled']));
|
$title = $instance['title'] ?? '';
|
||||||
if (empty($tabs)) {
|
$count = (int) ($instance['count'] ?? 5);
|
||||||
echo $args['after_widget'];
|
$tabs = $this->normalize_tabs($instance['tabs'] ?? 'latest,comments,random');
|
||||||
return;
|
$orderby_options = [
|
||||||
}
|
'date' => __('最新', 'aksrt'),
|
||||||
|
'modified' => __('更新', 'aksrt'),
|
||||||
|
'views' => __('浏览', 'aksrt'),
|
||||||
|
'likes' => __('点赞', 'aksrt'),
|
||||||
|
'comments' => __('评论', 'aksrt'),
|
||||||
|
'favorites' => __('收藏', 'aksrt'),
|
||||||
|
'downloads' => __('下载', 'aksrt'),
|
||||||
|
'rand' => __('随机', 'aksrt'),
|
||||||
|
];
|
||||||
|
?>
|
||||||
|
<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((string) $title); ?>">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="<?php echo esc_attr($this->get_field_id('count')); ?>"><?php esc_html_e('默认每个 Tab 显示数量:', 'aksrt'); ?></label>
|
||||||
|
<input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('count')); ?>" name="<?php echo esc_attr($this->get_field_name('count')); ?>" type="number" min="1" max="20" value="<?php echo (int) $count; ?>">
|
||||||
|
</p>
|
||||||
|
<hr style="margin:12px 0;">
|
||||||
|
<p style="font-weight:600;margin-bottom:8px;"><?php esc_html_e('Tab 配置', 'aksrt'); ?></p>
|
||||||
|
<?php
|
||||||
|
$max_tabs = 8;
|
||||||
|
$tabs = array_slice($tabs, 0, $max_tabs);
|
||||||
|
while (count($tabs) < 3) {
|
||||||
|
$tabs[] = ['title' => '', 'category_id' => 0, 'orderby' => 'date', 'count' => 0, 'enabled' => false];
|
||||||
|
}
|
||||||
|
foreach ($tabs as $i => $tab) :
|
||||||
|
?>
|
||||||
|
<div style="border:1px solid #ddd;padding:8px;margin-bottom:8px;border-radius:4px;background:#fafafa;">
|
||||||
|
<p style="margin:0 0 6px;">
|
||||||
|
<label><input type="checkbox" name="<?php echo esc_attr($this->get_field_name("tabs[{$i}][enabled]")); ?>" value="1" <?php checked(!empty($tab['enabled'])); ?>> <?php printf(esc_html__('Tab %d 启用', 'aksrt'), $i + 1); ?></label>
|
||||||
|
</p>
|
||||||
|
<p style="margin:0 0 6px;">
|
||||||
|
<label><?php esc_html_e('标题:', 'aksrt'); ?></label>
|
||||||
|
<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name("tabs[{$i}][title]")); ?>" value="<?php echo esc_attr($tab['title']); ?>" placeholder="<?php esc_attr_e('留空则使用分类名', 'aksrt'); ?>">
|
||||||
|
</p>
|
||||||
|
<p style="margin:0 0 6px;">
|
||||||
|
<label><?php esc_html_e('分类 ID:', 'aksrt'); ?></label>
|
||||||
|
<input class="tiny-text" type="number" min="0" name="<?php echo esc_attr($this->get_field_name("tabs[{$i}][category_id]")); ?>" value="<?php echo (int) $tab['category_id']; ?>" placeholder="0">
|
||||||
|
</p>
|
||||||
|
<p style="margin:0 0 6px;">
|
||||||
|
<label><?php esc_html_e('排序:', 'aksrt'); ?></label>
|
||||||
|
<select class="widefat" name="<?php echo esc_attr($this->get_field_name("tabs[{$i}][orderby]")); ?>">
|
||||||
|
<?php foreach ($orderby_options as $val => $label) : ?>
|
||||||
|
<option value="<?php echo esc_attr($val); ?>" <?php selected($tab['orderby'], $val); ?>><?php echo esc_html($label); ?></option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
<p style="margin:0;">
|
||||||
|
<label><?php esc_html_e('数量（0=使用默认）:', 'aksrt'); ?></label>
|
||||||
|
<input class="tiny-text" type="number" min="0" max="20" name="<?php echo esc_attr($this->get_field_name("tabs[{$i}][count]")); ?>" value="<?php echo (int) $tab['count']; ?>">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<?php endforeach;
|
||||||
|
}
|
||||||
|
|
||||||
if ($title) {
|
public function update($new_instance, $old_instance): array {
|
||||||
echo $args['before_title'] . esc_html($title) . $args['after_title'];
|
$result = [
|
||||||
}
|
'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')),
|
||||||
|
'count' => max(1, min(20, (int) ($new_instance['count'] ?? 5))),
|
||||||
$widget_id = $this->id;
|
];
|
||||||
$use_shared = function_exists('aksrt_render_mini_list');
|
$tabs = [];
|
||||||
?>
|
if (isset($new_instance['tabs']) && is_array($new_instance['tabs'])) {
|
||||||
<div class="widget-tab-posts" id="<?php echo esc_attr($widget_id); ?>-tabs">
|
$allowed = ['date', 'modified', 'views', 'likes', 'comments', 'favorites', 'downloads', 'rand'];
|
||||||
<!-- Tab 导航 -->
|
foreach ($new_instance['tabs'] as $tab) {
|
||||||
<ul class="widget-tab-posts__nav" role="tablist">
|
if (!is_array($tab)) {
|
||||||
<?php $first = true; foreach ($tabs as $i => $tab) :
|
continue;
|
||||||
$tab_key = 'tab-' . $i;
|
}
|
||||||
$tab_title = $tab['title'] !== '' ? $tab['title'] : __('Tab ' . ($i + 1), 'aksrt');
|
$orderby = sanitize_key($tab['orderby'] ?? 'date');
|
||||||
?>
|
if (!in_array($orderby, $allowed, true)) {
|
||||||
<li role="presentation">
|
$orderby = 'date';
|
||||||
<button type="button" role="tab"
|
}
|
||||||
class="widget-tab-posts__tab<?php echo $first ? ' active' : ''; ?>"
|
$tabs[] = [
|
||||||
data-tab="<?php echo esc_attr($tab_key); ?>"
|
'title' => sanitize_text_field((string) ($tab['title'] ?? '')),
|
||||||
aria-selected="<?php echo $first ? 'true' : 'false'; ?>"
|
'category_id' => absint($tab['category_id'] ?? 0),
|
||||||
><?php echo esc_html($tab_title); ?></button>
|
'orderby' => $orderby,
|
||||||
</li>
|
'count' => max(0, min(20, (int) ($tab['count'] ?? 0))),
|
||||||
<?php $first = false; endforeach; ?>
|
'enabled' => !empty($tab['enabled']),
|
||||||
</ul>
|
];
|
||||||
|
}
|
||||||
<!-- Tab 内容 -->
|
}
|
||||||
<?php $first = true; foreach ($tabs as $i => $tab) :
|
$result['tabs'] = !empty($tabs) ? $tabs : 'latest,comments,random';
|
||||||
$tab_key = 'tab-' . $i;
|
return $result;
|
||||||
$q = new \WP_Query($this->build_tab_query_args($tab, $count));
|
}
|
||||||
?>
|
|
||||||
<div class="widget-tab-posts__panel<?php echo $first ? ' active' : ''; ?>" data-tab-panel="<?php echo esc_attr($tab_key); ?>" role="tabpanel"<?php echo $first ? '' : ' hidden'; ?>>
|
|
||||||
<?php if ($q->have_posts()) : ?>
|
|
||||||
<?php if ($use_shared) : ?>
|
|
||||||
<div class="widget-tab-posts__list widget-tab-posts__list--mini">
|
|
||||||
<?php aksrt_render_mini_list($q, ['context' => 'sidebar', 'show_thumb' => true, 'show_meta' => true], true); ?>
|
|
||||||
</div>
|
|
||||||
<?php else : ?>
|
|
||||||
<ul class="widget-tab-posts__list">
|
|
||||||
<?php while ($q->have_posts()) : $q->the_post(); ?>
|
|
||||||
<li class="widget-tab-posts__item">
|
|
||||||
<?php if (has_post_thumbnail()) : ?>
|
|
||||||
<a href="<?php the_permalink(); ?>" class="widget-tab-posts__thumb">
|
|
||||||
<?php the_post_thumbnail('thumbnail', ['loading' => function_exists('aksrt_is_lazyload_enabled') && aksrt_is_lazyload_enabled('widget') ? 'lazy' : false, 'class' => 'fit-cover']); ?>
|
|
||||||
</a>
|
|
||||||
<?php endif; ?>
|
|
||||||
<div class="widget-tab-posts__info">
|
|
||||||
<a href="<?php the_permalink(); ?>" class="widget-tab-posts__title"><?php the_title(); ?></a>
|
|
||||||
<span class="widget-tab-posts__meta"><?php echo esc_html(human_time_diff(get_the_time('U'), current_time('timestamp')) . __('前', 'aksrt')); ?></span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<?php endwhile; ?>
|
|
||||||
</ul>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php else : ?>
|
|
||||||
<?php echo function_exists('aksrt_get_widget_null') ? aksrt_get_widget_null(__('暂无文章', 'aksrt')) : '<p class="widget-empty">' . esc_html__('暂无文章', 'aksrt') . '</p>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
<?php wp_reset_postdata(); $first = false; endforeach; ?>
|
|
||||||
</div>
|
|
||||||
<?php
|
|
||||||
|
|
||||||
echo $args['after_widget'];
|
|
||||||
}
|
|
||||||
|
|
||||||
public function form($instance): void {
|
|
||||||
$title = $instance['title'] ?? '';
|
|
||||||
$count = (int) ($instance['count'] ?? 5);
|
|
||||||
$tabs = $this->normalize_tabs($instance['tabs'] ?? 'latest,comments,random');
|
|
||||||
$orderby_options = [
|
|
||||||
'date' => __('最新', 'aksrt'),
|
|
||||||
'modified' => __('更新', 'aksrt'),
|
|
||||||
'views' => __('浏览', 'aksrt'),
|
|
||||||
'likes' => __('点赞', 'aksrt'),
|
|
||||||
'comments' => __('评论', 'aksrt'),
|
|
||||||
'favorites' => __('收藏', 'aksrt'),
|
|
||||||
'downloads' => __('下载', 'aksrt'),
|
|
||||||
'rand' => __('随机', 'aksrt'),
|
|
||||||
];
|
|
||||||
?>
|
|
||||||
<p>
|
|
||||||
<label for="<?php echo $this->get_field_id('title'); ?>"><?php esc_html_e('标题（可选）:', 'aksrt'); ?></label>
|
|
||||||
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<label for="<?php echo $this->get_field_id('count'); ?>"><?php esc_html_e('默认每个 Tab 显示数量:', 'aksrt'); ?></label>
|
|
||||||
<input class="tiny-text" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="number" min="1" max="20" value="<?php echo $count; ?>">
|
|
||||||
</p>
|
|
||||||
<hr style="margin:12px 0;">
|
|
||||||
<p style="font-weight:600;margin-bottom:8px;"><?php esc_html_e('Tab 配置', 'aksrt'); ?></p>
|
|
||||||
<?php
|
|
||||||
// Render each tab as a mini-form
|
|
||||||
$max_tabs = 8;
|
|
||||||
$tabs = array_slice($tabs, 0, $max_tabs);
|
|
||||||
// Ensure at least 3 slots
|
|
||||||
while (count($tabs) < 3) {
|
|
||||||
$tabs[] = ['title' => '', 'category_id' => 0, 'orderby' => 'date', 'count' => 0, 'enabled' => false];
|
|
||||||
}
|
|
||||||
foreach ($tabs as $i => $tab) :
|
|
||||||
?>
|
|
||||||
<div style="border:1px solid #ddd;padding:8px;margin-bottom:8px;border-radius:4px;background:#fafafa;">
|
|
||||||
<p style="margin:0 0 6px;">
|
|
||||||
<label><input type="checkbox" name="<?php echo $this->get_field_name("tabs[{$i}][enabled]"); ?>" value="1" <?php checked(!empty($tab['enabled'])); ?>> <?php printf(esc_html__('Tab %d 启用', 'aksrt'), $i + 1); ?></label>
|
|
||||||
</p>
|
|
||||||
<p style="margin:0 0 6px;">
|
|
||||||
<label><?php esc_html_e('标题:', 'aksrt'); ?></label>
|
|
||||||
<input class="widefat" type="text" name="<?php echo $this->get_field_name("tabs[{$i}][title]"); ?>" value="<?php echo esc_attr($tab['title']); ?>" placeholder="<?php esc_attr_e('留空则使用分类名', 'aksrt'); ?>">
|
|
||||||
</p>
|
|
||||||
<p style="margin:0 0 6px;">
|
|
||||||
<label><?php esc_html_e('分类 ID:', 'aksrt'); ?></label>
|
|
||||||
<input class="tiny-text" type="number" min="0" name="<?php echo $this->get_field_name("tabs[{$i}][category_id]"); ?>" value="<?php echo (int) $tab['category_id']; ?>" placeholder="0">
|
|
||||||
</p>
|
|
||||||
<p style="margin:0 0 6px;">
|
|
||||||
<label><?php esc_html_e('排序:', 'aksrt'); ?></label>
|
|
||||||
<select class="widefat" name="<?php echo $this->get_field_name("tabs[{$i}][orderby]"); ?>">
|
|
||||||
<?php foreach ($orderby_options as $val => $label) : ?>
|
|
||||||
<option value="<?php echo esc_attr($val); ?>" <?php selected($tab['orderby'], $val); ?>><?php echo esc_html($label); ?></option>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</select>
|
|
||||||
</p>
|
|
||||||
<p style="margin:0;">
|
|
||||||
<label><?php esc_html_e('数量（0=使用默认）:', 'aksrt'); ?></label>
|
|
||||||
<input class="tiny-text" type="number" min="0" max="20" name="<?php echo $this->get_field_name("tabs[{$i}][count]"); ?>" value="<?php echo (int) $tab['count']; ?>">
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<?php endforeach;
|
|
||||||
// Render hidden fields for any remaining tabs to preserve data
|
|
||||||
for ($i = count($tabs); $i < $max_tabs; $i++) :
|
|
||||||
?>
|
|
||||||
<input type="hidden" name="<?php echo $this->get_field_name("tabs[{$i}][enabled]"); ?>" value="">
|
|
||||||
<?php endfor;
|
|
||||||
}
|
|
||||||
|
|
||||||
public function update($new_instance, $old_instance): array {
|
|
||||||
$result = [
|
|
||||||
'title' => sanitize_text_field($new_instance['title'] ?? ''),
|
|
||||||
'count' => max(1, min(20, (int) ($new_instance['count'] ?? 5))),
|
|
||||||
];
|
|
||||||
|
|
||||||
$tabs = [];
|
|
||||||
if (isset($new_instance['tabs']) && is_array($new_instance['tabs'])) {
|
|
||||||
$allowed_orderby = ['date', 'modified', 'views', 'likes', 'comments', 'favorites', 'downloads', 'rand'];
|
|
||||||
foreach ($new_instance['tabs'] as $tab) {
|
|
||||||
if (!is_array($tab)) continue;
|
|
||||||
$orderby = sanitize_key($tab['orderby'] ?? 'date');
|
|
||||||
if (!in_array($orderby, $allowed_orderby, true)) $orderby = 'date';
|
|
||||||
$tabs[] = [
|
|
||||||
'title' => sanitize_text_field($tab['title'] ?? ''),
|
|
||||||
'category_id' => absint($tab['category_id'] ?? 0),
|
|
||||||
'orderby' => $orderby,
|
|
||||||
'count' => max(0, min(20, (int) ($tab['count'] ?? 0))),
|
|
||||||
'enabled' => !empty($tab['enabled']),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$result['tabs'] = !empty($tabs) ? $tabs : sanitize_text_field($new_instance['tabs'] ?? 'latest,comments,random');
|
|
||||||
return $result;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user