WordPress 实现中英文数字之间自动加空格排版

2017-09-06 15:19 678 2 条评论 龙笑天下
Dragon主题购买

WordPress 实现中英文数字之间自动加空格排版

通常来说中文与英文、中文和数字之间加上空格的排版会更加好看,但是如果让我们在编辑文章的时候人工添加,感觉非常繁琐和让人厌烦,所以今天龙笑天下就来跟大家介绍一下 WordPress 如何实现中英文数字之间自动加空格的排版技巧。几种方法,任选其一即可。(PS:其实很早就想加上这个功能了,但奈何懒癌发作...)

方法 1

第一步:html 或 body 标签中加入 han-la 类

在 html 标签中添加 class=”han-la”(一般在 header.php 文件中)。但是并不是硬性规定,现在很多博客都是通过功能函数动态加载 class 类,那么同样的,你也可以将这个 han-la 类动态加载到 body 中去。将类加载到 html 标签中的方法就不说了,这里说下怎么加载到 body 标签中,当然在这里,你的主题应该是使用了body_class()这个标准函数的。

/**
* WordPress 实现中英文数字之间自动加空格排版 - 龙笑天下
* https://www.ilxtx.com/wordpress-text-autospace.html
* 在 body 标签中加入 han-la 类
*/
function lxtx_add_hanla_to_body_class( $classes ) {
    $classes[] = 'han-la';
    return $classes;
}
add_filter('body_class', 'lxtx_add_hanla_to_body_class');

另外,值得一提的是该函数也会暴露一个问题,具体见下文:

(全网独家)如何正确的避免你的 Wordpress 管理员登录用户名被暴露-BG
(全网独家)如何正确的避免你的 Wordpress 管理员登录用户名被暴露

(全网独家)如何正确的避免你的 Wordpress 管理员登录用户名被暴露

昨晚在研究评论结构时,网站右键查看源代码,无意间发现自己的管理员用户名被暴露了... 图 1 评论中暴露登录用户名 如上图,在博主的评论的 class 里看到的 test10 是我本地的测试网站的管理...

第二步:引入 js 文件

在 jquery 文件后面引入 text-autospace.min.js 或 text-autospace.js,下载地址为:https://github.com/mastermay/text-autospace.js

/**
* WordPress 实现中英文数字之间自动加空格排版 - 龙笑天下
* https://www.ilxtx.com/wordpress-text-autospace.html
* 加入 text-autospace.min.js 文件
*/
function lxtx_styles_scripts() { 
    //全局加载 js 脚本
    wp_enqueue_script( 'han-la-js', get_template_directory_uri() . '/includes/js/text-autospace.min.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'lxtx_styles_scripts' );

注意修改代码中第 8 行的文件引用路径哦~

最后一步:添加 CSS 代码

将以下代码加入你的 style.css 文件中。

/* han-la lxtx */
body.han-la hanla:after {
	content:" ";
	display:inline;
	font-family:Arial;
	font-size:0.89em;
}
body.han-la code hanla,body.han-la pre hanla,body.han-la kbd hanla,body.han-la samp hanla {
	display:none;
}
body.han-la ol > hanla,body.han-la ul > hanla {
	display:none;
}

当然,如果在第一步中,你是将 han-la 类 class 加到 html 标签中的话,在这一步中你需要将以上 CSS 代码中的body全改为html

友情提示:因为添加了 JS 和 CSS 文件,故要记得清空主题插件缓存、CDN 缓存及浏览器缓存哦~

方法 2

以上方法是把整个页面中的中英文之间都自动加上空格。还有另一种方法是,仅对文章部分的中英文进行排版加空格,方法如下。

/**
* WordPress 实现中英文数字之间自动加空格排版(不写入数据库) - 龙笑天下
* https://www.ilxtx.com/wordpress-text-autospace.html
*/
add_filter( 'the_content','lxtx_fanly_post_content_autospace' );
function lxtx_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;
}

方法 3

此方法是在 WordPress 后台编辑时执行,也就是当我们发布、更新、保存文章的时候就会自动执行,写入数据库的内容都将是自动添加了空格的,并且处理的对象为文章标题与文章内容。仅只对新发布的文章生效,之前发布的不生效。

/**
* WordPress 实现中英文数字之间自动加空格排版(写入数据库) - 龙笑天下
* https://www.ilxtx.com/wordpress-text-autospace.html
*/
add_filter( 'wp_insert_post_data', 'lxtx_fanly_post_data_autospace', 99, 2 );
function lxtx_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;
}

方法 4

此方法与方法 1 类似对任何 HTML 都可以使用。

<script src="https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js"></script>
<script>
pangu.spacingPage();
</script>

上面是最基础的操作,全局都进行自动加空格处理,还有另外一些操作。当然,对应的标签属性可以根据你的实际系统中的修改。

pangu.spacingElementById('main'); //在 id=main 的区域进行自动加空格处理
pangu.spacingElementByClassName('comment'); //在 class=comment 的区域进行自动加空格处理
pangu.spacingElementByTagName('p'); //在标签 p 里面进行自动加空格处理

参考阅读

WordPress 实现中英文数字之间自动加空格排版 - boke112
WordPress 文章中英文数字间自动添加空格 - 泪雪博客
如何快速在文章中英文数字间自动添加空格 - 沈唁志

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2017-08-25

2017-09-29

发表评论

表情 格式 贴图 链接 私密 签到
Dragon主题购买阿里云特价云服务器1核2G低至86元,N4共享型服务器3年仅需799元腾讯云特价云服务器1核2G 88元/年 2核4G3M688元/3年,更有千元代金券礼包免费领!
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more
Dragon