.st0{fill:#FFFFFF;}

如何自行架設網站? – 新手免費教學 (WordPress) 

 2021-08-29

By  Mason - 預計閱讀時間約  分鐘

你是否想過能有一個屬於自己的網站或部落格 (博客, blog),來記錄生活點滴、心情,分享你的學習經驗、專長,展示創作及作品等 ..,並且透過自己專屬的網站讓更多人認識你。

當然,如果你想創造一些額外收入的話,架設屬於自己網站或部落格(博客, blog)也是一個可行的方法喔

本篇文章主要提供給新手,如何創建網站或部落格 (博客, blog) 的完整教學。你不需要有任何電腦語言或程式設計基礎,只要你會打字、會上網訂購東西,並且對於學習有熱枕即可輕輕鬆鬆建構屬於自己的網站。

接下來,你只要照著本篇文章的幾個步驟,就可以輕鬆地一步步完成網站的架設。現在就讓我們一起來架網站吧!

架設網站前你需要知道的3件事情

1. 你想架設網站的目的是什麼?

架設網站之前,首先你必須決定該網站的定位、目的為何? 你是要創建屬於個人部落格 (博客, blog) 的網站? 還是為了介紹公司或團體的形象官網? 或是你想經營電商的購物網站?

基本上,無論你的網站定位及目的為何? 基本建站的步驟都是一樣的,只是在網頁設計時的架構會些許不同。儘早確認你的網站定位,將有助於你在日後的網站構思中有更清楚的思緒,不至於手忙腳亂、不知所措。

2. 架設網站或部落格(博客)是一種長期投資!

2.1 網域域名 (Domain Name) + 虛擬主機 (Hosting)

不管你架設網站的目的為何? 一個網站最基礎的二個元素為: 網域域名 (Domain Name) + 虛擬主機 (Hosting),而這二個基本配備則是需要收費的。因此身為網站主人的你則必須負擔這些費用。

架設屬於自己專屬的網站,就好比你承租了一個在網路上的店面,你可以自行決定它的用途! 在架設網站之前,你必須思考: 每個月幾百塊錢台幣的租金 (網域域名 + 虛擬主機 + 網頁編輯器外掛) 是你可以接受的嗎?

對於新手而言,把事情簡單化就好,建議你不要分開購買網域域名和虛擬主機。 大部份的虛擬主機 (Hosting) 供應商都有所謂的租用計劃 (Hosting Package),選擇在同一家購買往往會比分開購買更便宜,而且可以避免日後相關的設定流程,節省你的時間。

目前市面上有許多虛擬主機 (Hosting)供應商,建議你選擇國外的供應商會比較便宜。BluehostSiteGround 是目前國外比較受歡迎的供應商,全球有超過數百萬個網站使用並持續增加中,不論網站空間、網站速度、客戶服務等方面表現都令人滿意,對於網站新手而言是最理想的選擇。

如果你是新手而且預算有限,可以選擇 Bluehost basic 的一年方案,優惠後費用約1600元/年,含一年的網域域名費用此為最划算的組合,可用最少的預算開始架設你的網站。

2.2 網頁編輯器外掛 (Page Builder Plugin)

另外,若是你想讓網頁設計 (主題、頁面及文章) 變得更容易、更專業的話,那麼則需要依靠網頁編輯器 (Page Builder)。

一個簡單的拖放式 (drag and drop) 網頁編輯器,可以讓初學者在網站上構建漂亮、客製化的佈局和登錄頁面。 此外,一個好的網頁編輯器還可以幫助網頁開發人員加快創建、設計的速度,並讓他們可以更高效率地工作。

現在市場上有許多適用於 WordPress 的網頁編輯器,它們可以幫助您自己創建專業的 WordPress 網站,你無需任何電腦編碼技能的基礎就可以上手使用,如: Thrive Architect, Elementor 或 Divi 等等...。

我喜歡的是 Thrive Architect (All-In-One Page Builder) 外掛,也是我目前使用且最推薦的網面編輯器,它也是屬於拖放式 (drag and drop) 網頁編輯器,非常容易上手。你不需有任何程式基礎,只要用拖曳方式,就能客製化出自己想要的網站形式。對於佈景主題 (Theme)、頁面佈局、新增區塊功能、編輯區塊內容等,有了 Thrive Architect 都將變得更容易。

Thrive Architect 除了容易使用、適合初學者之外, 它有許多很棒的功能,還有多種網站樣板及區塊模板,只要選擇你要呈現的設計模板,點擊按鈕就可套用。可以幫你構建一個客製化且漂亮、專業的網站,同時可以節省你建置網站及撰寫文章的時間。個人認為是迄今為止適合初學者使用的最好的網頁編輯器。

當然你也以選擇使用 WordPress 內建的編輯器,但是你會發現兩者設計出的網頁差異,將會是天差地別,而且使用網頁編輯器 (Page Builder) 將更節省你寶貴的時間,如果你的預算允許,建議使用網頁編輯器來編輯佈景主題 (Theme)、頁面 (Page) 及文章 (Post)。

Thrive Architect

2.3 網站佈景主題 (Theme)

每個 WordPress 網站都需要安裝一個網站主題 (Theme) 才能讓網站正常運行,因此挑選一個適合自己網站的而且容易操作的網站主題 (Theme),對於網站創建者來說是一個重要的課題。

WordPress 網站主題 (Theme) 主要負責控制網站的整體外觀和佈局。 所以,網站的側邊欄、頁首、頁尾、頁面的頂部欄位和底部欄位..等重要元素的顯示方式,都是由主題 (Theme) 來控制。

除此之外,網站主題還負責管理各頁面模板的設計。 也就是說,當你設定完成各個頁面的呈現方式之後,之後你添加的所有頁面將會自動的套用到你所設定的模板中。例如': 文章頁面、文章列表頁面、一般頁面以及 404 頁面..等。

WordPress 網站主題還管理各頁面模板中的內容將如何顯示在你的網站上。 例如:在不同頁面和文章上的內容元素、文章發布日期、作者欄位、社交共享功能、評論部分功能..等等。

最後,主題還負責網站外觀所包含的圖像(圓形、矩形或方形圖像)、背景圖案和顏色、內容定位、字體顏色、類型、大小、高度和不同類型文章標題(例如: H1-H6)的設定。

對於新手而言,你只需要專注學習一種 "網頁編輯器 (Page Builder Plugin)",以及一個 "網站佈景主題 (Theme)" 即可!

本教學所有網頁編輯、佈景主題編輯皆以 Thrive Architect + Thrive Theme Builder 這兩個外掛,教你一步一步完成網站的架設。

Thrive Theme Builder + Thrive Architect

如果你想更進一步了解這兩個外掛 (Thrive Architect 和 Thrive Theme Builder) 的話,可以參考此篇文章的介紹:

 <<超好用的 WordPress 全方位外掛 – Thrive Suite 介紹 ! Thrive Architect 和 Thrive Theme Builder 有什麼不同?>>

或者你也可以上他們的官網獲得更多資訊。

2.4 電子郵件行銷 (Email Marketing)

電子郵件行銷(Email Marketing)的定義 (維基百科): 是一種利用電子郵件為其傳遞商業或者募款訊息到其受眾的直銷形式。就廣義而言,每封電子郵件傳送到潛在或現行客戶都可視為電子郵件行銷。

若是你想維持和網站上的觀眾、客戶關係,並保持密切聯繫以利日後的活動推廣、行銷...等。那麼你將會需要電子郵件行銷工具 (Email Marketing Platform),如: GetresponseAweber ...等等。

妥善利用電子郵件行銷平台,就如同你請了一名專門與客戶聯繫的公司員工,可以幫你密切的與客戶維持關係,並可定時或隨時地發送各類訊息 (如: 文宣、廣告、文章...等。) 它的自動化功能可以讓你節省許多寶貴時間。是許多成功的網站主或部落格主,最依賴的工具之一。

電子郵件行銷:是通過電子郵件與客戶溝通的一種經濟有效的方式

3. 你必須要有學習的熱枕!

如果你想架設一個可以賺錢的部落格 (博客) ,不管你想呈現給觀眾或客戶怎樣的內容,最重要的是要吸引你的觀眾訪問你的網站,你提供的訊息或內容必須要讓他們可以滿意。

幾乎所有的觀眾在網路上搜尋相關主題,無非是想獲得某方面的知識、解答或產品。因此,若是他們訪問到你的網站,你應該想盡辦法將他們留住,並希望它們可以再度蒞臨你的網站。

3.1 學習如何能吸引觀眾並留住他們的方法

隨著你的網站或部落格 (博客) 日趨成熟,你所要學習的技能就越多。例如: 網頁設計、文章內容撰寫、SEO(搜索引擎優化)及電子郵件行銷等!


學習內容寫作 - 提供價值,而不是銷售

提供優質的訊息內容並解釋如何幫助在網站上瀏覽的人,如此不但能吸引更多人訪問你的網站,還將使他們停留在網站上更長時間,增加與網站更多互動機會。

當他們覺得你的網站可以提供更多有價值的訊息時,他們將更樂意且重複地造訪網站,一次又一次地回來獲取它們想要的訊息。這也將有助於你的網站在 Google 等搜索引擎中獲得更好的排名。

提供有價值的內容來吸引你的客戶

學習 SEO (搜索引擎優化)

作為一個有抱負的網站主或部落格主,了解 SEO(搜索引擎優化)非常重要,一旦掌握了SEO ,在線用戶就可以輕鬆找到你的網站、瀏覽你的網頁。

當你的網頁或文章被更多人瀏覽或分享時,代表你文章主題或想法越受歡迎,它在 Google 的排名列表中就越高,這也就代表將會有更多的人會透過 Google 搜尋,找到你的網頁,因此你的新觀眾、客戶將會越來越多。



要建立和維護一個成功的網站,最重要的就是了解 SEO 的含義。 通過了解如何針對搜索引擎來優化你的網站、網頁及文章,你可以成功地吸引新的讀者以及會反覆訪問你網站的舊讀者。

學習網站設計和品牌推廣

網站設計和品牌推廣很重要但也不容易。 作為初學者,現階段還不用太擔心,不需要急著追上目前已經有經驗且成功的網站主或部落格主。要知道他們也是一點一滴經過時間的淬鍊,和不斷的失敗及學習而得來的。

網頁設計是一個長時間、慢慢累積、進化的過程。 你可以日後一點一點地改善你的網站,讓許多的細節隨著時間的推移自然而然地出現。

現階段你應該專注於最重要的事情,那就是吸引讀者的內容並快速啟動你的網站。但是要隨時記得: 你必須要有不斷學習、嘗試,在失敗或挫折中繼續前進的心理準備。

架設網站第一步: 註冊網域名及租用虛擬主機

當你決定好網域名稱後,下個步驟就是註冊你的網域名和租用虛擬主機以啟動你自己的網站。以下為: "如何在 Bluehost.com 註冊網域名和租用虛擬主機" 的教學。

點擊下方按鈕獲取折扣 (3.5折) 鏈結, 並進入他們的網站。

  •  在網站首頁上,找到 "Get Started" (開始使用) 按鈕並點擊進入。
bluehost- get started
  • 選擇您的網站租用計劃 (虛擬主機租用計劃)

有四種租用計劃可供選擇。 BASIC、PLUS、CHOICE PLUS 和 PRO。 我建議新手可以從 BASIC 計劃開始。它是最便宜和最容易使用的,如果日後需要,你可以隨時升級到更多功能的計劃。 單擊 “Select” (選擇) 以選擇你的計劃。

bluehost - basic package

如果您只想建立一個網站,那麼你不需要選擇較貴的租用計劃。選擇最便宜的一個即可:BASIC 計劃。但如果您建立多個網站,則可以考慮選擇 PLUS、CHOICE PLUS 或 PRO 計劃。

  • 選擇你自己的網站域名

選擇完租用計劃後,系統會要求你提供你想要註冊、購買的網站域名。 這裡有兩個選項可以選擇。

1. 使用左側的 "Create a new domain" (創建新網域名稱)框,來註冊、購買你的網站域名,然後單擊 "Next" (下一步) 查看它是否可用。
2. 如果你之前已在別處付費購買了網域名稱,則可以使用右側的 “Use a domain you own" (使用您擁有的域名)框,並輸入該名稱,然後單擊 "Next" (下一步)。

bluehost- domain name

當您想要的網域名稱不可用時 (已被註冊),這時,它們將會顯示可用的類似網域名稱列表供你選擇。 你可以從他們的建議中選擇一個,或者輸入其他網域名稱再進行嘗試!

bluehost- domain name
  • 填寫你的個人信息

當你找到並選用了一個可用的網站域名時,系統會請你輸入你的個人信息。(你也可以使用 Google 單擊登錄來更輕鬆地創建帳戶。)

1. 輸入你的地址、姓名、電子郵件、密碼、國家/地區電話號碼等賬單詳細信息。

中文地址翻譯成英文 >>> 可以進入中華郵政網站,進行翻譯。

bluehost-personal information

2. 選擇你的租用計劃和其它增購選項。

Bluehost 租用計劃套餐的時間,分為兩種 (12 個月套餐和36 個月套餐)。 12 個月套餐的前期成本較低,而 36 個月套餐的月費最低。

並非所有增購選項都是必需的。 我建議你可以增購這個選項即可:Domain Privacy Protection (網域隱私保護)。

Domain Privacy Protection (域隱私保護) 這個額外增購選項,可以使您的個人信息變得更私密。 每月 0.99 美元,Bluehost 將保護並隱藏你的姓名、地址和電子郵件。 防止任何可能想要竊取你的信息的人侵入並保密你的信息。

bluehost package

3. 選擇付款方式。

可以用信用卡或 Paypal 支付。 輸入完你的新用卡資訊,然後點擊 “submit” (提交) 按鈕,就完成在 BlueHost 購買網域名及租用虛擬主機的手續了。

bluehost - payment

恭喜! 你現在已經在 Bluehost 上創建了一個帳戶,您很快就會收到一封歡迎電子郵件。 該電子郵件包含登錄帳戶所需的所有信息。

下一步是安裝WordPress。 WordPress 是免費的且非常容易使用的軟件,必須安裝它之後網站才能運行。

架設網站第二步: 安裝 WordPress

1. 在 BlueHost.com 上單擊 "Login" (登錄)。並用你收到的電子郵件裡的登錄帳戶信息,登錄你的帳戶

bluehost-log in
bluehost-login

2. 單擊 “Create your website” (創建您的網站) 按鈕。

bluehost - “skip this step”

3. 在接下來的幾個頁面,皆點擊 “skip this step” (跳過這一步)。

bluehost - “skip this step”
bluehost - “skip this step”
bluehost - “skip this step”

4. 單擊 “Get started” (開始) 按鈕,安裝 WordPress。

bluehost - install wordpress

5. 在接下來的幾頁點擊 “skip this step” (跳過這一步)。

bluehost - install wordpress
bluehost - install wordpress
bluehost - install wordpress

恭喜! 系統現在已開始安裝 WordPress 軟件。 安裝後,它將自動導向到 Bluehost 控制面板 (dashboard)。

架設網站第三步: Bluehost 控制面板設定

1. 安全性 (Security) 設置

  • 單擊 “My Site" (我的網站) 選項標籤。
bluehost dashboard settings
  • 然後點擊 “Manage site” (管理網站) 按鈕。
bluehost dashboard settings
  • 點擊 “Security” (安全) 圖標。 確保已開啟 “SSL Certificate: Let’s Encrypt” 的功能。
bluehost dashboard settings

2. Coming soon page 設置

  • 單擊 “Settings” (設置) 圖標。 
bluehost dashboard - settings
  •  然後向下滾動此頁面到 “Coming soon page” 區塊,然後將其關閉。
bluehost dashboard - settings-coming soon page

3. 創建並設置屬於自己網站域名的電子郵件

  •  點擊 “Advanced”標籤。 然後單擊 "Create an Email Account" (創建電子郵件帳戶) 圖標。
bluehost-create-email-account
  • 在 Domain 欄中,選擇要在哪一個網址創建電子郵件。
  • 在 Username 欄中,輸入您要使用的名稱(如: John。)
  • 在 Password text 中,輸入您希望為此電子郵件帳戶設置的密碼。
  • 然後單擊"Edit settings" (編輯設置) 按鈕。
bluehost-create-email-account
  • 你可以根據需要增加或減少電子郵件的存儲空間。系統設定值為 500 MB。 
  • 用戶、密碼和存儲空間都準確無誤後,單擊 “Create" (創建) 按鈕。
create-email-account-with-Bluehost
  • 現在,你的電子郵件帳戶已成功創建。
  • 然後單擊 "Check Email" (檢查電子郵件) 圖標,登錄到 Webmail 系統中。
create-email-account-with-Bluehost
  • 單擊 "Open" (打開) 按鈕,打開你的收件箱。
webmail-login-Bluehost
  • 現在,您可以在這裡發送和接收郵件以檢查它是否可正常運作。
webmail-Bluehost

架設網站第四步: WordPress 設定 

將網站設置成符合 SEO 環境的網站 (SEO friendly)。

1. 一般設置 (General settings)

  • 單擊 “Log in to WordPress” (登錄 WordPress) 按鈕,登錄到您的 WordPress 控制面板
bluehost - log in to WordPress dashboard
  • 將游標移至 Settings/General (設定/一般)選項標籤。
wordpress dashboard - settings - general
  • 為你的網站添加網站標題 (site title) 和標語 (tagline)。
  • 將電子郵件地址 (Administration Email Address) 更改為你先前已新創建的電子郵件地址 (架設網站第三步)。
  • 在 "Site Language" 欄位更改語言 ,你可以在此將介面改成繁體中文。
  • 選擇“日期格式” (Date Format) 和“時間格式” (Time Format)。
  • 單擊“保存更改” (Save Change) 按鈕以保存更改。
wordpress dashboard - settings - general

2. 永久連結設置 (Permalink settings)

注意: 此步驟只適合新建立的網站,若你的網站已經架設完成且有文章內容者,則不要更改此設定!!

  • 將游標移至轉到 "Settings/Permalink" (設定/永久連結) 選項標籤。
  • 選擇 “Custom Structure” (自定結構),然後選擇順序為:1. %category% 2. %postname%。
  • 然後單擊 “Save Changes” (儲存設定)按鈕。
wordpress dashboard - permalink settings

你的永久連結設定結構應該是:

http://你的網域名.com/%category%/%postname%

3. 編輯使用者

  • 將游標移至轉到 “使用者” 選項標籤,然後單擊 “全部使用者” 選項標籤。
  • 然後,在使用者名稱下方,單擊 “編輯” 按鈕。
Wordpress使用者編輯
  • 在顯示名稱、聯絡資訊、自我介紹部分,填寫你的詳細信息。
  • 然後,單擊 “更新個人資料” 按鈕,儲存更新。
Wordpress使用者編輯1
Wordpress使用者編輯2

4. 安裝: 多合一搜索引擎優化(All In One SEO)外掛和設置

  • 將游標移至轉到 “Plugins” (外掛) 選項標籤,然後單擊 “Add New” (添加新的)按鈕。
All in one seo plugin
  • 搜索 “All In One SEO” 外掛並安裝它。
All in one seo plugin 2
  • 然後,將游標移到 Plugins/Installed Plugins 選項標籤,你將會看到 “All In One SEO” 外掛已安裝完成。
All in one seo plugin 3
  • 將游標移到 "Dashboard/ All in one seo" (控制面板/多合一搜索引擎優化)選項標籤。 單擊“Launch the Setup Wizard” (啟動設置嚮導) 按鈕。
AIOSEO
  • 點擊 “ Let’s Get Started” (讓我們開始吧) 按鈕。
AIOSEO1
  • 選擇 “blog” 類別。
  • 添加你的 “Home Page Title” (主頁標題) 和 “Meta Description” (描述標籤)。
  • 然後,單擊“Save and Continue” (保存並繼續) 按鈕。
AIOSEO2

添加附加的網站信息。

  • 選擇 “Person” (人)或 “Organization” (組織)。
  • 選擇你的電子郵件。
  • 上傳你的 Logo 圖片,或者您可以稍後再回來添加。
  • 上傳你的社交分享圖片,或者您可以稍後再回來添加。
  • 添加您的社交個人資料網址,或者您可以稍後再回來添加。
  • 單擊 “Save and Continue” (保存並繼續) 按鈕。
AIOSEO3
AIOSEO4
  • 然後,單擊 “Save and Continue” (保存並繼續) 按鈕。
AIOSEO5
  • 你可以在此處查看你的網站搜索外觀。 然後,單擊“Save and Continue” (保存並繼續) 按鈕。
AIOSEO6
  • 點擊 “Skip this Step” (跳過這一步) 按鈕。
AIOSEO7-1
  • 點擊 “Skip this Step” (跳過這一步) 按鈕。
AIOSEO9
  • 單擊 “Finish Setup and Go to the Dashboard” (完成設置並轉到控制面板) 按鈕。
AIOSEO10

你已經完成了“All In One SEO” 外掛的基本設置了。 你的網站現在已符合了 SEO的環境。


恭喜! 您現在已經建立了自己的網站。 下一步是開始進行網站框架、基本頁面的設計,然後再對這些設計進行優化。

不用擔心! 循著接下來的教學步驟,你可以輕鬆地設計出屬於自己獨一無二的,而且專業的網站。

架設網站第五步: 網站主要頁面的創建與編輯

當你的觀眾來到你的網站時,對你網站的第一個印象就是你的網站主題和網站首頁,接著它們會瀏覽你網站的其它頁面及文章等等..。

因此,除了提供有價值的文章內容外,好的網頁主題設計將可吸引觀眾的目光、讓他們喜歡你的網站氛圍,並有助於你留住你的觀眾。同時,這也可以大大的提升你的網站在 Google 搜尋引擎上的排名。

接下來的教學,將以 Thrive Architect 外掛進行演示。如果你還沒完成 Thrive Architect 外掛的安裝,請先至 Thrive Suite 官網加入會員並安裝。

1. 創建你的網站主要頁面

  • "網站首頁" 頁面
  • "聯繫我們/我" 頁面
  • "關於我們/我" 頁面
  • "文章" 頁面
  • "隱私權條款"頁面
  • 進入 WordPress 控制面板頁面,將游標移到頁面,單擊新增頁面標籤。
WordPress 新增頁面
  • 創建一個名為“網站首頁”的頁面。 然後單擊 “發佈” 按鈕發佈此頁面。
  •  接著,單擊 WordPress 圖標, 重回 WordPress 控制面板頁面。
  •  重複上述過程,創建另外四個頁面: 聯繫我們/我、關於我們/我、"隱私權條款"、文章。
WordPress網站首頁- Thrive Architect

2. 主要頁面基本設置

2.1 網站首頁與文章頁面設置

  • 進入 WordPress 控制面板頁面,將游標移到設定/閱讀,在 "網站顯示內容" 中,點選 “靜態頁面”。
  •  在 "靜態首頁" 欄中,選取先前創建的 "網站首頁"。(觀眾輸入你的網域後進來網站的第一個頁面)
  • 在 "文章頁面" 欄中,選取先前創建的 "文章"。(文章發表後皆會在此頁面呈現)
  •  然後單擊 “儲存設定” 按鈕。
WordPress網站首頁設定-min

2.2 創建網站上的主選單 (Primary Menu)

  • 進入 WordPress 控制面板頁面,將游標移到外觀/選單,然後單擊 "選單" 標籤。
主選單 Primary Menu

主選單 (Primary Menu)  : 觀眾可以輕鬆地在你的網站上找到內容。

  • 1. 單擊 "建立選單" 。
  • 2. 在 "選單名稱" 欄中,填入 "主選單" 。
  • 3. 勾選 "Primary Menu" 選項 。
  • 4. 單擊 "建立選單" 按鈕。
主選單 Primary Menu 2-
  • 1. 單擊 "檢視全部" 。
  • 2. 將上個步驟建立的四個網頁 (網站首頁、文章、關於我們、聯絡我們),勾選起來。 。
  • 3. 單擊 "新增至選單" 按鈕。
  • 4. 勾選 "Primary Menu" 選項 。
  • 5. 單擊 "儲存選單" 按鈕。
主選單 Primary Menu 3

3. 使用 Thrive Architect 編輯網站主要頁面

3.1 編輯 "網站首頁" 頁面 - 套用 Thrive Architect 頁面模板

  • 回到 WordPress 控制面板頁面,進入"頁面/全部頁面"。
  •  點擊 "網站首頁" 裡的 "Edit with Thrive Architect" 按鈕。
編輯首頁 Thrive Architect
  • 選擇已經製作好的頁面模板,點擊進入"Pre-built Landing Page"。
編輯首頁 Thrive Architect
  • 選擇你想呈現的頁面模板,點擊套用。
編輯首頁 Thrive Architect
 "網站首頁" 頁面設計 - 套用 Thrive Architect 區塊模板
  • 點擊 1 圖標可以重新選取樣板。
  • 點擊 2 圖標可以展開編輯區塊,你可以利用拖拉的方式增加、編輯你想要的功能區塊。
編輯首頁 Thrive Architect

你可以參考官網教學影片: 如下。

3.2 創建 "關於我們" 頁面

  • 回到 WordPress 控制面板頁面,進入"頁面/全部頁面"。
  •  點擊 "關於我們" 裡的 "Edit with Thrive Architect" 按鈕。
關於我們1
  •  點擊 "Normal Page" 。
關於我們2
  •  點擊 " + " 已展開功能區塊列表。
  •  將你想使用的編輯區塊,利用拖方的方式,放置於頁面編輯區、開始編輯你的內容。
關於我們3

3.3 創建 "隱私權條款" 頁面

  • 回到 WordPress 控制面板頁面,進入"頁面/全部頁面"。
  •  點擊 "隱私權條款" 裡的 "Edit with Thrive Architect" 按鈕。
隱私權條款1
  •  點擊 " + " 已展開功能區塊列表。
  •  將文字編輯區塊,利用拖方的方式,放置於頁面編輯區、開始編輯你的內容。
隱私權條款2

3.4 創建 "聯絡我們" 頁面

  • 回到 WordPress 控制面板頁面,進入"頁面/全部頁面"。
聯絡我們
  •  點擊 "聯絡我門" 裡的 "Edit with Thrive Architect" 按鈕。
聯絡我們2
  •  選取左邊欄位,並點擊 "Normal Page" 。
聯絡我們3
  •  點擊 "+" 符號已展開功能區塊列表。
  •  在上方搜尋欄位,輸入 "Contact Form" 以搜尋該區塊。
聯絡我們4
  •  找到 "Contact Form" 區塊,按住滑鼠左鍵不放,將它拖曳至 "聯絡我們" 下方之區塊中。
聯絡我們5
  •  接著會彈出需多模板 (Templates) 區塊,選擇左邊欄位的 "Contact Form" 標籤,點擊後再選擇 "Contact Form 02"。(這裡以 "Contact Form 02"為範例,你可以選擇你想要的模板套用)
聯絡我們6
編輯 "聯絡我們" 表格
  •  1. 點擊一下模板表格區塊,這時左邊會出現編輯區塊。
  •  2. 點擊一下 "Name" 編輯圖標 (如下),將 Name 改成中文。
  •  3. 點擊一下 "Email" 編輯圖標 (如下),將 Email 改成中文。
  •  4. 點擊一下 "Textarea" 編輯圖標 (如下),將 Message 改成中文。
聯絡我們 8-min

將 Name 改成中文:

聯絡我們9-min

將 Email 改成中文

聯絡我們10-min

將 Message 改成中文

聯絡我們11-min

將 Send message 按鈕,改成中文

  • 點擊一下 "Send message" 按鈕,此時左邊會出現編輯欄位。 
  • 點擊一下 "Edit From Element" 按鈕。
聯絡我們12-min
  • 點擊一下 "Send message" 按鈕,此時就可以修改文字成中文了。 
  • 修改完成後,點擊一下 "Done" 按鈕。
聯絡我們13-min

設定 Email

當有人訪問此頁面並向你提交消息時,你就會收到電子郵件;同時系統也會自動回信給提交訊息者。

  • 1. 點擊一下模板表格區塊,這時左邊會出現編輯區塊。 
  • 2. 點擊 "Add Connection" 按鈕。
  • 3. 在" Connection" 欄位裡選取 Email 選項。
  • 4. 選擇 "Send email from this site" 選項。
  • 5. 點擊 "Compose Email" 按鈕。
聯絡我們14
  • 1. 輸入你的電子郵件地址。 
  • 2. 打開 “Send confirmation email to the user that submitted the form” 圖標。
  • 3. 然後,單擊 “Save and Apply” 按鈕。
聯絡我們15
  • 輸入你想回覆給寄件者的信件抬頭及內容。 
  • 點擊 “Save and Apply” 儲存。
聯絡我們16

增加隱私權條款

有鑑於目前對於「個人資料」的保護有著愈來愈嚴格的規範。因此,在網站上增加《隱私權條款》頁面,除了顯示網站擁有人的責任感之外,還可以突顯網站的專業形象。

  • 1. 點擊 "+ Add new" 圖標。
  • 2. 選擇 "GDPR Checkbox"。
  • 3. 取消 "Email" 勾選。
  • 4. 點擊 "APPLY" 按鈕。
聯絡我們17 GDPR

GDPR 條款改成中文版隱私權條款

  • 點擊 "Edit Form Elements" 按鈕。
聯絡我們18 GDPR
  • 1. 點擊此文字框即可進行修改。參考條文內容如下: 我同意提供以上的個人資料, 以便通過電子郵件接收貴網站提供的訊息及資料。[非經您書面同意,本網站不會將個人資料用於其他用途。]隱私權條款
  • 2. 將 "隱私權條款" 文字框起來。
  • 3. 接著點擊鏈結圖標。
  • 4. 複製先前創建的 "隱私權條款" 頁面鏈結,貼於此處。
  • 5. 點擊 "Insert" 按鈕。
  • 6. 點擊 "DONE" 按鈕。
聯絡我們19 GDPR
  • 最後,點擊 "SAVE WORK" 按鈕,即完成了 "聯絡我們" 頁面!
聯絡我們20 GDPR

架設網站第六步: 網站主題及主要頁面的優化

前面第一至第五步驟,我們已經完成了網站大部分的基本架構,現在開始要來進行網站的優化。也就是要讓你的網站看起來更美觀、更專業。

1. 網站主題的安裝及編輯

接下來的教學,將以 "Thrive Suite" 裡面另一個外掛: " Thrive Theme Builder" 進行演示。如果你還沒不是 "Thrive Suite" 會員,請先至 Thrive Suite 官網加入會員後下載 " Thrive Product Manager Plugin" 並安裝。

install thrive theme builder0
  • 回到 WordPress 控制面板頁面,進入" Product Manager",找到 Thrive Theme Builder 並勾選 "Install Theme"。
install thrive theme builder
  • 接著再勾選 " Select all " 來安裝 Thrive suite 所有的外掛。最後,點擊 " Installed selected plugins "。
install thrive theme builder2-min
  • 安裝完成後,點擊 " Activate Thrive Theme Builder " 按鈕。
install thrive theme builder3
  • 目前有兩個主題可供選擇,點擊 " Choose " 按鈕。
install thrive theme builder5
  • 點擊 " Get Started! " 按鈕並開始進行設定。
install thrive theme builder6

上傳網站 Logo

  • 點擊 " Your Logo " 按鈕,上傳你的網站 Logo。Logo 的推薦尺寸為 250 像素 x 40 像素, 若你尚未有屬於你自己網站的 Logo,推薦你可以去 “Canva” 免費的網站,為你的網站設計一個 Logo。
  • 接著點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder7

選擇網站的呈現顏色

  • 點擊顏色圖標來設定你的網站主要色系,選擇一種你喜歡的顏色,這將是你網站上會呈現的主要顏色。。
  • 選擇完畢後,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder8
  • 你可以在圖標上選擇,或直接填入Hex網頁色碼,選擇完畢後,點擊 "APPLY" 。
install thrive theme builder9
  • 接著,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder10

選擇網站的 Header (頁首標題)

  • 點擊下拉選單來選擇 Header (標題) 模板。你可以瀏覽這些設計,然後查看與你網站內容最相似的設計。
  • 選擇你想呈現的 Header 模板之後,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder11
install thrive theme builder12

選擇網站的 Footer (頁尾版面)

  • 點擊下拉選單來選擇 Footer 模板。作為初學者,我建議選擇一個簡單的即可。
  • 選擇你想呈現的 Footer 模板之後,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder13
install thrive theme builder14

選擇網站的 Homepage (網站首頁)

  • 這裡,你將有三個選擇,你可以選擇: 1. 從外掛預先設計好的主頁中進行選擇,2. 可以使用現有的頁面,3. 也可以將文章 ( blog) 頁面顯示為主頁。
  • 因為之前我們已經創建好了網站首頁 (Homepage) ,所以可以選擇第二選項: " Display one of your existing pages" 選項。
install thrive theme builder17
  • 之後,1. 點擊 "Homepage" 下拉選單,選擇網站首頁 (Homepage)。 2. 點擊 "Choose and Continue" 按鈕,進行下一步。
homepage selection

選擇網站的 Single Blog Post (單篇文章) 設計樣式

  • 在此處選擇你的網站文章設計樣式。 你希望網站文章樣式看起來像什麼? 你可以再次使用下拉選單,從一系列預製模板中進行選擇。
  • 選擇好之後,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder19
install thrive theme builder20

選擇網站的 Blog Post List (文章列表) 設計樣式

  • Blog Post List (文章列表),顧名思義就是你網站所有文章呈現的樣式。你可以再次使用下拉選單,從一系列預製的模板中進行選擇。
  • 選擇好之後,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder21
install thrive theme builder22

選擇網站的 Page (頁面) 設計樣式

  • 再次使用下拉選單,你將會發現有許多已設計好的頁面模板,你可以選擇你喜歡的頁面設計。 
  • 選擇好之後,點擊 " Choose and Continue " 按鈕,進行下一步。
install thrive theme builder23
install thrive theme builder24

選擇網站的 Menu (選單)

  • 在此處選擇你的 1. Header Menu (主選單) 和 2. Footer Menu (頁尾選單)。 然後,3. 點擊 “Activate Menu on my Site” 按鈕。 
install thrive theme builder25

恭喜你! 已經完成網站所有設計了。

install thrive theme builder26

2. 優化網站速度

  • 1. 回到 Thrive Theme Builder 控制面板。 點擊 “Site Speed”圖標。 
  • 2.  點擊 “Minification and Caching” 圖標,開始設定。 
Thrive Theme Builder dashboard-Site Speed1
  • 選擇 “WP Faster Cathe” 並點擊 “Install Now” 按鈕。 
Thrive Theme Builder dashboard-Site Speed2
  • 點擊 ““Activate”” 按鈕。 
Thrive Theme Builder dashboard-Site Speed3
  • 點擊 “Configure for Optimal Caching with Thrive” 按鈕。 
Thrive Theme Builder dashboard-Site Speed4
  • 點擊 “Yes, configure the cache” 按鈕。 
Thrive Theme Builder dashboard-Site Speed5
  • 點擊 “Image Optimization” 按鈕。 
Thrive Theme Builder dashboard-Site Speed6
  • 選擇 “No Cost” 選項, 然後點擊 “Install Now” 按鈕。 
Thrive Theme Builder dashboard-Site Speed7
  • 接著,點擊 “Accelerated Mobile Pages”按鈕。 
Thrive Theme Builder dashboard-Site Speed8
  • 打開 “Enable AMP” 選項開關。 
Thrive Theme Builder dashboard-Site Speed9

大功告成! 網站速度已經完成優化!

總結

到目前為止,我們已經完成了所有架設網站的流程 (註冊個人網站網域  + 承租虛擬主機、安裝 WorgPress 及設定、網頁設計) !

你的網站已經準備就緒,接下來就要不斷的充實網站的內容 (文章)了。對於新手而言,不需要想太多及太複雜的事,所有流程、設計保持最簡單的即可。隨著時間和你的不斷學習、努力之後,你將會啟發出更多想法及設計概念,因而網站將會日趨成熟及專業。

希望本篇文章對你在架設網站時有所幫助!

若你有任何問題,可以在下方留言,我將盡速回覆!


  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >