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

     集合 遍历 import java.util.ArrayList; class Demo02 { public static void main(String[] args) { // 创建Arra ...

  2. 认识Dump文件

    一.什么是Dump文件 又叫内存转储文件或者叫内存快照文件.是一个进程或系统在某一给定的时间的快照.比如在进程崩溃时或则进程有其他问题时,甚至是任何时候,我们都可以通过工具将系统或某进程的内存备份出来 ...

  3. rust cargo 一些方便的三方cargo 子命令扩展

    内容来自cargo 的github wiki,记录下,方便使用 可选的列表 cargo-audit - Audit Cargo.lock for crates with security vulner ...

  4. 29-ESP8266 SDK开发基础入门篇--编写TCP 客户端程序(Lwip RAW模式,非RTOS版,精简入门)

    https://www.cnblogs.com/yangfengwu/p/11456667.html 由于上一节的源码长时间以后会自动断开,所以再做这一版非RTOS版的,咱直接用lua源码里面别人写的 ...

  5. Linux 系统管理——磁盘管理及文件系统实例

    1.为主机新增两块30GB的SCSI硬盘 2.划分3个主分区,各5GB,剩余空间作为扩展分区 3.在扩展分区中建立2个逻辑分区,容量分别为2GB.10GB 4.将第一个逻辑分区的类型改为swap 5. ...

  6. string拼接时去掉最后一个逗号

     str.replace(str.length() - 1, str.length(), "");

  7. 2、zookeeper原理

    一.Zookeeper的角色 » 领导者(leader),负责进行投票的发起和决议,更新系统状态 » 学习者(learner),包括跟随者(follower)和观察者(observer),follow ...

  8. chown与chmod的区别

    chown 修改文件和文件夹的用户和用户组属性 1.要修改文件hh.c的所有者.修改为sakia的这个用户所有 chown sakia hh.c 这样就把hh.c的用户访问权限应用到sakia作为所有 ...

  9. NGINX Cache Management (.imh nginx)

    In this article, we will explore the various NGINX cache configuration options, and tips on tweaking ...

  10. Selenium自动化对非输入框的日历或日期控件的处理

    4.这个时候我们可以移除readonly的属性,问题就轻轻松松解决了,代码如下: String js = "document.getElementById('createTime').rem ...