WordPress实现中英文数字之间自动加空格排版
通常来说中文与英文、中文和数字之间加上空格的排版会更加好看,但是如果让我们在编辑文章的时候人工添加,感觉非常繁琐和让人厌烦,所以今天龙笑天下就来跟大家介绍一下WordPress如何实现中英文数字之间自动加空格的排版技巧。(PS:其实很早就想加上这个功能了,但奈何懒癌发作…)
第一步:html或body标签中加入han-la类
在html标签中添加class=”han-la”(一般在header.php文件中)。但是并不是硬性规定,现在很多博客都是通过功能函数动态加载class类,那么同样的,你也可以将这个han-la类动态加载到body中去。将类加载到html标签中的方法就不说了,这里说下怎么加载到body标签中,当然在这里,你的主题应该是使用了body_class()这个标准函数的。
/**
*WordPress实现中英文数字之间自动加空格排版-龙笑天下
*https://www.jkys120.com/article/95496/
*在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
/**
*WordPress实现中英文数字之间自动加空格排版-龙笑天下
*https://www.jkys120.com/article/95496/
*加入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 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。
WordPress实现中英文数字之间自动加空格排版的更多相关文章
- python练习-生成一个1到50的大字符串每个数字之间有个空格
#-*-encoding:UTF-8-*- string=[] for i in range(1,51): string.append(str(i)) print string#打印一下string ...
- Visual Studio 行末回车时运算符两侧自动加空格是怎么设置的
在工具—>选项->文本编辑器->c#->格式设置->间距后有三个选项 如果已经选中"二元运算符前后插入空格" 而VS又抽风没有这个功能时,可以选中其余 ...
- phpstorm自动对齐数组=>,自动加空格
写完代码后可以点菜单中code-reformat code,快捷键是option+command+L
- GreenDao在列中的单词之间自动加_
1.第一种情况,原字段(属性.列)是 驼峰式命名法 @Entitypublic class Employee { @Id(autoincrement = true) private Long id; ...
- myeclipse2018大括号之前会自动加空格
- 关闭WordPress自动加载的Open Sans字体-WP访问过慢原因
序言 wordpress大概从wp-3.8开始会自动加载Open Sans字体,并引用Google上面的CSS样式.而最近谷歌经常打不开,导致网站访问速度过慢,严重的会拖慢几十秒.Open Sans字 ...
- Axure 实现数字自动加键功能(点击“+”数字加1,点击“-”数字减1)
百度网盘:http://pan.baidu.com/s/1gfPQ9V1 在上面的元件库中,拖“数字框(仅正数)”即可实现自动加减的功能 如图:
- 让Lua自己把文件夹下面的所有文件自动加载起来吧
没有想到我也做了一回标题党.其实这里边说的自动还是有夸大其词的部分.其实只是指定文件夹,然后根据指定文件夹数据,加载目录下边的内容而已. 怎么来进行Lua文件的加载 一般情况下,相关的功能需要给他创建 ...
- jquery 页面滚动到底部自动加载插件集合
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...
随机推荐
- Tips on Java
1.JAVA种数组的两种定义方式. int[] nums; int nums[]. 2.整型默认为int,如果需要long,须加l或L.小数默认double,d或D可省略,但如果需要float,须加f ...
- webpack的plugin原理
plugin是webpack生态的重要组成,它为用户提供了一种可以直接访问到webpack编译过程的方式.它可以访问到编译过程触发的所有关键事件. 1. 基本概念 1. 如何实现一个插件 1. plu ...
- 洛谷 P2746 [USACO5.3]校园网 Network of Schools 题解
Tarjan 模板题 第一问就是缩点之后看有多少个入度为零的点就好了. 第二问是在缩点后将每个点的入度和出度都求出(只要有入度或出度就置为1),然后比较哪个有值的多,将多的作为答案输出.原因是由题可得 ...
- VS2010中使用boost正则表达式库
1.下载boost库.http://www.boost.org/ 我下载的是boost_1_51_0版本.放在D:\opensource\boost_1_51_0. 2.编译boost库. 执 ...
- Visual C++ 里的 Classes, Methods and RTTI
类的基本布局 为了说明以下内容,让我们考虑这个简单的例子: class A { int a1; public: virtual int A_virt1(); virtual int A_virt2() ...
- linux命令之------Chmod命令
Chmod命令 1)作用:linux和unix的文件调用权限分为三级:文件拥有者/群组/其他.利用chmod可以控制文件如何被他人所调用.(主要就是修改文件夹,文件的权限) 2)U表示该文件的拥有者, ...
- mysql 引擎类型
innodb: 可靠的事物处理引擎,不支持全文搜索 memeory: 数据存储在内存,速度很快 myisam: 性能极高的引擎,支持全文本搜索,但不支持事物
- [SNOI2019]纸牌
传送门 Description 有一副纸牌.牌一共有\(n\)种,分别标有 \(1,2,...,n\),每种有\(C\)张.故这副牌共有\(nC\)张. 三张连号的牌(\(i,i+1,i+2\))或三 ...
- go 指南学习笔记
1 If for 后面没有小括号.后面的花括号,要在当前行,并且中间有内容,右花括号要单独一行. 因为go会格式化代码,自动插入分号. 2 函数和方法的区别: 方法需要有一个接受者(select ...
- 第07组 Alpha冲刺(6/6)
队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:博客生成的逻辑 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教小姐姐 ...