WordPress 还原古籍竖排乌丝栏的诗笺之美

在做网站的时候，很多站长都会遇到一个痛点：当我想在网页上展示一首唯美的中国古诗词，或者一段文言文时，现代网页默认的“横排排版”总觉得差点意思。

中国古典文学的意境，往往需要配合“从右向左、竖向排版”的格式，再加上淡淡的宣纸底色和犹如竹简般的“乌丝栏”（界行线），才能瞬间把读者拉入那种古色古香的氛围中。

今天，我就来分享如何不安装任何臃肿的插件，仅用一段纯 CSS 代码，将 WordPress 原生的“诗歌”区块，改造成绝美的“古籍竖格信笺”。

🎨 先看最终的配色与视觉效果

为了凸显古韵，我为这套排版设定了一套极其雅致的中国传统色：

底色：#f5f2e8 （温润如玉的宣纸米白）
文字/标题：#5d7b6f （沉稳有底蕴的复古绿）
界行线（乌丝栏）：#d8d4c7 （淡淡的茶色边框）
交互高亮：#a67b5b （当鼠标悬停时的米黄色点缀）

废话不多说，直接上干货教程！

天地玄黄 宇宙洪荒 日月盈昃 辰宿列张
寒来暑往 秋收冬藏 闰馀成岁 律吕调阳
云腾致雨 露结为霜 金生丽水 玉出昆冈
丨丨︽千字文︾

🛠️ 第一步：添加核心 CSS 代码

这段代码使用了现代 CSS 的 writing-mode 属性来实现竖排，并利用 linear-gradient 精准计算数学锚点，画出完美包裹文字的“乌丝栏”网格。

在你的 WordPress 后台，依次点击 外观 -> 自定义 -> 额外 CSS，将以下代码复制粘贴进去并保存：

/* =========================================
   终极无瑕疵版：修复左侧双线重叠的【古籍信笺】
   ========================================= */

pre.ancient-poetry-block,
.wp-block-verse.ancient-poetry-block {
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  box-sizing: border-box !important;

  font-family: "LXGW WenKai Screen", "Kaiti SC", "STKaiti", "BiauKai", "楷体", serif !important;
  font-size: 22px !important;
  letter-spacing: 4px !important;
  text-align: left !important;
  margin: 0 auto 20px auto !important;
  /* margin: 0 auto !important;
  margin-bottom: 20px !important; */

  /* 列宽与留白 */
  line-height: 44px !important;
  padding: 30px 0px !important;

  /* 配色 */
  color: #5d7b6f !important;
  background-color: #f5f2e8 !important;

  /* 竖格背景线 */
  background-image: repeating-linear-gradient(to left,
      transparent,
      transparent 43px,
      #d8d4c7 43px,
      #d8d4c7 44px) !important;

  /* 单双边栏设计（外边框） */
  border-top: 3px solid #d8d4c7 !important;
  border-bottom: 3px solid #d8d4c7 !important;
  border-right: 1px solid #d8d4c7 !important;
  border-left: 1px solid #d8d4c7 !important;
  border-radius: 2px !important;

  /* === 核心修复魔法：橡皮擦与阴影 === */
  /* inset 3px 0 0 #f5f2e8：在最左侧生成一条3px宽的米白色内阴影，
          完美遮挡任何试图靠近左边框的背景多余竖线，解决双线重叠！
          后面跟着的是正常的纸张立体外阴影 */
  box-shadow:
    inset 4px 0 0 #f5f2e8,
    2px 4px 15px rgba(0, 0, 0, 0.04) !important;

  max-height: 600px !important;
  overflow-x: auto !important;
  transition: all 0.4s ease !important;
}

/* 彻底清除 WordPress 主题自带的内鬼边框和样式 */
pre.ancient-poetry-block code,
.wp-block-verse.ancient-poetry-block code {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  /* 强行抹除内部边框 */
  box-shadow: none !important;
  /* 强行抹除内部阴影 */
  color: inherit !important;
}

/* 优雅的悬停互动 */
pre.ancient-poetry-block:hover,
.wp-block-verse.ancient-poetry-block:hover {
  border-color: #a67b5b !important;
  box-shadow:
    inset 4px 0 0 #f5f2e8,
    2px 6px 15px rgba(166, 123, 91, 0.15) !important;
}

✍️ 第二步：如何在文章中使用？

配置好 CSS 后，使用方法极其简单：

在 WordPress 写文章时，添加一个自带的 “诗歌” (Verse) 区块。
将你的诗词输入进去。
点击选中这个区块，在屏幕右侧的设置面板中，找到 “高级” (Advanced) 选项。
在 “额外的 CSS 类” 里，填入这段魔法代码：ancient-poetry-block

保存预览，你会发现，一段极其优雅、仿佛从古书上拓印下来的排版跃然纸上！

站长避坑指南（极其重要！）

在实际测试中，很多站长会遇到“右侧或左侧凭空多出一个空格子”的问题。
这其实不是代码的锅，而是 WordPress 编辑器的“隐形回车”机制造成的。

为了保证排版的完美无瑕，在“诗歌”区块打字时请务必牢记：
👉 首尾绝对不要留空行！
上来直接打第一个字，绝对不要在第一行前面按回车或空格；打完最后一个字的标点符号后，千万不要习惯性地再去按一下回车键！ 只要保证文字干干净净地填满区块，这套代码就能为你呈现完美的“乌丝栏”框选效果。

手机端破折号不旋转怎么办？

在移动端预览时，你可能会发现破折号（——）死活转不过来，依然横在文字中间。

终极绝招： 别用标点，直接改用汉字部首 “丨” (读音：gǔn)。

操作： 将 —— 手动替换为两个丨丨。
优势： 它是“汉字”而非“标点”，在任何手机系统下都天生垂直，且线条粗细与楷体完美统一，视觉效果更显古雅。

标点偏右：还原“乌丝栏”的传统美感

在专业的古籍排版中，逗号和句号不应呆在格子的正中央，而应偏向右侧格线。如果你的字体（如文楷）不支持自动位移，会导致标点孤零零地悬在路中央，破坏了文字的起承转合。

最简单的“物理”解决绝招：

直接弃用键盘输入的普通标点，复制并使用这两个“天生靠右”的专用符号：

竖排专用逗号：︐
竖排专用句号：︒
竖排专用书名号︽︾

为什么这个方法最管用？
这两个符号在 Unicode 字符库里的定义就是“垂直专用”。它们在物理形态上就长在方块的右上角。

这意味着，无论你使用什么字体、无论是在电脑还是手机端，它们都会精准地紧贴在右侧乌丝栏格线旁，瞬间让你的页面具备线装书般的排版高级感。

随心裁剪：如何为内容定制“纸张”规格？

在排版古籍时，我们经常遇到一个尴尬：内容只有两三行，纸张却横跨了整个屏幕；或者大段古文被挤在窄窄的框里。为了像真实信笺一样“因材施教”，我为这套样式设计了一套**“规格化指令”**。

通过在 WordPress 的“额外 CSS 类”中追加简单的代码（如 cols-8），你就可以直接规定这张“纸”拥有多少个格子。

核心逻辑：以“格”为单位

我们的每一列（格）宽度设定为 44px。因此，想要几格，只需通过 CSS 锁定对应的宽度：

三格短笺 (cols-3)：宽度 132px，适合书写格言、短句。
八格信笺 (cols-8)：宽度 352px，最经典的规格，适合律诗与短文。
十八格长卷 (cols-18)：宽度 792px，适合展现经文或长篇赋作。

操作方法：

在 WordPress 编辑器的“诗歌”区块右侧，“高级” -> “额外的 CSS 类” 中，输入组合指令即可（注意中间有一个空格）：

ancient-poetry-block cols-8

为什么这样设计？

空纸亦有格：即便你只写了一行字，系统也会根据你的指令预先铺满 8 个或 12 个精美的格子，保持视觉的完整性，拒绝“半截纸”的尴尬。
视觉平衡：你可以根据古文的字数，手动选择最符合美学比例的规格，让页面布局疏密有致，错落生辉。

结语

技术的终点是美学。一段简短的 CSS，就能打破现代网页横平竖直的枯燥，唤醒汉字本该有的骨骼与气韵。快去你的网站上试一试吧，让读者在你的文字里，体会一把“展卷阅读”的古典浪漫。

作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/shu/384.html