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

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


新手的第一個難題:WordPress有兩種,差別是什麼?

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

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

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

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

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


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

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

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

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

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

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

我們開始吧!


架設網站的三種方式

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

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

1. 架站平台

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

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

2. 網頁公司全客製化

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

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

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中的付費主題

在Google搜尋「WordPress Themes」也可以找到超級多資源

除了前台設計外,有些後台功能也會寫在佈景主題裡面,只要把主題換掉,這些功能會跟著消失,但整體來說,後台的操作界面不會差異太大。換句話說,使用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模組。

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

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


客製化彈性高

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

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

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

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

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

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

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

事實上,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新手入門教學 2 – 網頁設計專有名詞介紹
在WordPress顯示Instagram圖片,品牌行銷活動首選外掛