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

一并修掉上一轮列出的 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 十组注入全部真红

assets/css/kratos.css

@@ -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;