WP / 架站教學:主題推薦與套用教學

Quen Luo
12 min readApr 20, 2021

WordPress 主題非常的多,不管是針對電商、作品集、企業官網、個人專頁等等的不同使用面向,都有許多的付費和免費主題能夠選擇,該如何選擇?該選用付費還是免費?有如此龐大的開發社群,該使用哪個版型供應商?都是新手入門必問的問題,此外本篇也會提到套用主題的教學。

付費 vs 免費主題

根據 WPTD WordPress 版型偵測分析統計,目前前 25 個熱門的主題版型中,只有六個是 Free theme,排名最高的免費主題是第五名的 Astra 。由此可以發現

其實不是免費的最熱門,也不一定付費會比免費好用。

the Top 5 WordPress Themes on WPTD
the Top WordPress Themes

免費主題的優點

  • 免費
    這點對於新手或是非商業網站來說是一個很大的誘因
  • 可以隨時更換新主題
    讓網站能夠不定時大改版,有新鮮感
  • 新手友善
    畢竟功能會相較的簡單,對於第一次使用 WordPress 的人來說容易上手

免費主題的缺點

  • 後續維運問題
    當開發團隊無法從免費的主題中獲利,當然也比較有可能的無法對主題進行不斷的更新和新增功能,且 WP 時常會進行核心的大更新(可以想像為 iOS 升版),缺乏維護的主題很容易無法和新版的 WP 核心相容,導致出現 Bug 甚至安全性漏洞。
  • 需要另外購買額外的擴充功能
  • 不能保證安全性和品質
    這有可能導致網站速度變慢,以及許多容易被攻破的安全性漏洞
  • 缺乏客戶支援機制
    如果使用上有什麼問題,常常求助無門
  • 功能性不如完整的付費主題
    使得網站可以客製化的空間變少,也導致獨特性降低

付費主題的優點

  • 專業美觀,獨特性
  • 適時、定時的更新
    在競爭激烈的付費主題市場,開發團隊會想辦法確保產品夠吸引人
  • 有客戶服務
    在遇到問題時能都得到專業的客服回應
  • 網站速度加快
    “專業的” 付費主題會有更完整嚴謹的程式碼,能夠讓網站速度加快

付費主題的缺點

  • 付費
    導致我們不太可能短時間更換全新的主題版型
  • 操作上較為複雜
    功能多的介面,帶來的也是更複雜的使用方式
  • 相容性問題
    通常付費的主題會有許多專有的程式碼或特殊功能,在未來更換時有可能出現程式碼失效等問題

總結來說,沒有絕對的哪個好,各自有各自的優缺點,如果你是新手,所架設的網站也沒有那麼高的需求,選用免費的 WP 主題版型顯然是較佳的選項,但如果是未來有規劃要當電商、高流量的專頁網站,建議還是選擇 “好的” 付費的版型,可以避免未來走許多冤望路。

大型 WordPress 版型供應商

首先我們要先知道,可以從哪直接搜尋主題版型

WordPress Themes:https://wordpress.org/themes/

https://wordpress.org/themes/
WP Themes

當然是 WordPress.org 官方網站中的 Themes,頁面可以利用 Feature Filter 來設定想要的條件,例如想要的 Feature 要有 Sticky Post,或是頁面使用目的為 E-Commerce 等等。

但主題實在是太多了,以下介紹幾個熱門的供應商,讓我們既安全也更省時省力的搜尋心儀的版型。

+ StudioPress

算是老牌的供應商了,介面很乾淨清楚,Genesis Pro 客服很專業且有系統,可以直接的買斷 (Infinity Pro Theme Package)

https://my.studiopress.com/themes/
https://my.studiopress.com/themes/

+ Envato Market

數一數二大的 WP 市集平台,除了版型主題,也有販售外掛、程式碼、授權相片影片等等,售價貌似比 StudioPress 平易近人一點,也有提供吃到飽方案(Unlimited downloads of WordPress themes and templates)讓網站擁有者能夠以月付的方式訂閱,無限使用平台上所有產品。

https://themeforest.net/category/wordpress
https://themeforest.net/category/wordpress

+ Thrive Themes

主要是電商取向的主題,除了介面設計,也主打了其他如 A/B Test、顧客轉換率等行銷分析功能。

https://thrivethemes.com/
https://thrivethemes.com/

+ elegant themes

一樣有吃到飽方案,可以使用平台上所有的產品,且有永久會員的方案,如果確定會使用超過三年以上就非常的划算。而其開發的 DIVI 算是很明星的編輯器,提供使用者在排版時可以快速上手。

https://www.elegantthemes.com/
https://www.elegantthemes.com/

該如何選擇適合的主題

了解了該去哪找版型以及免費和付費的版型差別,我們在挑選主題時主要會注意幾個點:

  1. 風格
    當然自己的網站一定要先自己看順眼,千萬不要直接跟著最多人安裝的版型做選擇,也要依網站功能做調整,不要明明是作品集網站卻選了個給電商用的主題。
  2. 相容性
    這包含了瀏覽器相容性和 WP 外掛相容性,現在市面上主流瀏覽器就有 Chrome, Safari, Firefox, Edge 等等,為避免網頁在不同瀏覽器上發生問題,事前測試或是注意是否有人回報問題。而是否有支援一些熱門和必裝的的 WP 外掛也很重要,畢竟那些是 WP 必要的外加功能呀!
  3. RWD 響應式網站設計、無障礙網頁
    讓網站在任何大小的螢幕上都可以不跑版的呈現,不然不只使用者體驗不佳,SEO 方面也會受影響導致排名不佳,這個應該大部分的主題都已經都具備了,但還是要注意!務必!確保有。
    而無障礙網頁則是近期越來越被重視的項目,算是加分的選項。
  4. 網站編輯器
    WordPress 的頁面編輯器有許多種,編輯器決定了你建立頁面的方式,也決定了頁面編排的自由度,像是 Elementor 就是自由度非常高,使用者在設計頁面時可以設定很多的細節,而且介面好用的編輯器。當我們在選擇主題時也可以注意一下,是否支援新版的編輯器,千萬不要傻傻地有新的好用的編輯器不用,還在使用舊版的呀!
  5. 後續的維護狀況
    如前面免費 vs 付費的比較,有沒有好好更新有沒有好好更新和維護是很重要的,儘管選擇的是免費版也是可以注意更新版本的頻率,如果已經很久一段時間沒有更新了,可能就要考慮一下囉!

主題套用教學

Step 1. 進入安裝佈景主題

WordPress 後台,選擇「外觀」 > 「佈景主題」,按下上方「安裝佈景主題」的按鈕

安裝佈景主題示意畫面
佈景主題設定頁面

Step 2. 選擇/上傳主題

如果是要上傳購買的佈景主題安裝包,點選「安裝佈景主題」按鈕,在上傳所拿到的 zip 格式壓縮檔即可。

上傳佈景主題壓縮檔
上傳佈景主題壓縮檔

另外如果是要直接選擇免費主題,可以直接在搜尋欄搜尋,或是利用刪選條件等尋找喜歡的主題,再進行安裝。
PS. 在安裝之前也可以選擇預覽來看看主題的呈現

搜尋主題
搜尋免費主題

Step 3. 安裝

按下安裝件後,會顯示 “安裝中”,大概十秒鐘左右,按鈕會變成「Activate」,按下去就成功啟動囉!

Tips, 安裝 starter templates

相信有些人會嚇一大跳,為什麼安裝後頁面一點都不如預覽所顯示的豐富美觀,只是簡單的文字簡單的排版。

Sample Page
Sample Page of Astra

別擔心!其實版型開發商都會有所謂 demo template 可以匯入,以下以 Astra 示範該如何匯入starter templates

Step 1.

回到控制台首頁,會看到提示條問我們要不要安裝 Starter Templates plugin,按下「Get Started」開啟外掛。

Thank you for installing Astra!
Astra 安裝提示視窗
如果沒有提示視窗,可以從「外觀」> 「Starter Templates」找到這項功能
-
如果沒有看到 Starter Templates,可能代表你沒有開啟這項外掛,至「外掛」>「已安裝的外掛」,找到 Starter Templates 並將其啟用。

Step 2.

選擇想要用的編輯器,這邊我是選擇我用過且推薦的 Elementor

Select Page Builder
Select Page Builder

Step 3.

選擇想要匯入的模板,點擊該頁面會先出現 Page Templates 的預覽,如果不喜歡可以按左上的箭頭回到總覽頁面。
PS. 因為目前是用免費版的 Astra 主題,上標有 “AGENCY” 的都不能選

選擇想要匯入的示範頁面

Step 4.

匯入頁面,選擇「Import Complete Site」會匯入所有的頁面,選擇「Import “Home” Template」則是只會匯入首頁模板。
選擇後會跳出視窗詢問使用者的程度和網頁目的,而下方可以選擇是否要一並匯入其它如小工具(Widgets)等功能。

按下「Next」後會顯示要留下資料的頁面,偷偷說其實點下面 skip 不留資料也可以,完成後就會出現 Imported Successfully!

One Last step for import template

此時重整你的網站,就會發現已經更新成你想像中的樣子,而後台的「頁面」中則可以看到匯入的頁面們。未來如果想要換其他的 demo pages 的話,重複一樣的步驟就可以換載入其他的了。

如果是想要引入另一個 demo,要注意新舊之間互相干擾的問題當然不是頁面之間會互相重疊,而是像 footer 的內容,menu 上的顯示等等整體的設定,可能會有重複的問題。如果想要完全抹除前者的痕跡,可以在匯入新的一個時,於進階選項勾選「完全刪除舊頁面」,但在勾選前請記得確定自己沒有任何要保留的,不管是文字或圖片甚至設定,因為勾選後可以視為直接覆蓋掉整個版本,這點要特別注意。
成功匯入示範頁面

Tips, 刪除 Bitnami Info Page Banner

使用 WordPress Bitnami 架設網站都會預設在右下角有一個 Bitnami 的圖示,點擊會進入到說明文件中,不過這顯然是有點礙眼xd 每次都要手動打叉關閉,實在有點麻煩。好在下個指令就可以刪除了!

Bitnami Info Page Banner
Bitnami Info Page Banner

Step1. 進入 SSH 伺服器

進入到 GCP console > VM 執行個體中:https://console.cloud.google.com/compute/instances
記得確認上方的專案,在下面找到架設有 WordPress 的主機,右邊連線下有個 SSH 按鈕,點擊開啟 SSH 伺服器。

open SSH console
點擊開啟 SSH 伺服器

跳出視窗後,約莫等待一兩分鐘,便會進入終端機畫面

SSH 伺服器
SSH 伺服器畫面

Step2. 執行指令

在伺服器上輸入下列指令後按下 enter 執行,回到 WordPress 介面重新整理後,右下角的 logo 就會被隱藏了。

sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1

以下解釋
WP 預設根目錄: /opt/bitnami/apps/wordpress/bnconfig
參數: –disable_banner (預設是 0 會顯示,1 為設定隱藏)

--

--