一并修掉上一轮列出的 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;,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 十组注入全部真红
该项目是原kratos的一个分支。
本项目仓库地址:
https://code.yangyq.net/laoyang/wordpress-kratos-yang
因为我需要一些定制的功能,就fork出来一个新的分支,自己用。如果你对原有的主题开发也有不满意的地方,欢迎使用我的这个版本。当然,版权仍然是属于原主题。
主题预览:老杨说话的地方。
该仓库已同步到多个git托管平台,包括Github、Gitee、 Gitlab和阿里云Code。这些代码库都和源库保持一致和同步,在任何平台上关注都可以。
Github因为网络原因,同步会出现失败情况,无法保证最新。
主要修改的地方主要包括:
- 为移动端增加了侧边栏显示。之前的版本,在移动端无法看到最近评论,这个版本加入了这个功能。当然只是在首页,在文章页面,为了减少数据传输,仍然没有侧边栏。
- 文章聚合widget,将最新文章优先显示。原来的版本,是显示最热门文章,但是不知道什么原因,热点文章总是没几个,而且我认为,大部分人上来,应该时主要为了看最新文章的吧。
- 删除了配置页面中的关于主题,精简、精简、精简。
- 删除了资源托管选项,删除了媒体托管选项。
- 文章配置中,删除了文章版权信息,删除了网易云音乐。
- 删除了社交相关配置选项。
- 增加了在页脚显示国旗的选项。
修复Bug
- 如果使用了插件,会改变comment的div名称,class="comments" 变成了comments-area,因此,评论的样式不好用了。
此时,在主题的额外CSS中添加:
.k-main .details .comments-area {
margin-top: 16px;
padding: 1.6px 16px 16px;
border-radius: 2px;
background-color: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.k-main .details .post-2 .comments-area {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
就可以了。该问题属于和插件的冲突问题,因此,在额外CSS中添加,不修改主题本身。
代码块样式
主题的 assets/css/kratos.css 里有一组 .k-main .details .article .content 下的
pre / code / kbd / pre code / pre ol / pre li 规则,负责代码块与行内代码的底色和间距。
这六条曾经在压缩产物里整组丢失过:某次改动把单行压缩版 kratos.min.css 手工展开成可读格式,
展开时漏掉了这一整段,而原始未压缩的 kratos.css 里它们是齐全的,导致源与产物对不上。
表现是行内 code 与 kbd 没有样式(代码块因为插件 Prism 主题的覆盖才没露馅)。
改完 CSS 后请用压缩器重新生成产物,不要手工维护 kratos.min.css:
npx clean-css-cli@5.6.3 -o assets/css/kratos.min.css assets/css/kratos.css
主题自动更新
更新走的是一份静态 JSON + 一个 zip 包,由 inc/update-checker/(Plugin Update Checker 4.9)消费。
- 元数据地址:
https://yangyq.net/theme-update/update.json(定义在inc/theme-core.php,可用wp-config.php里的YANG_THEME_UPDATE_URL覆盖) - 发布目录:站点根下的
theme-update/,内容只有三样:
theme-update/update.json # 版本元数据
theme-update/kratos_yang.zip # 主题包,解压后是 kratos_yang/ 目录
theme-update/readme.html # 「详情」页,可省
update.json 格式(version 与 details_url 必填):
{
"version": "3.3.0",
"details_url": "https://yangyq.net/theme-update/readme.html",
"download_url": "https://yangyq.net/theme-update/kratos_yang.zip"
}
发布新版本的顺序
先改 style.css 里的 Version,再打包,否则 WordPress 认为没有新版本,不会提示升级。
- 改
style.css的Version(例如 3.2.2 → 3.3.0) - 打包:
zip -r kratos_yang.zip kratos_yang -x "*.DS_Store" "*/.git/*" - 传
kratos_yang.zip到theme-update/ - 最后才改
update.json里的version
第 4 步放最后,是因为 WordPress 见到新版本号就会立刻允许升级; 若此时 zip 还是旧的,等于发了个指向旧包的更新,装完版本号没变(或者直接坏掉)。
⚠️ 自动升级会覆盖主题目录
WordPress 升级主题的做法是删掉整个 kratos_yang/ 再解压新包
(wp-admin/includes/class-theme-upgrader.php 里 clear_destination => true,
随后 delete_old_theme() 递归删除)。所以任何直接改在服务器主题目录里的东西都会丢,
包括手工打的补丁(例如曾经直接在 footer.php 里加的 Prism 脚本)。
自定义样式不再放主题目录。 早期版本有一个 custom/ 目录(custom.css /
custom.js / custom.php),是给用户随手加样式的入口,但它位于主题目录内,
每次升级都会被清空 —— 而且 custom.php 会被 require,等于允许在主题里执行任意
PHP 代码。该模块已在 3.2.2 移除,改为后台选项:
后台 → 主题选项 → 自定义代码 → 自定义 CSS / 自定义 JS
这两段内容存在数据库的 kratos 选项里,升级、重装、改主题目录名都不受影响。
它们分别在主题样式表和主题脚本之后加载,优先级最高。
几个要点:
- 不需要写
<style>/<script>标签,直接写 CSS / JS 内容 - 内容不会被当作 HTML 处理,
>、<、~、反斜杠转义(如content: "\f101")都原样保留 - 想彻底清空,把框里内容删掉保存即可(空值会覆盖内置默认值)
- 点“恢复默认”会把「自定义 CSS」还原成主题自带的默认样式
换域名 / 退役旧域名
以前更新元数据放在独立子域名上,现在收进主站,省掉一个站点、一套证书和一份备案。 切换时注意:
- 先把
theme-update/部署到主站并确认update.json能直接访问(返回 JSON,不是 404 或首页) - 再发布带新地址的主题版本
- 旧版本的主题仍会去老地址拉更新,所以旧域名的
update.json要在确认所有站点都升级完之后才能下线