Tag Archives: wordpress

解決 WordPress 中 Google Web Font 被 GFW 屏蔽問題

自從本 blog 的 wordpress 升級並更換 theme 後,偶爾發現 page load 得很慢,用 chrome 自帶的 developer tool 查了一下才發現原來 theme 用了 google web font,因爲 google service 被牆了所以在大陸瀏覽就像卡住了一樣。由於我絕大部份時間都是科學上網,所以一開始沒有發現問題。

Google font is blocked in China

既然 google web font 不能用,最簡單就是乾脆不用,把相關代碼拿掉就行,不過這樣做的後果是網站會極其難看。上策還是把 google web font 放到 wordpress server,再將 CSS 配置好。Google 一下發現有個很棒的 shell script 能幫個大忙:https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/,它能幫你把需要的字體下載下來並產生一個立馬能用的 CSS 文檔。

WordPress 最少有兩個地方會加載 google web font,第一是 wordpress 本身用到的 Open Sans,另外是個別 theme 可能會用到的字體。視乎你的 theme 有沒有用 google font,有可能兩個地方都要處理。

目前我用的 theme 基於 twentyfourteen(我把原來左邊的 navigation 拿掉,header 加了 facebook, twitter 等幾個 icon),best practice 是在 wordpress 的 themes 目錄開一個叫 twentyfourteen-child 的新目錄,裏面只放用來 override parent theme 的東西。

解決問題的具體步驟如下:

  1. 下載剛才介紹過的網站的 shell script,我把它命名爲 downloadgooglefont.sh
  2. 先下載 wordpress 會下載的所有 Open Sans 字體(包括不同粗幼和斜體),在 downloadgooglefont.sh 裏要指定它們:
    families+=('Open Sans:300')
    families+=('Open Sans:400')
    families+=('Open Sans:600')
    families+=('Open Sans:300italic')
    families+=('Open Sans:400italic')
    families+=('Open Sans:600italic')
    
  3. 針對你使用的 theme,需要把 theme 用到的 google 字體寫進去。你要查一下你的 theme 會用到什麼字體,例如 twentyfourteen 會用到的字體在 themes/twentyfourteen/functions.php 的 215 行有提到:
                            'family' => urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ),
    

    總共有7個字體,所以 script 需要加上:

    families+=('Lato:300')
    families+=('Lato:400')
    families+=('Lato:700')
    families+=('Lato:900')
    families+=('Lato:300italic')
    families+=('Lato:400italic')
    families+=('Lato:700italic')
    
  4. 執行該 script:
    $ bash ./downloadgooglefont.sh
    Downloading Open Sans:300... eot woff ttf svg 
    Downloading Open Sans:400... eot woff ttf svg 
    Downloading Open Sans:600... eot woff ttf svg 
    Downloading Open Sans:300italic... eot woff ttf svg 
    Downloading Open Sans:400italic... eot woff ttf svg 
    Downloading Open Sans:600italic... eot woff ttf svg 
    Downloading Lato:300... eot woff ttf svg 
    Downloading Lato:400... eot woff ttf svg 
    Downloading Lato:700... eot woff ttf svg 
    Downloading Lato:900... eot woff ttf svg 
    Downloading Lato:300italic... eot woff ttf svg 
    Downloading Lato:400italic... eot woff ttf svg 
    Downloading Lato:700italic... eot woff ttf svg 
    

    這些就是下載完的所有文檔,包括適用於 chrome/chromium, firefox, safari 會用到的字體,還有一個 CSS file:

    Lato_300italic.svg
    Lato_300italic.ttf
    Lato_300italic.woff
    Lato_300.svg
    Lato_300.woff
    Lato_400italic.svg
    Lato_400italic.ttf
    Lato_400italic.woff
    Lato_400.svg
    Lato_400.ttf
    Lato_400.woff
    Lato_700italic.svg
    Lato_700italic.ttf
    Lato_700italic.woff
    Lato_700.svg
    Lato_700.ttf
    Lato_700.woff
    Lato_900.svg
    Lato_900.ttf
    Lato_900.woff
    LNM3t2QINm
    Open_Sans_300italic.svg
    Open_Sans_300italic.ttf
    Open_Sans_300italic.woff
    Open_Sans_300.svg
    Open_Sans_300.ttf
    Open_Sans_300.woff
    Open_Sans_400italic.svg
    Open_Sans_400italic.ttf
    Open_Sans_400italic.woff
    Open_Sans_400.svg
    Open_Sans_400.ttf
    Open_Sans_400.woff
    Open_Sans_600italic.svg
    Open_Sans_600italic.ttf
    Open_Sans_600italic.woff
    Open_Sans_600.svg
    Open_Sans_600.ttf
    Open_Sans_600.woff
    font.css
    
  5. 把上面所有的字體上傳到 wordpress server 的 wp-content/themes/twentyfourteen-child/ 目錄。
  6. 把 font.css 複製到 wp-content/themes/twentyfourteen-chile/style.css。
  7. 由於 twentyfourteen 在 functions.php 通過 wp_enqueue_style 加上 fonts.googleapis.com 的 link 來加載 Lato 字體,要想辦法把它拿掉:
            // Add Lato font, used in the main stylesheet.
            wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
    

    不過我不喜歡直接修改 parent theme,所以我選擇在 twentyfourteen-child 把它 dequeue 掉。注意 add_action 的 priority 必須低於 10,dequeue 才會成功。theme_enqueue_styles 的前兩行是用來禁止 Open Sans 字體從 google server 加載,第3行才是禁止 Lato。
    twentyfourteen-child/functions.php:

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
    function theme_enqueue_styles() {
        wp_deregister_style('open-sans');
        wp_register_style('open-sans', false);
        wp_dequeue_style('twentyfourteen-lato');
        ...
    }
    ?>
    

QR code WordPress plugin

I used to show QR codes in my old theme (not in the current theme as they don’t blend very well) and my friends think that’s intriguing, so I had been working on releasing a WordPress plugin to do that for quite some time. It’s not difficult because WordPress documentation is quite clear, and I’ve finally brushed up the code and released it under an open source license. If you want to get your hands dirty to embed some wierd codes in your blog to scare your visitors away, or you want to show off your technical savviness, you have come to the right place. Go to this page for downloads and instructions.

Related article:
http://blog.anthonywong.net/2006/01/18/qr-code-for-blog-entries/