關於WordPress中字體加載慢的問題解決方案(轉)
2016-04-15
最近發現Wordpress有時候加載的特別慢，於是就想辦法找了下原因。之前聽網上說是因為wordpress用的是Google的字體庫，而且是每次都要加載，導致訪問慢的，於是當時裝了個Disable Google Fonts的插件，禁用了Google字體，然後裝了一個Useso take over Google插件，將字體文件改為360托管的字體庫，這樣就可以訪問快點了。當時的效果的確挺好的，結果最近在使用的時候又發現網站訪問慢了，用Chrome查了下資源加載的情況，發現訪問useso的字體庫的時間特別的長。這時候改用Google字體的時候反而更快了。。。這就十分令人惆悵了，有時候用useso的快，有時候用google的快，真的挺麻煩的。後來想想幹脆把這個文件下到服務器上不就好了麽。。。於是就倒騰出了下面的辦法，將當前主題的字體文件下載到了服務器上。
一
首先在源代碼中找到加載字體文件的位置，在博客首頁的源代碼中找到了下面這行：
| 1 | <link rel=‘stylesheet‘ id=‘baskerville_googleFonts-css‘ href=‘//fonts.googleapis.com/css?family=Roboto+Slab%3A400%2C700%7CRoboto%3A400%2C400italic%2C700%2C700italic%2C300%7CPacifico%3A400&ver=4.5‘ type=‘text/css‘ media=‘all‘ /> |
其實搜索fonts就可以找到了這行。根據這行，我們曉得他引用了googleapis的字體包，命名為’baskerville_googleFonts-css’，而’baskerville’事實上就是我當前的主題名。
二
然後我們需要在後臺找到上面id對應的那個超鏈接的位置。打開wordpress的根文件夾，直接搜索’fonts.googleapis.com’這個關鍵字：
| 1 | $find . -type f |xargs grep fonts.googleapis.com |
查找結果為：
| 1 2 3 4 5 | ./wp-admin/includes/class-wp-press-this.php: $open_sans_font_url = ‘,‘ . add_query_arg( $query_args, ‘https://fonts.googleapis.com/css‘ ); ./wp-content/themes/baskerville/functions.php: wp_register_style(‘baskerville_googleFonts‘, ‘//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300|Pacifico:400‘ ); ./wp-content/themes/baskerville/functions.php: $font_url = ‘//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300‘; ./wp-includes/js/tinymce/plugins/compat3x/css/dialog.css:@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin-ext,latin"); ./wp-includes/script-loader.php: $open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets"; |
這樣我們就找到了所在文件的位置。大概看一下，實際上用處比較大的是第二行的那串在主體中的定義（對比第一步的內容）（./wp-content/themes/baskerville/functions.php的內容）（其余都是寫無關緊要的插件所用的字體）。很明顯可以看出來，接下來我們只要把後面那個url換成本地的字體包就可以了。
三
現在就來下字體包，打開第一步中的那個鏈接，可以看到是下面的內容：
| 1 2 3 4 5 6 7 8 9 10 11 | /* latin */ @font-face { font-family: ‘Pacifico‘; font-style: normal; font-weight: 400; src: local(‘Pacifico Regular‘), local(‘Pacifico-Regular‘), url(http://fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2‘); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* cyrillic-ext */ @font-face { ...... |
發現是一段css，使用了很多的外部資源，下面我們就用一個爬蟲來把他直接下下來並打包好：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | #coding:utf-8 import urllib2,cookielib,sys,re,os,urllib import numpy as np #網站登陸 cj=cookielib.CookieJar() opener=urllib2.build_opener(urllib2.HTTPCookieProcessor(cj)) opener.addheaders=[(‘User-agent‘,‘Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36))‘)] urllib2.install_opener(opener) path=‘http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400italic,700,700italic,300|Pacifico:400‘ request=urllib2.Request(path) response=urllib2.urlopen(request) html=response.read() urls=re.findall(r‘url\ ((.*?)\ )‘,html.replace(‘\n‘,‘ ‘))#由於這裏排版會和latex沖突，所以在\和(，以及\和)之間加了空格，使用的時候要刪掉 path=‘font_cache/‘ if not os.path.exists(path): os.mkdir(path) for url in urls: urllib.urlretrieve(url,path+url.split(‘/‘)[-1])#下載文件 for url in urls: html=html.replace(url,url.split(‘/‘)[-1])#更新改css文件 font=open(path+‘font-css‘,‘w+‘) font.write(html)#保存 |
這樣就生成了一個font_cache文件夾，在這裏有所有下好的字體文件以及更新新後的css文件
四
最後把這個文件上傳到wordpress的根目錄下（放到其他目錄有時候會沒有權限訪問，有點麻煩），然後將function.php中的那個url改成/font_cache/font-css（相對於wordpress的根）即可。（記得備份初始文件防止改錯。。。。）
關於WordPress中字體加載慢的問題解決方案(轉)