wordpress theme cover

如何選擇和安裝 WordPress theme – 架好個人網站系列 3

WordPress theme 佈景主題

WordPress theme 佈景主題像是家裡的裝潢一樣,可以根據個人喜好選擇不同的設計。佈景主題主要分為兩種,一種是免費的,一種是收費的。

免費佈景主題的好處

  • 免費。
  • 直接在 WordPress 上找得到,所以是 WordPress 推薦的。
  • 檔案小,程式碼 (script) 少,網頁速度快。
  • 容易安裝。

付費佈景主題的好處

  • 有問題時有客服可以詢問。
  • 設計獨特,跟別人不同。

選擇佈景主題時要考慮的點

  • 容易編輯 。
  • 選你喜歡的字型、顏色的佈景主體,這樣不用再另外設定,多一個步驟就多了產生不相容的機會。
  • Mobile responsive:網站頁面設計會根據使用者用手機或電腦而調整來保持一致。簡單來說就是用手機看網頁不會亂掉或怪怪的。
  • 和你會用到的plugins 要相容。
  • 越簡單越好。網站跑得快非常重要,網站 loading 的速度是 google ranking 的一項參數。
  • 這網站可以測試你的網頁是不是 mobile responsive。

可以找個你很喜歡的網站當模範,看他是用哪種 theme

推薦的佈景主題

GeneratePress

  • 有免費的版本,也可以加錢升級成付費版本,一年 $59。
  • Google Speed Score: A (95%)。
  • Load Time: 1.3 s。
  • Size: 696 Kb。

我自己有兩個網站是用 GeneratePress 做的,很快。

Astra

  • 有免費的版本,也可以加錢升級成付費版本,一年 $59。
  • Google Speed Score: B (85%)。
  • Load Time: 1 s。
  • Size: 833 Kb。

FI with Orange 就是用這個佈景主題做的,有很多地方可以客製化。

佈景主題資料來源:websitehostingrating.com

安裝佈景主題流程教學

用安裝 GeneratePress 為例。

Step 1: 輸入網域名字後面加上 /wp-admin,例如 abc.com/wp-admin 登入網站後台,因為是第一次登入,會先連到 SiteGround,之後登入都會看到 Step 2 的畫面。

wordpress-theme
wordpress-first-time

這邊要你選佈景主題,我們之後要用 wordpress 的,所以這邊就直接跳過。

wordpress-siteground

問你要裝那些 plugin,這邊都跳過也行,之後再裝就好了。我裝了contact form 和 google analytics,出現安裝成功之後,按 go to dashboard 進行 Step2。

wordpress-siteground-plugin1
wordpress-siteground-plugin2
wordpress-siteground-success

Step 2: 輸入網域名字後面加上 /wp-admin 會到下圖這樣的畫面,選 Appearance > Themes 之後會像 step 3 的圖。

wordpress-appearance

Step 3: 按 “Add New” 新增佈景主題。

wordpress-theme-add-new

Step 4: 在右上角 search theme 空格處 ,輸入 GeneratePress。如果不想用這個佈景主題,也可以按看看 “Popular” 受歡迎的佈景主題有哪些選擇。每個 theme 都可以按 Live preview 預覽看看整體效果、版面配置、字型種類、大小。這個步驟可以玩上好長一段時間!

wordpress-theme-browse
wordpress-theme-GeneratePress

Step 5: 我個人想用 GeneratePress 佈景主題,所以找到他之後按 install and activate 就完成了。你也可以先按 Live preview 看看。

wordpress-theme-activate

完成之後可以輸入自己的網址看看,會發現剛剛 activate 的佈景主題套用在自己的網頁上喔。

wordpress-theme-website-check

如果你第一次架網站,非常推薦免費的 GeneratePress。

架好個人網站系列文章

  1. GoDaddy 網域申請
  2. SiteGround hosting 教學
  3. 如何選擇和安裝 WordPress theme(本篇)
  4. How to write a blog post and a page 如何寫文章和頁面
  5. How to setup Google Analytics on your blog