在 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主题元数据:

/*
 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安装:

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 ,内容为:

document.documentElement.classList.add('han-init');

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

<?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仅渲染文章部分

/* 取消边栏中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文章截稿时的代码镜像)。

参考文档

在 WordPress 主题中引入汉字标准格式》上有4条评论

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

    1. James Swineson 文章作者

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

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据