在 WordPress 主题中引入汉字标准格式

WordPress 的默认主题对于一个中文撰写者而言有诸多不便之处因此我在本站引入了汉字标准格式相关文件

什么是汉字标准格式

在此直接引用官网首页上的说明

漢字標準格式是一套支援各種印刷效果的Sass + JavaScript排版框架包含相鄰文字裝飾線跳脫ㄏㄢˋˋhànzìㄅㄧㄠㄧㄣbiāoyīn着重號標點符號修正中文四大印刷體漢字西文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主题元数据

步骤二获取汉字标准格式相关文件

使用Bower安装

其他安装方法参见官方文档如果使用其他方法安装请注意以下代码中的路径是否正确

步骤三在页面加载时插入相应文件

根据官方文档中的说明如果 <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 内容为

然后在 /functions.php 中引入所有必要的文件设定好加载顺序

如果要覆盖上级主题根目录下的某个PHP文件直接在子主题根目录创建同名文件即可至于CSSJS内部引用文件的路径问题WordPress加载器对此无能为力需要自己处理

在修改 /functions.php 时要注意对于子主题 get_template_directory_uri() 获取到的是上级主题URI get_stylesheet_directory_uri() 获取到的是子主题URI这一点官方文档中没有提及

千万不要忘记引入上级主题的 style.css 

步骤四修复由于引入CSS造成的一些原有组件显示不正确问题

由于引入了新的CSS边栏等处可能无法正确显示以下代码为部分我遇到的问题的解决方案如果想尽量避免这类问题也可以设置Han.js仅渲染文章部分

安装主题

将整个文件夹复制到WordPress安装目录下的 /wp-content/themes 文件夹然后在仪表盘中启用即可

扫尾工作

如果一切正常请关闭调试模式/wp-config.php 中找到 define('WP_DEBUG', true); 一行true 改为 false然后启用所有先前禁用的项目并测试它们是否正常工作

附录

由于WordPress的可视化编辑器不完全支持汉字标准格式所使用的HTML tag并且在可视化转换时会破坏部分tag例如注音请尽量使用文本编辑模式来写作

本文中提到的所有代码已经发布在Github文章截稿时的代码镜像

参考文档

在 WordPress 主题中引入汉字标准格式4个想法

  1. Pingback引用通告 汉字标准设计标准使用测试 - BeSteve

    1. James Swineson 文章作者

      理论上你可以直接用那个 repo 的最新代码这个东西的一部分渲染是用 JS 完成的我改了一些渲染选项所以看起来和官网的效果可能不一致

      回复

发表回复

您的邮箱地址不会被公开 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论了解你的评论数据如何被处理