WordPress 文章中英文数字间自动添加空格

最近一段时间一直断断续续在折腾这个小站，这里感谢一众博友给提的建议和帮助！前几天S大哥又提到说现目前这这版界面的英文字体太窄了，建议换个大气一点的……我一琢磨好像是偏窄，看着有点小气且累眼睛。本站已经很重了，所以我并不打算引入额外的网络字体，仅是从网页常用字体中去挨个换了一一对比，本来已经换上了衬线体 Times，但看了半天觉得还是略显杂乱，故又给撤下了。

随后我想到另外两个办法：1、增加字号；2、在中文和英文之间添加空格。对于加大字号这事儿是个很复杂的议题，它涉及到了网站目标访客的喜好、浏览器尺寸、以及自身内容排版等等，我个人比较喜欢书伴和The Type的排版样式，尝试抄过但不得精髓，这里先就不展开了。

至于咱网页中的中文字和英文、数字之间是否加空格的问题，我在这里发起一项投票看看各位博友的意见，您各位有何想法欢迎在评论区留言，特别是对本站排版的建议和意见，那将对我非常重要！

1、中文字和英文、数字之间应该添加空格么？

很遗憾，中文互联网界并没有一个明确的标准和指导规范，声明网络媒体中文字符和西文字符之间是否应该加空格。Kevin's 有一段时间发文比较仔细，会刻意地在英文和数字两侧敲上空格，但就像上边投票说的，慢慢儿的后来觉得麻烦就没有坚持下来，索性就都不加了。我个人觉得加上空格的排版会好看一些，一些注重用户交互的大站也都有空格，比如 Apple、Google、Microsoft、The Type 等。当然，中西文之间没加空格的大站也特别多，有些网站甚至是混乱的、随意的，没个章法。

这里节选一篇 2016 年发布在少数派上的旧文，给做个参考：

在西文的字体排印中早已形成了成熟的字距调整的规范，而由于中文和西文的分词方式的不同也导致了中文在这方面的种种欠缺。因为中文书写体系的特点，汉字靠标点符号的控制节奏，按字分写，不按词分写。而西文按分词写，所以单词间的空白就是必须。不过韩文却是一个非主流的存在，是有分词空格的，在语法上有要求。

其实在印刷排版行业中一直有着在中西文字体之间添加空白的习惯，以此来使得印刷物更具有可读性以及视觉上的美感。但在数字世界中，也仅有小部分人有着这样的习惯。除了 Adobe 家部分软件以及 Microsoft Word 在中西文混排时对汉字和西文之间的间距会有优化之外，大多数的软件或服务并没有提供这样的支持，我们只能通过手动添加空格的方式来达成手动控制。

我在中西文之间加入空格是当年在 V2EX 受到站长 Livid 的影响，他曾经在博客写过一篇文章叫做《中文 Web 阅读体验》，其中强调了基本的中英文空格的使用规则：

中文正文及标题中出现的英文及数字应该使用半角方式输入，并且在左右各留一个半角空格。如果这些这些半角英文及数字的左边或者右边紧接着任何的中文全角括号或者其他标点符号的话，则不需要加入半角空格。

同时，在 W3C 于 2015 年出炉的《中文排版需求（2023 版已更新）》也规范了中西文排版中加入空格的标准：

横排时，西文使用比例字体；阿拉伯数字则常用比例字体或等宽字体。原则上，汉字与西文字母、数字间使用四分之一个汉字宽的字距或空白。但西文出现在行首或行尾时，则无须加入空白。

在中西文混排时加入空格，更大的作用是「视觉美化」，在易读性也大大加强，两种文字的交界处平滑的过渡，满足双方文字的需求，可以让文本的节奏尽量平稳。

2、WordPress 文章中英文数字间自动添加空格

至此你可能对是否在中西文之间添加空格有了自己的想法，如果你想对 WordPress 文章中的中文、英文、数字间都加上空格，请继续往下看。这里，Kevin 提供两种简单的方案实现在 WordPress 文章中英文数字间自动添加空格，它们派排除了图片和链接中的混排内容，不会导致附件和超链接失效。这两段代码的唯一区别是：是否将空格写入数据库，具体怎么选择就看你自己了。

WordPress 文章中英文数字间自动添加空格（写入数据库）

将以下代码添加进主题function.php中，这段代码是一个 WordPress 过滤器函数，函数使用了正则表达式来匹配中文、英文和数字，用于在将文章数据写数据库之前，自动在中文、英文和数字之间添加空格，这样的处理可以让文章在展示时更加美观和易读。

// WordPress 文章中英文数字间自动添加空格（写入数据库），文章更新或发布时生效
add_filter('wp_insert_post_data', 'add_space_between_chinese_and_alphanumeric', 99, 2);

function add_space_between_chinese_and_alphanumeric($data, $postarr) {
    // 添加空格的正则表达式模式，利用负向零宽断言排除了<img>标签
    $pattern = '/([\x{4e00}-\x{9fa5}])(?![^<]*>)([A-Za-z0-9_])|([A-Za-z0-9_])(?![^<]*>)([\x{4e00}-\x{9fa5}])/u';

    // 替换文章标题和内容中的中文与英文/数字之间添加空格
    //$data['post_title'] = preg_replace($pattern, '${1}${3} ${2}${4}', $data['post_title']);
    $data['post_content'] = preg_replace($pattern, '${1}${3} ${2}${4}', $data['post_content']);
    return $data;
}

以上代码的功能用于在 WordPress 后台编辑时执行，也就是当我们发布、更新、保存文章的时候就会自动执行，写入数据库的内容都将是自动添加了空格的，并且处理的对象为文章标题与文章内容。Keinv's 注释了控制标题的那行代码，仅让该函数作用于正文。如果你想要你历史文章都自动修改加上空格，可以在 WordPress 文章栏选中所有文章批量更新一下实现。

---

WordPress 文章中英文数字间自动添加空格（不写入数据库）

当然为了更加良好的兼容性这里提供了另外一种方法，不用于上述代码使用了 the_content 过滤器，做到当 WordPress 输出文章内容的时候执行添加空格的操作，代码如下：

// WordPress 文章中英文数字间自动添加空格（不写入数据库）
add_filter( 'the_content','add_space_between_chinese_and_alphanumeric' );
add_filter( 'the_title','add_space_between_chinese_and_alphanumeric' );

function add_space_between_chinese_and_alphanumeric( $data ) {
    // 在中文字符与英文字母/数字之间添加空格，但排除 <img> 标签内的内容
    $data = preg_replace('/([\x{4e00}-\x{9fa5}])(?![^<]*>)([A-Za-z0-9_])/u', '${1} ${2}', $data);
    $data = preg_replace('/([A-Za-z0-9_])(?![^<]*>)([\x{4e00}-\x{9fa5}])/u', '${1} ${2}', $data);
    return $data;
}

第二种方法的好处是：1、不用修改原始数据库，哪天不想要空格了直接撤掉；2、一次性给所有文章中文字符与西文字符和数字间添加上了空格；不过若上长期使用的话，我更偏向于采用直接更改数据库的方法一。

基于以上代码，你可以简单修改其中的正则表达式实现比如：让 WordPress 文章中自动给数字两边加空格，或者让 WordPress 文章中自动给中英文之间加空格等个性化操作，不在话下。