leafwind.tw

wordpress 架站指引

此篇文章並非教學，而是快速告訴你關鍵字，指引該注意的地方，其中每一點都可以獨立成文，細節就不多提，如果有不懂請在下面儘管發問，也歡迎提供你想知道的問題。

利益揭露：以下有提到的網站或工具雖然都是自己用過的，但一概沒有收任何好處，也不作為背書用途，若發生問題後果請自負。

未來，或許架設自己的 wordpress 才是顯學，可能有人會問，那其他平台呢？我會說，如果想自己架站又沒有時間投資研究，那 wix, weebly 門檻最低（但個人真的不推薦長期使用），不然就還是寄宿在 Medium 等網誌服務平台，承受倒閉跟資料被控制的風險吧。

附帶一提，即使是 wordpress，只要機器不在自己手上，一樣會有風險，像這個案例...

反之，如果你真的有心研究完以下提到的服務跟技術，架出一個跟這個網站一樣的 wordpress 便不是難事。

自己架站的好處

在開始之前，還是得說說自己架站（self-hosted）有什麼好處

自己的域名

儘管部分服務可以讓你綁定域名，但多半要付費，並且大部分是沒有這樣的功能

不過有時候自己的域名不一定會帶來明顯的好處，得想清楚再買。

完整的 Tracking

同樣地，自己架的服務可以完整自訂 GA code，甚至你可以不透過 GA，自己取得使用者 cookie 做分析，以便用作網站優化指標

推播功能

Chrome 42 版之後支援在 web 與 android 的推播功能，就像是 app 會有 push 通知一樣，是一個能夠讓使用者回流的方式，多數免費服務通常都不會支援，或者只會選擇性支援。

資料不落外人

自己的資料自己管！也不怕平台倒閉。（當然備份的責任就落到自己身上了）

以下是我架站的考慮順序，未必是最好、最新的，但目前是可行的。

總得先有站吧？主機、網域，與加密憑證

主機

digital ocean 與 vultr 都有一個月五美金的選擇，重點是也都支援一鍵安裝 wordpress 服務，如果不害怕自己租主機的人，強烈建議自己租，便宜又不會發生代理商倒掉的慘劇。

網域

domain 不管哪裡買都可以，不過個人也是偏好買國外的大公司（e.g. gandi）為主，台灣的網域商好處是有中文客服，壞處就是貴上一筆，品質跟穩定性通常也比不上這些國際大廠。

SSL（加密憑證）

如果沒有 SSL 網站也是能動，但個人把它當做標準配備；有技術能力建議自己裝 let's encrypt，不用花一毛錢，否則只能自己買了。

安裝 WordPress

考慮完實體機器之後，再來就要安裝 WordPress，你可以找到教學一步一步手動安裝，但像是 DigitalOcean 等主機商也越來越多提供一鍵安裝功能，過程中甚至幾乎不需要登入機器下指令。

當然，也有人會直接跳過自己買主機，而是跟代理商一次購買「機器＋網域＋Wordpress＋管理」的整包服務，這樣的好處就是花錢了事，起步很簡單，但除非有特殊原因（e.g. 老闆說這個月就要，公司不想要花人力維護）；如果你是一個獨立創作者，個人並不推薦。

主題與外掛：五花八門該怎麼選？

有了一個空的 WordPress 就像是買了一棟房子，接下來就是要裝潢、買家具，也就是安裝主題與外掛了。

有地方讓我觀摩一下嗎？

其實很多網站都是用 wordpress 架的喔！這裡推薦幾個我有考慮過要參考的網站：

推薦主題

另外推薦幾個跟 Medium 類似精簡風的主題

我看到一些很棒的 wordpress 網站，要如何偷學？

這裡推薦兩個網站，可以查是用什麼主題跟外掛，我用起來他們功能是差不多的，擇一即可

配色

同樣的主題還是可以有不同的配色，如果你跟我一樣，完全沒有藝術跟設計天份，也不會配一套和諧的顏色， 這時候 coolors 就很好用了！

用法可以是很單純的完全隨機，也可以選定幾個顏色固定，其他讓系統配。比如這是目前我的網站的配色組合。

中文字型與排版

目前門檻最高的可能就是這裡了，如果要說 wordpress 中文站，這絕對是最容易被忽略的關鍵點，因為許多漂亮的主題一旦套上中文字型都會亂七八糟，但若要自己改以下的設定，又不能不會 CSS 語法。

或許有一天會出現專門針對中文排版的主題，到那時候才有比較簡單的客製化方式，不需要手動微調太多程式碼。

參考的中文網站

有幾個中文網站可以參考，像是 報導者 是中文媒體中少數使用無襯線字體的網站；另外我特別喜歡 端傳媒 大標題的宋體，引用文字也很棒，不像英文網站直接將斜體套在中文字上導致變形。

統一字型的方法：雲端字型

大部分常見的字型都無法跨系統，像我自己使用 macOS，大部分讀者則是用 Windows，要針對不同作業系統設定不同字型，實在太費工，更不要說一些讀者電腦上沒有的字型。

即使只限制在 Windows，大部分人都有的字體實在太少了，通常最後的結論就是只好使用微軟正黑體。

雲端字型就是為了解決這個問題而產生的，常見的方案有 Google Fonts / justfont 等等服務

如果在這些雲端字型找得到你喜歡的，我傾向優先使用他們，因為同時可以使用自己喜歡的字型，並且不需要讀者另外安裝就看得到。

當然，雲端字型也有壞處，最明顯的就是需要載入時間，所以盡量 import 越少字型越好，Google Fonts 有個貼心的設計，就是你選擇了之後會有一個指標，貼心地告訴你載入速度會不會太慢，我自己只使用一種字型的其中一種字重，在電腦或手機看都沒有明顯的延遲。

另外還有人說祖國會擋 Google Font，不過這不是我在意的點，就先忽略了。

使用的教學也有好心人寫過了，可以參考 Google Fonts 推出「思源黑體」中文網頁字型，改善網頁文字顯示效果

排版

我自己是苦工來達到自己想要的字型排版效果，中間就是不斷地參考、修正，手動修改 CSS，要注意的部份包括：

  • 各種標題（h1, h2, h3）與內文的字體大小
  • 字距
  • 行距
  • 段落(p)間距
  • 列表(li)間距

編輯器

  • 新手推薦：Gutenburg

  • 技術取向推薦：Markdown editor 相關外掛

網站讀取加速

Enable Browser Cache

Cache 可以大幅加快網站讀取速度，而其中一種是 Browser cache，使用它的好處是很多靜態資源（圖片、CSS、Javascript）只要下載過一次，之後一段時間內就不需要重新下載，不只加速使用者讀取體驗，同時也減輕伺服器負擔。

當然，是有些資源並不適合這樣做，但圖片基本上不會改變，我們可以很放心地設定個一年的 Browser Cache。

很多外掛像是 W3 Total Cache 都有提供簡單的介面可以設定 cache policy

裝完之後就會幫你設定好 apache .htaccess 裡面的參數（通常在 /var/www/html/ 下面）

像是這樣：

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/gif A31536000
    ExpiresByType image/jpeg A31536000
    ...

apache server enable expires module

光是設定好參數其實還沒辦法啟用 browser 功能，後來發現要 enable apache 模組：

a2enmod expires

service apache2 restart

這樣就可以看到 Response Header 有如下的訊息，其中 Cache-Control 與 Expires 是我們要的：

Accept-Ranges: bytes
Cache-Control: max-age=31536000
Connection: Keep-Alive
Content-Length: 347983
Content-Type: image/png
Date: Sat, 06 Apr 2019 14:27:16 GMT
ETag: "54f4f-585d7e53779c8"
Expires: Sun, 05 Apr 2020 14:27:16 GMT

Lazy Loading

一般網站的行為是一次將需要的資源都下載下來，但如果圖片一多的話體驗就會很差，因為在下載完所有圖片之前整個瀏覽器頁面可能會比較緩慢、甚至停住。

這時候可以利用 Lazy Loading 的特性，在使用者滑到需要看圖的時候才開始載入圖片，我是使用 a3 Lazy Load，但類似的外掛應該都可以使用。

要注意的有兩點：

  1. 是否有同時支援 web 與 mobile（有的只有 web）
  2. 有時候 Lazy Loading 效果未必會比較好，一開始載入的確加速了，但滑到後面卻發現還要一張一張讀取，反而有點礙眼

自訂性同時也帶來了高門檻，端看使用者需求選用。從無到有架一個站，要考慮的東西非常多，這只是最基本的冰山一角。

這篇文章就暫時介紹到這裡，如果你喜歡圖文並茂的步驟教學，你也可以參考《WOOCOMMERCE教學》，裡面還包含了 woocommerce 的教學！