用户 2026-10-26 对侧栏「个人简介」挂件(widget_about)提出的一组问题。
widget_about
用户原话:
先说这个人简介,这个个人简介中的图片和显示的一句话到底是从哪儿来的?现在我点击这个小挂件,它没有地方可以写。修改这两个东西,而且没有地方修改它的背景图。另外一个在后台设置的时候,就在 WordPress 的设置有一个小外观,有一个小小工具那个地方设置的时候,我的头像当这个头图、头像的图片特别大的时候,就会把这个小挂件给撑得很大,就是那个图片会把整个小挂件给盖住,看看这个到底是怎么回事儿?
现状盘点(已核对线上 yangyq.net):
yangyq.net
yang_option_image('a_gravatar')
老杨
kratos_option('a_nickname')
kratos_option('a_about')
$instance['background']
⇒ 用户「点开挂件没地方写」是真的:三项全在主题设置里,挂件表单只有背景图一个字段。
要做的:挂件表单补齐三项 —— 头像(媒体库选图)、昵称、简介,都在挂件里直接填。
表单里其实有一个「背景图片」text 输入框 + 「选择图片」按钮,但混在表单里不显眼,用户直接说「没有地方修改」。
要做的:补图片缩略图预览(一眼看到当前用的是哪张),并让「选择图片 / 清除」更明确。
根因(已用真实浏览器复现,非推测):assets/css/kratos.css 里的尺寸约束全是三段祖先选择器:
assets/css/kratos.css
.k-main .sidebar .w-about .wrapper img { width: 100px; height: 100px; ... } .k-main .sidebar .w-about .background { height: 120px; }
.k-main .sidebar 是前台文章页/首页的布局。挂件一旦出现在没有这层祖先的环境 (WP 后台「外观→小工具」的挂件预览、区块小工具预览面板、侧栏样式被改写时), 这些规则一条都不生效 ⇒ 头像按原图尺寸铺开、背景塌成 0。
.k-main .sidebar
实测数据(线上 avatar.jpg 原图 2136×2136):
avatar.jpg
复现脚本:_tooling/yang_theme_test/_diag_admin_preview.js(同一段 CSS,只切换有无祖先)。
_tooling/yang_theme_test/_diag_admin_preview.js
要做的:尺寸约束内聚到挂件自己身上,不依赖前台布局祖先。无论放进什么容器, 头像都是固定小圆、背景都是固定高、永远不可能溢出撑大挂件。
assets/js/widget.min.js
button[class*='upload_']
!important
表单
撑爆
与 #20 的侧栏挂件一致性是不同问题:#20 修的是标题/id/URL 转义等已存在字段的问题,本单是 widget_about 缺 3 个字段(用户不知道头像昵称简介从哪来、改不了)外加一条独立的 CSS 祖先依赖 bug(大图撑爆)。可单独验收。
包与 readme 已上传到 theme-update/,update.json 已落 3.2.51。 服务器主题目录仍是 3.2.50,未被覆盖 —— 请在 WP 后台点「升级」升级到 3.2.51,升级后我再关单。
theme-update/
update.json
先回答这个问题。原本这三项全部来自主题设置,不属于挂件:
所以你点开挂件「没有地方可以写」,是因为表单里真的只有「背景图片」一个字段。这也解释了为什么以前想改头像必须跑去主题设置 —— 那是全站共用的一份,改了会影响所有用到它的地方。
这一版改成:四项都是挂件自己的字段。
按你选的方案「保留,挂件留空就回落」做的。取值顺序:
① 挂件自己填的 → ② 主题设置里的那一份 → ③ 主题内置兜底
所以升级后什么都不填,显示和现在一模一样;想给同一个侧栏放两个人的简介,各自填各自的就行。
表单里每个字段都写了「留空则使用…」。输入框显示的是你填的原始值(空就是空),下面的缩略图画的是前台最终会用的那一张 —— 这两个刻意分开,免得你以为已经填好了、保存后才发现存的是主题设置那份。
这是本轮最值得记的一条。症状:后台「外观 → 小工具」里,头像一旦是大图(比如手机原图 2136×2136),整个挂件被撑到两千多像素高、页面横向滚出两千多像素宽,图片把挂件糊住。
根因:老规则写的是
.k-main .sidebar .w-about .wrapper img { width:100px; height:100px } .k-main .sidebar .w-about .background { height:120px }
而后台挂件预览里根本没有 .k-main .sidebar 这层祖先(它把挂件直接塞进小工具面板)。于是这些规则一条都不生效,头像按原图尺寸铺开、背景高度塌成 0。
前台看起来正常,是因为前台恰好有那层祖先,问题被完整掩盖了。 这也是为什么这个 bug 能活这么久。
修法:让规则不再依赖祖先 —— 只作用于 .w-about 内部元素,并补 max-width / max-height 双保险。
.w-about
max-width
max-height
修复前后实测对比(同一张 2136×2136 原图,后台预览环境):
object-fit
fill
cover
url()
这几条都是量出来的,不是猜的:
display:block
text-align:center
.wrapper
.k-main .sidebar .w-about { padding:0 }
.k-main .sidebar .widget { padding:15px 30px }
(0,3,0)
(0,1,0)
!empty('0')
false
empty()
trim
另外,老规则必须删掉、不能"再补一条新的":老规则 (0,3,1) 压过新规则 (0,2,1),两条并存时老规则在前台永远赢、新规则只对后台生效 —— 那样前台等于没改。
(0,3,1)
(0,2,1)
几何判据的核心是「同一段 CSS,有无祖先表现必须一致」,而不是"本地看起来正常"—— 后者在修之前也是正常的(本地拼的 HTML 恰好带了祖先),会把 bug 藏死。
/\.w-about \.wrapper img \{[^}]*\}/
width
max-width:100px
box-sizing:border-box
substr_count('yang-media-preview') >= 2
class="yang-media-preview yang-media-preview-wide"
class="yang-media-preview
/
/(\.w-about)/
C:/.../PortableGit/(/.w-about)/
preg_replace
$n
export MSYS2_ARG_CONV_EXCL='*'
empty($instance[...])
widget_ad
tags
posts
$instance['introduce']
form()
$introduceRaw = isset($instance['introduce'])
update()
$new_instance
请升级到 3.2.51 后试一下:外观 → 小工具 → 个人简介,四项应该都在里面了。确认没问题我再关单。
按用户确认收尾,交付见上条发布评论。
交付版本:3.2.51(简介挂件实例字段化 + 撑爆真因是 CSS 依赖三层祖先,改成只依自身)
用户已验收,关闭本单。
No dependencies set.
The note is not visible to the blocked user.
来源
用户 2026-10-26 对侧栏「个人简介」挂件(
widget_about)提出的一组问题。用户原话:
需求清单(三件事,一单交付)
一、头像 / 昵称 / 简介:挂件表单里没有字段
现状盘点(已核对线上
yangyq.net):yang_option_image('a_gravatar')老杨)kratos_option('a_nickname')kratos_option('a_about')$instance['background'](唯一属于挂件的)⇒ 用户「点开挂件没地方写」是真的:三项全在主题设置里,挂件表单只有背景图一个字段。
要做的:挂件表单补齐三项 —— 头像(媒体库选图)、昵称、简介,都在挂件里直接填。
二、背景图入口难找
表单里其实有一个「背景图片」text 输入框 + 「选择图片」按钮,但混在表单里不显眼,用户直接说「没有地方修改」。
要做的:补图片缩略图预览(一眼看到当前用的是哪张),并让「选择图片 / 清除」更明确。
三、头像原图很大时撑爆挂件
根因(已用真实浏览器复现,非推测):
assets/css/kratos.css里的尺寸约束全是三段祖先选择器:.k-main .sidebar是前台文章页/首页的布局。挂件一旦出现在没有这层祖先的环境(WP 后台「外观→小工具」的挂件预览、区块小工具预览面板、侧栏样式被改写时),
这些规则一条都不生效 ⇒ 头像按原图尺寸铺开、背景塌成 0。
实测数据(线上
avatar.jpg原图 2136×2136):复现脚本:
_tooling/yang_theme_test/_diag_admin_preview.js(同一段 CSS,只切换有无祖先)。要做的:尺寸约束内聚到挂件自己身上,不依赖前台布局祖先。无论放进什么容器,
头像都是固定小圆、背景都是固定高、永远不可能溢出撑大挂件。
关键约束
线上
yangyq.net侧栏正用着「老杨 / 博士,非博学之士…」,升级后显示一个字都不能变。assets/js/widget.min.js已支持button[class*='upload_']+ 相邻 input 的模式)。!important硬压 —— 会让用户以后想改样式完全改不动。验收标准
表单
撑爆
.k-main .sidebar祖先的容器里渲染,头像渲染尺寸不随原图变大为什么单独建单
与 #20 的侧栏挂件一致性是不同问题:#20 修的是标题/id/URL 转义等已存在字段的问题,本单是 widget_about 缺 3 个字段(用户不知道头像昵称简介从哪来、改不了)外加一条独立的 CSS 祖先依赖 bug(大图撑爆)。可单独验收。
3.2.51 已发布到更新通道
包与 readme 已上传到
theme-update/,update.json已落 3.2.51。服务器主题目录仍是 3.2.50,未被覆盖 —— 请在 WP 后台点「升级」升级到 3.2.51,升级后我再关单。
一、你问的「图片和那句话到底从哪儿来」
先回答这个问题。原本这三项全部来自主题设置,不属于挂件:
yang_option_image('a_gravatar')kratos_option('a_nickname')kratos_option('a_about')$instance['background']所以你点开挂件「没有地方可以写」,是因为表单里真的只有「背景图片」一个字段。这也解释了为什么以前想改头像必须跑去主题设置 —— 那是全站共用的一份,改了会影响所有用到它的地方。
这一版改成:四项都是挂件自己的字段。
二、留空仍然回落主题设置(升级后显示不变)
按你选的方案「保留,挂件留空就回落」做的。取值顺序:
① 挂件自己填的 → ② 主题设置里的那一份 → ③ 主题内置兜底
所以升级后什么都不填,显示和现在一模一样;想给同一个侧栏放两个人的简介,各自填各自的就行。
表单里每个字段都写了「留空则使用…」。输入框显示的是你填的原始值(空就是空),下面的缩略图画的是前台最终会用的那一张 —— 这两个刻意分开,免得你以为已经填好了、保存后才发现存的是主题设置那份。
三、「撑爆」的真因:不是图片大,是 CSS 选择器依赖了三层祖先
这是本轮最值得记的一条。症状:后台「外观 → 小工具」里,头像一旦是大图(比如手机原图 2136×2136),整个挂件被撑到两千多像素高、页面横向滚出两千多像素宽,图片把挂件糊住。
根因:老规则写的是
而后台挂件预览里根本没有
.k-main .sidebar这层祖先(它把挂件直接塞进小工具面板)。于是这些规则一条都不生效,头像按原图尺寸铺开、背景高度塌成 0。前台看起来正常,是因为前台恰好有那层祖先,问题被完整掩盖了。 这也是为什么这个 bug 能活这么久。
修法:让规则不再依赖祖先 —— 只作用于
.w-about内部元素,并补max-width/max-height双保险。修复前后实测对比(同一张 2136×2136 原图,后台预览环境):
四、顺带修掉的两个小毛病
object-fit从fill改cover:以前 4000×100 这种超宽原图会被压扁变形,现在忠实裁切。正方形头像(你线上的真实情形)渲染结果完全不变。url()里的地址补了引号:媒体库文件名带空格很常见,没引号时 CSS 解析器会在空格处截断,整条声明作废、背景变白。五、守住的三条「不许退化」
这几条都是量出来的,不是猜的:
display:block会让它脱离父级的text-align:center,前台头像从居中变左对齐(.wrapper高度 50→100、x 坐标 1096→948)。.k-main .sidebar .w-about { padding:0 }不能省。通用规则.k-main .sidebar .widget { padding:15px 30px }是(0,3,0),.w-about只有(0,1,0);少了这条,挂件多出内边距、整体高 57px(284→341),头像和文字全部错位。!empty('0')是false,用empty()判空的站点填「0」会变成空串、前台回落主题设置,而后台看起来像"没保存成功"。统一改成判「trim后是不是空串」。另外,老规则必须删掉、不能"再补一条新的":老规则
(0,3,1)压过新规则(0,2,1),两条并存时老规则在前台永远赢、新规则只对后台生效 —— 那样前台等于没改。六、验证
几何判据的核心是「同一段 CSS,有无祖先表现必须一致」,而不是"本地看起来正常"—— 后者在修之前也是正常的(本地拼的 HTML 恰好带了祖先),会把 bug 藏死。
七、本轮踩到的坑(记入 pitfalls)
/\.w-about \.wrapper img \{[^}]*\}/命中的是注释里的示例代码,真规则原封不动 ⇒ 注入"成功"但无效果。改用真实规则完整内容做锚点。width不改max-width:max-width:100px仍把尺寸卡回 100px ⇒ 像素不变 ⇒ 误报"判据没牙齿"。box-sizing:border-box,实测就是 100×100。判据只有一边能过 = 量法错。substr_count('yang-media-preview') >= 2是个假判据:背景那个class="yang-media-preview yang-media-preview-wide"一个属性里就含 2 次,删掉头像那处后计数仍是 2。改成按class="yang-media-preview数元素。/开头的参数当路径重写:/(\.w-about)/→C:/.../PortableGit/(/.w-about)/,正则定界符被吞,preg_replace报错但$n保持 0,表现成"锚点未命中",会误判成靶子写错。本地预览需export MSYS2_ARG_CONV_EXCL='*'。empty($instance[...])判全文会永远红:widget_ad/tags/posts里十几处老写法不涉及「0」边界,判全文范围写宽了。精确到 nickname / introduce 两个字段才恰好。$instance['introduce']:form()里的$introduceRaw = isset($instance['introduce'])让它在注入后仍能 grep 到 ⇒ 误报"注入没生效"。改用只出现在update()里的$new_instance。请升级到 3.2.51 后试一下:外观 → 小工具 → 个人简介,四项应该都在里面了。确认没问题我再关单。
按用户确认收尾,交付见上条发布评论。
交付版本:3.2.51(简介挂件实例字段化 + 撑爆真因是 CSS 依赖三层祖先,改成只依自身)
用户已验收,关闭本单。