本文目录[隐藏]
- 1第一步：html或body标签中加入han-la类
- 2第二步：引入js文件
- 3最后一步：添加CSS代码
- 4参考阅读
通常来说中文与英文、中文和数字之间加上空格的排版会更加好看，但是如果让我们在编辑文章的时候人工添加，感觉非常繁琐和让人厌烦，所以今天龙笑天下就来 跟大家介绍一下 WordPress 如何实现中英文数字之间自动加空格的排版技巧。（PS：其实很早就想加上这个功能了，但奈何懒癌发作…）
第一步：html或body标签中加入han-la类
在html标签中添加 class=”han-la”（一般在 header.php 文件中）。但是并不是硬性规定，现在很多博客都是通过功能函数动态加载class类，那么同样的，你也可以将这个han-la类动态加载到body中去。 将类加载到html标签中的方法就不说了，这里说下怎么加载到body标签中，当然在这里，你的主题应该是使用了body_class()这个标准函数的。
|
|
|
|
<span style="color: #009933; font-style: italic;">/** * WordPress实现中英文数字之间自动加空格排版 - 龙笑天下 * http://www.ilxtx.com/wordpress-text-autospace.html * 在body标签中加入han-la类 */</span> <span style="color: #000000; font-weight: bold;">function</span> lxtx_add_hanla_to_body_class<span style="color: #009900;">(</span> <span style="color: #000088;">$classes</span> <span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$classes</span><span style="color: #009900;">[</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'han-la'</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">return</span> <span style="color: #000088;">$classes</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> add_filter<span style="color: #009900;">(</span><span style="color: #0000ff;">'body_class'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'lxtx_add_hanla_to_body_class'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> |
|
/**
* WordPress实现中英文数字之间自动加空格排版 – 龙笑天下
* http://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 管理员登录用户名被暴露
第二步：引入js文件
在jquery文件后面引入text-autospace.min.js或text-autospace.js，下载地址为：https://github.com/mastermay/text-autospace.js
|
|
|
|
<span style="color: #009933; font-style: italic;">/** * WordPress实现中英文数字之间自动加空格排版 - 龙笑天下 * http://www.ilxtx.com/wordpress-text-autospace.html * 加入text-autospace.min.js文件 */</span> <span style="color: #000000; font-weight: bold;">function</span> lxtx_styles_scripts<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #666666; font-style: italic;">//全局加载js脚本</span> wp_enqueue_script<span style="color: #009900;">(</span> <span style="color: #0000ff;">'han-la-js'</span><span style="color: #339933;">,</span> get_template_directory_uri<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/includes/js/text-autospace.min.js'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">(</span> <span style="color: #0000ff;">'jquery'</span> <span style="color: #009900;">)</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> add_action<span style="color: #009900;">(</span> <span style="color: #0000ff;">'wp_enqueue_scripts'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'lxtx_styles_scripts'</span> <span style="color: #009900;">)</span><span style="color: #339933;">;</span> |
|
/**
* WordPress实现中英文数字之间自动加空格排版 – 龙笑天下
* http://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文件中。
|
|
|
|
<span style="color: #808080; font-style: italic;">/* han-la xtx */</span> body<span style="color: #6666ff;">.han-la</span> hanla<span style="color: #00AA00;">:</span><span style="color: #F5758F;">after</span> <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">content</span><span style="color: #00AA00;">:</span><span style="color: #ff0000;">" "</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span>Arial<span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">0.89em</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> body<span style="color: #6666ff;">.han-la</span> code hanla<span style="color: #00AA00;">,</span>body<span style="color: #6666ff;">.han-la</span> <span style="color: #993333;">pre</span> hanla<span style="color: #00AA00;">,</span>body<span style="color: #6666ff;">.han-la</span> kbd hanla<span style="color: #00AA00;">,</span>body<span style="color: #6666ff;">.han-la</span> samp hanla <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> body<span style="color: #6666ff;">.han-la</span> ol <span style="color: #00AA00;">></span> hanla<span style="color: #00AA00;">,</span>body<span style="color: #6666ff;">.han-la</span> ul <span style="color: #00AA00;">></span> hanla <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> |
|
/* han-la xtx */
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缓存及浏览器缓存哦~
参考阅读
WordPress实现中英文数字之间自动加空格排版 – boke112
WordPress 在中英文间自动加入空格 – BanYuner
原文：http://www.ilxtx.com/wordpress-text-autospace.html
请先 ！