使用google fonts和ajax 国内镜像 加快wordpress速度
由于5月27日google所有的服务被国内屏蔽的影响,fonts.googleapis.com和ajax.googleapis.com两个站点的所有资源访问也受影响 ,不过蛋疼的是wordpress 3.8以后内置使用了google的fonts和ajax ,用以加快站点的访问速度。这下可好,站点不但没有加快访问速度,而且受三天两头一屏蔽的影响,反而经常会访问很慢。通过chrome 的F12分析发现拖后腿的url 就是 fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets 这个url 无法访问,导致站点长时间不响应。
解决思路
修改源码,禁用字体
网上首先找了方法,先是用了百度经验里提供的方法,修改主题的functions.php文件。
方法一,在functions.php文件中增加如下代码:
1function coolwp_remove_open_sans_from_wp_core() {
2wp_deregister_style( 'open-sans' );
3wp_register_style( 'open-sans', false );
4wp_enqueue_style('open-sans','');}
5add_action( 'init', 'coolwp_remove_open_sans_from_wp_core' );
方法二,同样是修改functions.php文件,添加如下代码:
1// Remove Open Sans that WP adds from frontend
2if (!function_exists('remove_wp_open_sans')) :
3function remove_wp_open_sans() {
4wp_deregister_style( 'open-sans' );
5wp_register_style( 'open-sans', false );
6}
7// 前台删除Google字体CSS
8add_action('wp_enqueue_scripts', 'remove_wp_open_sans');
9// 后台删除Google字体CSS
10add_action('admin_enqueue_scripts', 'remove_wp_open_sans');
11endif;
方法一和二都试了,在我的主题下改了以后就报500 错误 。
字体及样式本地化方法
接下来再说下我自己考虑到的方法,即然google的不能正常访问,就把用到的google的css和fonts及ajax内容下载到站点页下,修改相应的文件,重新加载就OK了。
刚好用头有国外的主机,通过curl获取了需要使用的css内容和内部字体的内容,如下:
1[root@localhost ~]# curl 'http://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9.1'
2@font-face {
3 font-family: 'Open Sans';
4 font-style: normal;
5 font-weight: 300;
6 src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTdqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
7}
8@font-face {
9 font-family: 'Open Sans';
10 font-style: normal;
11 font-weight: 400;
12 src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
13}
14@font-face {
15 font-family: 'Open Sans';
16 font-style: normal;
17 font-weight: 600;
18 src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNStqQynqKV_9Plp7mupa0S4g.ttf) format('truetype');
19}
20@font-face {
21 font-family: 'Open Sans';
22 font-style: italic;
23 font-weight: 300;
24 src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxvqEJM-AK1nFUafhVdytxUY.ttf) format('truetype');
25}
26@font-face {
27 font-family: 'Open Sans';
28 font-style: italic;
29 font-weight: 400;
30 src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBl02b4v3fUxqf9CZJ1qUoIA.ttf) format('truetype');
31}
32@font-face {
33 font-family: 'Open Sans';
34 font-style: italic;
35 font-weight: 600;
36 src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxmYImPRL1w80NlYTQ8LOqf4.ttf) format('truetype');
37}
打开wp-includes/script-loader.php文件,找到如下行并修改为本地的css文件
1$open_sans_font_url = "//fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
2修改为
3$open_sans_font_url = "/wp-includes/css/google-fonts.css";
注:需要注意的是,上面curl获取的css文件中引用的字体地址也需要更改为本地地址 ,ajax也同理。另外,如非主题中需要google-fonts,也可以考虑把上面的$open_sans_font_url 行注释掉,禁用google字体,经禁用验证,对我的主题没有什么影响 。
最极方法
上面的方法虽然快了不少,不过由于我的站点在新加坡主机上。所以并不能保证国内的所有地方访问速度都快。网上接着找有没有google fonts和ajax的国内完整镜像 。后来查到360很及时的对google的fonts.googleapis.com和ajax.googleapis.com 站点下的所有内容做了国内镜像。只需要把wordpress文件中的相应的地址修改为 fonts.useso.com 和 ajax.useso.com 即可。
现列出需要修改的文件:
fonts文件
1# grep -r 'fonts.googleapis.com' *|awk '{ print $1}'|awk -F: '{print $1}'
2wp-content/themes/twentytwelve/functions.php
3wp-content/themes/twentyfourteen/functions.php
4wp-content/themes/twentythirteen/functions.php
5wp-includes/script-loader.php
6wp-includes/js/tinymce/plugins/compat3x/css/dialog.css
ajax文件
1$ grep -r 'ajax.googleapis.com' *|awk '{ print $1}'|awk -F: '{print $1}'|uniq
2wp-content/plugins/use-google-libraries/README.txt
3wp-content/plugins/use-google-libraries/use-google-libraries.php
4wp-content/plugins/wp-minify/min/builder/index.php
5wp-includes/script-loader.php
修改完成后再利用chrome 的 F12 查看,发现速度快了不少,这里就不再截图,具体快了多少,你可以自己用chrome分析下,呵呵!
捐赠本站(Donate)
如您感觉文章有用,可扫码捐赠本站!(If the article useful, you can scan the QR code to donate))
- Author: shisekong
- Link: https://blog.361way.com/fonts-ajax-googleapis-wordpress/3464.html
- License: This work is under a 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. Kindly fulfill the requirements of the aforementioned License when adapting or creating a derivative of this work.