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-ControlExpires 是我們要的:

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 效果未必會比較好,一開始載入的確加速了,但滑到後面卻發現還要一張一張讀取,反而有點礙眼

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

這篇文章就暫時介紹到這裡,如果有問題歡迎留言給我知道

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Follow on Feedly