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
