代码实现 WordPress 文章中英文数字间自动添加空格

我们做网站内容,主要还是以文字图片混排来实现的,那么中英文混排的时候,有一个小细节不知道大家注意到没有,就是 WordPress 文章中英文数字间添加空格。一篇排版美观合理的文章,能给访客带来很好的阅读体验,同时可以提高二次回访率;同时搜索引擎在收录、索引文章时,对于文章排版的要求也是存在的,所以做好网站文章的排版是重要的“小细节”。所以今天用纯代码实现WordPress 文章中英文数字间自动添加空格

对于这种中英文数字间添加空格的调整,不但有助于提升用户体验度,还对于 SEO 有一定好处,搜索引擎蜘蛛也会按照一定规律来读取文章内容。

方法很简单,是在当前主题 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; }

这样的方式是前端显示内容时才会执行,自动给中英文数字间添加空格,同时只针对文章内容生效,文章标题无法实现。

以上两段代码的实现方式不同,可以使用一种,也可以同时使用。

手动批量修正已发文章的方法:进入 wp 后台,标题打钩选择本页全部文章,点击“批量操作”旁边的倒三角选择“编辑”>应用,忽略中间的选项,直接点击最右侧的更新,这样可以一次性改正一页 20 个文章,重复操作就可以快速把以前的文章全都修正过来了。

本文代码来源自泪雪博客 https://zhangzifan.com/wordpress-post-autospace.html

WordPress 文章中英文数字间自动添加空格的代码,替代了插件,节约了系统资源,可以手动批量修正已发的文章,经过魏艾斯博客使用方法一(也就是修改结果写入数据库)把博客所有文章都批量修正了一遍,用户体验还是很不错的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏磐创AI技术团队的专栏

机器学习新手必看:Jupyter Notebook入门指南

23620
来自专栏云计算教程系列

如何在Python 3中安装pygame并创建用于开发游戏的模板

Pygame库是专门为了帮助您做出的游戏和其他多媒体应用Python编程语言的一个开放源代码模块。pygame 构建于高度可移植的SDL(Simple Dire...

80320
来自专栏一个会写诗的程序员的博客

一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念 #例子和脚手架Dva 图解K

DvaJS: React and redux based, lightweight and elm-style framework.

21930
来自专栏何俊林

SuperIndicator开源库源码分析

背景:为什么有这个库,在经常开发中,会碰到,显示广告位图片,精彩推荐,及比较好的,希望能直观显示到用户看的。那么SuperIndicator正是这样一个类库。 ...

20550
来自专栏大史住在大前端

【Recorder.js+百度语音识别】全栈方案技术细节

技术栈:React+recorder-tool.js +recorder.js + Express + Baidu语音识别API

54130
来自专栏人工智能头条

机器学习新手必看:Jupyter Notebook入门指南

21640
来自专栏进击的君君的前端之路

AMD、CMD、RequireJS

15430
来自专栏腾讯IVWEB团队的专栏

移动端 tryjs 异常捕获

上周处理了一下群活动的 badjs ,第一步是摆脱` Script error .`,捕获异常栈,找到自己是错在哪里? 分享一下移动端 tryjs 异常捕获的步...

37000
来自专栏大史住在大前端

javascript基础修炼(9)——MVVM中双向数据绑定的基本原理

MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Application的底层思想,如果你也因为自己学习的速度拼不过开发框架版本迭代...

11520
来自专栏小狼的世界

学习使用YUI3

对YUI一直很有好感,最近开始看了看YUI CSS GRID,发现这个理念非常好,非常有利于我们工作效率的提高,特别是熟悉了这套CSS之后,我们就不必每一个项目...

9020

扫码关注云+社区

领取腾讯云代金券