laoyang/wordpress-kratos-yang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

侧栏挂件一致性：标题可配、标签列数、重复 id、URL 转义 (3.2.50) #20

Browse Source 
一并修掉上一轮列出的 5 处侧栏挂件遗留问题：

1. 标题不读 $args（4 个挂件标题在后台改不了）
   新增 yang_widget_title($args, $instance, $fallback, $id_base)，5 个挂件
   统一走它：读 $instance['title'] → 空则回落 $fallback → 过 widget_title
   过滤器 → 输出用 $args['before_title']/after_title → 仍为空则整个节点不输出。
   四个挂件的 update() 补 title，form() 补输入框 + 「留空则不显示标题」说明。
   widget_tags 留空回落「标签聚合」，老站点显示不变。

2. 标签列数随屏宽反转（1440 一列、1180 反而两列）
   逐视口实测：真实断点在 1311→1310，@media(max-width:1310px) 只把格子压成
   110px 而不改侧栏宽度（侧栏 992px 以上恒为容器 1/3），于是格子变小反而能
   塞下 3 个。改为 .w-tags .item a / .widget_links ul li 用
   width: calc(50% - 2px) + 父容器 font-size:0（消掉 inline-block 之间的
   空白宽度），并在 1310 断点里删掉这两条 110px 规则（分类/归档的 110px
   不是网格，保留）。判据守的是「列数单调不增」而不是「某视口恰好两列」。

3. 重复 id nav-tab（桌面一份、手机一份）
   两份导航合并为一份，id 全部带实例后缀：yang_widget_uid($this) 取
   $widget->id（如 widget_posts-2），输出 {uid}-tab / {uid}-new 等，
   aria-controls / aria-labelledby 同步指向真实 id，两实例并用也不撞。

4. 搜索框固定 id（searchform / search / searchsubmit）
   同样改为 {uid}-form / {uid}-field / {uid}-submit，并补
   <label class="sr-only" for="{uid}-field">搜索</label>。

5. 图片 URL 未加引号 + 未转义
   src/href 一律加引号 + esc_url()，alt 用 wp_strip_all_tags + esc_attr，
   简介用 nl2br(esc_html())。背景图踩了一个自己写出来的坑：一开始写成
   esc_url() 套在 esc_attr() 里 = 双重转义，& 变 &amp;amp;，CSS 里拿到
   字面量 amp，背景图 404。改为 url() 内部用 esc_url_raw()（只做协议/字符
   清洗，不入实体），整个 style 属性交给 esc_attr() 统一转义一次。

顺带把侧栏标签页图标在窄屏隐藏（<1200px），避免三个 tab 挤在一起。

验证：
- _widgets_consistency.php        68 通过 / 0 失败
- _widgets_consistency_falsify.php 24 通过 / 0 失败（基线1·自检3·注入20）
- _widgets_hot_test.php           33 / 0
- _widgets_hot_falsify.php        20 / 0
- _widgets_hot_geom.js            24 / 0（真实浏览器几何）
- _widgets_ids_dom.js              5 / 0（真实 DOM 查重复 id）
- _widgets_visual20.js            30 / 0（像素级：图片 naturalWidth>0、
                                      标题装饰线、标签等宽、tab 点击）
- _widgets_icon_wide.js            7 / 0（断点精确在 1200）
- _widgets_tags_geom.js            5 / 0（列数单调性）
- 发布脚本 R1~R10 十组注入全部真红
This commit is contained in:
laoyang
2026-10-26 23:04:28 +08:00
parent d3070bea5b
commit 8367231e91
4 changed files with 328 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/kratos.css
+86 -13
View File
@@ -1857,6 +1857,31 @@ button:focus {
margin-right: 8px;
}
/* 标签页图标：xl（≥1200px）显示，更窄时隐藏。
*
* 🔴 3.2.50 之前这件事是靠**渲染两份 DOM** 做的：PHP 里输出
* 一个 `d-none d-xl-flex` 的带图标版本和一个 `d-xl-none` 的无图标版本，
* 于是 nav-tab / nav-new-tab / nav-hot-tab / nav-random-tab
* 四个 id 在同一个页面里各出现两次（HTML 非法，aria-labelledby 失效）。
* 现在 DOM 只有一份，显隐交给下面的媒体查询。 */
.k-main .sidebar .w-recommended .nav-link .tab-icon {
display: none;
}
@media (min-width: 1200px) {
.k-main .sidebar .w-recommended .nav-link .tab-icon {
display: inline-block;
}
}
/* 无图标时补一点内边距，避免三个标签挤在一起 */
@media (max-width: 1199.98px) {
.k-main .sidebar .w-recommended .nav-tabs .nav-link {
padding-left: 18px;
padding-right: 18px;
}
}
.k-main .sidebar .title {
position: relative;
margin: 0 0 15px;
@@ -1876,25 +1901,63 @@ button:focus {
content: "";
}
.k-main .sidebar .w-tags .item a {
/* ── 标签聚合 / 友情链接：宽度改为「按容器自适应」
*
* 🔴 3.2.50 之前的写法是两段魔法数字：
*
* .w-tags .item a { width: 164px } ← 默认
* @media (max-width:1310px) { ... { width: 110px } } ← 窄屏
*
* 侧栏宽度由 Bootstrap 的 col-lg-4 决定，在 992px 以下是「整行」，
* 在 992px 以上是容器的 1/3。而 1310px 这个断点**只改标签宽度、
* 不改侧栏宽度**，于是在 1311→1310px 处出现：
*
* 1311px：侧栏内容区 336.7px，标签 164px → 一行 2 个
* 1310px：侧栏内容区 336.7px，标签 110px → 一行 3 个
*
* **窗口变窄，列数反而多了一个**。这是典型的"两次魔法数字叠加"：
* 第二段是为了修第一段在某个视口下的溢出，修的时候没管单调性。
*
* 现在不再写死像素，改为按容器百分比：
*
* width: calc(50% - 2px) 默认每行 2 个
* margin: 0 1px 10px 0 左右各 1px，共 2px 被 50%-2px 抵掉
*
* 50%-2px 这个写法保证「一行恰好放 2 个且不多不少」：
* 两个 50%-2px 加两个 1px 右边距 = 100%，再算上 inline-block 之间的
* 空白字符会被 font-size:0 吃掉（见 .item 的声明），所以不会意外换行。
*
* 要改列数只需改这一个百分比，窄屏不会再"越窄越多列"。
*/
.k-main .sidebar .w-tags .item,
.k-main .sidebar .widget_links ul {
/* 🔴 inline-block 元素之间的换行/空格会渲染成一个空格宽度，
两个 50% 就永远放不进一行。font-size:0 让空白字符零宽，
子元素再把字号设回来。这是 inline-block 网格的标准做法。 */
font-size: 0;
}
.k-main .sidebar .w-tags .item a,
.k-main .sidebar .widget_links ul li {
display: inline-block;
margin: 0 1px 10px 0;
padding: 2px 0;
width: 164px;
/* 每行 2 个：两个 (50% - 2px) + 两个 1px 右边距 = 100% */
width: calc(50% - 2px);
border: 1px solid #eeeeee;
color: #333;
list-style: none;
text-align: center;
font-size: 14px;
/* 长标签名（如 HarmonyOS）不能撑破格子 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
}
.k-main .sidebar .widget_links ul li {
display: inline-block;
margin: 0 1px 10px 0;
padding: 2px 0;
width: 164px;
color: #333;
list-style: none;
border: none;
font-size: 15px;
line-height: inherit;
}
@@ -2036,11 +2099,21 @@ button:focus {
padding: 8px 22px;
}
.k-main .sidebar .w-tags .item a,
.k-main .sidebar .widget_links ul li {
width: 110px;
}
/* 🔴 这里本来还有两条把宽定死的规则：
*
* .k-main .sidebar .w-tags .item a,
* .k-main .sidebar .widget_links ul li,
* .k-main .sidebar .widget_categories ul li,
* .k-main .sidebar .widget_archive ul li { width: 110px }
*
* 1310px 这个断点**不改变侧栏宽度**（992px 以上一直是容器 1/3），
* 所以它只做了一件事：把格子压窄 ⇒ 同样宽度下一行多塞一个 ⇒
* 窗口越窄列数越多。3.2.50 起标签与友情链接改成 `calc(50% - 2px)`，
* 由容器宽度自己决定列数；这里只剩 tab 的内边距需要收一收。
*
* 分类/归档那两条宽度**保留** —— 它们的父元素是 li 列表，
* 不是按行排的网格，压窄只影响观感不影响列数，且原有排版依赖它。
* 见下方规则。 */
.k-main .sidebar .widget_categories ul li,
.k-main .sidebar .widget_archive ul li {
width: 110px;
assets/css/kratos.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
inc/theme-widgets.php
+240 -38
View File
@@ -35,6 +35,114 @@ function widgets_init()
}
add_action('widgets_init', 'widgets_init');
/* ==========================================================================
* 挂件标题与外框（3.2.50）
*
* ── 为什么要有这两个函数 ──────────────────────────────────────────────
* register_sidebar() 里已经声明了版式：
*
* 'before_title' => '<div class="title">',
* 'after_title' => '</div>',
*
* 但主题自己的挂件**全都绕开了它**：`widget_tags` 把「标签聚合」硬编码在
* 代码里，`widget_ad` / `widget_about` / `widget_posts` 干脆没有标题字段，
* `widget_search` 有字段却自己手写了一个 `<div class="title">`。
*
* 结果是：在后台改侧栏版式（换标题标签、加装饰）对这四个挂件无效，
* 而且用户根本没地方给它们起标题。这两个函数把「标题」收敛到一处，
* 保证所有挂件走同一条路径。
*
* 🔴 空标题必须**不输出任何节点**，而不是输出空的 `<div class="title"></div>` ——
* 后者会留下一条只有内边距的空白条，视觉上像"多了一块间距"。
* ====================================================================== */
if (!function_exists('yang_widget_title')):
/**
* 输出挂件标题（走 sidebar 注册的 before_title / after_title）。
*
* @param array $args widget() 收到的 $args
* @param string $instance 实例里的 title
* @param string $fallback 没设置标题时的默认值；传 '' 表示默认不显示标题
* @param string $id_base 挂件 id_base，仅用于 widget_title 过滤器
*/
function yang_widget_title($args, $instance, $fallback = '', $id_base = '')
{
$title = isset($instance['title']) ? trim((string) $instance['title']) : '';
if ($title === '') {
$title = $fallback;
}
/* 兼容 WP 惯例：主题/插件可以用 widget_title 过滤器改标题。
* 这里保留它，否则装过「改挂件标题」类插件的站点行为会变。 */
if (function_exists('apply_filters')) {
$title = apply_filters('widget_title', $title, (array) $instance, $id_base);
$title = trim((string) $title);
}
if ($title === '') {
return;
}
$before = isset($args['before_title']) ? $args['before_title'] : '<div class="title">';
$after = isset($args['after_title']) ? $args['after_title'] : '</div>';
echo $before . esc_html($title) . $after;
}
endif;
if (!function_exists('yang_widget_uid')):
/**
* 生成挂件内 HTML id 的唯一前缀。
*
* 🔴 为什么不能用写死的 id：挂件可以添加多个实例，同一页面上
* 两个「文章聚合」就会产生两套重复 id（HTML 非法，
* aria-labelledby 也只能指到第一个）。
* `$this->id` 由 WP_Widget 分配（形如 `widget_posts-2`），
* 同一请求内唯一；但在单元测试/旧版环境里可能不存在，所以做兜底。
*
* @param object $widget 挂件实例
* @return string 形如 `yang-widget_posts-2`
*/
function yang_widget_uid($widget)
{
$id = '';
if (is_object($widget) && isset($widget->id) && is_string($widget->id) && $widget->id !== '') {
$id = $widget->id;
} elseif (is_object($widget) && isset($widget->id_base) && is_string($widget->id_base) && $widget->id_base !== '') {
$id = $widget->id_base;
} else {
$id = 'widget';
}
return 'yang-' . preg_replace('/[^a-z0-9_-]+/i', '-', $id);
}
endif;
if (!function_exists('yang_widget_open')):
/**
* 挂件外框起始标签。
*
* 侧栏注册的 before_widget 是 `<div class="widget %2$s">`，其中 %2$s 是
* 挂件类名（classname）。这里故意**不用**它，而是自己拼类名：
* 主题的挂件样式全部写成 `.k-main .sidebar .w-about` 这种以 `w-` 开头的
* 短类名，用 classname 会变成 `widget_widget_about` 之类，样式一条都不生效。
* 保留 `widget` 这个基类（主题里 `.k-main .sidebar .widget` 提供白底与内边距）。
*
* @param string $modifier 形如 'w-about'
* @return string
*/
function yang_widget_class($modifier)
{
return 'widget ' . $modifier;
}
endif;
/* ==========================================================================
* 热度算法（3.2.49）
*
@@ -208,15 +316,29 @@ class widget_search extends WP_Widget {
}
public function widget( $args, $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
/* 🔴 id 必须带实例后缀。
* 原来写死 id="searchform" / id="search" / id="searchsubmit"，
* 挂两个搜索挂件时全撞；主题别处或核心再放一个搜索表单也会撞。 */
$uid = yang_widget_uid($this);
echo '<div class="widget w-search">';
if ( $title ) {
echo '<div class="title">'. $title .'</div>';
}
echo '<div class="item"> <form role="search" method="get" id="searchform" class="searchform" action="'. home_url('/') .'"> <div class="input-group mt-2 mb-2"> <input type="text" name="s" id="search" class="form-control" placeholder="'. __('搜点什么呢?', 'kratos') .'"> <div class="input-group-append"> <button class="btn btn-primary btn-search" type="submit" id="searchsubmit">'. __('搜索', 'kratos') .'</button> </div> </div> </form>';
echo '</div></div>';
echo '<div class="' . esc_attr(yang_widget_class('w-search')) . '">';
yang_widget_title($args, $instance, '', $this->id_base);
?>
<div class="item">
<form role="search" method="get" id="<?php echo esc_attr($uid); ?>-form"
class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
<div class="input-group mt-2 mb-2">
<label class="sr-only" for="<?php echo esc_attr($uid); ?>-field"><?php _e('搜索', 'kratos'); ?></label>
<input type="text" name="s" id="<?php echo esc_attr($uid); ?>-field" class="form-control"
placeholder="<?php esc_attr_e('搜点什么呢?', 'kratos'); ?>">
<div class="input-group-append">
<button class="btn btn-primary btn-search" type="submit" id="<?php echo esc_attr($uid); ?>-submit"><?php _e('搜索', 'kratos'); ?></button>
</div>
</div>
</form>
</div>
<?php
echo '</div>';
}
public function form( $instance ) {
@@ -264,8 +386,21 @@ class widget_ad extends WP_Widget
$image = !empty($instance['image']) ? $instance['image'] : '';
$url = !empty($instance['url']) ? $instance['url'] : '';
echo '<div class="widget w-ad">';
echo '<a href="' . $url . '" target="_blank" rel="noreferrer"><img src="' . $image . '"><div class="prompt">' . $subtitle . '</div></a>';
/* 🔴 原来这三处都是裸拼：
* '<a href="' . $url . '"...><img src="' . $image . '"><div class="prompt">' . $subtitle . '</div></a>'
* ① $url 没 esc_url —— 后台填个带引号的地址就能截断 href 属性；
* ② img 的 src 值**没有引号** —— 图片 URL 里只要有一个空格，
* 后半截就会被解析成另一个属性（常见于文件名带空格的媒体库图片）；
* ③ $subtitle 没转义 —— 后台填 < 或 & 会破坏结构。
* 下面全部补齐；alt 取副标题，避免读屏软件只念文件名。 */
echo '<div class="' . esc_attr(yang_widget_class('w-ad')) . '">';
yang_widget_title($args, $instance, '', $this->id_base);
$imgAlt = wp_strip_all_tags($subtitle);
echo '<a href="' . esc_url($url) . '" target="_blank" rel="noreferrer noopener">'
. '<img src="' . esc_url($image) . '" alt="' . esc_attr($imgAlt) . '">'
. '<div class="prompt">' . esc_html($subtitle) . '</div>'
. '</a>';
echo '</div>';
}
@@ -273,20 +408,27 @@ class widget_ad extends WP_Widget
{
$instance = array();
$instance['subtitle'] = (!empty($new_instance['subtitle'])) ? $new_instance['subtitle'] : '';
$instance['image'] = (!empty($new_instance['image'])) ? $new_instance['image'] : '';
$instance['url'] = (!empty($new_instance['url'])) ? $new_instance['url'] : '';
$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
$instance['subtitle'] = (!empty($new_instance['subtitle'])) ? sanitize_text_field($new_instance['subtitle']) : '';
$instance['image'] = (!empty($new_instance['image'])) ? esc_url_raw($new_instance['image']) : '';
$instance['url'] = (!empty($new_instance['url'])) ? esc_url_raw($new_instance['url']) : '';
return $instance;
}
public function form($instance)
{
$title = !empty($instance['title']) ? $instance['title'] : '';
$subtitle = !empty($instance['subtitle']) ? $instance['subtitle'] : __('广告', 'kratos');
$image = !empty($instance['image']) ? $instance['image'] : '';
$url = !empty($instance['url']) ? $instance['url'] : '';
?>
<div class="media-widget-control">
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('标题：', 'kratos');?></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); ?>">
<span class="description"><?php _e('留空则不显示标题。', 'kratos');?></span>
</p>
<p>
<label for="<?php echo $this->get_field_id('subtitle'); ?>"><?php _e('副标题：', 'kratos');?></label>
<input class="widefat" id="<?php echo $this->get_field_id('subtitle'); ?>" name="<?php echo $this->get_field_name('subtitle'); ?>" type="text" value="<?php echo esc_attr($subtitle); ?>">
@@ -334,15 +476,44 @@ class widget_about extends WP_Widget
$avatar = yang_option_image('a_gravatar');
$background = !empty($instance['background']) ? $instance['background'] : ASSET_PATH . '/assets/img/about-background.png';
echo '<div class="widget w-about">';
echo '<div class="background" style="background:url(' . $background . ') no-repeat center center;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div><div class="wrapper text-center">';
/* 🔴 原来写的是 `background:url(' . $background . ') no-repeat ...`
* —— url() 里的地址**没有引号**。只要路径含空格、括号、单引号，
* CSS 解析器就会在那里截断，整条声明作废（背景变白）。
* 媒体库文件名带空格很常见。这里补引号。
*
* 🔴 这里**只拼一次转义**，而且拼完还要整体 esc_attr()。
* 第一版写的是 esc_url($background) 再套 esc_attr($bg) ——
* esc_url() 已经做过 HTML 实体化，esc_attr() 又来一次 ⇒
* `&` 被编成 `&amp;amp;`，CSS 里拿到的是字面量 "amp"，
* 背景图直接 404。测试里那条「URL 完整」判据抓到的就是它。
*
* 正确做法：URL 只做**协议/字符清洗**（esc_url_raw，不入实体），
* url() 内部用双引号包住，最后整个 style 属性交给 esc_attr()
* 统一转义一次。这样 `&` 只会被编成 `&amp;`（正确），
* 浏览器解析回属性值后仍是原始的 `&`。
*
* 🔴 $introduce 来自主题选项 textarea，$username 来自 text，
* 原来是裸 echo。个人简介里写个 < 就把后面的结构吃掉了。
* 简介保留换行（textarea 的自然语义），其余全部转义。 */
$bg = 'background-image:url("' . esc_url_raw($background) . '");'
. 'background-repeat:no-repeat;'
. 'background-position:center center;'
. 'background-size:cover;';
echo '<div class="' . esc_attr(yang_widget_class('w-about')) . '">';
yang_widget_title($args, $instance, '', $this->id_base);
echo '<div class="background" style="' . esc_attr($bg) . '"></div><div class="wrapper text-center">';
if (current_user_can('manage_options')) {
echo '<a href="' . admin_url() . '">';
echo '<a href="' . esc_url(admin_url()) . '">';
} else {
echo '<a href="' . wp_login_url() . '">';
echo '<a href="' . esc_url(wp_login_url()) . '">';
}
echo '<img src="' . $avatar . '"></a>';
echo '</div><div class="textwidget text-center"><p class="username">'. $username .'</p><p class="about">' . $introduce . '</p></div>';
echo '<img src="' . esc_url($avatar) . '" alt="' . esc_attr(wp_strip_all_tags($username)) . '"></a>';
echo '</div><div class="textwidget text-center">'
. '<p class="username">' . esc_html($username) . '</p>'
. '<p class="about">' . nl2br(esc_html($introduce)) . '</p>'
. '</div>';
echo '</div>';
}
@@ -350,16 +521,23 @@ class widget_about extends WP_Widget
{
$instance = array();
$instance['background'] = (!empty($new_instance['background'])) ? $new_instance['background'] : '';
$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
$instance['background'] = (!empty($new_instance['background'])) ? esc_url_raw($new_instance['background']) : '';
return $instance;
}
public function form($instance)
{
$title = !empty($instance['title']) ? $instance['title'] : '';
$background = !empty($instance['background']) ? $instance['background'] : ASSET_PATH . '/assets/img/about-background.png';
?>
<div class="media-widget-control">
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('标题：', 'kratos');?></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); ?>">
<span class="description"><?php _e('留空则不显示标题。', 'kratos');?></span>
</p>
<p>
<label for="<?php echo $this->get_field_id('background'); ?>"><?php _e('背景图片:', 'kratos');?></label>
<input class="widefat" id="<?php echo $this->get_field_id('background'); ?>" name="<?php echo $this->get_field_name('background'); ?>" type="text" value="<?php echo esc_attr($background); ?>">
@@ -397,8 +575,11 @@ class widget_tags extends WP_Widget
'echo' => false,
)
);
echo '<div class="widget w-tags">';
echo '<div class="title">' . __('标签聚合', 'kratos') . '</div>';
/* 🔴 标题原来是硬编码的 __('标签聚合')，后台没有输入框也改不了。
* 现在走实例的 title，没设才回落到「标签聚合」——
* 这样老站点的显示**一点不变**，但用户可以改了。 */
echo '<div class="' . esc_attr(yang_widget_class('w-tags')) . '">';
yang_widget_title($args, $instance, __('标签聚合', 'kratos'), $this->id_base);
echo '<div class="item">' . $tags . '</div>';
echo '</div>';
}
@@ -407,8 +588,9 @@ class widget_tags extends WP_Widget
{
$instance = array();
$instance['number'] = (!empty($new_instance['number'])) ? $new_instance['number'] : '';
$instance['order'] = (!empty($new_instance['order'])) ? $new_instance['order'] : '';
$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
$instance['number'] = (!empty($new_instance['number'])) ? (int) $new_instance['number'] : 8;
$instance['order'] = (!empty($new_instance['order'])) ? $new_instance['order'] : 'RAND';
return $instance;
}
@@ -416,10 +598,16 @@ class widget_tags extends WP_Widget
public function form($instance)
{
global $wpdb;
$title = !empty($instance['title']) ? $instance['title'] : '';
$number = !empty($instance['number']) ? $instance['number'] : '8';
$order = !empty($instance['order']) ? $instance['order'] : 'RAND';
?>
<div class="media-widget-control">
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('标题：', 'kratos');?></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); ?>" placeholder="<?php echo esc_attr__('标签聚合', 'kratos'); ?>">
<span class="description"><?php _e('留空则仍显示「标签聚合」。', 'kratos');?></span>
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('显示数量：', 'kratos');?></label>
<input class="widefat" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo esc_attr($number); ?>" />
@@ -456,20 +644,27 @@ class widget_posts extends WP_Widget
$number = 6;
}
echo '<div class="widget w-recommended">';
/* 🔴 id 唯一化（原来全是写死的）。
* 老代码把同一套标签页导航写了两份 —— 桌面一份带图标（d-none d-xl-flex）、
* 手机一份不带图标（d-xl-none）—— 于是 nav-tab / nav-new-tab /
* nav-hot-tab / nav-random-tab **四个 id 各出现两次**，HTML 非法；
* `aria-labelledby="nav-new-tab"` 也只能指到第一份。
* 挂两个「文章聚合」实例时撞得更彻底。
*
* 现在只渲染**一份**导航：图标用 CSS 在窄屏隐藏（见 kratos.css 的
* `.w-recommended .tab-icon`）。这样 id 天然唯一，DOM 也少一半。 */
$uid = yang_widget_uid($this);
echo '<div class="' . esc_attr(yang_widget_class('w-recommended')) . '">';
yang_widget_title($args, $instance, '', $this->id_base);
?>
<div class="nav nav-tabs d-none d-xl-flex" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-new-tab" data-toggle="tab" href="#nav-new" role="tab" aria-controls="nav-new" aria-selected="false"><i class="kicon i-tabnew"></i><?php _e('最新', 'kratos');?></a>
<a class="nav-item nav-link" id="nav-hot-tab" data-toggle="tab" href="#nav-hot" role="tab" aria-controls="nav-hot" aria-selected="true"><i class="kicon i-tabhot"></i><?php _e('热点', 'kratos');?></a>
<a class="nav-item nav-link" id="nav-random-tab" data-toggle="tab" href="#nav-random" role="tab" aria-controls="nav-random" aria-selected="false"><i class="kicon i-tabrandom"></i><?php _e('随机', 'kratos');?></a>
<div class="nav nav-tabs" id="<?php echo esc_attr($uid); ?>-tab" role="tablist">
<a class="nav-item nav-link active" id="<?php echo esc_attr($uid); ?>-new-tab" data-toggle="tab" href="#<?php echo esc_attr($uid); ?>-new" role="tab" aria-controls="<?php echo esc_attr($uid); ?>-new" aria-selected="true"><i class="kicon i-tabnew tab-icon"></i><?php _e('最新', 'kratos');?></a>
<a class="nav-item nav-link" id="<?php echo esc_attr($uid); ?>-hot-tab" data-toggle="tab" href="#<?php echo esc_attr($uid); ?>-hot" role="tab" aria-controls="<?php echo esc_attr($uid); ?>-hot" aria-selected="false"><i class="kicon i-tabhot tab-icon"></i><?php _e('热点', 'kratos');?></a>
<a class="nav-item nav-link" id="<?php echo esc_attr($uid); ?>-random-tab" data-toggle="tab" href="#<?php echo esc_attr($uid); ?>-random" role="tab" aria-controls="<?php echo esc_attr($uid); ?>-random" aria-selected="false"><i class="kicon i-tabrandom tab-icon"></i><?php _e('随机', 'kratos');?></a>
</div>
<div class="nav nav-tabs d-xl-none" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-new-tab" data-toggle="tab" href="#nav-new" role="tab" aria-controls="nav-new" aria-selected="false"><?php _e('最新', 'kratos');?></a>
<a class="nav-item nav-link" id="nav-hot-tab" data-toggle="tab" href="#nav-hot" role="tab" aria-controls="nav-hot" aria-selected="true"><?php _e('热点', 'kratos');?></a>
<a class="nav-item nav-link" id="nav-random-tab" data-toggle="tab" href="#nav-random" role="tab" aria-controls="nav-random" aria-selected="false"><?php _e('随机', 'kratos');?></a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-new" role="tabpanel" aria-labelledby="nav-new-tab">
<div class="tab-content" id="<?php echo esc_attr($uid); ?>-tabContent">
<div class="tab-pane fade show active" id="<?php echo esc_attr($uid); ?>-new" role="tabpanel" aria-labelledby="<?php echo esc_attr($uid); ?>-new-tab">
<?php
/* 🔴 原来写的是 `'numberposts=' . $number . ' & offset=0'` ——
* 字符串里带空格，WP_Query 解析时参数名变成 `' offset'`（前面
@@ -483,7 +678,7 @@ class widget_posts extends WP_Widget
<a class="bookmark-item" title="<?php echo esc_attr($post->post_title); ?>" href="<?php echo esc_url(get_permalink($post->ID)); ?>" rel="bookmark"><i class="kicon i-book"></i><?php echo esc_html(wp_strip_all_tags($post->post_title)) ?></a>
<?php endforeach;?>
</div>
<div class="tab-pane fade" id="nav-hot" role="tabpanel" aria-labelledby="nav-hot-tab">
<div class="tab-pane fade" id="<?php echo esc_attr($uid); ?>-hot" role="tabpanel" aria-labelledby="<?php echo esc_attr($uid); ?>-hot-tab">
<?php
/* 热点：全站累计热度（views/love/评论 三项 log 加权），
* 不再受「最近 N 天发布」的时间窗限制。原因见 most_comm_posts()
@@ -492,7 +687,7 @@ class widget_posts extends WP_Widget
most_comm_posts(0, $number);
} ?>
</div>
<div class="tab-pane fade" id="nav-random" role="tabpanel" aria-labelledby="nav-random-tab">
<div class="tab-pane fade" id="<?php echo esc_attr($uid); ?>-random" role="tabpanel" aria-labelledby="<?php echo esc_attr($uid); ?>-random-tab">
<?php
$myposts = get_posts(array(
'numberposts' => $number,
@@ -511,6 +706,7 @@ class widget_posts extends WP_Widget
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
$instance['number'] = (!empty($new_instance['number'])) ? (int) $new_instance['number'] : 6;
/* `days` 已废弃：旧实现拿它当「最近 N 天发布」的时间窗，
@@ -520,9 +716,15 @@ class widget_posts extends WP_Widget
}
public function form($instance)
{
$title = !empty($instance['title']) ? $instance['title'] : '';
$number = !empty($instance['number']) ? $instance['number'] : '6';
?>
<div class="media-widget-control">
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('标题：', 'kratos');?></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); ?>">
<span class="description"><?php _e('留空则不显示标题。', 'kratos');?></span>
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('展示数量：', 'kratos');?></label>
<input class="widefat" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo esc_attr($number); ?>" />
style.css
+1 -1
View File
@@ -1,7 +1,7 @@
/*
Theme Name: Kratos_Yang
Text Domain: kratos_Yang
Version: 3.2.49
Version: 3.2.50
Requires PHP: 7.0
Description: 这是一个Kratos主题的分支版本，用来增加一些定制化功能。
Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好