Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

如何自學 WordPress 架站

大家好,我是 Eric。

在 2020 年最後一場桃園小聚中,我分享了自己的 WordPress 學習經驗,正好將自己這幾年來的心得整理一下。

這篇文章以「建議議題」的方式,提供不同屬性的 WordPress 使用者可以去延伸尋找相關主題。

為什麼要用 WordPress 的網站

截至 2020 年底,WordPress 在全世界網站的市占率約有 40%。這並不代表 WordPress 是最好的內容管理系統,而是 WordPress 的流通率最高。

與市占率相對應的,是 WordPress 龐大的社群資源。以台灣為例,台北、桃園、彰化、南投、台南、高雄,都持續有小聚交流,而 Facebook 上的 WordPress Taiwan 正體中文也有高達 20,000 名成員。而且相對於其他強調工程技術的開源社群,在台灣的 WordPress 社群成員組成多元,除了工程師外,更多的是設計師以及行銷人員。

因為有龐大的社群,許多功能也早已有其他團隊實作完畢,透過外掛的形式,供使用者下載安裝。這讓 WordPress 的入門門檻進一步降低。

可是,也許你不該學 WordPress 架站

說了 WordPress 的好處後,你仍然不該輕易用它來自架站。台中社群的王大曾撰文論述〈也許你不該使用 WordPress 自架站〉。時間是相當寶貴的資源,如果你不願意花費相對應的時間學習,或是有足夠的好奇心去支撐你的學習動機,那這條路真的不適合你。

身為站長、內容經營者,你需要了解網站是什麼

作為站長,WordPress 對你而言最主要的功能就在「內容管理」。

「經營」

因此比起「如何架設 WordPress」,你更應該知道學習「如何經營網站」。因此你需要學習如何評估成本,包含時間與金錢。千萬不要一味的只想省錢,而花費不需要的時間。

舉例來說,我曾經想要為官網的導覽標記 (breadcrumbs) 支援多語系外掛 Polylang,在與工程師朋友討論後,發現如果要自己添加這個功能,可能要耗費我 10 幾個小時的學習時間。於是我購買了導覽標記的付費擴充應用,折合台幣 700 元。

除此之外,你需要了解如何分析網站的流量,因此你需要學習諸如 Google Analytics 或 Matomo 等分析工具。

網域與主機

關於自行架設 WordPress 的技能,你首先需要了解「什麼是網域」以及「主機是什麼」這兩個核心問題。透過自行購買網域、租用主機,就可以有效的控制架站的成本。

千萬不要在對主機與網域不熟悉的情況下,使用 GCP、AWS 或 Azure 等服務,我在社團看過太多失敗的案例。

順帶一提,我的第一個 WordPress 網站專案是建置於 Gandi.net 的 Simple Hosting 中。

偵錯及備份還原

在 WordPress 社群中,最常見的問題之一,便是「我的畫面一片空白」。

這時,如何透過正確的偵錯 (debug) 流程,擷取到社團發問時所需的偵錯資訊,便相當重要。為此,你需要學習如何開啟 WordPress 的偵錯模式

除了透過紀錄檔進行偵錯外,也可以藉由 Alex 於小聚分享的〈新手也能學得會的 WordPress 網站疑難排解〉流程進行故障排除。

有時遇到難以排除的問題,甚至是資料庫毀損時,便會牽涉到備份與還原的議題。由於大多數的虛擬空間都會搭配自動備份的功能,因此原則上站長只需要知道如何正確操作主機服務提供的備份還原即可。並沒有必要安裝備份還原外掛。

身為設計師,你需要熟悉一款頁面編輯器

透過 WordPress 的頁面編輯器外掛,設計師可以有更多機會實踐自己的想法。與此相對應的,有 3 個主題需要學習:

回應式網站設計 (RWD)

身為前端工程師,我很害怕設計師直接給我一個 PSD 檔。

平面設計與網頁設計在許多觀念都有所不同,從最小的單位,到當代網站強調的「回應式設計 (RWD)」都有不同。在網站的世界裡,你需要重新思考不同元素的間距,會如何因著可見區域的寬度改變。

學習一套頁面編輯器

不論你是 Elementor、Divi 或是 Oxygen 的信徒,總之,選擇一套你順手的頁面編輯器投資。有關 Elementor 與 Oxygen 的比較,可以參考之前的文章

頁面編輯器對於設計師來說非常重要,它可以讓你在幾乎不需要撰寫程式碼的情況下,針對版面與樣式做出最大彈性的修改。

記住,不論你選擇哪一套頁面編輯器,務必先試著讀一次官方的使用說明,了解該如何使用,才能避免因為誤用導致的效能問題。

學一點三本柱 (HTML5 + CSS + JavaScript) 吧

如果想要更有效地使用頁面編輯器,你需要了解在頁面編輯器中,各種樣式屬性的意義。譬如什麼是邊界 (margin)、什麼是邊框間距 (padding)、em 和 px 的差別是什麼、我要如何「置中」這個東西⋯等。

有關三本柱的學習資源,可以參考這篇文章

身為前端工程師,你需要了解佈景主題架構

範本階層 (template hierarchy)

想要透過 WordPress 進行前端開發,首先需要了解 WordPress 作為內容管理系統的範本架構,藉此將網站的各項功能模組化,進行更有效的管理。

除此之外,藉由範本階層,也可以知道不同範本之間的權重關係。這在處理範本衝突時格外重要。

WordPress 工程師必學:勾點 (hook)

勾點之於 WordPress 的重要性,再怎麼強調都不為過。不論是藉由連結現有外掛、上層佈景主題的勾點進行客製化,或是在自己的佈景主題中加入勾點,供其他人使用。即使是前端工程師,也應該要了解如何使用勾點的機制。

有關勾點的說明,可以參考較早以前分享的文章,或是參考我在鐵人賽的文章

初始佈景主題 (starter themes)

在初學 WordPress 時,藉由架構完整、註釋詳盡的初始佈景主題,你可以學習到許多課本不會教的程式碼撰寫標準 (coding standards),這對於後續維護的人而言,是相當重要的。

我自己是透過 _s 這個佈景主題為藍本,進行客製化的佈景主題開發。如果你是習慣使用 Laravel 的 Blade 系統,你也可以嘗試 Sage 專案。

社群夥伴 Oberon 也提供了另一款初始佈景主題,適合習慣使用 Tailwind 的開發者。

最好的學習是實作

我的第一個 WordPress 作品已經下線。藉由那次的專案,我首度了解到什麼是「子佈景主題」,以及子佈景主題的最佳作法。

第二個專案則是為了滿足客戶「高度客製化」的需求,我首度使用了初始佈景主題,並且搭配 ACF Pro 等外掛,提高整個網站的客製化範圍。

後面的專案,我才開始懂得如何評估「是否需要高度客製化」,以及「如何透過子佈景主題達成客戶所需的客製化」。如果我只停留在 W3Schools 或是 freeCodeCamp 的話,這些都沒辦法學到。

最好的學習資源在小聚

我現在鮮少在社團上發問,因為我的問題通常在小聚就能獲得解決。

我在第一次參加小聚時,雖然是被主題吸引,但更重要的是,當時正好在進行 WordPress 客製化的案件,遇到了一些問題,因此想要到小聚詢問。

問題解決了,我留下來了。

並不是說每次小聚都帶著問題,而是透過不斷參與小聚,建立起自己與社群夥伴間的信任關係。等到真的遇到問題時,也能找到真正信任的夥伴協助。

結語

誠如前面劃分的若干主題,「自學 WordPress 架站」這件事,根據你的屬性,所需要接觸的面向也不同。希望透過這篇文章,能夠讓大家知道接下來應該將資源投注在什麼樣的領域中,並進一步延伸需要的技能。

這篇文章放在草稿中空有標題地沉睡了一年半,直到今天才將腦中的內容一鼓作氣地寫出來。自學 WordPress 這條路真的不難走,只要能夠更明確的為自己定位,專注在自己須熟知的領域,很快就能有相對應收穫。

參考資料

Eric Chuang
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料