WordPress 購物網站教學 2024|如何自己架設 WooCommerce 電商網站賣東西

WordPress 購物網站教學的封面

你想知道如何用最簡單、最低的成本的方法,快速架設出一個可以透過網路賣東西的購物網站嗎?

在這個免費的《WordPress 購物網站架設教學》,我會一步步帶你從零開始在網路開店。從架站平台推薦、WordPress 主機註冊、域名註冊、WooCommerce 電商外掛設定,到網站設計與金流 / 物流設定,都會有詳盡的解說。

不用任何經驗、不用會任何程式語言,任何架站新手都可以輕鬆上手!

我會不藏私地免費把如何架設購物網站的方法鋪成階梯

你只要跟著這篇文章的 6 個章節 操作,你的 WordPress 購物網站將會擁有 以下12 大功能

  1. 購物車
  2. 販賣實體商品 / 數位服務
  3. 信用卡付款 / 超商代碼繳費
  4. 超商取貨 / 宅配
  5. 優惠券 / 折扣碼
  6. 自動計算稅金
  7. 自動寄出 Email 訂單通知
  8. 客戶會員帳號登入
  9. 商品評價
  10. 部落格
  11. 客製化排版設計
  12. 響應式網頁設計
  • 購物網站
  • 購物車網站
  • 購物網站平台
  • 電子商務網站
  • 電商網站
  • 電商平台
  • 網路商店
  • 網店
  • Ecommerce website
  • Online store

如果你偏好用影片學習,歡迎觀看下方 YouTube 影片。

如果你喜歡透過圖文學習,請繼續往下閱讀吧 !

圖文版會比較詳細、方便快速瀏覽,還會持續更新與補充內容。


#1 架設 WordPress 購物網站流程與介紹

在這個《WordPress 購物網站架設教學》我會跟你分享:如何從零開始架設一個設計好看而且功能強大的購物網站

讓你透過網路販賣實體或數位商品,發展你的網路事業。

跟你分享如何架設 WordPress 購物網站

在這篇圖文教學,我會示範架設一個賣家具的購物網站。

👉  範例購物網站

正式的教學開始之前,我來和你介紹做出來的購物網站有什麼功能,再來講解整個架站流程跟費用。

WordPress 購物網站:12 個強大功能

第 1 項功能:購物車。

你的購物網站會有商品彙整頁面

第 1 項功能:購物車

客人點選「商品」後,會進到單項商品頁面

第 1 項功能:購物車

點擊「加入購物車」按鈕後,就可以到購物車頁面進行「前往結帳」。

第 1 項功能:購物車

第 2 項功能:販售實體商品 / 數位服務。

你的網站除了能像各大電商平台販售實體商品

第 2 項功能:販售實體商品

還可以販售數位服務,像是線上諮詢服務。

第 2 項功能:數位服務

第 3 項功能:信用卡付款 / 超商代碼繳費。

客人可以在網路使用各大銀行信用卡,進行刷卡付款

第 3 項功能:信用卡付款

客人也可以選擇在下單後,到各大超商的機台輸入代碼,以現金繳費。像是 7-11 的 ibon、全家的 FamiPort … 等等。

第 3 項功能:超商代碼繳費

第 4 項功能:超商取貨 / 宅配。

客戶在結帳後,可以選擇超商取貨或是宅配:

  • 超商取貨:各大超商都有支援。
  • 宅配:可以選擇黑貓宅配、郵局宅配 … 等等。
第 4 項功能:超商取貨、宅配

第 5 項功能:優惠券 / 折扣碼。

你的購物網站可以設定優惠券功能。

客人只要在購物車輸入你自訂的折扣碼,就可以套用優惠。

第 5 項功能:優惠券、折扣碼

第 6 項功能:自動計算稅金。

你的購物網站可以擁有自動計算稅金的功能。
客戶在總計裡就能看見購買的商品含有多少營業稅。

第 6 項功能:自動計算稅金

第 7 項功能:自動寄出 Email 訂單通知。

客人在下單後,網站會自動寄出 Email 訂單通知,知道有成功下單可以讓顧客安心許多。

第 7 項功能:自動寄出 Email 訂單通知

第 8 項功能:會員帳號登入。

客人在第一次結帳時,能讓他們註冊購物網站會員,結帳後就能在會員系統裡即時瀏覽訂單狀態

第 8 項功能:會員帳號登入

第 9 項功能:商品評價。

許多網購的人在下單前會習慣參考評價,我們的購物網站也能開啟商品評價功能,增加客人的下單意願。

第 9 項功能:商品評價

第 10 項功能:部落格。

你的購物網站會有部落格功能可以發佈文章,讓客人能夠更了解你或你的商品。

第 10 項功能:部落格

第 11 項功能:客製化排版設計。

你的購物網站可以進行客製化排版設計,能夠隨時自訂喜歡的排版、顏色 … 等等。

第 11 項功能:客製化排版設計

第 12 項功能:響應式網頁設計。

你的購物網站擁有響應式網頁功能,在電腦裝置、平板、手機等行動裝置都能自訂不一樣的排版設計,讓客人在使用不同裝置瀏覽購物網站都能保持美觀。

第 12 項功能:響應式網頁設計(桌電)
第 12 項功能:響應式網頁設計(平板)
第 12 項功能:響應式網頁設計(手機)

有這樣強大功能的客製化網站,花錢請別人做 (外包) 可能要花費 10 萬元以上,自己架設的話,就能省下一大筆錢。

你可能會覺得:「要有這些功能應該很難透過自學達成吧?」

但其實真的不會!

只要跟著這篇圖文教學一步一步操作,點點看、玩玩看,相信你一定可以架設好屬於自己的購物網站。

跟著諾特斯一步一步操作吧!

自己架設網站需要什麼東西?

一開始我會先跟你分享,用 WordPress 架設購物網站前需要知道的事情。

如果你想直接開始架設購物網站可以點擊下方按鈕。

架設網站主要需要 3 個東西,分別是:架站軟體 、域名、主機

架設網站主要需要 3 個東西

如果把網站比喻成一棟房子的話:

  • 主機:是可以蓋房子的土地。
  • 架站軟體:是可以幫助你快速蓋房子的工人。
  • 域名:是房子的門牌。
如果把網站比喻成一棟房子

主機,也稱作伺服器,是存放網站資料的地方

我們需要租用主機,才能把 WordPress 安裝在主機上,儲存網站上的文字、圖片、外掛 … 等等。

研究顯示:購物網站只要多 1 秒的加載時間,就會讓轉換率下降 7%。
也就是說:網站速度過慢、會讓你的收入變少

所以在這個教學中,我們會使用速度超快的 Cloudways 主機來架設購物網站。

架站軟體,也就是架設網站的平台

在這個教學裡,我們會使用免費的 WordPress 軟體作為網站架設平台 (電商平台)。

全世界有 43.2% 的網站都是使用 WordPress 架設的,而且這個數字還在逐年升高中!

⭐ 更多免費筆記

域名,就是網站的網址

我們需要註冊一個自己的域名,像 Apple 公司的網站的域名就是 Apple.com。

在這個教學中,我們會去 Namecheap 註冊域名,因為 Namecheap 的域名註冊費跟續約費都很便宜

自己架設購物網站需要什麼?

你可以跟著我一起去 Namecheap 註冊域名,並使用 Cloudways 主機來架設購物網站,這樣我們的介面會是一樣的,方便你跟著同步操作。

當然,你也可以選擇自己喜歡、習慣的域名或主機。
但要注意,這樣我們操作介面就會有點不一樣!

⭐ 更多免費筆記
域名是什麼 (詳細版)

WordPress 購物網站架設費用

備註:以下的美金匯率,我都先用 30 元台幣做估算。

剛剛有提到,自己架設網站主要需要:架站軟體、域名、主機。

架站軟體 (WordPress) 的費用

這篇教學使用的架站軟體 WordPress 是免費的,它是由世界各地的專業人士共同開發、貢獻的,不需要任何費用

域名 (Namecheap) 的費用

這篇教學我們會去 Namecheap 網站註冊。

  • 域名註冊費:是第 1 年的費用。是 13.98 美金、大約 419 台幣。
  • 域名續約費:是第 1 年後,每年的續約費用。每年 14.58 美金,大約是 437 台幣。

第 2 章,我也會跟你分享讓「域名註冊費」變更便宜的方法。

主機 (Cloudways) 的費用

這篇教學我們會使用速度快的 Cloudways 主機 來架設購物網站。

費用最低是每個月 11 美金,大約 330 台幣。

我會建議:先使用最便宜的方案開始架設購物網站。
等你的購物網站流量變大後,Cloudways 主機很方便,可以直接在後台做階段性升級

這樣在學習、架設購物網站的階段,或是網站的初期階段就不會花到冤枉錢,我們可以用多少、花多少

第 2 章,我也會跟你分享我去跟 Cloudways 公司爭取的「諾特斯觀眾專屬優惠」,讓我們的主機費用可以再便宜一點!

架設 WordPress 購物網站費用

後面的章節我也會陸續跟你分享,我研究過後發現免費且功能強大的軟體和服務,像是:網站主題、電商外掛、頁面編輯器、Email 服務… 等等。

希望能讓你用最低的必要成本,和我實驗後發現的優質服務來架設購物網站!

跟你分享免費且強大的軟體或服務

WordPress 購物網站架設流程

這個《WordPress 購物網站架設教學》共有 6 章。

第 1 章,介紹與流程

我會和你介紹我的教學與流程,也就是你現在看到的內容。

第一集,介紹與流程

第 2 章,開始架設網站

我會帶你註冊 Namecheap 域名、租用 Cloudways 主機,然後做基本的 WordPress 網站設定。

第二集,開始架設網站

第 3 章,匯入購物車系統

架設 WordPress 購物網站我推薦安裝 WooCommerce 電商外掛。

我們會安裝免費的 Blocksy 主題,然後匯入含有 WooCommerce 外掛的購物車模板,這樣我們就可以快速擁有一個購物網站的雛型!

之後再根據自己的需求與喜好,變更購物網站的排版設計。

第三集,匯入購物車模板

第 4 章,設定購物網站

我會帶你設定購物網站的功能,包含:如何在 WooCommerce 裡面加入自己的商品、更換購物網站貨幣、自動計算稅金、如何設定優惠券、自動寄出 Email 訂單通知 … 等等。

第四集,設定購物網站

第 5 章,設計網站外觀

我們要設計屬於自己的網站外觀,包含:客製化頁面內容、頁首、選單、Logo、頁尾、商品頁面 … 等等,並和你介紹響應式網頁設計。

第五集,設計網站外觀

第 6 章,設定金流與物流

我會和你一起設定綠界金流與物流,這樣就能開始運作購物網站,並實際收到款項、出貨了!

第六集,設定金流與物流

為什麼要製作免費的教學?

很多人會把這樣的教學當作付費課程販售。網路上有的一堂課可以賣到九千元以上。

但我也曾受到很多人幫忙才學會架設購物網站,所以我想把這樣的內容製作成免費課程,跟你分享。

製作成免費課程跟你分享

如果你想要支持我的話,歡迎你透過這個網站提供的連結,購買架設網站需要的軟體與工具,這樣的話我就能獲得一些收益,這可以支持我持續製作更多像這樣的免費教學

有些軟體或工具,有我特地去幫「諾特斯頻道觀眾」爭取的專屬優惠折扣,希望這也對你有幫助。

好,那我們開始架設購物網站吧!


#2 開始架設 WordPress 網站

這是《WordPress 購物網站架設教學》第 2 章,開始架設網站。

順序是這樣的:
我們要先架設好 WordPress 網站,再一步一步、把它變成 WordPress 購物網站。

所以在這一章,我會跟你講解前面這塊,也就是「先架設好 WordPress 網站」的部分。

我先快速說明架設 WordPress 網站的流程,總共有 3 大步驟:

  • 第 1 大步驟,租用 Cloudways 主機。
  • 第 2 大步驟,註冊 Namecheap 域名。
  • 第 3 大步驟,設定 WordPress 網站。
架設 WordPress 網站的 3 大步驟

第 1 大步驟:租用 Cloudways 主機

首先,我們要先了解 Cloudways 是什麼?

Cloudways 是一個雲端主機的代管平台,我們可以透過 Cloudways 租用主機,並在主機上 安裝 WordPress

Cloudways 是什麼

Cloudways 會幫我們管理一些高階、速度快的主機,像是:DigitalOcean、Google Cloud Platform… 等等。

我們可以不用程式碼就能設定好主機,Cloudways 還會自動幫我們優化主機的配置、讓主機順暢運作。

為了方便,我就把透過 Cloudways 這個平台租用的主機,直接稱為 Cloudways 主機。

透過 Cloudways 租用主機

步驟 1:創建 Cloudways 帳戶

我們要先點擊下面的藍色按鈕「免費試用 Cloudways 主機」進到 Cloudways 首頁,註冊一個 Cloudways 帳戶。

Cloudways logo

註冊時輸入折扣碼「NOTES」取得專屬前 2 個月 7 折優惠

在這裡先跟你分享一個好消息:

註冊時,只要輸入折扣碼「NOTES」就可以在試用期結束、決定租用 Cloudways 主機的時候,享有我為大家爭取到的「諾特斯觀眾專屬優惠」,前 2 個月可以打 7 折

現在 Cloudways 主機可以免費試用 3 天,還蠻不錯的,試用過真的覺得好用,再付費租用主機就好。

諾特斯觀眾專屬優惠

接下來,我們點擊右上角的「START FREE」(免費開始) 按鈕。

點 START FREE 免費開始

這邊要填寫自己的基本資料,你可以對照著下圖的中文翻譯填寫。

Cloudways 註冊英翻中

在「First Name」我們要填名。

在「Last Name」我們要填姓。那我們要怎麼翻譯中文姓名呢?

你可以點擊連結到 外文姓名中譯英系統 去做翻譯,我以「諾特斯」這個名字舉例。

「姓氏」的欄位,輸入「諾」。
「名字」的欄位,輸入「特斯」,然後按「翻譯」。

外文姓名中譯英系統

這個網站提供的 4 種翻譯都是可以使用的,選一個自己看得順眼的就可以了!

這 4 種翻譯都可以

我就使用「漢語拼音」的翻譯舉例:

先複製「姓」,貼在 Cloudways 註冊頁的「Last Name」(姓氏) 欄位。
再複製「名」,貼在註冊頁「First Name」(名字) 的欄位。

再來依序填寫「Email」(電子信箱) 欄位,並在「Password」(密碼) 欄位設定自己的密碼。

Cloudways 註冊英翻中

「I would best describe myself as」欄位,因為我們租用 Cloudways 主機的目的是要架設購物網站,所以我們選「Ecommierce」(電子商務)。

選 Ecommierce 電子商務

「My monthly hosting spending is」欄位,我們選每個月大概會花 0 到 50 美金。

選 0 到 50 美金

之後我們點開「Got a Promo Code」(有折扣碼嗎) 的欄位,就能輸入折扣碼「NOTES」。

這樣我們就能在試用期結束、決定租用 Cloudways 主機時,取得「諾特斯觀眾專屬優惠」前 2 個月可以打 7 折

輸入諾特斯專屬優惠 NOTES

最後記得勾選「同意條款」,再點「START FREE」(免費開始) 送出註冊資訊。

接下來,我們要到 Email 信箱去收 Cloudways 寄的驗證信。

到信箱收取 Cloudways 驗證信

點進驗證信,我們點「Activate Account」(啟用帳戶)。

點 Activate Account 啟用帳戶

Cloudways 會要求我們做手機驗證,在「Enter your phone number」的欄位輸入手機號碼,之後按「SEND SMS」(傳送簡訊) 接收驗證簡訊。

驗證手機號碼

輸入我們收到的驗證碼,按「VERIFY」(驗證) 就完成我們的手機驗證了!這樣就代表我們正式創建好 Cloudways 帳戶囉!

創建好 Cloudways 帳戶

步驟 2:選擇 Cloudways 方案,並安裝 WordPress 軟體

我們可以看到左上角有個 APPLICATION & SERVER DETAILS (應用程式與伺服器詳細資訊)。

APPLICATION & SERVER DETAILS (應用程式與伺服器詳細資訊)

點開「WordPress」可以選擇要安裝的 WordPress 版本。

備註:
在看到這個教學的你,可能會看到比 6.2.2 更高的版本,記得選「最新的版本」就對了!

選擇要安裝的 WordPress 版本

後面這三項,我們「保持預設」就好。

後面三項保持預設就好

接下來我們要選 Cloudways 幫我們代管的主機,下圖這 5 款主機速度都蠻快的。

而我自己的網站 NotesStartup.com (也就是你正在瀏覽的網站) 就是使用 DigitalOcean 主機,用起來感覺是蠻不錯的,所以我推薦可以選 DigitalOcean 主機

你也可以另外開一個視窗,點擊這個網站的其他頁面和文章,來體驗看看使用 Cloudways 代管的 DigitalOcean 主機 的實際速度。

我推薦可以選 DigitalOcean 主機

接下來「SERVER SIZE」(伺服器大小) 我們不要用預設的 2 GB Premium,因為 2 GB Premium 比較貴,每個月要 28 美金,新手用 1 GB 就已經綽綽有餘了,每個月也只要 11 美金就好。

所以我們要記得把它改成「1 GB」。

SERVER SIZE (伺服器大小)

提醒視窗也有寫 1 GB 的方案包含什麼東西:

  • RAM (內存):1 GB
  • 儲存空間:25 GB
  • 頻寬:1 TB
  • 處理器:1 核
Cloudways 主機 1GB 的方案包含什麼

接下來我們要選主機的位置。

主機的位置跟你的網站觀眾越近,網站讀取的速度就會越快

因此你的目標觀眾跟我一樣在台灣的話,這邊選「新加坡」會是最快的!所以我們點開「LOCATION」(地點),然後找到「Singapore」(新加坡)。

主機的位置跟你的網站觀眾越近,網站讀取的速度就會越快

選好之後就可以在頁面下方看見顯示的價格,1 個月是 11 美金,也就是大約 330 台幣,而 Cloudways 前三天是可以免費試用的,所以我們還不會被收費。

最後我們按「LAUNCH NOW」(現在發佈),就會自動安裝 WordPress 軟體了!

頁面下方可以看見顯示的價格

提醒你,這個教學我們安裝的是 WordPress.org 的軟體

如果你不清楚 WordPress.com 跟 WordPress.org 的差別的話,可以看一下我過去製作的比較影片,這裡會詳細地解釋 WordPress.com 和 WordPress.org 的差別!

等安裝時間跑完,就代表我們已經成功在 Cloudways 主機上安裝好 WordPress 軟體了!

成功在 Cloudways 主機上安裝好 WordPress 軟體

接下來,我們來了解一下 Cloudways 的介面。

頁面左上角有個「切換器」,可以切換 SERVERS (伺服器) 和 APPLICATIONS (應用程式)。

在切換器點一下,我們可以從伺服器切換到應用程式。
應用程式的頁面,可以看到我們安裝的 WordPress 軟體。

切換到 APPLICATIONS 應用程式

再點一下切換器,我們又可以從應用程式切換到伺服器。
伺服器的頁面,可以看見我們剛剛安裝完的 DigitalOcean 主機。

切換到 SERVERS 伺服器

步驟 3:開啟 WordPress 網站前台 / 後台

什麼是網站前台?什麼是網站後台呢?

  • 前台,是「網站訪客」會看到的頁面,也就是我們的購物網站。
  • 後台,是「網站管理員」才能看到的頁面,也就是我們的 WordPress 後台。

那我們要如何開啟網站的前台呢?

我們先把切換器切換到「APPLICATIONS」(應用程式) ,然後點 WordPress LOGO 旁邊的「Your Application」(你的應用程式)。

點 WordPress LOGO 旁邊的 Your Application (你的應用程式)

接著找到畫面中央的 APPLICATION URL (應用程式網址) ,點旁邊的「圖標」,就可以進到我們的網站前台。

點旁邊的圖標

這就是網站訪客會看到的畫面。
現在只有 WordPress 預設的空白頁面,我們之後會再把它變得更好看、更強大。

WordPress 預設的空白頁面

那我們要如何登入 WordPress 後台呢?

我們回到剛剛的 Cloudways 後台,找到畫面中央的 ADMIN PANEL (管理員面板),點旁邊的「圖標」就可以進到 WordPress 後台的登入頁面。

點旁邊的圖標

這邊要填寫使用者名稱跟密碼,那我們的使用者名稱跟密碼是什麼呢?

填寫使用者名稱跟密碼來登入

我們再回到剛剛的 Cloudways 後台,ADMIN PANEL (管理員面板) 下的「Username」就是使用者名稱,「Password」就是密碼,我們可以點一下複製起來。

在 ADMIN PANEL (管理員面板) 複製

然後貼到 WordPress 後台的登入介面,按「Log In」(登入)。

貼上後按 Log In 登入

接著就能進入網站管理者才能看到的頁面,也就是 WordPress 網站的後台,這樣我們就學會如何開啟購物網站前台和 WordPress 後台了!

WordPress 網站的後台

步驟 4:設定 Cloudways 主機的付款方式

登入 Cloudways 後台,頁面上方有寫一行英文:「Your trial will expire in 2 days 22 hours」這代表說我們的 Cloudways 主機「試用時間剩下 2 天又 22 小時」。

所以我們可以在 Cloudways 提供的 3 天免費試用期限內,盡情地測試 Cloudways 主機。

當我們確定要租用主機的時候,就能按下旁邊的「UPGRADE MY ACCOUNT」(升級我的帳戶),把主機從試用版升級成正式版。

但我們需要注意的是:如果在試用期限內忘記升級,網站就會被刪除

所以當你確定要使用 Cloudways 主機的時候,就可以點擊「UPGRADE MY ACCOUNT」(升級我的帳戶),填寫支付主機費用的付款資料。

Cloudways 提供 3 天免費試用期

當然,你也可以先跳過這個步驟往後跟著做,只是一定要記得:3 天試用期內要回來填寫付款資料

那我現在來示範設定付款資料,你可以照著圖片上面的中文翻譯一邊填寫。

點「UPGRADE MY ACCOUNT」(升級我的帳戶) 按鈕。

  • 「Card Number」填卡號。
  • 「Card Holder Name」填持卡人姓名。
  • 「Card Expiry Date」填卡片到期日期。
  • 「CVC / CVV / CID」填三碼安全碼。
  • 「Address」填地址。
Cloudways 付款資訊英翻中

那我們要怎麼把中文地址翻譯成英文地址呢?

我們可以使用 中文地址英譯 系統,你可以點擊連結開啟頁面。

往下滑,要填寫自己或公司的中文地址,那我這邊就舉臺北 101 為例:

  • 「縣市」選臺北。
  • 「鄉鎮市區」選信義區。
  • 「道路」選信義路五段。
  • 「號」填 7 號。
中文地址英譯系統

最後輸入驗證碼,按「查詢」,頁面下方就會顯示我們中文地址的英文翻譯了!

中文地址英譯翻譯

我們可以按 Ctrl + C (Windows 系統) 或 Cmd + C (Mac 系統) 來複製文字,再用 Ctrl + V (Windows 系統) 或 Cmd + V (Mac 系統) 來貼上。

把「Taipei City」前面的英文都複製起來,貼在「Address」(地址) 欄位。
把「Taipei City」複製起來,貼在「City」(城市) 欄位。
「I am」欄位用預設的就可以了。

填寫好之後,按「AUTHORIZE」(授權) 按鈕。

轉跳到「Thank you」頁面,就代表成功送出付款資料了!

成功送出付款資料

只要在 Cloudways 後台有看見我們填寫的付款資訊,這樣就代表我們成功設定好付款方式了!

設定好 Cloudways 主機的付款方式

第 2 大步驟:註冊 Namecheap 域名

在購物網站前台的網址列,我們可以看到目前的域名是 Cloudways 給的臨時域名,所以我們要到 Namecheap 註冊專屬自己的域名

Cloudways 給的臨時域名

步驟 1:創建 Namecheap 帳戶

你可以點擊下方的「註冊 Namecheap 域名」按鈕,可以進入 Namecheap 官方網站

Namecheap 的 Logo

點擊首頁左上角的「SIGN UP」(註冊),我們要填寫帳戶資訊。

點 SIGN UP (註冊)

你可以照著圖片上面的中文翻譯一邊填寫,然後按「Create Account and Continue」(創建帳戶並繼續) 送出,這樣我們就成功創建好 Namecheap 帳戶了!

Namecheap 註冊英翻中

步驟 2:註冊自己的域名

接下來我們要檢查我們想要使用的域名,有沒有被別人重複使用。

搜尋想要註冊的域名

在這篇圖文教學我要示範架設賣家具的購物網站,所以我註冊一個叫做「notesstorepro.com」的域名。

在搜尋欄輸入好之後,按「放大鏡」圖標。

  • 域名左側,有出現「打勾符號」就代表這個域名可以使用。
  • 域名右側,則會告訴我們每年的費用是 7.88 美金。
  • 畫面中央,我框選起來的地方有一組折扣碼,我們可以先把它複製起來或抄下來,等等要在結帳時使用!
搜尋後的域名

接下來我們按「Add to cart」(加入購物車) 按鈕,再點右下角的「Checkout」(結帳)。

加入購物車後點 Checkout (結帳)

然後在「Promo Code」(折扣碼) 的欄位貼上剛剛複製的折扣碼,按「Apply」(使用) 就能套用優惠,再點「Confirm Order」(確認訂單) 按鈕。

貼上折扣碼按 Apply 使用

接下來,我們要填寫 Account Contact Information (帳戶聯絡資訊) 頁面。

  • 如果你是以「公司」名義申請域名的話,我們要保持「I’m registering on behalf of a company」預設的勾勾。
  • 如果你是以「個人」名義申請域名的話,我們就把勾勾取消掉。

那我就示範用一個公司名義來申請域名,所以「I’m registering on behalf of a company」的部分保持預設的打勾。

填寫好資料後,按「Continue」(繼續)。

Namecheap 帳戶聯絡資訊

Whois Contact Information (Whois 聯絡資訊) 頁面,都用預設就好,只要滑到最下面將「Save the configuration …」(儲存上方設定 …) 的選項打勾,就能按「Continue」(繼續)。

Namecheap Whois 聯絡資訊

Payment Method (付款方式) 頁面可以使用信用卡付款,填寫完按「Continue」(繼續)。

Namecheap 付款方式

Receipt details (收據詳情) 頁面,一樣都用預設就好,並記得滑到最下面將「Save the configuration …」(儲存上方設定 …) 的選項打勾,然後按「Continue」(繼續)。

Namecheap 收據詳情

最後 Order Review (訂單審核) 頁面,我們可以看到多了一筆「ICANN free」、ICANN 這個機構的費用。

備註:ICANN 機構是什麼?
ICANN 是全球互聯網的管理者,負責監督域名和 IP 地址分配。確保網絡穩定運行,促進政策制定和參與,保護網絡安全和開放性,支持互聯網發展。

多這個 0.18 美金的費用是正常的。
這是 ICANN 機構每年在我們註冊、續訂域名的時候強制徵收的費用,所以這邊我們總共要付 7.16 美金。

確定好之後,我們按「Pay Now」(現在付款)。

Namecheap 訂單審核

當我們看到 Thank you for your purchase! (感謝你的購買) 這行字,就代表域名已經註冊成功了!

域名已經註冊成功了

步驟 3:收取 Namecheap 寄的驗證信

接下來要到 Email 信箱找到 Namecheap 寄的驗證信,我們點進標題寫有「IMMEDIATE VERIFICATION」(馬上驗證) 的信。

到信箱收取 Namecheap 驗證信

往下拉,找到「Click here to verify your email address」(點擊這裡來確認你的 Email 地址) 的連結,點擊它。

點擊連結驗證

順利看到 Success! (成功!) 頁面,就代表我們完成 Email 驗證了!

成功做好 Email 驗證

第 3 大步驟:設定 WordPress 網站

步驟 1:DNS 設定

DNS 是 Domain Name System (網域名稱系統) 的縮寫。

⭐ 更多免費筆記

DNS 是什麼 (未來開放)

對只是想架設網站的新手來說,「DNS 設定」的意思就是「把主機與域名連接起來」,連結好之後,大家才可以直接在瀏覽器輸入你的域名來進到你的網站。

所以我們接下來要連接剛剛註冊好的域名跟 Cloudways 主機、做 DNS 設定。

DNS 設定就是把主機與域名連接起來

回到 Namecheap 首頁,找到右上角的「Account」(帳戶)。

Namecheap 首頁點擊 Account 帳戶

在我們註冊的域名右邊,點「MANAGE」(管理)。

點域名右邊的 MANAGE 管理

之後切換到「Advanced DNS」(進階的 DNS) 分界。

切換到 Advanced DNS 進階的 DNS

這裡可以看到有兩個預設的紀錄。

兩個預設的記錄

我們把 CNAME Record (CNAME 紀錄) 和 URL Redirect Record (網址重新導向紀錄) 這兩個預設紀錄都刪掉。點右邊垃圾桶圖標,然後按「Yes」(是) 就可以刪除。

兩個預設記錄都刪掉

接下來我們要新增一個 A Record (A 紀錄)。

點擊「ADD NEW RECORD」(添加新的紀錄),找到 A Record (A 紀錄)。

  • 「Host」欄位填一個「@」。
  • 「Value」(值) 欄位填自己 Cloudways 主機的 IP 地址。

那我們要怎麼知道自己 Cloudways 主機的 IP 地址是什麼呢?

新增一個 A Record (A 記錄)

開啟 Cloudways 後台,我們把切換器切換到 SERVERS (伺服器),再點選「Your Server」(你的伺服器)。

SERVERS (伺服器) 的 Your Server (你的伺服器)

MASTER CREDENTIALS (主憑證) 內的 Public IP (公開IP) 就是我們 Cloudways 主機的 IP 地址,點一下可以把它複製起來。

Public IP (公開IP) 就是 Cloudways 主機的 IP 地址

回到 Namecheap 頁面,把 IP 地址貼在「Value」(值) 欄位。

這樣我們就能按右邊的勾勾,新增 A Record (A 紀錄)了。

按右邊的勾勾新增 A Record (A 記錄)

再來,我們要新增第二個 CNAME Record (CNAME 紀錄)。

點擊「ADD NEW RECORD」(添加新的紀錄),找到 CNAME Record (CNAME 紀錄)。

  • 「Host」欄位填三個小寫的「w」。
  • 「Value」(值) 欄位填網站的域名。

填好之後,一樣按右邊的勾勾新增 CNAME Record (CNAME 紀錄)。

備註:
如果看到域名後面多出現一個英文的句點,這是正常的、不用擔心。

新增第二個記錄 CNAME Record (CNAME 記錄)

新增完兩個紀錄,我們回到 Cloudways 後台做最後的設定,點左上角的「Applications」(應用程式)。

點左上角的 Applications 應用程式

再點「Your Applications」(你的應用程式)。

點 Your Applications 你的應用程式

找到左側欄位的「Domain Management」(網域管理),點進去。

點 Domain Management 網域管理

點「ADD DOMAIN」(新增網域) 按鈕。

點 ADD DOMAIN 新增網域

在「Enter your domain」(輸入你的域名) 欄位,我們要填寫自己註冊的域名,再點右邊的「ADD DOMAIN」(新增網域) 按鈕。

填寫註冊的域名

之後勾選我們註冊的網域,再點右側的 3 個點點。

點右側的 3 個點點

按「Make Primary」(使成為主要)。

點 Make Primary 使成為主要

彈出的視窗的部分,繼續點「Set as Primary」(設定為主要)。

點 Set as Primary 設定為主要

等它跑完,我們的網站域名就會從臨時域名變更成正式域名了!這樣我們就成功完成 DNS 設定囉!

成功完成 DNS 設定

接下來可以測試在瀏覽器輸入域名,能不能順利轉跳到我們的網站?

我們直接把網站域名複製起來,開一個新的分頁把它貼上,按 Enter。

如果出現「你的連線不是私人連線」是正常的,可以不用擔心,這是因為我們還沒安裝「SSL 憑證」,等我們安裝好就不會出現這個警告頁面了!

還沒安裝 SSL 憑證

所以我們先忽略這個,按「進階」,再點「繼續前往我們域名的網站」。

繼續前往我們域名的網站

如果有成功連到我們網站的 WordPress 預設空白頁,就代表 DNS 設定是成功的喔!

DNS 設定成功

我們再看到網址列左側有顯示一個「不安全」警告,這就是我們的網站還沒有安裝 SSL 憑證的意思,安裝好之後就不會出現了!

顯示不安全是因為沒有安裝 SSL 憑證

步驟 2:安裝 SSL 憑證

SSL 是 Secure Sockets Layer (安全通訊端層) 的縮寫。

⭐ 更多免費筆記

SSL 是什麼 (未來開放)

現在你只要知道:SSL 憑證是「數位安全憑證」,有安裝 SSL 憑證的網站網址,會從 http 變成 https

多了這個「s」就代表這個網站是安全、有加密的

所以我們在網站上安裝 SSL 憑證後,瀏覽器就會從「顯示這個網站是不安全的」變成「顯示這個網站是安全的」。

有安裝 SSL 憑證的網站是安全、加密的

跟你說一個好消息:如果我們使用 Cloudways 主機就有免費安裝 SSL 憑證的功能

所以我們到 Cloudways 後台,找到左側欄位的「SSL Certificate」(SSL 憑證)。

點 SSL Certificate SSL 憑證
  • 「Email Address」(電子信箱地址) 欄位,填寫自己的 Email。
  • 「Domain Name」(網域名稱) 欄位,填寫自己的域名。

填寫好之後,按「INSTALL CERTIFICATE」(安裝憑證)。

點 INSTALL CERTIFICATE (安裝憑證)

之後等 Cloudways 幫我們安裝完 SSL 憑證,這樣就完成了!

安裝完 SSL 憑證就完成了

接下來可以測試,我們安裝的 SSL 憑證有沒有生效?

我們把網站域名複製起來,開一個新的分頁把它貼上,按 Enter,就可以看到左上角的不安全警示,已經變成顯示安全的鎖頭了!

點一下鎖頭,上面會寫著「已建立安全連線」,這就代表我們成功在自己的網站上安裝好 SSL 憑證了!

成功在網站上安裝好 SSL 憑證

步驟 3:登入正式域名的 WordPress 後台

登入正式域名的 WordPress 後台有兩種方法:

  • 方法 1:從「Cloudways 後台」登入。這個方法會比較慢一點。
  • 方法 2:從「瀏覽器」登入,這個方法會比較一點。

我在 之前的操作 有示範過方法 1,現在我會再示範一次、加深你的印象。

方法 1 :從 Cloudways 後台進入 WordPress 登入介面。

登入 Cloudways 後台,左上角的切換器切換到 APPLICATIONS (應用程式),或是也能從最上面的藍色選單,直接選 APPLICATIONS (應用程式) 頁面。

切換 SERVERS (伺服器) 跟 APPLICATIONS (應用程式) 的 2 個方法

之後點「Your Application」(你的應用程式)。

點 Your Application (你的應用程式)

Username (使用者名稱) 和 Password (密碼) 可以先點一下複製起來,或是點眼睛圖標來看見實際密碼,把它抄下來、記下來。

點右邊的眼睛圖標可以看到實際密碼

再來點 URL 欄位右邊的「圖標」,就能轉跳到 WordPress 後台的登入介面。

點擊 URL 右邊的圖標

在這裡貼上剛剛記下來的 Username (使用者名稱) 和 Password (密碼),再按「Log In (登入)」。

到 WordPress 貼上

這樣就成功登入 WordPress 後台了!

成功登入 WordPress

方法 2:從瀏覽器直接進入 WordPress 登入介面。

首先,要記住或抄下自己的 Username (使用者名稱) 和 Password (密碼)。

記住自己的使用者名稱跟密碼

然後開啟瀏覽器,直接在網址列打「你的域名 /wp-admin」。
以我的範例購物網站為例,就是在網址列輸入「notesstorepro.com/wp-admin」。

在網址列輸入

輸入好按 Enter,就會進到 WordPress 後台的登入介面。

按 Enter 就會進入登入介面

方法 2 的好處,就是可以省去「登入到 Cloudways 後台,才能進入到 WordPress 登入介面」的步驟,我們可以在任何裝置的瀏覽器直接輸入「你的域名 /wp-admin」,就能進入 WordPress 的登入介面。

然後再輸入記下來的 Username (使用者名稱) 和 Password (密碼),就能按「Log In」(登入) 順利進入 WordPress 後台!

打上抄起來的使用者名稱跟密碼

大部分情況,我都是使用方法 2 來登入 WordPress 後台的!

成功登入 WordPress

步驟 4:WordPress 基本設定

登入後,我們會看到 WordPress 後台的語言是英文的。

我知道很多人不習慣看英文,所以我們第一個設定,就是先把 WordPress 的語言改成中文吧!

目前 WordPress 後台是英文的

點左側選單「Settings」(設定) 的「General」(一般)。

點 Settings 設定的 General 一般

找到 Site Language (網站語言) 的欄位。

點開、往下拉。

選擇「繁體中文」。

點開 Site Language 網站語言

選好之後,頁面的最下方有個「Save Changes」(儲存變更) 按鈕,我們點擊它。

按 Save Changes 儲存變更

這樣我們的 WordPress 後台會就變成中文的囉!

WordPress 變成中文了

接下來,我們要自訂網站標題跟網站說明

因為我示範的是賣家具的購物網站,所以我把「網站標題」叫做「諾特斯家具」、「網站說明」改成「高品質、簡約風家具」。

制定網站標題跟網站說明

然後在下面找到「時區」的欄位。

點開、往上拉。

選擇「臺北」。

找到時區的欄位

再往下,「日期格式」和「時間格式」欄位,可以選自己喜歡的呈現形式,像我就比較習慣第一個呈現方式,所以改成它。

修改好就能按「儲存設定」。

選自己喜歡的呈現形式

接下來,我來教你如何更改 WordPress 的密碼

目前我們的 WordPress 的密碼是 Cloudways 生成的隨機密碼,因為不是自己設定的很容易忘記,所以我們要改成自己容易記得的密碼!

在 WordPress 後台左側的選單,找到「使用者」。

點使用者

目前只有一個使用者,我們點擊進去。

目前只有一個使用者

在「個人資料」的頁面往下滑,找到「新密碼」的欄位,點擊「設定新密碼」按鈕。

點擊設定新密碼

把隨機密碼刪掉,改成我們自己想要的密碼。

ep2 108

改好之後滑到最下面,按「更新個人資料」。

點更新個人資料

這樣子我們就設定好屬於自己的 WordPress 密碼!

我們實際登入一次看看。
點開介面右上角的使用者頭貼,可以選擇「登出」。

點開右上角的使用者頭貼可以登出
  • 使用者名稱,是我們的 Email。
  • 密碼,是我們剛剛設定的密碼。輸入完按「登入」。
使用新密碼登入

這樣我們就成功用新的密碼登入 WordPress 後台了!
提醒你,修改後的密碼還是得抄下來或記下來,以免之後忘記喔!

登入 WordPress 後台了

#3 匯入購物車系統

架設 WordPress 購物網站我推薦安裝 WooCommerce 電商外掛 (含購物車系統) 。

在第 3 章,我會教你安裝免費的 Blocksy 主題、匯入含有 WooCommerce 外掛的模板網站,讓空白的網站擁有購物網站的雛型。

這樣你就可以快速擁有一個設計漂亮、功能強大的購物網站!

流程我拆解成 4 個步驟:

  • 步驟 1:安裝 Blocksy 主題
  • 步驟 2:匯入模板網站
  • 步驟 3:新增文章與頁面
  • 步驟 4:修改與翻譯模板網站。

好!我們開始吧。

步驟 1:安裝 Blocksy 主題

Blocksy 是 WordPress 佈景主題的一種。
而 WordPress 佈景主題,通常會簡稱「主題」。

Blocksy 主題提供許多豐富的網站版型設計工具可以選擇。
我們能像玩遊戲一樣,動動滑鼠就能輕鬆幫網站換造型、改變網站外觀。

提供豐富的網站版型和設計工具

為什麼選用 Blocksy 主題?

我花了幾十個小時,認真研究過超多種 WordPress 主題。
最後發現 Blocksy 主題的免費版本,就可以做到很多 WordPress 付費主題才能達到的效果。所以在這次的 WordPress 購物網站教學,我們要使用 Blocksy 主題來架設購物網站。

只要安裝 Blocksy 主題、匯入他們提供的模板網站後,我們就可以免費又快速地擁有購物車、優惠券、會員帳號登入 … 等等功能。
也能再進階製作客製化排版設計、響應式網站設計 … 等等。

下載 Blocksy 主題

你可以點擊下面的「下載 Blocksy 主題」按鈕,轉跳到 Blocksy 主題下載頁面。

Blocksy 的 Logo

點擊連結優惠即生效

之後按右上角的「Free Download」(免費下載)。

點 Free Download 免費下載

再點「Download」(下載) 開始下載 Blocksy 主題。

點 Download 下載

上傳 Blocksy 主題

開啟 WordPress 後台,在左側選單點「外觀」。

選外觀

再點上方的「安裝佈景主題」按鈕。

點安裝佈景主題

同樣的位置,點擊「上傳佈景主題」。

點上傳佈景主題

打開剛剛下載完的「Blocksy 主題檔案」資料夾,將檔案拖到方框內。

將檔案拖到方框內

然後按「立即安裝」按鈕。

按立即安裝

再點「啟用」。

點啟用

安裝 Blocksy Companion 外掛

Blocksy Companion 是 Blocksy 主題開發商提供的免費外掛。安裝之後,可以讓 Blocksy 主題的功能變更強大。

回到「外觀」的頁面,我們會看到頁面上面多出「安裝 Blocksy Companion」的按鈕,可以點擊它安裝。

點安裝 Blocksy Companion

安裝完畢後,左側的選單會多出一個「Blocksy」的按鈕。
點開看到 Blocksy 的操作頁後台,就代表安裝成功了!

Blocksy 操作頁

安裝 Blocksy 主題後,網站長怎樣?

我們來安裝完 Blocksy 主題,「網站前台」會有什麼變化?

把滑鼠移到 WordPress 後台最左上角的小房子圖標。
在「造訪網站」的選項點右鍵,再點「在新分頁中開啟連結」,就可以看到現在網站前台的樣子。

左上角的小房子圖標

雖然網站還是空白的,但已經套用 Blocksy 主題簡約的基本設計了,接下來我們要進入步驟 2。

套用 Blocksy 主題簡約的設計了

步驟 2:匯入模板網站

為什麼要用模板?

原本,從一個空白的網站到可以正常運作、排版又好看的購物網站,除了要花很多時間來撰寫程式做網站設定,甚至還要有設計編排的美感,真的得花超多心血才能做到。

我以前就有自己摸索過,投入的時間已經數不出來了,做出來的網站其實也沒有模板網站厲害。

現在,我們只要安裝好 Blocksy 預先幫我們製作好的模板,就可以快速擁有一個漂亮、功能強大的購物網站了!

從一個空白的網站到可以正常運作原本要花超多時間

你可能會想:這樣大家做出來的網站會不會都長一樣?

別擔心,其實不會。
安裝完模板、做完基本設定,我會在 第 5 章 再帶你操作客製化設計與排版,在購物網站加入自己風格的元素

那我們就來開始安裝模板吧,這絕對可以幫你省下超多時間的!

正式匯入模板網站

開啟 WordPress 後台,選擇左側選單的「Blocksy」,再切換到「Starter Sites」(起始網站) 頁面。

切換到 Starter Sites (起始網站) 頁面

這裡可以看到,Blocksy 提供很多免費模板網站讓我們選擇。

有很多免費的模板網站給我們選擇

只要點「Preview」(預覽) 就能瀏覽套版的樣式,你可以在這裡找到適合自己的模板網站開始!

點 Preview 預覽 實際瀏覽套版

在這個圖文教學,我會使用這個叫「Homi」的模板。

這個教學我們使用 Homi 模板

我蠻喜歡這個模板的設計,簡約、質感也很好,很難想像這樣的模板也能免費。

👉 點擊觀看 Homi 模板

Blocksy 主題沒有把重要的功能隱藏在付費的高牆裡,專業版多出來的功能,通常只是錦上添花,這就是我在研究很多 WordPress 主題後,會推薦你使用 Blocksy 主題的原因。

後來我自己有購買專業版,但不是因為有迫切使用付費功能的需求,只是純粹想支持 Blocksy 團隊而已。

接下來我們要正式匯入 Homi 模板網站,點擊「Import」(匯入)。

點 Import 匯入

之後會彈出 Install Child Theme (安裝子主題) 的視窗。

WordPress 主題在更新的時候,常常會把之前的設定蓋掉,如果我們有安裝子主題的話,就不會遇到這個問題。

所以我們要在「Install Child Theme」(安裝子主題) 欄位打勾,然後按「Next」(下一步)。

Install Child Theme 安裝子主題

Choose Page Builder (選擇頁面編輯器) 的步驟,我們要使用「Elementor」這個神奇的 WordPress 外掛。

安裝它的話,我們就可以用滑鼠拖拉的方式直觀地編輯頁面。

所以我們選擇「Elementor」,然後按「Next」(下一步)。

Choose Page Builder 選擇頁面編輯器

Install & Activate Plugin (安裝與啟用外掛) 的步驟,我們都不用更改、用預設就好,之後按「Next」(下一步)。

Install Activate Plugin 安裝與啟用外掛

Import Content (導入內容) 的步驟,我們也用預設就好,之後就能按「安裝」開始匯入網站模板了!

Import Content 導入內容

安裝完,我們可以選擇「View Site」(觀看網站) 來看看網站變成什麼樣子。

點 View Site 觀看網站

你看!我們的網站,已經從剛剛的空白網站,變成一個購物網站了!

從空白網站變成購物網站

如果你在匯入 Blocksy 時出現錯誤,可以參考 這篇文章

匯入模板後,網站長怎樣?

我簡單展示一下,示範客人要怎麼從我們的購物網站購買商品。

點擊網站上方選單的「Products」(商品),這裡會顯示全部的商品。

點擊上方選單的 Products (商品)

點選「商品圖片」可以進到單項商品頁面。

點商品圖片

接下來點「加入購物車」。

點加入購物車

再點「查看購物車」進到購物車頁面,

點查看購物車

購物車頁面會列出所有「點過加入購物車按鈕」的商品,客人在這裡確定商品品項、數量沒問題後,就會點「前往結賬」。

點前往結賬

結帳頁面左側可以讓客人填寫付款資料,右側會列出詳細金額資訊。
只要填寫好付款資料,就可以點擊「下單購買」購買商品!

而實際的金流、物流要怎麼串接,我會在這個系列的 第 6 章 跟你講解。

結帳頁面

那示範完畢,我們可以點選單左上角的 Logo 回到首頁,繼續我們的購物網站設定。

點擊左上角的 Logo 可以回到首頁

除錯: 刪除重複選單項目

匯入模板網站後,「選單」有時候出現一個小 Bug:出現重複的選單項目。所以接下來我們要來除錯。

  • 如果你剛好也有出現這個 Bug 的話,可以跟著我操作。
  • 如果你沒有遇到這個 Bug,可以 點擊這裡跳過
選單有時候會出現一個 Bug

我們點擊最上面的「自訂」,進入 Blocksy 自訂器。

點自訂

左側彈出的選單往下滑,找到「選單」的項目,點擊它。

往下滑,點選單

接著再點「Main Menu」(主要選單)。

點 Main Menu 主要選單

我們點開其中一個重複的項目「Home」(首頁),再點下面的「移除」就可以刪除了。

把重複的項目刪掉

其他的重複項目,也用同樣的方式刪除。

其他重複項目也用同樣的方式刪除

刪完之後,記得按「發佈」。

刪完之後記得發佈

等發佈完,就能按「叉叉」關閉 Blocksy 自訂器,這樣我們就完成除錯了!

按叉叉可以關閉控制器

整理 WordPress 外掛

回到 WordPress 後台,在左側的選單找到「外掛」。

點外掛

匯入模板網站時,Blocksy 會順便幫我們安裝一些好用的外掛,像是 Elementor、WooCommerce … 等等。

  • Elementor 是「頁面編輯器」外掛。
  • WooCommerce 是「電商」外掛。

安裝外掛的同時,系統也會幫我們把「沒有用到」的外掛停用,而白色底的外掛,就是「已經停用」的外掛
為了不讓停用的外掛佔用空間、影響網站速度,我們要把「白色底」的停用外掛都刪除,這樣我們就整理好 WordPress 的外掛了!

把停用的外掛刪掉

步驟 3:新增文章與頁面

新增文章

這個購物網站是附帶部落格功能的。
我們可以寫一些關於商品的文章,或關於你個人品牌的文章放在網站裡,讓我們的購物網站更有內容、更有互動性。

購物網站附帶部落格功能

我們先到購物網站前台,文章會被集中放到 Blog (部落格) 的地方,所以點一下選單上的「Blog」(部落格)。

點選單上 Blog 部落格

這裡就是文章的彙整頁面。目前有幾篇預設的文章。

文章的彙整頁面

接下來我們要做文章「永久連結結構」的設定。

到 WordPress 後台,點左側選單下方「設定」的「永久連結」。

點設定的永久連結

如果文章的永久連結結構使用預設的話,自訂連結時可能會出現一些錯誤
為了避免這種情況發生,我們要直接將永久連結的結構改成「文章名稱」

將永久連結的結構改成文章名稱

改好就往下滑到底,點「儲存設定」。

按儲存設定

接下來我們就能開始新增文章了!

點左側選單「文章」的「新增文章」。

點文章的新增文章

我們可以直接在這裡輸入文章的標題與內容。
我在標題輸入「如何挑選高 CP 值家具」,內容的部分則先貼上幾段假文做示範。

輸入文章標題和內容

當然,文章裡還可以新增副標題、分類、標籤、圖片、影片等等。

如果你想更深入了解部落格相關的功能,或是想要透過文章為你的網站帶來免費的 Google 搜尋流量,可以參考我之前做的這部影片。

回到教學,我們可以在右側功能欄找到「分類」來幫文章進行分類。

點分類

我們也能在右側功能欄的「精選圖片」上傳一張符合文章的圖片,作為能代表文章的預覽圖。

找到精選圖片上傳

如果想再自訂好記的文章網址,要先點「儲存草稿」。

點儲存草稿

這樣「網址」欄位的連結,就會變成「文章名稱」,我們點擊連結它,在「永久連結」的欄位修改自己想要的網址。

ep3 058

全都設定完畢,就能按「發佈」來發佈文章。

按發佈

按第一次發佈,可以設定文章的「可見度」和「發佈時間」。
設定完後再按一次「發佈」。

設定好文章可見度和發佈時間,再按一次發佈

這樣我們就成功新增一篇文章了!

成功新增一篇文章了

切換回購物網站前台的 Blog (部落格) 頁面。

我們重新整理頁面,就能看到剛剛新增的文章了!

Blog (部落格) 頁面

我們點擊剛剛設定的「精選圖片」來進入單篇文章。

單篇文章

以後大家就可以透過自訂的網址、也就是連結,進到「如何挑選高 CP 值家具」這篇文章!

透過剛剛修改完的網址進入文章

新增頁面

這裡示範製作一個「品牌故事」頁面。
我們回到 WordPress 後台,在左側選單找到「頁面」的「新增頁面」。

點頁面的新增頁面

我們可以直接在這裡輸入頁面的標題和內容。
我在標題輸入「品牌故事」,內容的部分就先貼上一段假文。

然後我們也可以在內容中穿插圖片,來增加品牌故事的豐富度。
點左上角藍色的「+」。

輸入頁面標題和製作內容

在區塊工具找到「圖片」功能,再點「上傳」選擇圖片。

找到圖片功能,再點上傳

完成頁面內容後,我們同樣也為品牌故事的頁面自訂專屬網址,然後按「發佈」。

按發佈2

設定好頁面的「可見度」和「發佈時間」,再按一次「發佈」。

設定好文章可見度和發佈時間,再按一次發佈

接下來點「檢視頁面」看看我們製作的品牌故事。

點檢視頁面

以後大家就可以透過我們自訂的網址進到品牌故事的頁面,這樣我們就成功發佈一個網站頁面了!

成功發佈一個網站頁面

步驟 4:修改與翻譯模板網站

目前我們的模板網站文字都是英文,接下來我會示範要怎麼修改這些文字,你可以根據自己的購物網站類型和我一起修改。
在修改翻譯的過程中,你也會更了解整個購物網站的架構。

修改翻譯的過程也會更了解購物網站的架構

修改頁面文字

開啟 WordPress 後台,點擊左側選單的「頁面」。

點頁面

我們要把後面帶有「草稿」字樣的頁面、和重複的頁面都刪掉,而重複的頁面,要選後面「沒有粗體字」的頁面刪除!

刪除多餘的頁面

全部刪除之後,畫面就會比較乾淨了。

畫面會比較乾淨

接下來我們要修改頁面標題,點進「About us」(關於我們)。

點 About us 關於我們

我們把英文的頁面標題,修改成中文的「關於我們」。

之後按右上角的「更新」。

修改頁面標題

點擊左上角的「WordPress Logo」可以回到上一頁。

按左上角的 WordPress Logo可以回到上一個頁面2

其他的頁面的英文標題,也用同樣的方式把它修改好。

其他項目也用同樣的方式修改好

那我們要怎麼修改頁面內容呢?我用「首頁」當作示範。

點進「首頁」。

點進首頁

再點「使用 Elementor 編輯」。

點使用 Elementor 編輯

因為我們現在是第一次使用 Elementor 編輯器,得先做基本設定。

點「Recreate Kit」(重新創建套件)。

點 Recreate Kit 重新創建套件

再點一次「Recreate Kit」(重新創建套件),之後按「儲存設定」就可以關閉分頁了。

點 Recreate Kit (重新創建套件)

回到「首頁」的編輯頁面,刷新。

這樣就能進入首頁的 Elementor 編輯器了!

回到首頁編輯頁刷新,這樣能進入首頁的 Elementor 編輯器

在這邊可以玩很多排版設計,但現在我們先專注在文字的修改上面。

  • 我們把英文標題,改成「高品質現代家具」。
  • 標題上的副標,改成「新系列」。
  • 標題下的說明,改成「提供最舒適的居家體驗」。
修改首頁文字

然後點一下按鈕,把英文改成「現在探索」。

修改按鈕文字

首頁上的所有文字,都能用同樣的方法來修改,我們需要多一點耐心花時間一個個翻譯。

完成之後,點擊 Elementor 編輯器左下角的「更新」儲存我們修改過的地方。

按更新

點擊 Elementor 的編輯器邊框的箭頭,可以將編輯器收起來,這樣我們就能瀏覽網站修改好的樣子!

點擊 Elementor 編輯器邊框的箭頭,可以將編輯器收起來

確定都沒問題後,再打開編輯器,按左上角的「圖示」。

再打開編輯器,按左上角的圖示

之後按「離開」。

按離開

再按「套用」。

按套用

修改選單文字

接下來,我們切換到購物網站前台,可以看到選單上的項目還是英文的,那我們要怎麼修改呢?

選單上的項目都還是英文的

點最上面的「自訂」,可以進入到 Blocksy 主題的自訂器。

點自訂進入 Blocksy 自訂器

左側的自訂器往下滑,找到「選單」的選項。

往下滑,點選單

再點擊「Main Menu」(主要選單)。

點 Main Menu 主要選單

我們要把選單的英文名稱,改成中文的「主要選單」。

修改選單名稱

接著點開是英文的選單項目,就可以從「導覽選單項目標籤」欄位把英文改成中文。

從導覽選單項目標籤把英文改成中文

我們可以用同樣的方法,修改全部的英文選單項目。

其他項目也用同樣的方式修改好

記得按「發佈」。

按發佈

再按「叉叉」,關閉 Blocksy 主題自訂器。

再按叉叉

這樣我們就把選單文字都修改好了!

選單文字都修改好了

修改商品

我們在網站前台的商品彙整頁面,可以看到商品名稱是英文的。

商品名稱還是英文的

點進去,商品描述也是英文的,我們要來修改它。

商品描述也是英文的

切換到 WordPress 後台,點左側選單的「商品」。

點商品

點進「Coffee Table」。

點進 Coffee Table

我們可以在這裡修改、翻譯商品名稱、描述 … 等等。

修改商品名稱和描述

下方的「商品資料」區塊,我會在 第 4 章 有更詳細的講解,這裡先以修改、翻譯的操作為主。

第 4 集會更詳細講解

改好之後按「更新」。

按更新

我們回到所有商品的頁面。
其他的商品,也可以用同樣的方法去做修改。

其他項目也用同樣的方式修改好

要新增商品的話,可以點「新增」的按鈕增加賣售的商品,我也會在這個系列的第 4 章更詳細地講解。

第 4 集會更詳細講解

修改商品分類

回到單項商品頁面,我們還可以注意到,商品的分類也是英文的。

商品分類還是英文的

到 WordPress 網站後台,點左側選單的「商品」,再點「分類」。

點商品的分類

我們可以點進「Chairs」的分類。

點進 Chairs

在「名稱」的欄位,就能將英文翻譯成中文了!

在名稱欄位翻譯成中文

修改好記得往下滑,按「更新」。

按更新

其他的英文分類,也用相同的方式修改好。

其他項目也用同樣的方式修改好

要新增新分類的話,可以在左側填寫資料。

可以在左側新增分類

之後往下滑,按「增加新分類」就完成了!

按增加新分類

修改部落格文章

切換到購物網站前台,我們點選單上的「部落格」進到文章的彙整頁面。

點部落格到文章彙整頁面

點選文章的標題,就會進到單篇文章。

點選文章標題到單篇文章

這篇的文章的標題跟內容都是英文的,我們要來修改它。

文章的標題跟內容都還是英文的

切換回 WordPress 網站後台,點擊左側選單的「文章」。

點文章

按「移至回收桶」可以把不要的文章丟掉。

按移至回收桶

也可以點擊文章名稱進行修改。

點擊文章名稱進行修改

修改好文章標題,貼上幾段假文後,就能按「更新」。

按更新4

點左上角的「WordPress Logo」回到上一頁。