「个人简介」挂件：头像/昵称/简介/背景四项可单独填 + 修大图撑爆 #21
一、头像 / 昵称 / 简介原来**只读主题设置**，挂件表单里没有字段
· 用户点开侧栏「个人简介」只能改背景图，头像和那句话得跑去
「主题设置 → 站长信息」改全站共用的那份。
· 现在四项都是挂件实例字段：avatar / nickname / introduce / background。
· 取值顺序：实例 → 主题设置 → 内置兜底，**留空即回落**，
老站点升级后显示一点不变。
· pick() 判空统一用「trim 后是不是空串」，不用 empty()
（!empty('0') 是 false，昵称就叫「0」会被当没填）。
· 简介用 sanitize_textarea_field（保留换行），URL 用 esc_url_raw
（不做 HTML 实体化，避免与 esc_attr 双重转义）。
二、后台 form() 补齐五个字段
· 头像 / 背景各带「选择图片」按钮（调媒体库），背景另有「清除」。
· 输入框显示用户填的原始值，缩略图显示前台最终会用的那张，刻意分开。
· 资源加载统一到 yang_widget_admin_assets()，不再每个挂件各挂一次。
三、大图撑爆挂件的真因：CSS 选择器依赖三层祖先
· 老规则是 `.k-main .sidebar .w-about .wrapper img`，而后台
「外观 → 小工具」预览里没有 `.k-main .sidebar` 这层祖先，
规则一条都不生效 ⇒ 头像按原图 2136×2136 铺开、背景塌成 0。
前台看着正常是因为前台恰好有那层祖先，问题被完全掩盖。
· 改为只管 `.w-about` 内部元素，并补 max-width/max-height 双保险。
· 老规则必须**删掉**而不是并存：它是 (0,3,1)，新规则是 (0,2,1)，
并存时老规则在前台永远赢，新规则只对后台生效。
· 保留 `.k-main .sidebar .w-about { padding:0 }`：通用规则
`.k-main .sidebar .widget` 是 (0,3,0)，少了这条会多出内边距、整体高 57px。
· 头像保持 inline（display:block 会让它脱离 text-align:center 的居中）。
· 顺带：object-fit 从 fill 改 cover（超宽图不再压扁）；
背景 url() 补引号（文件名带空格时不再整条声明作废）。
验证
· 行为测试 67 条全通过；反向验证 13 组全部真红。
· 浏览器几何 76 条全通过（前台/后台 × 四种极端原图）。
· 修复前 CSS 跑同一套判据：38 条报红，精确复现用户症状
（后台挂件高 2217、头像 2136×2136、横向滚动 2146）。
· 线上真实页面 + 新版 CSS：16 条全通过。
This commit is contained in:
+92
-13
@@ -1777,43 +1777,122 @@ button:focus {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.k-main .sidebar > div:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
* 「个人简介」挂件（.w-about）：尺寸自持（3.2.51）
|
||||
*
|
||||
* ── 原来为什么会被大图撑爆 ──────────────────────────────────────────
|
||||
* 这一组规则原来全部写成三段祖先选择器：
|
||||
*
|
||||
* .k-main .sidebar .w-about .wrapper img { width:100px; height:100px }
|
||||
* .k-main .sidebar .w-about .background { height:120px }
|
||||
*
|
||||
* `.k-main` → `.sidebar` → `.w-about` 这三段是**前台文章页/首页的布局**。
|
||||
* 挂件一旦出现在没有这层祖先的地方：
|
||||
*
|
||||
* · WordPress 后台「外观 → 小工具」的挂件预览
|
||||
* · 区块小工具（Widgets Block Editor）的预览面板
|
||||
* · 侧栏被别的主题/插件改写结构时
|
||||
*
|
||||
* 这些规则**一条都不生效**，头像 <img> 没有任何宽高约束，直接按原图
|
||||
* 尺寸铺开；`.background` 也会塌成 0 高。
|
||||
*
|
||||
* 线上实测（avatar.jpg 原图 2136×2136）：
|
||||
* 有祖先 → 挂件 397×285， 头像 100×100 ✅
|
||||
* 无祖先 → 挂件 1400×2217，头像 2136×2136 ❌ 撑爆，横向滚动 2156px
|
||||
*
|
||||
* ── 现在的做法 ──────────────────────────────────────────────────────
|
||||
* 只依赖**挂件自己的类名** `.w-about`，不再依赖外层布局。这样无论挂件
|
||||
* 被丢进什么容器，头像都是固定小圆、背景都是固定高。
|
||||
*
|
||||
* 🔴 必须把老的三段选择器**删掉**，不是"再补一条新的"。
|
||||
* 实测过：`.k-main .sidebar .w-about .wrapper img` 优先级 (0,3,1)，
|
||||
* 而 `.w-about .wrapper img` 只有 (0,2,1)。两条并存时**老规则在前台永远赢**，
|
||||
* 于是新规则只在后台生效 —— 前台改新规则等于白改，而且会让人误以为
|
||||
* "改了没反应"。我把头像故意改成 200px 反证过：像素完全不变，
|
||||
* 因为前台根本用的是老规则。单一真相来源才不会有这个坑。
|
||||
*
|
||||
* 🔴 为什么不用 !important：那会让用户/子主题以后想改头像尺寸时
|
||||
* 完全改不动。
|
||||
* ══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* 背景条：高度不依赖祖先 */
|
||||
.w-about .background {
|
||||
height: 120px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 挂件自身去掉内边距。
|
||||
*
|
||||
* 原来写的是 `.k-main .sidebar .w-about, .k-main .sidebar .w-ad { padding:0 }`
|
||||
* —— 依赖祖先，所以后台预览里会吃 `.widget` 的 15px 内边距，跟前台不一致。
|
||||
* 下面这组把它拆成两条：
|
||||
* ① `.w-about` / `.w-ad`（无祖先）—— 覆盖后台/其它容器里的 `.widget` 内边距；
|
||||
* ② `.k-main .sidebar .w-about` / `.w-ad`（前台）—— 覆盖主题自己的
|
||||
* `.k-main .sidebar .widget { padding: 15px 30px }`。
|
||||
*
|
||||
* 🔴 ② 这条**不能省**：它的对手 `.k-main .sidebar .widget` 优先级 (0,3,0)，
|
||||
* 而 ① 只有 (0,1,0)，光靠 ① 在前台会被压回去 —— 实测挂件会多出
|
||||
* 15px/30px 内边距、整体高 57px（284→341），头像和文字全部错位。
|
||||
* 两处的**值必须一致**（都是 0），前后台才不会出现分歧。 */
|
||||
.w-about,
|
||||
.w-ad {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about,
|
||||
.k-main .sidebar .w-ad {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.k-main .sidebar > div:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about .background {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about .wrapper img {
|
||||
/* 头像：固定尺寸 + 裁切，永远不可能超出自己的盒子。
|
||||
*
|
||||
* object-fit:cover 是关键 —— 原图 2136×2136、1×1、4000×100、100×4000
|
||||
* 都能被忠实裁进 100×100 的圆里，不会变形，也不会把盒子撑开。
|
||||
* 在没有祖先约束的环境里尤其重要：那里没有别的规则兜底。
|
||||
* （原来是 fill，非正方形头像会被拉伸变形，这次一并修掉。）
|
||||
*
|
||||
* 🔴 不要写 display:block —— 实测会带来两处前台外观变化：
|
||||
* ① 头像从「行内被 text-align:center 居中」变成「块级独占一行」，
|
||||
* 父级 .wrapper 高度从 50px 变 100px；
|
||||
* ② x 坐标从 1096.66（居中）变成 948.33（左对齐）。
|
||||
* 两处都是肉眼可见的位移。保持 inline（默认）才能原样继承 text-center。
|
||||
*
|
||||
* 🔴 margin 保持 `-50px 0 0`（水平 0）而不是 `auto`：水平居中本来就由
|
||||
* 父级 text-align:center 完成，写 auto 在 inline 元素上也不生效。 */
|
||||
.w-about .wrapper img {
|
||||
margin: -50px 0 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
object-fit: cover;
|
||||
border: rgba(255, 255, 255, 0.4) 4px solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about .textwidget {
|
||||
/* 文字区：同样不依赖祖先 */
|
||||
.w-about .textwidget {
|
||||
padding: 5px 20px 20px;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about .textwidget p {
|
||||
.w-about .textwidget p {
|
||||
margin-bottom: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about .textwidget .username {
|
||||
.w-about .textwidget .username {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.k-main .sidebar .w-about .textwidget .about {
|
||||
.w-about .textwidget .about {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user