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

 懿古今   2018-02-01 09:10:25 更新  技术文档

前几天分享的《博主站长必看的中英文排版技巧》文中说到中文与英文、中文和数字之间加上空格的排版会更加好看，但是如果让我们在编辑文章的时候人工添加，感觉非常繁琐和让人厌烦，所以今天就跟大家介绍一下 WordPress 如何实现中英文数字之间自动加空格的排版技巧。

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

WordPress文章中英文数字之间自动加空格已经有更好的办法，所以本文可以作废了，新办法请移步《WordPress文章中英文数字间自动添加空格教程》

具体实现步骤如下（如 Nana 主题为例）：

PS：文中技术及代码来自曾先生。

1、下载 js 文件上传到主题文件的 js 文件夹中，如果 text-autospace.js 文件不是上传到主题的 js 的文件夹，请自行修改第二步的路径。

2、在主题的 header.php 的 html 标签中添加class="han-la"，如找到以下代码：

  1. <html lang="zh-CN">

修改为：

  1. <html lang="zh-CN" class="han-la">

找到以下代码：

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

在它的下方添加以下代码：

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/text-autospace.js"></script>

3、在主题的 style.css 文件中添加以下 CSS 代码：

  1. html.han-la hanla:after {
  2.     content: " ";
  3.     display: inline;
  4.     font-family: Arial;
  5.     font-size: 0.89em;
  6. }
  8. html.han-la code hanla,
  9. html.han-la pre hanla,
  10. html.han-la kbd hanla,
  11. html.han-la samp hanla {
  12.     display: none;
  13. }
  15. html.han-la ol &gt; hanla,
  16. html.han-la ul &gt; hanla {
  17.     display: none;
  18. }

至此，已经可以让我们的 WordPress 主题拥有了中英文数字之间自动加空格的排版功能。效果如下：

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

结束语

这个 text-autospace.js 文件有 12.9 KB 这么大，所以我就懒得折腾进去，还不如我自己动手添加呢。至于是否需要添加这个功能，就请大家自我衡量了，如果开有 CDN 加速的话，这个 JS 文件对影响网站速度应该不大。

本文地址：https://www.yigujin.cn/1069.html

你可能感兴趣的文章

文章标签： ,   ,   ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！

发表评论

  1. 明月登楼的博客
    明月登楼的博客 @回复
    发表于2016-12-30 16:56  沙发

    不错，这个可以考虑试试！

  2. 姜辰
    姜辰 @回复
    发表于2016-12-30 18:42  板凳

    100多k，我还是手动比较合适

    • 懿古今
      懿古今2016-12-31 23:06  回复

      @姜辰[疑问] JS文件是12.9KB，不是100多K，感觉还行，最主要是用了就不用担心中英文排版了

  3. Koolight
    Koolight @回复
    发表于2016-12-31 08:39  地板

    好像加了排版确实很漂亮！

    • 懿古今
      懿古今2016-12-31 23:05  回复

      @Koolight是的，以后要慢慢养成这个习惯才行

  4. 闲鱼
    闲鱼 @回复
    发表于2016-12-31 14:11  4楼

    添加空格确实更好看，不过编辑也不麻烦还是直接手动

    • 懿古今
      懿古今2016-12-31 23:04  回复

      @闲鱼这个习惯其实还是很好的，感觉有了空格好看一些

  5. LsevenTT
    LsevenTT @回复
    发表于2017-10-09 01:30  5楼

    感觉博主的模版 好强大 ！！！ 如何屏蔽那些自动来WP博客注册的机器人呢？？？

    • 懿古今
      懿古今2017-10-09 21:49  回复

      @LsevenTT[偷笑] 像我这样不开放注册就行，或者实现手机短信验证后才可以注册，顺便相应实名制