通常来说中文与英文、中文和数字之间加上空格的排版会更加好看,但是如果让我们在编辑文章的时候人工添加,感觉非常繁琐和让人厌烦,所以今天龙笑天下就来跟大家介绍一下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实现中英文数字之间自动加空格排版的更多相关文章

  1. python练习-生成一个1到50的大字符串每个数字之间有个空格

    #-*-encoding:UTF-8-*- string=[] for i in range(1,51): string.append(str(i)) print string#打印一下string ...

  2. Visual Studio 行末回车时运算符两侧自动加空格是怎么设置的

    在工具—>选项->文本编辑器->c#->格式设置->间距后有三个选项 如果已经选中"二元运算符前后插入空格" 而VS又抽风没有这个功能时,可以选中其余 ...

  3. phpstorm自动对齐数组=>,自动加空格

    写完代码后可以点菜单中code-reformat code,快捷键是option+command+L

  4. GreenDao在列中的单词之间自动加_

    1.第一种情况,原字段(属性.列)是 驼峰式命名法 @Entitypublic class Employee { @Id(autoincrement = true) private Long id; ...

  5. myeclipse2018大括号之前会自动加空格

  6. 关闭WordPress自动加载的Open Sans字体-WP访问过慢原因

    序言 wordpress大概从wp-3.8开始会自动加载Open Sans字体,并引用Google上面的CSS样式.而最近谷歌经常打不开,导致网站访问速度过慢,严重的会拖慢几十秒.Open Sans字 ...

  7. Axure 实现数字自动加键功能(点击“+”数字加1,点击“-”数字减1)

    百度网盘:http://pan.baidu.com/s/1gfPQ9V1 在上面的元件库中,拖“数字框(仅正数)”即可实现自动加减的功能 如图:

  8. 让Lua自己把文件夹下面的所有文件自动加载起来吧

    没有想到我也做了一回标题党.其实这里边说的自动还是有夸大其词的部分.其实只是指定文件夹,然后根据指定文件夹数据,加载目录下边的内容而已. 怎么来进行Lua文件的加载 一般情况下,相关的功能需要给他创建 ...

  9. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

随机推荐

  1. LeetCode 1049. Last Stone Weight II

    原题链接在这里:https://leetcode.com/problems/last-stone-weight-ii/ 题目: We have a collection of rocks, each ...

  2. 持续集成学习4 jenkins常见功能

    一.节点选择 1.yum安装jdk yum install -y java-1.8.0 java-1.8.0-openjdk-devel 2.节点选择有三种方式 a.通过系统自带功能限制任务只能在这个 ...

  3. c++ 去掉所有空格及换行符

    string get_string(string res){ //删除换行符 int r = res.find('\r\n'); while (r != string::npos) { if (r ! ...

  4. jsp之大文件分段上传、断点续传

    1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...

  5. The database returned no natively generated identity value错误解决方案

    原因:hibernate项目中在学生表的配置文件中: <id name="studentno" column="studentno"> <ge ...

  6. Using HAProxy as an API Gateway, Part 1 [Introduction]

    转自:https://www.haproxy.com/blog/using-haproxy-as-an-api-gateway-part-1/ An API gateway handles load ...

  7. 计蒜客 38228. Max answer-线段树维护单调栈(The Preliminary Contest for ICPC China Nanchang National Invitational I. Max answer 南昌邀请赛网络赛) 2019ICPC南昌邀请赛网络赛

    Max answer Alice has a magic array. She suggests that the value of a interval is equal to the sum of ...

  8. socket简单实践

    目录 socket模块: family(socket家族) fileno=None 请忽略,特殊用途 socket模块: 把tcp/ip协议层的各种数据封装啦.数据发送.接收等通过代码已经给你封装 应 ...

  9. zookeeper、hbase集成kerberos

    1.KDC创建principal 1.1.创建认证用户 登陆到kdc服务器,使用root或者可以使用root权限的普通用户操作: # kadmin.local -q “addprinc -randke ...

  10. tengine负载均衡高可用配置

    环境 Tengine-master:192.168.109.100 Tengine-slave:192.168.109.101 tomcat01:192.168.109.102 tomcat02:19 ...