如何本地化Google字体和公共库

如何本地化Google字体和公共库

众所周知,自从Google离开了中国大陆之后,我们已经享受不到很多优质服务与资源了,这其中就包括Google字体和公共库。所以,以至于很多使用Wordpress建站的站长很是头疼,每点击一下网站都会加载20秒,严重影响网站速度与用户体验!

一般网上对于此问题的解决办法有大致两种:一是屏蔽掉谷歌字体(字体对于网页来说算是最重要的部分),二是将Google字体和公共库替换成360它家的(实际上360这货也是经常抽经、不稳定)。

那么,今天“一个你”给大家带来第三种解决办法,个人认为这是目前最好的解决办法,一劳永逸(尽管更改起来稍微有点麻烦)。原理:就是把所用到的Google字体和公共库全部下载下来,存放服务器本地,然后将文件里的对应URL改成当前URL。好了!话不多说,下面开始“本地化Google字体和公共库”的正文部分:

A、先解决Google字体问题
打开服务器目录,找到“/htdocs/wp-includes/”路径下的“script-loader.php”文件打开,然后搜索“fonts.googleapis.com”,即可找到所有引用了谷歌字体的地方,比如:$open_sans_font_url = “//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets”;

然后,我们需要分别下载以下CSS文件(需要翻墙):
//fonts.googleapis.com/css?family=Open+Sans:300italic”         // 将文件命名为:300italic.css
//fonts.googleapis.com/css?family=Open+Sans:400italic”         // 将文件命名为:400italic.css
//fonts.googleapis.com/css?family=Open+Sans:600italic”         // 将文件命名为:600italic.css
//fonts.googleapis.com/css?family=Open+Sans:300”                // 将文件命名为:300.css
//fonts.googleapis.com/css?family=Open+Sans:400”                // 将文件命名为:400.css
//fonts.googleapis.com/css?family=Open+Sans:600”                // 将文件命名为:600.css

下载完毕后,用“Dreamweaver”(其它专业工具也行,不要用记事本)分别打开它们,按如下操作:
1、将所有这些url(红色框框部分)链接字体文件全部下载至服务器本地,并命好名称,
比如:300-cyrillic-ext.woff2,然后对应的字体url就改成:当前字体存放目录的url即可(一定要可访问),
比如: http://www.yigeni.com/wp-content/themes/duotive-three/fonts/google-fonts/300-cyrillic-ext.woff2

本地化Google字体

2、完成了所有步骤1之后,将保存后的“300italic.css400italic.css600italic.css300.css400.css600.css
文件存放至服务器本地即可,比如目录“//wp-content/themes/duotive-three/css/google-css/”;

3、再回到“/htdocs/wp-includes/”路径下的“script-loader.php”文件中,找到以下代码:$open_sans_font_url = “//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets”;将此代码更改成:$open_sans_font_url = “https://www.yigeni.com/wp-content/themes/duotive-three/css/google-css/300italic.css,400italic.css,600italic.css,300.css,400.css,600.css&subset=$subsets”;
保存,并刷新!至此,谷歌字体本地化就大功告成,是不是已经秒加载了!

B、再解决Google公共库问题
1、打开服务器目录,找到“/htdocs/wp-includes/”路径下的“script-loader.php”文件打开,然后搜索“ajax.googleapis.com”,即可找到所有引用了谷歌公共库的地方,比如:
//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/builder.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/dragdrop.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/effects.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/slider.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/sound.js
//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/controls.js

2、小编的文件里面共有以上8处,然后再将它们分别复制到浏览器地址栏,并下载保存至本地(需要翻墙),文件名称默认就ok!

3、将下载之后的文件放入“//wp-content/themes/duotive-three/js/google-js/”目录下(此目录为自建),并将上述“script-loader.php”文件中的8处url改成当前服务器本地存放的url(一定要可访问),比如:
//wp-content/themes/duotive-three/js/google-js/prototype.js”,如下如所示,然后保存!

本地化Google公共库

OK!刷新一下,是不是已经秒加载了!以上内容为“一个你(www.yigeni.com)”原创,转载请注明出处,谢谢!

注:WordPress 4.6版之后官方已抛弃谷歌字体,采用了自身字体,所以4.6(含4.6)之后无需以上操作!

打赏作者
喜欢这篇文章 !? 请作者喝杯咖啡 !?

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

关于水人

分享/收集生活中的美,遇见世界上另外一个你!...

查看所有文章

  1. 水人
    2016年9月14日 at 下午4:04

    测试一下又不会怀孕…

  2. 水人
    2018年1月14日 at 上午2:29

    因为国家工信部打击VPN,几乎都挂掉了!请参照本网站文章“自己动手搭建翻墙SS服务器”自行搭建服务器,谢谢。

留下我的足迹...

*

*

您的电子邮件地址不会被公开.必填选项*

返回顶部