由于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 无法访问,导致站点长时间不响应。

googlefonts

解决思路

修改源码,禁用字体

网上首先找了方法,先是用了百度经验里提供的方法,修改主题的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分析下,呵呵!