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

张子凡 WordPress建站 2018-01-15 10:03:52 阅读(...) 评论(18)

子凡作为一个泪雪网资深编辑与撰稿人,也阅历了无数的站点,就科技类的站点来说给人印象是最好的,当然可以能因为本人喜好科技生活方式之类的东西,同样作为一个注意细节和力求极致的我来说,不难发现别人编辑的文章格式都非常的规矩,特别是在中文、英文、数字之间用空格隔开,观感和阅读上显得更加分明,也就是说整体的排版会更加的好看,但是如果在编写文章的时候去添加,就会显得特别的繁琐和降低编辑或写作效率了。

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

其实子凡很早就注意到这个细节问题了,只是一时间拖延症犯了,所以迟迟没有去研究,就在上周我又看到一些人在分享 WordPress 实现中英文数字之间自动添加空格排版的方法,一看吓了我一大跳,太特么麻烦了,而且没有任何意义,需要添加 php 代码,引入 js 文件,还有添加 css 代码,看着就头疼,操作起来相当的没有任何意义,所以子凡决定用极致极简的方法来实现这样的一个排版个功能,不然怎么能够显得子凡是一个 WordPress 自身开发者呢?

废话不多说,方法很简单,依旧是在当前主题 functions.php 文件中添加以下代码即可:

1
2
3
4
5
6
7
8
9
//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 输出文章内容的时候执行,代码如下:

1
2
3
4
5
6
7
//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,相信你也可以通过子凡以上代码中写的正则表达式替换来实现。好啦,到这里就该结束了。

除非注明,否则均为泪雪博客原创文章,转载请以链接形式标明本文地址

本文链接:https://zhangzifan.com/wordpress-post-autospace.html

发表评论

  1. 龙笑天
    1楼
    龙笑天 3个月前 (01-29)

    你这仅仅是对文章内容的排版… 而不是整个页面~

    • 张子凡
      回复
      张子凡 3个月前 (01-29)
      回复 @龙笑天 :肯定主要是对文章内容啊,如果文章内容都符合了,其实整个页面也都排版了。
      • 龙笑天
        回复
        龙笑天 3个月前 (02-02)
        回复 @张子凡 :也对 主要看文章内容~
  2. 菊
    2楼
    3个月前 (01-22)

    更新的话会不会重复添加空格?

    • 张子凡
      回复
      张子凡 3个月前 (01-23)
      回复 @菊 :重复添加空格这样的低级问题我想我还是能够考虑到的
  3. thornbird
    3楼
    thornbird 3个月前 (01-18)

    我是这样认为的能用插件搞定的 坚决不用代码 看的头晕

  4. 蝈蝈要安静
    4楼
    蝈蝈要安静 3个月前 (01-17)

    如果已经手动敲了空格还会再加空格吧!

    • 张子凡
      回复
      张子凡 3个月前 (01-17)
      回复 @蝈蝈要安静 :你觉得会出现这次冲突的事情吗?
      • 蝈蝈要安静
        回复
        蝈蝈要安静 3个月前 (01-18)
        回复 @张子凡 :不会
        • 张子凡
          回复
          张子凡 3个月前 (01-18)
          回复 @蝈蝈要安静 :这就对了啊
  5. 大事记
    5楼
    大事记 3个月前 (01-17)

    教程很不错,能用内核解决的,肯定不用js什么的,嘿嘿~~~~对啦,你谷歌谷歌收入怎么样

    • 张子凡
      回复
      张子凡 3个月前 (01-17)
      回复 @大事记 :每天估计有0.0几的美元收入吧,好的话可能有0.1美元,少得可怜
  6. 车漆快修
    6楼
    车漆快修 3个月前 (01-17)

    感谢楼主分享,刚好想用wordoress做站

  7. 明月登楼
    7楼
    明月登楼 3个月前 (01-15)

    晕,比较纠结用哪个代码了?

    • 张子凡
      回复
      张子凡 3个月前 (01-15)
      回复 @明月登楼 :两个一起用,一个是保证以后的内容,一个是兼容之前的内容,当然你也可以使用第一个,让后把之前的文章更新一遍就搞定了。
      • 魏艾斯博客
        回复
        魏艾斯博客 3个月前 (01-29)
        回复 @张子凡 :如果用第一个代码后,怎么批量更新前面几百篇文章?手动太慢了,有自动的方法实现吗?
        • 张子凡
          回复
          张子凡 3个月前 (01-29)
          回复 @魏艾斯博客 :好像无法一次性更新几百篇,顶多WordPress批量编辑,一页最多20篇吧