WordPress 的默认主题对于一个中文撰写者而言有诸多不便之处。因此，我在本站引入了汉字标准格式相关文件。
什么是“汉字标准格式”？
在此直接引用官网首页上的说明：
「漢字標準格式」是一套支援各種印刷效果的Sass + JavaScript排版框架，包含相鄰文字裝飾線跳脫、漢 字 標 音 、着重號、標點符號修正、中文四大印刷體、漢字－西文mixed間隙、「標點『擠壓』與『懸掛』」、章節邊界調整……
集成「語意樣式標準化」「文字設計」「高級排版功能」三大模組，並為繁體中文、簡體中文及日文配置的本地化設計，「漢字標準格式」提供了萬維網時代的漢字問題解決之道。
在已有的 WordPress 主题上引入汉字标准格式
本站一直以来使用Twenty Twelve这个2012年发布的古老主题。我将以此为例展示如何修改这一主题来引入汉字标准格式。
准备工作
注意：我不推荐在线上博客进行代码修改和调试，因为这会带来潜在的安全风险。在本地或者测试服务器上搭建一个服务器镜像（或者全新安装的WordPress），然后调试代码。
在开始之前，请检查以下注意事项：
- 打开调试模式：在 /wp-config.php 中找到 define('WP_DEBUG', false); 一行，将 false 改为 true；
- 关闭所有缓存和CDN相关的选项，例如插件WP Super Cache或是CDN Enabler。同样的，如果你的服务器提供商或ISP提供可选的缓存功能，关闭它们。这些功能会给调试带来麻烦。
开始
步骤一：创建一个子主题
建立一个空白文件夹，在内部新建一个名为 style.css 的文件，在其头部以CSS注释的形式添加WordPress主题元数据：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Theme Name: Twenty Twelve Child Theme URI: http://example.com/twenty-twelve-child/ Description: Twenty Twelve Child Theme Author: John Doe Author URI: http://example.com Template: twentytwelve Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, two-columns, right-sidebar, responsive-layout Text Domain: twenty-twelve-child */ |
步骤二：获取汉字标准格式相关文件
使用Bower安装：
|
1 |
bower install --save Han |
其他安装方法参见官方文档。如果使用其他方法安装，请注意以下代码中的路径是否正确。
步骤三：在页面加载时插入相应文件
根据官方文档中的说明，如果 <html>带有 class="han-init"属性，Han.js会在DOM ready时自动渲染整页。同时，Han.js还带有完善的API。这意味着我们有多种方法来完成页面渲染操作：
- 在Han.js加载之前动态添加 class="han-init"属性；
- 修改 header.php 来插入 class="han-init"属性；
- 在Han.js加载后通过JavaScript调用 Han.init() ；
- ……
为了实现简便，我选用了第一种方法。首先新建文件 /js/enable-han.js ，内容为：
|
1 |
document.documentElement.classList.add('han-init'); |
然后在 /functions.php 中引入所有必要的文件，设定好加载顺序：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php function theme_enqueue_styles() { wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css'); wp_enqueue_style('han', get_stylesheet_directory_uri().'/bower_components/Han/dist/han.min.css', array('parent-style') ); wp_enqueue_script('enable-han-js', get_stylesheet_directory_uri().'/js/enable-han.js'); wp_enqueue_script('han-js', get_stylesheet_directory_uri().'/bower_components/Han/dist/han.min.js', array( 'enable-han-js' ), false, true); } add_action('wp_enqueue_scripts', 'theme_enqueue_styles'); |
如果要覆盖上级主题根目录下的某个PHP文件，直接在子主题根目录创建同名文件即可。至于CSS和JS内部引用文件的路径问题，WordPress加载器对此无能为力，需要自己处理。
在修改 /functions.php 时要注意，对于子主题， get_template_directory_uri() 获取到的是上级主题的URI， get_stylesheet_directory_uri() 获取到的是子主题的URI，这一点官方文档中没有提及。
千万不要忘记引入上级主题的 style.css ！
步骤四：修复由于引入CSS造成的一些原有组件显示不正确问题
由于引入了新的CSS，边栏等处可能无法正确显示。以下代码为部分（我遇到的）问题的解决方案。如果想尽量避免这类问题，也可以设置Han.js仅渲染文章部分。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 取消边栏中ul的左margin，否则会向右偏移 */ aside ul { padding-left: 0; } /* 修复文章标题过高问题 */ h1.entry-title { margin: auto; } /* 按照中文规范，禁用引用文字的斜体 */ blockquote { font-style: normal !important; } |
安装主题
将整个文件夹复制到WordPress安装目录下的 /wp-content/themes 文件夹，然后在仪表盘中启用即可。
扫尾工作
如果一切正常，请关闭调试模式：在 /wp-config.php 中找到 define('WP_DEBUG', true); 一行，将 true 改为 false，然后启用所有先前禁用的项目，并测试它们是否正常工作。
附录
注：由于WordPress的可视化编辑器不完全支持汉字标准格式所使用的HTML tag，并且在可视化转换时会破坏部分tag（例如注音），请尽量使用文本编辑模式来写作。
本文中提到的所有代码已经发布在Github（文章截稿时的代码镜像）。
Pingback引用通告： 「汉字标准设计标准使用测试」 - BeSteve
謝分享，網誌的排版看起來很舒服 🙂
理论上来说，直接把你在GitHub上的repo clone到wp-content/themes文件夹下，然后启用之，可行么？
测试了一下，似乎和官网给出的效果不太一致。
https://blog.ring0.xyz/2016/03/28/test/
https://css.hanzi.co/manual/yangshi_biaozhunhua
理论上你可以直接用那个 repo 的最新代码。这个东西的一部分渲染是用 JS 完成的，我改了一些渲染选项，所以看起来和官网的效果可能不一致。