分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress 在中英文间自动加入空格
  • WordPress 在中英文间自动加入空格

  • 前言
  • 添加han-la类
  • 引入JS文件
  • 添加相关CSS
  • 疑难杂症
  • WordPress 在中英文间自动加入空格-BanYuner

    不久之前我很想实现这个功能,但是百度了一番,最后还是没有能实现这个功能。但是今天我再次尝试,最终实现了此功能,这里就简单的说一下关于网络上面很多类似教程中的坑,希望能帮助到那些尝试时间此功能最终失败的用户。

    前言

    最开始我从boke112导航上面找到了相关教程,这里就不再说教程内容的,大致的步骤如下:

    1. 在html标签中添加han-la类
    2. 在header中引入指定的js文件
    3. 添加CSS代码

    该博客在今年年初的时候写了这篇文章,原文地址: http://boke112.com/3748.html ,其声明转载自: 曾先生博客,文章地址: http://izzzzz.com/technical/1393.html 。那么我看了两篇文章之后,得出了以下结论(结论不一定正确):

    1. 所需JS文件并不完整
    2. CSS代码存在明显转义错误

    起初在boke112导航中看到css介绍部分,感觉有点错误,后来去看了原文,发现原文也是这样的,那么我就信了,就将代码原封不动的添加了,但是经过实践并没有生效,那么我就考虑这个教程可能存在错误或者瑕疵,于是再一次百度。最终在常阳时光博客找到了同样的教程,但是不同的就是所需的js文件地址不一样,其次就是css代码也不一样,此刻我明白原来我的想法是没有问题的,之前的两个博客在css引用中出现错误且未进行修改。那么这里我通过实践,将我所了解得教程告诉大家。

    添加han-la类

    在 标签中添加 class=”han-la”(一般在 header.php 文件中)。但是并不是硬性规定,现在很多博客都是通过功能函数动态加载class类,那么同样的,你也可以将这个han-la类动态加载到body中去。如果你会就自行折腾吧,如果不会就按照最开始的教程走。

    引入JS文件

    这个过程是比较常规的,通过script标签直接在头部引入该JS文件,JS文件地址如下: https://github.com/mastermay/text-autospace.js

    添加相关CSS

    html.han-la hanla:after {
    content: " ";
    display: inline;
    font-family: Arial;
    font-size: 0.89em;
    }
    html.han-la code hanla,
    html.han-la pre hanla,
    html.han-la kbd hanla,
    html.han-la samp hanla {
    display: none;
    }
    html.han-la ol > hanla,
    html.han-la ul > hanla {
    display: none;
    }
    

    疑难杂症

    上面的步骤都实现了之后,你的文件应该已经被加载了并没有通过F12查看没有报错,如果有报错,恭喜你,你可以继续往下看了,如果没有报错,但是功能又没有实现,那么请再次检查前面的操作步骤看看哪里有问题。

    通过F12看到了红色报错的用户,如果你报错内容为document.ready那一行或者说是某个变量没有声明这种错误的话,请前往该JS文件第54行:

    $(document).on('ready', //报错会指向这行提示错误
    function() {
    init();
    });
    })(window, window.jQuery, undefined);
    

    将上面的代码修改为下面的代码:

    $(function() {
    init();
    });
    })(window, window.jQuery, undefined);
    

    之后保存覆盖上传并且清空缓存,如果你的文件有CDN缓存,考虑刷新该JS文件。

    执行完毕上面的所有步骤之后,应该就没有问题了,不过还是有问题的话,请考虑自行百度折腾吧。

    声明一下:文章中提到的博客,无论是对是错,我相信都是本着一颗折腾的心在写文章,所有我并不是故意或者带有目的性的指出其错误,仅仅是想给大家一个正确的方向而已。

    打赏 分享此文

    扫码,支持我

    WordPress 在中英文间自动加入空格

    支付宝(点击图片切换)

    扫码,支持我

    WordPress 在中英文间自动加入空格

    微信(点击图片切换)

    扫码,手机看

    WordPress 在中英文间自动加入空格
    WordPress 在中英文间自动加入空格
    9 + 0 =
    1. 5楼
      加趣屋
      最后评论时间:2017/11/11 19:15
      来自天朝的朋友 谷歌浏览器 Android 6.0.1 Redmi 4 Build/MMB29M 广东省佛山市 电信
      加空格重要吗?
      加趣屋 1个月前 (11-11)回复
      • 帅气小琦琦
        最后评论时间:2017/12/12 08:50
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @加趣屋 其实并不是重不重要,看上去的感觉你就知道了
        帅气小琦琦    3小时前回复
    2. 4楼
      明月登楼的博客
      最后评论时间:2017/11/28 21:50
      来自天朝的朋友 谷歌浏览器 Windows XP 河南省南阳市 联通
      不错,我一直都是自己手动加的空格,看来还是代码来的给力呀!不错,受教了,我现在就着手试试去!
      • 帅气小琦琦
        最后评论时间:2017/12/12 08:50
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @明月登楼的博客 对于我这种有强迫症的用户,要是记得手动还好,要是不记得话,看着难受
        帅气小琦琦    3小时前回复
    3. 3楼
      淘福利啦
      最后评论时间:2017/09/01 14:40
      来自天朝的朋友 谷歌浏览器 Windows 10 中国
      想法非常不错! 收藏!
      淘福利啦 3个月前 (09-01)回复
    4. 2楼
      笑八达
      最后评论时间:2017/08/28 16:38
      来自天朝的朋友 搜狗浏览器 Windows 7 山东省 联通
      世间博客不少,风景这边独好!
      笑八达 4个月前 (08-28)回复
    5. 1楼
      懿古今
      最后评论时间:2017/11/16 22:59
      来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信
      虽然有这个之后很方便,不过还是习惯人工在编辑文章的时候直接修改。
      懿古今 4周前 (11-16)回复
      • 帅气小琦琦
        最后评论时间:2017/12/12 08:50
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @懿古今 之前想要手动添加,但是说实话不是很习惯。
        帅气小琦琦    3小时前回复