WordPress Hueman：开启沉浸式阅读，提升正文可读性与视觉体验
1、在用 Hueman 主题搭建博客长期写作后，发现一个很影响读者体验的痛点：如图1
默认布局两侧侧边栏占用屏幕超过 1/3 宽度，真正正文内容区域非常窄：
宽屏显示器下左右大片空白，内容局促压抑；
文章行数被挤压变多，阅读视线来回跳动，疲劳感强；
技术长文（PHP、MySQL、TiDB 架构干货、ES 深度分析）代码多、段落长，窄屏阅读极易分心；
原创千篇干货内容，却因为排版宽度问题，拉低整体专业质感与停留时长。
2、Hueman 原生短板说明
主题默认双栏结构，PC 端强制收缩主体宽度；
仅后台调容器宽度治标不治本，侧边栏依旧占位；
无官方自带「阅读模式 / 全屏专注模式」开关；
手动改 CSS 容易升级失效、布局错乱，对非前端友好度低。
3、不修改主题代码、不改动底层布局，只用极简插件，一键实现「隐藏侧边栏 + 全屏宽屏 + 护眼纯净沉浸式阅读」，是性价比最高、最稳的优化方案。可是，最后发现没有贴合需求的插件
4、最后决定手动实现。后台搜索：Simple Custom CSS and JS，安装并启用。后台进入：Custom CSS & JS
添加 CSS（放 Header，规范）
点击 Add Custom CSS
标题：Read Mode Style
位置：Header（默认）
粘贴以下代码：如图2
/* 沉浸式阅读按钮 <em>/
.read-mode-btn {
position: fixed;
right: 20px;
bottom: 20px;
background: #111;
color: #fff;
padding: 8px 16px;
border-radius: 5px;
z-index: 99999;
cursor: pointer;
}
/</em> 阅读模式：隐藏侧边栏、正文加宽 */
body.read-active .sidebar,
body.read-active .sidebar-secondary {
display: none !important;
}
body.read-active .container {
max-width: 100% !important;
width: 100% !important;
}
body.read-active .content-area {
max-width: 1100px !important;
margin: 0 auto !important;
float: none !important;
}
5、添加 JS（放 Footer，不阻塞渲染）
点击 Add Custom JS
标题：Read Mode Toggle
位置：Footer（关键：放页脚）
粘贴以下代码：如图3
//仅文章页输出按钮
if(document.body.classList.contains("single-post")){
let btn = document.createElement("div");
btn.className = "read-mode-btn";
btn.innerText = "沉浸式阅读";
btn.onclick = function(){
document.body.classList.toggle("read-active");
this.innerText = document.body.classList.contains("read-active")
? "退出阅读"
: "沉浸式阅读";
};
document.body.appendChild(btn);
}
6、点击 沉浸式阅读 按钮后，左右两侧是变化为空白了。可是文章正文的宽度没有变化。最终放弃让用户自行选择 是否沉浸式 的方案。而是默认就是内容占据整个宽度了。自定义 – 主体框架设计 – 单篇文章设置 – 列布局：文章页 – 选择 1 列，然后发布。如图4
7、最终效果，符合预期。博客内容正文占据网站页面的整个宽度。阅读体验提升。如图5
