預約網站設計 ：WordPress 線上預約系統＋模板架設套用（自架寶典）

在 WordPress 上要建立「 預約網站 」，可以透過安裝外掛來新增預約功能。透過這類外掛，你可以在後台設定服務時間、價格，並直接管理顧客的預約，同時將整個預約系統無縫整合進網站中～

不論你是餐飲業、健身 / 美容業、或是任何提供專業服務的行業，這篇文章會用 Amelia 外掛為例，帶你一步步完成預約網站設計。

讓你能實現訪客表單預約、預約訂單管理、員工管理設定、客製化預約表單、線上或現場付款、通知信件設定、角色權限設定、包裝預約功能等。

從 架設網站（網域購買、主機選擇） > 基本主題 / 外掛安裝 > 預約外掛操作 > 網站上線，讓你全面掌握架設預約網站技巧 。

因為這篇文章內容滿多的，建議可分批學習，也希望大家都能順利架站成功：）

章節如下：

---

1. 如何自架網站？

網站能正常運作，就需有「 個人網域 」＋「 虛擬主機 」，這是基本配備。

這也是每個站長都需負擔的小投資，沒有例外。

差別是，跟著我的架站教學，你可用最少的預算，建置你的網站：）

網域如何取名呢？

網域是什麼？「 網域 」是網站組成的第一步，就像家的門牌一樣，讓人可以順利找到你的網站。

網域取名完成後，接下來可以看一下網域後綴部分（或稱為頂級域名），要如何選擇呢？

一般最常選擇的就是 .com 類型的頂級域名，它適用於任何場合或服務，通常也是最熱門的選擇（會建議優先選擇）。

但有時候喜歡的網域名字，剛好偏偏被註冊走了，就能用更換頂級域名的方法，還是有機會註冊到自己喜愛的名字。

有關於網域後綴名（頂級域名），有哪些常見的類型呢？下面僅列出一些分享。

虛擬主機是什麼？

「 虛擬主機 」是主機公司在自管的實體主機上，切分成多個虛擬空間，並把這些空間，租給一般使用者使用。

這樣可大幅降低使用者的費用，因為養實體主機是很貴的，所以絕大部分的站長，通常都是租用現成的。

另一個比喻，如果把網址比喻成「 門牌 」，那虛擬主機就是「 家 」的角色。

如果網頁製作完成了，就需放置在優質的虛擬主機，才能確保網站不會受到攻擊，和速度穩定。

如何挑選虛擬主機？

WordPress 是什麼？

WordPress 是全球知名的網頁設計軟體，全球有 40 % 以上的網站，都來自於 WordPress。更多 WordPress 是什麼 。

擁有上萬個佈景主題（樣板）和功能外掛，只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選，請參考 優質佈景主題 和 優質外掛推薦，會給你應該的幫助。

WordPress 可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、購物網站架設 等。

最大好處是，它是免費開源的軟體，可完全掌握自己網站資料，不需被任何網路平台、網頁設計公司牽制。

且不會因為任一網頁製作平台的營運問題，造成網站消失（舉例來說，無名小站結束營運，原來的內容也隨著關站而消失，但這不會發生在 WordPress 身上）。

因為你就是網站的擁有者！

---

2. 虛擬主機推薦

---

3. hosting.com 申請教學

hosting.com 整個申請流程只需幾個步驟就能完成，而且提供 cPanel 後台管理介面，也支援一鍵安裝 WordPress，非常適合架設預約網站使用。

Step 1：選擇 hosting.com 方案

首先，點擊前往 hosting.com 主機 官網，會直接來到 Web Hosting 主機頁面，或是點選 Hosting > Web Hosting 前往也可以。

hosting.com 共享主機提供 4 種方案選擇，任一種方案都享有免費一年網域、WordPress 一鍵安裝、大量儲存空間、不計網站流量、 SSL 免費憑證、Litespeed 加速提升、cPanel 多功能介面、數據中心選擇等。

小備註：方案價格會隨著主機廠商有所調整，以 hosting.com 官網呈現價格為主。

Step 2：選擇主機規格和網域（以 Starter 方案為例）

1. Billing Term 選擇「 1 year 一年 」（折扣比例較高） ＞ Server Location 選擇「 Singapore, SG 新加坡 」（若受眾為亞洲客戶）。

2. 若沒有網域，Account Domain Name 選擇「 Register new domain（註冊新網域）」 ＞ 輸入想申請的網域名稱 ＞ 點選金額右邊「 購物車圖示 」與下方「 Add domain to blanket 加入購物車 」＞ 關閉彈跳視窗。

3. 選擇並確認「 Use domain in basket 」內為你的網域、右手邊有顯示「 你的網域 」＞ 點擊「Confirm and Proceed 確認並繼續 」。

4. 確認購買的「 網域 」、「主機」無誤 ＞ 點擊「 Proceed to Checkout 前往結帳 」。

Step 3：註冊 hosting.com 會員＆進行結帳

1. Create an account 輸入「 英文 基本資料 」＞ 點擊「 Continue 繼續 」。

2. Billing Details 輸入「 英文 帳單地址 」＞ 點擊「 Confirm address 確認地址 」。

3. Payment method 輸入「 付款資訊 」＞ 點擊「 Place order and Pay 送出訂單及付款 」。

4. 等待「 Order complete! 訂購完成 」畫面出現 ＞ 點擊「 Go to my account 」前往 hosting.com 後台。

到這一步，你已成功購買主機囉！

若需要更詳細的購買步驟與附圖說明，可以參考 hosting.com 教學 文章，並完成後續 WhoIs 信件認證、WordPress 網站建置、SSL 憑證申請、主機相關設定等。

安裝主題＋網站外掛

購買完主機＋網域後，我們還需要安裝主題＋基礎外掛，才能有一個完整的 WordPress 網站。

如何安裝主題，主題是什麼，怎麼找到最優質的 WordPress 主題，可以觀看教學文章 10 個最推薦的 WordPress 主題！

也可以參考我們最推薦的 Astra 免費主題 介紹。

外掛部分，WordPress 必備外掛有非常多款，可以看看我們的 WordPress 推薦外掛清單 來進行挑選：）

---

4. Amelia 是什麼？

---

5. Amelia 方案如何選擇？

在了解什麼是 Amelia 之後，相信大家一定都會疑惑該如何購買，下面就帶大夥兒操作啦！

首先，前往 Amelia 官網，點選下圖右上角「 Pricing 」，進入方案選擇畫面。

下圖，可選擇年租制 or 買斷制（只需付款一次，就可享有終身使用、升級）。

如果只有 1 個網站要用可選擇「 Starter 」方案，5 個網站選擇「 Pro 」方案，無限多個可選「 Elite 」方案。

Starter 和 Standard 方案都是僅能使用在一個網站上。

Starter 方案沒有包含行事曆同步、WooCommerce 付款等能力，功能較少一些。而 Standard 方案則多了多語言支援、客製化服務時長、WooCommerce 付款功能等功能。

若預算足夠的話，會推薦選擇年租制的 Pro 方案，可適用於 5 個網站。而且除了有 WooCommerce 付款功能，還有購物車、退款支付、Packages of Services 等功能（包裝服務的功能，文章中也會介紹到）。

這邊站長依照自己的需求選擇即可。

小備註：上圖的「 買斷制 」也是不錯的選擇，如果有長期使用預約系統的站長，也可以考慮一次買斷，之後就不用每年付款了。

選擇好方案後，就會彈出填寫資訊的彈跳視窗， Amelia 有中文翻譯，因此可以直接輸入中文。

左方可確認方案費用＆折扣，確認沒問題後，在右方填寫你的 Email 、選擇所在國家，完成後點選繼續。

接著輸入你的信用卡付款資訊，再次確認購買方案後，點選立即訂閱。

如此一來，我們就順利購買了要製作「 預約網站設計 」，最重要的 WordPress 外掛（Amelia）。

接著，我們繼續往下學習：）

---

6. Amelia 安裝＋啟用憑證

WordPress 預約外掛購買完成後， Amelia 會寄送兩封郵件到你的信箱，一封是購買收據，另一封則是購買憑證。

我們先開啟憑證信件，並依續完成 Amelia 安裝。

Step 1：安裝 Amelia 外掛

到信箱開啟憑證信件，點擊連結前往 Amelia 後台，並輸入下圖的 Username（使用者名稱）、Password（密碼），進行後台登入。

進入 Amelia 後台之後，選擇「 Download 」下載主程式。

前往 WordPress 後台，找到外掛 > 安裝外掛 > 上傳外掛，把剛下載的 Amelia 外掛上傳安裝＋啟用。

這樣 Amelia 外掛就安裝＋啟用成功囉！

Step 2：啟用憑證

安裝完成後，接著我們便來輸入 Amelia 憑證以激活使用。

前往 Amelia 儀表板，找到「 Purchase Code 」，複製數值（ 購買憑證代碼 ）。

小備註：「 Mange Domains 」可管理已填入憑證的網域。

複製好憑證後，回到後台 > Amelia 設定 > Activation 區塊 > 按下「 VIEW ACTIVATION SETTINGS 」。

在「 Purchase code 」貼上剛剛複製的代碼，按下「 Activate 」。

憑證輸入完成，這樣就成功激活 Amelia 啦！可以開始使用所有的 Amelia 功能囉！恭喜大家！

接下來，將會開始 Amelia 外掛的完整使用教學，學完後相信你的線上預約網站，應該也會更完整了。

---

基礎設定

安裝＋啟用 Amelia 後，我們需要先進行一些在預約網站設計前，重要的基礎設定，包括：一般設定、公司設定、營業時間 / 休假日設定、付款方式等 ·· 。

這些設定都會影響到後續預約系統的設置，非常的重要，可以說是蓋好預約系統的地基，所以大家要專注學習唷：）

準備好的話，就趕快開始吧！

一般設定

到 WordPress 後台 > Amelia > 設定，按下「 一般 」區塊的「 VIEW GENERAL SETTINGS 」。

「 一般設定 」主要是在調整預約系統的時間區間設定、預設的預約確認狀態、緩衝時間等 ·· 基本設定項目。

跳出設定彈跳視窗，我們依序看以下設定。

• Default Time Slot Step：調整預約服務時可設置的最短時間段。例如： 30 分鐘為一區間，前台顯示： 12:00～12:30 為一個預約。
• Default Appointment Status：默認預約後狀態。
• Use service duration for booking a time slot：想要服務時長跟預約顯示的時間一樣長，可啟用此選項。
• Include service buffer time in time slots：在預約時間裡加進緩衝時間。
• Minimum time required before booking：到設置時間之前，客戶無法預約。例如：設置為 1 小時，現在時間 12:00 ，客戶只能預約 13:00 以後的服務。
• Minimum time required before canceling：客戶取消預約前須等待的時間。
• Minimum time required before rescheduling：客戶重新設定該預約前須等待的時間。
• Period available for booking in advance：客戶可提前預約的時間。例如：設定 30 天，今天 8 / 25 ，可預約 8/ 25～9 / 24 的服務。

依照需求填好設置，電話國家設置台灣，這樣消費者在前台填入資料時會更加方便。

往下滑還有其他變更項目，我們將圖中標註項目全開啟，這些是預約成功的系統通知信設定，通知功能會在之後的章節詳細教學。

全部設定完成，記得選擇「保存」。

小備註：如果希望開啟 Google reCAPTCHA ，可先前往官方網站註冊獲取 ID ，開啟一般設定中的「 Enable Google reCAPTCHA 」填入獲取 ID 即可使用。

公司設定

關於預約的基礎項目調整好之後，我們就來設定公司的基本資料吧～

回到 Amelia 設定 > 「 Company 」區塊 > 選擇「 VIEW COMPANY SETTINGS（公司設定）」。

跳出公司設定，依照順序填入公司相關資訊，點選「 保存 」即可。

填完資料選擇保存，我們就完成公司資料的鍵入囉～

營業時間 / 休息日設定

此項目為設置公司的「 營業時間 / 休息日 」，會直接套用到全部員工的時間安排上。

Amelia 設定頁面 > 「 Working Hours & Days Off 」區塊 > 選擇「 VIEW WORKING HOURS & DAYS OFF SETTINGS 」。

營業時間

可調整一週的營業 / 休息時間，以 30 分鐘為一個時間單位。

按鈕「 ＋ 」可新增 營業 / 休息 時間段，按鈕「 － 」可刪除時間段。

星期一旁邊的「 適用於全天 」按鈕，非常好用，可將星期一的時間設定一次套用至其他日子：）

時間段設定完成，選擇區塊內的「 保存 」即可。

小備註：營業時間會作用在新增的員工，但已存在的員工營業時間不會被調整，在已有員工的情況下更改營業時間，也要到個別員工頁面調整唷！

休息日

設定全公司的休假日，顯示在前台，讓顧客不會預約到休假日期。

切換「 休息日 」區塊 > 增加休息時間 > 輸入名稱日期 > 選擇是否「 每年重複一次 」> 按下「 增加休息時間 」按鈕 ，即可新增休假日。

付款方式

預約完成之後，如果沒有一個好的付款管道，對於客戶跟站長來說都是有些尷尬的事情吧 > <

所以讓顧客有一個方便的付款方式是很重要的。

回到 Amelia 設定頁面 > 「 付款方式 」區塊 > 選擇「 VIEW PAYMENTS SETTINGS 」。

進入付款設定頁面，有一項重要的設定，就是選擇幣種，這邊我們選擇 新台幣，因應新台幣的使用習慣，我們將數字後顯示小數點設為 0 ，方便客戶閱讀金額。

其餘設定項可依照自己需求進行調整，下面會講解不同類型的網路電商可選擇的付款方式。

我們簡單說明第三點紅框中的付款方式：

• 在現場：客戶到現場時進行支付。適合店家類型：餐廳、咖啡廳等 ·· 現場即時消費類型。
• WooCommerce：串連 WooCommerce 金物流系統進行多種付款方式。例如：銀行轉帳、線上刷卡等 ·· 。適合店家類型：健身房、律師服務、室內設計等 ·· 販售專業知識者。

兩者只能擇一唷。因為其他付款方式較不適用台灣消費者，便不多做介紹。

選擇在現場支付，客戶在前台不需進入結帳即可預約，較沒有金流上的問題，因此這邊我以串接 WooComerce 作為教學示範。

勾選串接 WooCommerce 付款服務之後， Amelia 會自動連線到 WooCommerce 的付款頁面，不過在那之前，要先下載 WooCommerce 並完成相關設定唷。更多 WooCommerce 基礎教學 。

小備註：可以在 WooCommerce 安裝第三方金物流外掛，新增貼近台灣消費者習慣的付帳方式。相關外掛教學： WooCommerce綠界外掛教學 、 RY WooCommerce Tools 外掛教學 。

完成付款方式的設定之後，我們就繼續前往下個步驟吧！

Labels 標籤

「 Labels 標籤 」設定可更改在網站上顯示的文本。

回到設定頁面 >「 Labels 」區塊 > 選擇「 VIEW LABELS SETTINGS 」。

將文本都填入中文，按下「 保存 」即可。

這邊可將前台的系統字進行翻譯，如下圖：

如果在之後發現有未翻譯完全的系統字，可以參考 Loco Translate 翻譯外掛教學 。

Roles Settings 權限設定

這個區塊主要功能是設置「 員工、客戶使用面板權限 」，Amelia 有員工以及客戶面板功能，可讓員工、客戶查看預約情況。

在此流程，我們會先新增員工、顧客的管理頁面＋權限設定，詳細的新增員工流程，會在之後的章節教學。

新增員工、顧客管理頁面

前往 WordPress 後台 > 新增頁面 。

選擇區塊小工具（Employee Panel 顧客面板）> 輸入頁面標題 > 網址代稱填寫「 employee 」> 發布。

到前台網頁檢查，發現成功新增「 員工專區 」頁面！

這邊先將前台的「員工面板」網址複製下來（下面會用到）。

接著，我們需要在選單放上「員工專區」頁面，這樣員工才點的到。

進入外觀 > 選單 > 勾選「 員工專區 」頁面 > 新增至選單 > 拖曳順序，記得儲存選單。更多 WordPress 選單 教學。

到前台網站檢查，順利成功新增「 員工專區 」到主選單上囉～

這樣一來，員工就可以透過該連結登入「員工專區」，檢查自己相關的預約紀錄。

員工權限相關設定

Amelia 設定 > 「 Roles Settings 」區塊 > 選擇「 VIEW ROLES SETTINGS 」。

先勾選啟用員工面板功能，輸入員工頁面的網址（剛上面有請大家進行複製）。

設定員工權限的部分，這邊我們都先暫時不將功能開啟給員工，細節說明如下：

• Configure their services：員工可分配他們能夠被預約的服務項目。
• Configure their schedule：編輯營業時間權限。
• Configure their days off：自行添加休假日。
• Configure their special days：增加特殊營業時間 / 休息時間權限。
• Manage their appointments：可管理被預約的服務細節。
• Manage their events：可管理被預約的活動細節。

你可以自由選擇要將哪些權限開啟給員工使用：）

全部設定好選「 保存 」即可。

客戶權限相關設定

切換至「 顧客 」面板，調整顧客查看預約權限。

我們先開啟紅框中的選項：檢查預約者是否為現有客戶、自動創建新客戶資料、啟用客戶面板。

其他具體設定項目如下圖：

• Check customer’s name for existing email when booking：透過電子郵件檢查預約者是否已是現有客戶。
• Automatically create Amelia Customer user： 新預約者下單後，Amelia 會自動創建 WordPress 使用者以及客戶帳號資料。
• Allow customers to reschedule their own appointments：允許客戶修改自己的預約項目。
• Require password for login：不使用密碼，用電子郵箱即可登入客戶面板，一些非隱秘性資訊的電商平台適合這種形式。
• Allow customers to delete their profile：允許客戶刪除他們的資料，通常不建議開啟，可能會遇到有電子郵箱卻沒有客戶姓名記錄的情況。

依照站長需求設置完成，填入客戶面板的網址，便可以按下保存，繼續下一章教學：）

小備註：「 客戶專區 」頁面，跟上面的「 員工專區 」頁面，兩者的新增＆設定方式是差不多的，可以參考上面的教學。

---

通知信件設定

這一章節，我們會進行「 通知信件 」的設定教學。

通知信件的作用在於，發送預約訂單的相關資訊給員工、客戶，比如說：是否預約成功、付費狀態等 ·· 。也可以發送員工 / 顧客會員資料。

準備好的話，我們就開始來設置吧：）

Notifications 基本設定

在 Amelia 設定頁面有「 Notifications 」區塊可供調整，這區塊主要設定發送信件的操作機制、連結 URL等 ·· 項目。

Amelia 設定 > 「 Notifications 」區塊 > 選擇「 VIEW NOTIFICATIONS SETTINGS 」便會跳出操控面板。

選擇「 WP Mail 」> 輸入信件相關資訊 > 開啟自動發信面板 。我們就完成通知信件的後台設置。

URL 的相關設定，我們可以新增感謝預約、取消預約成功、無法取消該預約等 ·· 頁面的連結。

在顧客 / 員工權限設定有開啟相關功能（例如：允許客戶取消預約等 ·· ），可在通知設定這裡填入對應的 URL ，系統信件便可以關聯此連結。

Notifications 信件面板

設定系統通知信件之後，我們可以更改信件內容，以及新增發送信模板。

前往 Amelia > Notifications 頁籤 > 進入 Notifications 面板。

我們以修改寄給客戶的預約成功信為範例，找到「 Appointment Approved 」預約成功模板 > 語言選擇中文（台灣） > 輸入信件內容 > 保存。

Amelia 也有整理不同類別的短代碼，方便站長嵌入信件內。

設置成功之後，我們嘗試在前端預約並且發信，信件內容修改成功～

---

Locations 地點設定

在公司設定中我們已經設置了公司地址，不過這邊需要設置的是預約服務地點。

像是：室內設計的公司地址，與諮詢辦公室可能不在同一個位置、健身房有好幾個分中心、餐廳也有所多分店可訂位等 ·· 情況。

這種時候，我們就需要透過 Amelia 新增不同的地點，顯示在前台的預約服務中，讓顧客可選擇前往何處享受服務：）

前往 Amelia > Locations 面板 >「 Add Location 」新增地點。

填入地點資訊，這邊我們可以設置地標，客戶在預約時，就可以使用其他地圖軟體，前往該地點。

如果地標定位不到地址，可能就需要使用經緯度來幫助地圖定位。

全部設定完成，保存即可新增地點。

---

員工新增＋設定

接著我們要來帶大家新增員工以及介紹設定員工的面板功能：）

新增員工

先到「 使用者列表 > 全部使用者 > 新增使用者 」來新增員工在後台的使用者權限。

進入新增使用者頁面，依序填入員工資料，在「 使用者角色 」選擇「 Amelia Employee 」> 新增使用者。

新增使用者之後，我們到員工頁面新增員工： Amelia > Employees 面板 > Add Employee 。

依序輸入員工資料，在「 WordPress User 」選擇剛新增的「 Amelia Employee 」使用者，鍵入員工專區密碼，並確認是否有勾選「 將帳號密碼信件發送給員工 」。

確認無誤，按下保存即可新增員工。

地點的部分，在上一個章節我們調整過不同辦公室的地點，這邊可對員工進行所在地點的分配。

客戶在前台選擇地點時，便可以選擇在該地點服務的員工。

小備註：如果一開始沒有新增使用者，也可以在新增員工時，選擇「 創建新的 」按鈕， Amelia 會自動在 WordPress 後台新增一個「 Amelia Employee 」使用者。

員工調整面板

新增完員工之後，我們來看可以怎麼調整個別員工的設定吧：）

選擇一名員工，進入設定面板，我們可以看見前兩項可調整項目為：修改該員工預約項目、調整營業時間。

修改預約服務可依照該員工的能力進行勾選；營業時間若沒有特別需求，可以不用調整。

接著我們看「 休息日 」區塊，如果員工請假，可以在「 休息日 」區塊新增日期。該員工在特定日期不能被預約，而且不會影響到其他員工的可預約時間。

再切換到「 特別的日子 」區塊，這裡可以新增員工的特殊上班時間，與其他員工的正常營業時間區分開。

以上就是可在個別員工面板調整的項目，讓站長更方便管理員工的動向，非常的重要唷，都學會了嗎：）

---

預約系統設定

在 Amelia 有 2 個前台的功能可以讓客戶先行選擇服務，一個是預約系統，另一個則是活動（課程）系統。

這個章節，我們會教大家如何新增 / 設定最重要的預約系統。

準備好的話，就開始囉；）

新增預約服務

第一步，我們先來新增預約服務的項目，這邊我會教大家一步一步慢慢建立預約項目～

Step1：新增分類

首先： Amelia 後台 > 服務頁籤 > 進入服務設定面板 。

在新增預約服務前，我們必須先新增一個分類，才能夠安排預約服務。

在 分類目錄 > 「 Add Category 」> 輸入分類名稱 > 點選藍勾圖鈕 。即可新增一個分類項目。

Step2：新增預約服務

在新增分類項目以後，我們便可以在該分類裡新增預約服務的內容。

選擇要新增預約服務的分類 > 上方「 Add Service 」或下方「 ＋ 」按鈕都可新增預約項目。

Step3：預約服務設定

新增預約設定，會跳出設定細項，我們先在「 Service Details 」區塊填入預約服務的基本資訊。可參考圖片中說明功能：調整標籤顏色、訂金支付等 ·· 。

訂金設定可以讓客戶在預約時須先預付一筆金額。有 2 種計費方式：「 Fixed amount 」固定金額、「 Percentage 」百分比（依照全額的百分比決定訂金金額）。

• Category ：選擇該預約服務的分類項目。
• 持續時間：預約服務的全部時間。
• Enable deposit payment ：開啟訂金服務。選擇「 Fixed amount 」可設定固定金額；「 Percentage 」依照全額百分比調整訂金。

接著往下滑，還有許多重要的設定項目，例如：設定同行人數、設定員工執行該預約服務等 ·· 。具體如下：

• Buffer Time Before：為預約前準備時間，同一位員工的預約時間會自動間隔出設定時間。
• Buffer Time After：為預約後休息時間，同樣預約時會自動間隔出設定時間。
• Minimum Capacity：客戶預約時的最少人數。
• Maximum Capacity：客戶預約時的最多人數。
• Show “Bringing anyone with you” option：是否在前台顯示「 攜帶更多人前往 」按鈕。
• The price will multiply by the number of people：客戶攜帶人也必須付費。
• Show service on site：將此項服務顯示於前台。
• Set recurring appointment：是否設定週期循環，於前台主動顯示詢問客戶。例如：一週一次、一月一次等 ·· 。
• Employees：設定執行該預約服務的員工。

接著我們切換到不同的區塊，進行單項預約項目的設定。

「 Gallery 」區塊，可新增預約服務相關照片，讓客戶於前台預覽，進一步了解預約服務的內容。

「 額外 」區塊，可新增額外的預約項目，附加於此預約之下，讓客戶可決定是否加選別種服務（類似購物商城的加購功能）。

這項服務可以運用在餐廳等 ·· 類似服務的網站上，新增例如：求婚佈置、浪漫燭光晚餐佈置等 ·· 別種涵蓋在訂位服務之下的額外需求。

「 設定 」區塊，可對單項目的預約服務進行：預約狀態、預約前須等待最短時間等 ·· 設定。對應 Amelia 一般設定的項目。

也可個別調整付款方式，關聯的第三方日曆外掛等 ·· 。

「 在預定後重定向 URL 」選項，可以新增感謝頁面填入 URL ，或是填入客戶面板 URL 。客戶在預約完成後會自動導向到設定的路徑。

那麼以上就是新增＋設定預約服務的教學啦～

大家都學會了嗎？

Package 包裝預約功能

預約服務還有一個「 包裝 」功能，將多項相似功能的預約服務配套，讓客戶可以自由選擇是否一次預約。

很適合販售的服務為長期性質的站長，例如：教學課程、健身房、室內設計、建築工程等 ·· 網站的站長使用。

我們先在「 服務 」區塊，新增想放進包裝裡的預約服務之後，切換「 Packages 」區塊 > 「 Add Package 」或「 ＋ 」鈕。新增一個包裝設定。

新增之後，我們會到「 Package Details 」區塊，輸入資料，設定持續時間，我們就可以進行下一步。

切換「 服務 」區塊，這裡是設定配套裡的服務項目，我們可藉由下拉選單，將想加入的預約服務都加入。

加入預約之後，可以對個別預約服務進行調整，詳細如下圖：

• Number of appointments：此套餐中該項預約服務包含的次數。
• Minimum bookings required：最低須預定次數。
• Maximum bookings required：最高可預訂次數（非強制）。

我們依序更改選擇的預約服務設定即可。

設定完成，接著切換「 價格 」區塊，這裡有 2 種價格計算方式：「 Calculated price 」原服務疊加價格、「 Custom price 」自訂配套價格。

這兩項價格設定都可以啟用訂金功能。

「 Gallery 」區塊可增加該配套服務的相片；「 設定 」區塊可以變更付款方式，一般來說不會動到此項區塊的設定。

都確定沒問題之後，按下保存新增包裝，配套包裝的項目就完成囉！

---

預約系統上線

設定完後台的預約模板，就可以讓預約系統在前台網站上線啦！

這個章節，我會帶領大家完成兩件事：新增 / 設計預約頁面、讓預約網站於主選單上呈現。

建立預約頁面

預約系統面板

我們先到頁面面板，選擇新增頁面，進入之後，更改網址代稱，接著點選「 使用 Elementor 編輯 」。

進入 Elementor 編輯頁面之後，我們可以運用 Elementor 排版，讓頁面變得更精美。更多 Elementor Pro 教學 。

排版完成，新增 Amelia 預約區塊小工具。

在左邊區塊小工具列表，找到「 AMELIA 」分類 > 選擇拖曳「 Amelia – Booking view 」小工具。

放進小工具之後，我們可以再做預設預約選項、調整背景樣式等 ·· 設定。

完成之後，選擇發布頁面，就可以到前台檢查預約頁面囉～

小備註：除了將「 預約 」區塊小工具放在單一頁面，也可以直接將「 預約 」區塊嵌入不同的已上線頁面，例如：首頁等 ·· 。

目錄預約面板

目錄預約是另一種預約形式，可以讓客戶藉由分類，更好找到他們想要的服務。

在原有的預約頁面編輯，左邊區塊小工具列表，找到「 AMELIA 」分類 > 選擇拖曳「 Amelia – Booking view 」小工具。

前台顯示效果如下：

前台網站上線

新增完頁面之後，我們需要讓客戶可以在前台網站找到路徑訪問我們的預約頁面。

我們一樣使用前面教學過的方式，使用主選單。

進入外觀 > 選單 > 勾選「 預約 」頁面 > 新增至選單 > 拖曳順序 ，結束後儲存選單。

成功顯示選單按鈕～

---

活動 / 課程新增＋上線

我們在前面章節有提到， Amelia 有 2 個可供客戶選擇的服務功能：預約、活動。這一個章節，我們要介紹的，就是活動（課程）系統。

活動系統是由主辦方發起一項服務，讓該時段有空的客戶可報名參與。因此很適用講座、課程等 ·· 類型的網站。

Step1：新增活動＋設定

Amelia > 活動 > 「 新的活動 」或「＋」鈕，新增活動。

進入「 活動詳情 」區塊，我們可以在這邊設定活動的基本資訊以及設定。

還可以設定是否有重複日期、訂金、分類標籤等 ·· 功能。

• This is a recurring event：勾選可讓該活動重複。
• Enable deposit payment：開啟訂金功能。
• Allow the same customer to book more than once：允許同為客戶多次進行該項目的預約。

活動詳情設定完成，切換至「 定制 」區塊，這邊可訂製活動在前台顯示的樣式：活動照片、按鈕顏色等 ·· 。

「 設定 」區塊，可以對活動進行後續設定，例如：取消預約前所需的時間、預定後重新定向 URL 等 ·· 。

付款方式若沒有特別需求，維持原本設定即可。

設定完活動細節，按下「 保存 」即可。

Step2：新增活動區塊小工具

我們必須將「 活動 」區塊小工具，新增到前台網站上，才能夠顯示活動預定系統。

可以參考「 員工專區 」、「 預約 」頁面新增及上線方法，使用 WordPress 內建頁面編輯器或 Elementor 新增頁面，拉入名為「 Amelia – Events 」的元素按鈕進頁面。更多 頁面編輯器外掛分享 。

也可以使用選單系統，將活動頁面單獨放在主選單（或子選單），也可附加在其他頁面裡。更多 如何添加 WordPress 子選單 。

完成之後成品如下：

---

自定義預約系統模板

在模板上線之前，我們可以先行調整模板的樣式以及色彩，讓預約、活動、員工、會員等 ·· 模板上的視覺設計更貼近於品牌 / 電商網站的設計風格～

前往 Amelia > 定制 > 進入自訂表格模板。

接著，我們先介紹面板：

在知道面板劃分之後，我們到列表區，這邊可以選擇調整全部的面板，先以變更分步預約系統模版為範例。

「 Form 」列表選擇「 Step By Step Booking Form 」模板 > 「 Form Flow 」選擇「 Service 」 > 語言選擇中文（台灣）。

選擇面板之後，我們先來到全域變更區，對全域顏色先進行一次調整，細節如下：

• Primary Color：基礎顏色，一些按鈕與文本顏色會呈現此色調。
• Primary Gradient：主要修改員工 / 客戶面板的漸層背景色。
• Text Color：全域文本顏色。
• Text Color on Background：文本在其他有顏色的背景上會呈現的色彩。

調整完之後直接保存即可。接著我們要直接在視覺呈現區調整模板細節。

來到視覺呈現區，這邊是直覺式的視覺編輯器，可以直接在模板上變更及實時預覽效果。

左邊是文本、區塊相關，右邊則是視覺呈現；點選鉛筆圖案，可以對文本進行翻譯字輸入，前台便會顯示翻譯字。

我們切換每個步驟一一進行調整，便可以按下保存，接著就可以前往前台觀看變更效果～

其他類型模板，例如：活動、分類目錄、「 包裝 」預約等 ·· 模板都可以在這裡參考以上教學進行調整～

---

顧客 / 員工登入設定

在前面的「 Roles Settings 權限設定 」小章節，我們學習到如何新增「 員工 / 顧客登入面板 」。

不過具體該如何操作，讓員工、顧客擁有進入專區的權限？

這個章節會有詳細的教學～

員工登入設定

Amelia 在通知功能中，預設有發送登入資訊信件給員工、顧客的功能，我們只需要透過發送信件設定，便可以將登入資訊傳送給員工跟顧客。

下面會有具體的操作教學唷：）

Step1：修改員工登入通知信模板

因為預設信件都是英文，所以我們需要先將模版內容修改成中文。

如何修改信件內容： Amelia > Notifications 頁籤 > Notifications 面板 > To Employee 區塊 > 找到 Employee Panel Access 模板進行修改。

Step2：員工設定（寄送信件）

在「 新增員工 」小章節，我們便提醒過大家，需要在設定員工時勾選「 帳號以及密碼確認信寄送 」選項。

如果忘記勾選：Amelia > Employees 頁籤，找到對應員工，再次輸入密碼，並勾選「 自動發送員工專區密碼 」。

在新增員工、編輯員工時輸入密碼，勾選該選項並保存，系統便會自動派發帳號以及密碼信件給員工，員工便可經由這些資訊登入員工專區。

Step3：登入員工專區

我們使用信件提供的資訊，登入員工專區頁面。

成功登入～員工可以查看自己負責的預約以及活動項目～

因為後台設定員工沒有任何修改權限，所以只能夠觀看目前預約、活動情況。

小備註：員工 / 客戶專區權限設定、新增專區頁面，請參考本文「 Roles Settings 權限設定 」小章節。

顧客登入設定

顧客專區的登入設定相較員工專區會比較複雜一點，我們會設定在客戶下第一筆預約時，自動建立 Amelia、WordPress 、 WooCommerce 這三個不同的帳號。

Amelia 帳號可讓客戶瀏覽會員專區面版、修改預約內容； WordPress 使用者是賦予客戶權限； WooCommerce 帳號則可以讓客戶運用查看預約訂單詳情。

我們一樣會一步步帶領大家操作唷！

Step1：修改顧客登入通知信模板

使用 Amelia 內建結帳系統（現場付）的站長，在後續設定會由 WordPress 後台發送信件，因此不必更改 Amelia 、 WooCommerce 的信件模板。

使用 WooCommerce 結帳的站長，因為 WooCommerce 的會員與 Amelia 的會員關聯，登入通知信會由 WooCommerce 寄送，所以我們需要到 WooCOmmerce 進行修改。

WooCommerce 設定 > 電子郵件 > 「 新帳號 」模板 > 管理。

進入模板，即可修改信件內容，修改完畢選擇「 儲存設定 」即可。

小備註：WooCommerce 信件模板可使用外掛客製化修改。更多 WooCommerce 信件模板外掛 。

Step2：顧客設定（寄送信件）

在「 Roles Settings 權限設定 」小章節，設定顧客面板權限時，需要將「 自動創建新客戶資料 」選項開啟。

如果忘記開啟：Amelia > 設定 > Roles Settings 權限設定 > 「 顧客 」區塊，開啟「 自動創建新客戶資料」。

當有新顧客下預約訂單時， Amelia 會在 WordPress 後台創建新的使用者，並且顧客資料也會保留在 Amelia 後台中。

接著為了確保顧客會創建會員帳號，我們在 WooCommerce 後台也需要做設定，若是選擇「 現場付 」的站長可忽略這一步驟。

WooCommerce 設定 > 帳號及隱私權 > 勾選「 允許顧客在結帳過程登入現有帳號 」、「 允許客戶在結帳過程中建立帳號 」、「 允許客戶在我的帳號建立帳號 」。

使用 Amelia 內建「 現場付 」的網站，顧客會收到的信件：

點擊連結，客戶可變更密碼，就可以憑藉這組帳密，登入會員面板。

使用 WooCommerce 付款方式的網站，顧客會收到由 WooCommerce 發送的帳號信件，可藉由信件提供資訊登入 WooCommerce 及 Amelia 帳號。

Step3：登入顧客專區

我們使用信件提供的資訊，登入顧客專區頁面測試。

跟員工專區一樣，顧客可以在專區查看已有的預約以及活動～

---

預約及客戶面板管理

我們要如何管理客戶資料、付款詳情、預約資訊（分配員工、預約日期時間等 ·· ）呢？

Amelia 有分配許多功能面板來讓站長可方便管理這些重要資訊。

這個章節，我會一一介紹這些面板的功能，讓站長可快速上手，輕鬆管理唷；）

Dashboard 總儀表板

Amelia >「 Dashboard 」面板，這邊包含：員工、預約服務、活動、行程表、付款資訊等 ·· 細節的內容。

也有彙整：總預約數、預約佔用時間、收入等 ·· 多種內容的表格。

方便站長對於網站的預約、收入情況作一個大方向的歸納跟總覽。

在總儀表面板下的「 ＋ 」按鈕可新增預約、客戶資料。

在後續會有如何新增預約、客戶教學。

小備註：若是發現無法刪除會員資料、預約資訊，可能是總儀表板還留有舊資料，需前往「 Dashboard 」總儀表板進行刪除。

Calendar 日曆

Amelia >「 Calendar 」面板，我們可以在這裡查看所有員工的預約時間表、選擇查看的時間週期、點擊預約可編輯預約細節、新增預約等 ·· 。

在 Calendar 日曆面板，站長也可手動在這邊分配新的預約、活動。

預約時間

Amelia > 「 預約時間 」面板，這邊我們可查看每筆預約的詳細資訊，可以在這裡修改預約狀態、內容，或是手動新增一筆新預約。

顧客多位

Amelia > 「 顧客多位 」面板，這邊可以管理會員的資訊、新增會員等 ·· 。

可編輯會員資訊：姓名、性別、電子郵箱、WordPress 使用者、電話、性別、出生日期。

新增會員時，可輸入的資訊也相同。

Finance 付款管理

Amelia > 「 Finance 」面板，主要可在此管理並查看預約付款情況，也可以新增優惠券功能。

先切換「 付款方式 」區塊，查看、編輯訂單的付款資訊。

「 細節 」按鈕可對單筆預約付款進行編輯：

接著我們示範如何使用優換券功能：切換「 Coupons 」區塊 > 「 New Coupons 」或「 ＋ 」按鈕 。

接著就可以編輯優惠券細節：

• Code：新增優惠券編號。
• Discount (%)：按照總額百分比優惠。
• Deduction (NT$)：固定金額優惠。
• Usage Limit：全部使用上限。
• Maximum Usage Per Customer：單一客戶使用上限。
• Notification interval：發送通知信件數量。
• Recurring notification：啟用發送通知信件。

全部資訊輸入完成，按下保存，即可使用新增的優惠券～

---

常見問題

---

聯絡犬哥網站

在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。

資源一：犬哥網站（專業 WordPress 網頁設計＆數位行銷公司）

如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆數位行銷公司），請專家協助你會更容易！

我們有多年網頁設計、SEO 關鍵字行銷、Google 廣告投放經驗，加上上百個實戰案例，絕對能滿足您的需求！

資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）

如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？

可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！