用人話寫的WordPress網頁設計教學 1 – 新手入門概念篇

原始文章

用人話寫的WordPress網頁設計教學 1 – 新手入門概念篇

新手的第一個難題：WordPress有兩種，差別是什麼？

WordPress分成兩種，分別是WordPress.org和WordPress.com。這是許多初學者入門的第一個挑戰，搞不清楚自己需要的是哪一個。

這篇文章講的WordPress，以及網路上大部份討論的WordPress，指的都是WordPress.org，它是一套免費而且開放使用者自行修改的網頁系統，你必須要有自己的主機和網址才能使用，下面會作詳細介紹。

WordPress.com則是同一間公司發展出來的另一套商業模式，使用WordPress這套系統提供架站平台的服務，有點類似蝦皮拍賣或是Yahoo拍賣，使用者只需註冊帳號即可開始使用，不需要操心主機及系統的運作問題。缺點是操作上的自由度不如WordPress.org，很多資源都有限制，且非免費，雖然費用上還是比自己租主機來得便宜一些。

下圖是WordPress.com的Blog方案費用，你可以看完這篇文章再判斷自己適合哪一種。

很多人都是這樣開始學WordPress的

很多朋友經常收到老闆的緊急任務，希望在一兩周內用WordPress架設公司的官方網站。老闆對網站可能也沒什麼概念，但聽說WordPress很棒，可以免費，可以客製化，可以輕鬆換掉網頁外觀，可以用外掛加很多功能，這麼簡單而好用的東西，我的員工應該可以輕鬆搞定吧。

如果你看到目前為止，頭已經點了超過一百下，白眼已經翻了二十圈，那這篇文章就是為你而寫。

這篇文章只會講觀念，不會有任何的實作步驟及程式碼，因為在觀念不清楚的情況下，講實作的意義不大，加上網路上已經有很多實作的教學影片，我也不太想勞心勞力重新造輪子。因此，我希望這篇文章可以發揮我的強項，用人話把觀念講清楚。

文中的重要關鍵字，我都會用括號標示，並在後面加上對應的英文字，畢竟英文的資源比中文多，用英文可以快速找到更多的資料。

我盡量會用最淺顯易懂的方式說明，並反覆檢查，確保沒有從天而降的術語，讓大家不至於覺得寫code的人都很難溝通。下一篇文章〈網頁設計專有名詞介紹〉才會介紹常見的專有名詞。

我們開始吧！

架設網站的三種方式

以製造業來說，他們的know-how是產品設計經驗及製程；以軟體業來說，know-how則是程式碼，像是微軟的Office系列。為了防止程式碼被抄襲，大部份的軟體都會經過「編譯 (Compile) 」的過程，把原本的程式碼變成無法被抄襲的格式。

網頁設計業的狀況和軟體業大同小異，通常分為下列三種類型：

1. 架站平台

這類型的網站包含了部落格平台及電子商務平台，模式類似蝦皮拍賣或Yahoo拍賣，由軟體公司提供平台，使用者只需要註冊帳號，就可以在平台上架設自己的網站，並依規定付費，當然也有免費版本。

在這種模式下，程式的維護都是交由軟體公司負責，你不太需要、也不太能自己寫程式，客製化程度有限。這類型的平台除了WordPress.com外，部落格平台有痞客邦、Wix，電子商務平台則有91APP、Shopline、Meeshop等。

2. 網頁公司全客製化

過去，客製化的網頁設計案經常是無中生有，從第一行程式碼開始寫，所有的流程都是客製化的，這個模式通常被稱為「手刻」。像是很多人聽過的Dreamweaver，就算是手刻時代的產物。

當然這些網頁設計公司也不是笨蛋，他們不會真的每個新案子都從零開始，還是會有一些已前寫過的、可重複使用的程式，這也算是公司的資產與know-how。這不只會降低公司的成本，也能夠加速專案的進度。

隨著時代的發展，技術越來越成熟，客戶越來越會殺價，現在會接純手刻的公司已經不多，就算有也很貴，因為這是為你專屬訂製，對軟體公司而言不符合經濟效益，取而代之的是透過開源系統進行部份客製化的模式，也就是第三點。

3. 開源系統

如前面所說，軟體公司的程式碼是他們最大的資產，但有另一種模式反其道而行，稱為「開源 (Open Source)」。

開源的意思就是軟體開發商把程式碼全部公佈出來，任何人都可以「免費」使用，且官方通常會提供詳細的文字說明，告訴使用者哪個模組的功用是什麼，如果要修改的話應該怎麼改，甚至免費提供系統更新。

需要更新的理由有很多，像是資安考量，或新趨勢、新支付方式興起，導致舊有的系統不敷使用。乍聽之下會覺得這些公司很佛心，但他們還是有自己的商業模式，像是付費後才能享有某些進階功能。

如第二點所說，現在許多網頁公司已經不接全客製的案子，而開始使用開源系統進行部份客製化。如果你想架自己的網站，但不具備程式能力，那麼可以試著找網頁公司談談；相反，如果你具備程式能力，或想藉由網頁學習程式，那開源系統是一個還不錯的選擇，因為它免費！

使用開源系統有另外一個優點，如果你的網站原本由A公司建置，但因各種原因，維護及更新的工作想外包給B公司處理，在這種情況下，使用開源系統是最容易轉手的選項。雖然很多網頁公司不太願意接這種空降的案子，但機率比起全客製化的網站來說還是大得多。

除了WordPress外，開源的網頁系統還有OpenCart、Meganto等，但使用數量上還是以WordPress最多，連BBC America、紐約客、Microsoft News都是使用WordPress架設。〈40+ Most Notable Big Name Brands that are Using WordPress〉

所以WordPress厲害在哪裡？

WordPress厲害的地方有三個：佈景多、外掛多、客製化彈性高。

佈景主題 (Theme)

網站通常分為前台(Front-End)與後台(Back-End)，前台是使用者看到的部份，後台則是管理者的操作介面；WordPress的佈景主題即是設計過的前台頁面，也就是你現在看到的這個畫面。

網路上有許多免費或付費的佈景主題，只要把主題換掉，整個網頁看起來就像新的一樣，像是WordPress官網中就列出了一些熱門的主題，在Google搜尋「WordPress Themes」也可以找到超級多資源，如envato中的付費主題。

除了前台設計外，有些後台功能也會寫在佈景主題裡面，只要把主題換掉，這些功能會跟著消失，但整體來說，後台的操作界面不會差異太大。換句話說，使用WordPress的企業不需要為了更改前台設計而把整套網頁系統換掉，除了節省金錢外，也省掉了管理人員重新學習新系統的成本。

看到這裡，記得轉頭敲一下你老闆的頭，不要看到「可以節省管理人員的學習成本」就失控，WordPress還是有一些維護成本在，像是系統更新後，有些舊有的語法可能會被淘汰，需要手動改成新的語法。

另外，如果你想藉由WordPress練習寫程式，最普遍的方式是從客製化佈景主題開始，你可以修改現有的主題，也可以從零開始打造自己的主題。這篇文章最後會說明新手如何開始學習WordPress。

外掛 (Plugin)

外掛通常是一些額外的功能，需要的時候裝上去，用不到的時候移除即可，也是WordPress會如此強大的原因。你可以到WordPress外掛頁面搜尋一下，看你想要的功能是不是有對應外掛。

很多很酷很潮的新東西，像是比特幣(BitCoin)的外掛也有人開發並上架。 其他知名外掛像是購物車系統WooCommerce、佈景主題客製化外掛Elementor、自動備份外掛UpdraftPlus等，可以到Google搜尋「Best WordPress Plugins」，就會有很多網友推薦的清單。

WordPress原始的芻型只是個部落格系統，這也是許多人對它的刻板印象，「WordPress做的東西不就那樣嘛」，甚至很多資深工程師看不起WordPress的。

對於這個現象，我解讀為文人相輕的反射性防禦心理，以及舊時代對新時代的貶低。因為WordPress的出現確實降低了網頁設計的專業門檻，過去要三個人做的事，現在可能只要用一個人。 隨著WordPress系統發展，以及外掛的種類越來越齊全，WordPress可以變成購物網站、BBS論壇或問卷系統，也可以改得完全不像WordPress！

以購物功能來說，國內的許多金物流整合公司，像是綠界、紅陽、藍新都已經提供WordPress外掛，只要安裝並填寫一些資料，就可以啟用信用卡、超商付款等付款方式，以及超商取貨的物流方式。

綠界及藍新金流的WooCommerce模組。

另外，Facebook也發現了這個市場需求，並釋出即時訊息外掛 Messenger Customer Chat，讓使用者可以直接在網頁上傳訊息到粉絲專頁，超級方便！

客製化彈性高

WordPress之所以能有那麼高的客製化空間，因為它有很多的Hook(這個詞翻成中文會有點不倫不類，因此我直接採原文)。 用人話說，WordPress在系統開發的時候，就已經規畫好哪個區塊可以如何客製，並且客製的方法全部寫成文件，如Action Reference，讓開發者可以快速使用。

另外補充說明，WordPress的功能模組大概可以分成三個部份：核心(Core)、外掛(Plugin)、佈景(Theme)。

核心是WordPress的主要程式，所有系統內建的功能都寫在這裡面。這部份強烈不建議作修改，有兩個原因。

一、WordPress的核心程式很龐大，你沒辦法確定改了A是不是會影響BCD，改壞了可能會導致整個系統掛掉。

二、WordPress是個會持續更新的系統，所有針對核心所作的修改都會在更新時被複蓋掉。換句話說，修改核心後，你會陷入兩難的情況：每次更新後都重新修改一次，或是不升級。

WordPress近期的更新歷程如下圖，也可以參考WordPress Versions。 大大小小的更新其實滿多的，如果忍痛不升級的話，嗯，我是覺得不太健康。

事實上，WordPress核心的程式碼很長很噁心，一般人也不會想去看，但有一些資深玩家會從裡面抓Bug，並回報給官方。

基於以上原因，WordPress大部份的客製化功能都是寫在外掛和佈景主題中，你也可以把主題中的客製功能寫成一支外掛。

初學者如何開始學習WordPress？

(一) 加入Facebook上的WordPress社團

FB上的社團WordPress Taiwan 正體中文，是台灣最大的WordPress線上社群，許多實體的WordPress聚會消息也會在這裡公佈。如果你有任何關於WordPress的問題，可以先到社團內搜尋貼文，看其他人有沒有問過類似問題，真的找不到再發文詢問，社團內的大大們都會滿熱心地回覆，或是你有案子想發包也可以在這裡發文詢問。

(二) 實際安裝WordPress

這裡有兩種選項。

一、請朋友協助

如果你有朋友有自己的主機和網站，你可以問他能不能用子網域(Subdomain)開一個測試網站借你玩。至於子網域是什麼，嗯，你先不用管，就這樣問他就對了。

對新手來說，安裝WordPress是件麻煩事，什麼主機啊、網域啊、FTP啊都很陌生，即使跟著教學影片做，也常知其然而不知其所以然，甚至只要自己的介面和影片不一樣就會滿頭問號。這個方式的好處就是請朋友把麻煩事處理掉，自己專注在WordPress的操作學習上，也避免在摸索階段就先花錢買主機買網域。

對於有經驗的玩家來說，這個請求一點都不困難，十分鐘內就可以搞定，對方也不需要付出額外的金錢成本，當然這也要看你們的交情夠不夠深厚。

二、自己在本機(Local)安裝WordPress。

一個能夠正常運作的網站，通常是裝在主機(Host)上，但你可以在自己的電腦，也就是所謂的本機端(Local或Localhost)上安裝。

注意，會在Local安裝網站通常是為了開發或測試使用，其他人是沒辦法連到這個網站的，這和自架主機是兩個不一樣的概念。

由於主機和個人電腦的設定不太一樣，因此，我們需要額外裝軟體來「模擬」主機，如MAMP，它在Mac和Windows上都可以使用；Windows另有XAMPP可選擇。

(三) 開始盡情玩WordPress

安裝完WordPress後，你就可以開始盡情地玩它。 你可以試著新增頁面、新增文章、換佈景、裝外掛，如果不小心玩壞了，整個砍掉重來就好。

如果你是不打算寫程式的玩家，你的新手訓練到這邊就差不多夠用了。 接下來你可以開始尋找喜歡的佈景主題，以及適合的外掛。

(四) 修改佈景主題

如果你想透過WordPress學習寫程式，那你可以從修改主題開始。 但在開始之前，你可以先了解一下什麼是子主題(Child Theme) 。這邊推薦WordPress帶路姬的文章，〈什麼是 WordPress 的子主題？一定要啟用嗎？〉，有概念後再挑選喜歡的主題進行客製化，避免更新佈景後，客製化的部份全部消失的悲劇發生。

修改佈景主題需要的幾種能力，我以難易度排序，大家可以參考參考。

這邊特別說明，下面的幾種能力可以搭配使用，像是用jQuery操作HTML與CSS，或是用PHP產生HTML內容，但這並不表示要把全部能力學完後，你才能夠開始修改佈景。你可以學了新東西後，馬上實際玩玩看，增加學習效率也增加成就感。

1. CSS：處理網頁外觀，包括版面配置、顏色更換，或是滑鼠經過時的小動畫。
2. HTML：負責網頁內容，像是哪裡要加個按鈕、加個文字，就會改到HTML。
3. jQuery/JS：網頁上的動態效果，如彈出式視窗或是圖片輪播。
4. PHP基礎：因為WordPress本身是用PHP寫的，因此在使用WordPress的模組前，建議先熟悉PHP的基礎語法，包括echo、if/else、for、foreach、while、array。
5. WordPress Hooks：即WordPress內建的功能語法，分成Action和Filter兩種，可以參考WordPress的Plugin說明。

(五) 到資料庫看看

我認為了解資料庫的架構，是學習寫WordPress程式時相當重要的基本功。 對新手來說，這個陌生的東西可能會讓你有點恐懼，但它並沒有那麼複雜，把它當成Office中的Excel來理解就可以了。真正複雜的部份我們也用不到。

為避免文章篇幅過長，這部份的內容寫在另一篇文章中，〈自學WordPress網頁設計，你先別急著啃教學寫程式〉。

(六) 打造自己的佈景主題

走到最後一步，你已經準備好讓你的所學自成一路。 打造自己的佈景主題有兩種方法：改別人的、自己重頭寫。

改別人的，這和我們在第四點「修改佈景主題」做的事一樣，但你更改的內容可能幅度更大、更深、更廣。

如果你對於網路上的主題不滿意，版面不喜歡、雜七雜八的功能太多、價格太貴，那你可以考慮自己重頭寫。「自己重頭寫」，這個說法其實有點誤導，因為我們通常不會真的從第一行程式開始撰寫，而會使用Starter Theme。

簡單來說，Starter Theme是一個專門提供給佈景開發者使用，陽春但功能齊全的佈景主題。

為什麼要用Starter Theme？因為在寫佈景時，會有一些固定而繁瑣的起手式，像是新增一個Menu選單、開啟觀外中的自訂(Customizer)功能、載入一些程式套件等等，這些煩雜的事情Starter Theme都可以幫我們解決。另外，每個Starter Theme所提供的功能可能會有些微差異，最好在前期就能定義清楚自己的需求。 至於為什麼Starter Theme的版面都很陽春？因為你一定會改它。

你可以到〈21 Best WordPress Starter Themes for Developers in 2019〉看看熱門的Starter Theme，我自己的網站使用的是第一名的Underscores，或可以寫成_s。

希望大家玩WordPress玩得開心。

《WordPress內容訂閱》 – 試閱1

我最近正在寫一本書，關於WordPress、個人品牌經營，以及如何透過寫作變現。我希望上市前可以先找到一些讀者試閱，並提供意見回饋，您可以透過上面的連結進行試閱。不論你是WordPress的新手或老手，如果你有興趣，都歡迎留下Mail。也歡迎你使用右下角的Facebook Messenger找我聊聊。

推薦文章

用人話寫的WordPress新手入門教學 2 – 網頁設計專有名詞介紹
WordPress網站必裝的四種外掛與推薦清單