子凡作为一个泪雪网资深编辑与撰稿人,也阅历了无数的站点,就科技类的站点来说给人印象是最好的,当然可以能因为本人喜好科技生活方式之类的东西,同样作为一个注意细节和力求极致的我来说,不难发现别人编辑的文章格式都非常的规矩,特别是在中文、英文、数字之间用空格隔开,观感和阅读上显得更加分明,也就是说整体的排版会更加的好看,但是如果在编写文章的时候去添加,就会显得特别的繁琐和降低编辑或写作效率了。
其实子凡很早就注意到这个细节问题了,只是一时间拖延症犯了,所以迟迟没有去研究,就在上周我又看到一些人在分享 WordPress 实现中英文数字之间自动添加空格排版的方法,一看吓了我一大跳,太特么麻烦了,而且没有任何意义,需要添加 php 代码,引入 js 文件,还有添加 css 代码,看着就头疼,操作起来相当的没有任何意义,所以子凡决定用极致极简的方法来实现这样的一个排版个功能,不然怎么能够显得子凡是一个 WordPress 自身开发者呢?
废话不多说,方法很简单,依旧是在当前主题 functions.php 文件中添加以下代码即可:
- //WordPress 文章中英文数字间自动添加空格(写入数据库)
- add_filter( 'wp_insert_post_data', 'fanly_post_data_autospace', 99, 2 );
- function fanly_post_data_autospace( $data , $postarr ) {
- $data['post_title'] = preg_replace('/([\x{4e00}-\x{9fa5}]+)([A-Za-z0-9_]+)/u', '${1} ${2}', $data['post_title']);
- $data['post_title'] = preg_replace('/([A-Za-z0-9_]+)([\x{4e00}-\x{9fa5}]+)/u', '${1} ${2}', $data['post_title']);
- $data['post_content'] = preg_replace('/([\x{4e00}-\x{9fa5}]+)([A-Za-z0-9_]+)/u', '${1} ${2}', $data['post_content']);
- $data['post_content'] = preg_replace('/([A-Za-z0-9_]+)([\x{4e00}-\x{9fa5}]+)/u', '${1} ${2}', $data['post_content']);
- return $data;
- }
以上代码的功能主要用于在 WordPress 后台编辑时执行,也就是当我们发布、更新、保存文章的时候就会自动执行,写入数据库的内容都将是自动添加了空格的,并且处理的对象为文章标题与文章内容。也就是说只对新发布的文章生效,当然你也可以批量的更新一下文章也是可以生效的。
当然为了更加良好的兼容性或者另外一种方法,子凡还提供了另外一种方法,就是不直接在写入数据库前执行,而是当 WordPress 输出文章内容的时候执行,代码如下:
- //WordPress 文章中英文数字间自动添加空格(不写入数据库)
- add_filter( 'the_content','fanly_post_content_autospace' );
- function fanly_post_content_autospace( $data ) {
- $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;
- }
这样的方式就是当前端显示的内容时才会执行自动给中英文数字间添加空格,其它地方是不会别执行的,同时只针对文章内容生效,文章标题无法被格式化。
以上两段代码实现的方式各有不同,可以选其一使用,也可以两者同时使用,前者直接将格式化后的内容保存到数据库中,不论以何种方式调用或输出 WordPress 文章内容都已经是有空格了的。所以大家在选择和使用上记得先测试一下效果。
子凡自认为比网上那些 WordPress 文章内容自动添加空格格式化的教程都更简单更实用,当然如果你用的不是 WordPress,相信你也可以通过子凡以上代码中写的正则表达式替换来实现。好啦,到这里就该结束了。
历史上的今天:
- 2016: 由卢松松博客改版引发的一些思考
- 2015: 关于推出“合作博客”页面的说明
原文地址:https://zhangzifan.com/wordpress-post-autospace.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 泪雪博客 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
发表于2018-02-02 10:48 16楼
感觉第二个方法好,不写入数据库,较简约,编写时就省事多了,省的捣鼓那些符号。
@潇青博客各有优缺点吧,选择自己喜欢的一种就好
发表于2018-02-02 09:26 15楼
看需求吧,我觉得不加空格也挺好啊
@面料这个确实是看个人,根据中文排版要求是要加空格的,不过自己博客自己做主,随意就好
发表于2018-02-01 16:41 14楼
还是纯代码更好,第二种更简洁。
@99八十一第二种每次文章显示都要折腾一次,个人认为第一种方式效率更高,哪怕更换主题都不怕,因为是直接写入数据库
发表于2018-02-01 15:29 13楼
我也用上了。用的第二种![[挖鼻屎]](https://boke.yigujin.cn/wp-content/themes/Three/images/smilies/5.gif)
@京粉吧第二种不写入数据库,缺点就是每次前端显示都要转换折腾一次,个人更推荐第一种
@懿古今
但是第二种可以随时关掉啊
发表于2018-02-01 15:16 12楼
学习了![[赞]](https://boke.yigujin.cn/wp-content/themes/Three/images/smilies/36.gif)
发表于2018-02-01 14:00 11楼
支持一下!!!
发表于2018-02-01 10:49 10楼
代码我是一窍不通,安装了个插件解决的
@Mr.Li如果只是实现中英文数字之间添加空格,还是使用本文的代码比较简洁
发表于2018-02-01 10:40 9楼
很实用的教程。收藏了
发表于2018-02-01 10:34 8楼
wp总觉得有些拖慢速度
发表于2018-02-01 10:31 7楼
看了下正则表达式,似乎对代码高亮有影响
@狂放本站已用上这个功能,没有发现对代码高亮有影响。刚才也在本地测试了一下也没有影响,不够本站的代码高亮是变成HTML代码插入的,对于使用插件实现代码高亮是否有影响就不知道了。
@懿古今理论上来说对于使用高亮插件的会有兼容性隐患的!还是我们直接转换为HTML插入的完美,永远不要担心兼容性和失效!
![[哈哈]](https://boke.yigujin.cn/wp-content/themes/Three/images/smilies/3.gif)
发表于2018-02-01 09:38 6楼
感谢分享
发表于2018-02-01 09:13 5楼
在数字的两边加上空格吗?
@笛声在英文数字和汉字之间添加空格,这样排版会更好。
发表于2018-02-01 09:04 4楼
混个前排
发表于2018-02-01 08:54 地板
不错不错 可以试试
发表于2018-02-01 08:44 板凳
嘿嘿,我就来围观一下的!
发表于2018-02-01 07:49 沙发
不错的文章!