如何架設 WordPress 購物網站+網路商店(Flatsome 主題)?

購物網站建置+設計:WordPress 網路商店架設,完整教學(Flatsome)

這是一篇完整的「 購物網站建置 」教學,帶你打造網路開店平台。

這邊會給你不同的選擇,原來 .. 可用最少預算架設+設計購物網站,不一定要花大筆錢租用市面的電商平台,而且不用被網頁設計公司綁架。

WordPress 是最棒的網頁製作軟體,而 WooCommerce 是知名的電商外掛,強化了網站的電商功能,讓網站主可自由設計線上商店。

★☆ — 重要資訊 — ☆★

犬哥網站與 Bluehost 主機有長期合作關係,點擊網站上的 Bluehost 連結 前往官網(包含點擊此連結),最高可享有 3 折的讀者折扣優惠,請一定要把握唷!

此外,我們也會得到些許收益,這可以幫助我們繼續創作更多優質內容,也謝謝你對我們的支持:)

對此,我會搭配 Flatsome 主題進行教學(長期霸佔 ThemeForest 網路商店主題的 No.1),帶領大家架設漂亮且完整的 WordPress 網路商店,大綱如下。

購物網站建置+設計:WordPress 網路商店架設,完整教學(Flatsome)

如何架設購物網站,完整設計+建置教學(Flatsome)

1. 如何自架網站?

架設網站 3 要素
1. 網域申請
(申請門牌)
2. 主機租用
(租一塊地)
3. 網頁設計
(搭建房子)

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

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

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

網域如何取名呢?

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

  • 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。例:蘋果 – https://www.apple.com/
  • 品牌名稱:網域名稱以品牌為名,打算發展品牌的公司,可用這個方式。例:愛迪達 – https://www.adidas.com/
  • 與服務 or 產品有關:與服務或產品有關聯。例:博客來 – https://www.books.com.tw/
  • 去除 www:目前大部分新網址都不太會在前面加上 www,這是比較舊式的用法。
  • .com 優先:.com 是大多數人的直覺印象,主要方便好記,增加搜尋率。
  • 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

網域取名完成後,接下來可以看一下網域後綴部分(或稱為頂級域名),要如何選擇呢?

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

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

有關於網域後綴名(頂級域名),有哪些常見的類型呢?下面僅列出一些分享。

  • tw / cn / jp:代表不同國家,如台灣、中國、日本等 ..(選擇這類型的網域,可挑選網站主要訪客的居住地)。
  • co:可解讀為公司或企業的英文縮寫,但基本上適用於任何情況,可當作 com 申請不到的替代方案(簡單好記)。
  • net:網路相關行業可使用,但無明確限制。
  • info:資訊性類型網站可使用,但無明確限制。
  • org:organization(組織)縮寫,適合非營利組織、基金會、人文組織、宗教組織等 ..,但無明確限制。

虛擬主機是什麼?

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

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

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

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

如何挑選虛擬主機?

  • 公司規模:國外知名虛擬主機公司,都是全球性服務,不論公司規模、營運歷史、主機性能、規格服務,通常優於國內主機。
  • 主機性能&功能性:主機穩定度&安全性是重要的,網站才會安全有保障。還有主機的方案規格是否理想。
  • 方案價位:通常國外的價格,會比國內便宜,但建議不要都價格取向,如果主機因此性能不好,之後你也會選擇離開的。

WordPress 是什麼?

WordPress 網站使用人數(持續增加中)
WordPress 網站使用人數(持續增加中)

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

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

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

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

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

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


3. Bluehost 方案價格

了解完 Bluehost 這款優質的主機之後呢,這章節就來點評一下主機方案部分,幫助你選擇最適合自己的。

前往 Bluehost,點擊「 Get Started Now(立即開始)」,如下圖。

使用 Bluehost 申請主機+網域
使用 Bluehost 申請主機+網域

點擊後,會看到 Bluehost 主機方案。

如果不知道如何選擇最適合你,下面我會給你一些 Bluehost 的方案建議。

Bluehost 主機:選擇 Basic 入門方案功能
Bluehost 主機:選擇 Basic 入門方案功能

要選擇哪種 Bluehost 方案?

Bluehost 的 WordPress 主機提供多種選擇,分別是 Basic 方案、Choice Plus 方案、Online Store 方案、Pro 方案。

依照不同方案,全都享有 WordPress 自動安裝和更新、24/7 全年無休客服,這是超值的功能服務。

基本來說,Bluehost 的 Basic 方案會比較建議選擇,因為費用較便宜且功能已經足夠。

這邊我簡單的統整,方便你找到適合自己的方案。

  • 只有一個網站架設需求:選 Basic 方案。
  • 多網站架設需求:Choice Plus 方案。

以新手來說,若只有一個網站需架設,選擇 Baisc 方案是毫無懸念的,此方案也搭配 10 GB 的儲存空間,是非常夠用。

如果是有多個網站架設需求,建議直接選擇 Choice Plus 方案,且此方案可享有大儲存空間,較適合有多網站需求的站長。

Bluehost 費用了解

Bluehost 原價入門費用是,網址 $12.99 美元 / 年(一年約 $400 台幣)和主機 $10.99美元 / 月(一年約 $4,000 台幣)。

值得開心的是,Bluehost 官方同意為我們網站讀者,提供最高可享有 3 折的主機折扣。

下表是用台幣計算,美元 / 台幣匯率用經常的 1:30 換算。

Basic 方案Choice Plus 方案
買一年:特價約 1,062 元(原價 4,000 元買一年:特價約 1,962 元(原價 7,200 元
買三年:特價約 5,346 元(原價 10,800 元買三年:特價約 8,046 元(原價 20,500 元

備註:新手可購買 1 年的 WordPress Basic 方案,用最少預算入門:)

如果網址同樣在 Bluehost 申請, Bluehost 有提供首年網域免費和 SSL 憑證,請多加利用。

這等於說,在 Bluehost 申請個人網域和主機,最少可用不到 1,500 台幣,就能開始啟動你的網路事業,並享有完整的主機規格服務。

不管購買的是哪種主機方案,只要點擊本站 Bluehost 連結,讀者們都享有優惠價格。

接下來,我將購買 1 年的 Basic 入門方案,當作「 Bluehost教學 」範例。


4. 網域申請+租用虛擬主機

選擇心目中的 Bluehost 方案,我們就可以開始申請網域和虛擬主機了,這邊簡化 3 步驟,打造自己的網頁製作。

Step1:選擇方案和申請網域

前往 Bluehost,點擊「 Get Started Now(立即開始)」,如下圖。

使用 Bluehost 申請主機+網域
使用 Bluehost 申請主機+網域

點選你想租用的方案,如果預算有限可從 Basic 方案開始,想架設多個網站就選 Choice Plus 方案。這邊先以租用 12 個月(1 年)為範例。

Bluehost 主機:選擇 Basic 入門方案功能
Bluehost 主機:選擇 Basic 入門方案功能

選擇方案後,可能會跳出一個彈跳視窗,推薦其他特價方案,不過建議新手還是先以 Basic 方案為主即可,所以這邊點選 Skip 跳過就好囉!

點選 Skip 跳過特價方案廣告

接著來註冊網域,這邊有提供 3 個選項。

申請新網址 Create a new domain、已經有網址 Use a domain you own、稍後申請網域 I’ll create my domain later,確認後點 Next。

有建立新網址、已經有網址、稍後再申請網域,這 3 種選項
有建立新網址、已經有網址、稍後再申請網域,這 3 種選項

小提醒:如果購買 Choice Plus 以上的方案,Bluehost 會附贈一年的網址(免繳網址費用),且 DNS 已經設定完成。

Step2:申請資料填寫

使用者資訊需都填寫英文,姓名可到 外交部 查詢,地址可用 中華郵政 查詢。

Phone Number 電話因為需輸入國際碼,可以點選「 Use an international number(使用國際碼)」的英文字,就會自動出現國際碼欄位。如果你是輸入手機,就把開頭 0 去掉直接輸入手機號碼即可(手機範例:911000111),如下圖。

至於 Email Address 需填寫正確,申請完成 Bluehost 會寄網域確認信(需點擊啟用)& 購買收據等 .. 敏感訊息。

此外,這一步會需設定密碼,這個密碼是未來登入 Bluehost 的帳密,記得要妥善保存唷:)

Bluehost 主機申請欄位

小提醒:密碼須設定 8-16 個字元,包含大小寫英文+至少一個數字+至少一個特殊符號(例如:!@#$%^)

接著,主要留意租用多久、是否加購商品、確認消費金額,建議可不勾選加購項目,以節省預算。

Bluehost 主機申請欄位

小提醒:Bluehost 方案費用依照官方當時為準,上圖購買費用僅供參考使用(記得使用 折扣連結 前往,才會享有專屬折扣價格)。

然後填入付款訊息並勾選服務條款,最後按下 Submit 送出。

bluehost教學 :付款方式
Bluehost教學 :付款方式

這樣一來,個人網域和 Bluehost 主機就都申請完成囉,太好了。

Step3:創建 Bluehost 帳戶

申請完成後會看到歡迎訊息 & 收據明細,可把收據保存下來,Bluehost 也有同步傳到你的信箱。

接著註冊 Bluehost 帳戶,這是用來登入 Bluehost 後台的,點擊 Create your account 創建帳戶。

bluehost教學 :虛擬主機申請完成
Bluehost教學 :虛擬主機申請完成

到了這裡,恭喜完成了網域申請 > 主機申請 > Bluehost 帳戶註冊的重要流程。

有了這些東西,我們就可以架設 WordPress 網站囉。

Step4:建立 WordPress 網站

Bluehost 會繼續引導建置 WordPress 網站,這裡會有多個步驟,都先點選 Next 略過設定流程(這些之後都可再做設定),最後就會直接進行網站安裝。

進行 WordPress 網站安裝
進行 WordPress 網站安裝

走到最後一步,就可以順利看到 WordPress 後台了!恭喜!

WordPress 網站建置完畢!
WordPress 網站建置完畢!

5. 前往 Bluehost 後台

這章節,我們將前往到 Bluehost 後台,逐一了解有哪些可使用的功能。

登入 Bluehost 後台
登入 Bluehost 後台

輸入你的 UserID (網域名稱 or 信箱)& 密碼, 登入 Bluehost 。

輸入 Bluehost 帳號&密碼
輸入 Bluehost 帳號&密碼

接著會有簡易的 Bluehost 安全驗證設定,目的是幫你的帳號提升安全性。

可分別設定 Pin 碼& 手機號碼(因為是國際碼,可把開頭 0 去掉,系統會寄封簡訊驗證碼),就能驗證成功。

備註:若後面有出現「 開啟兩步驟驗證 」功能,這個可以先點選略過。

設定 Pin 安全碼
設定 Pin 安全碼

接著就會看到 Bluehost 後台介面了,有關左側的「 Websites 」選項,裡面會列出所有的 WordPress 網站。

以下圖為範例,選項「 Settings 」是顯示網站資訊,選項「 Edit Site 」是前往到 WordPress 後台。

Bluehost 呈現網站資訊
Bluehost 呈現網站資訊

進來之後,Bluehost 給予的網站設定項目,大致上都會放在這邊。這裡面功能很多,大家都可以再玩看看。

這邊主要列出必用路徑,分別是 WordPress 前後台路徑,也可以從這裡前往。

更多網站資訊呈現
更多網站資訊呈現

補充訊息:WordPress 網站前台

如果網址列出現臨時網域(非剛申請的網域)是正常的。

那是因為 Bluehost 需把你的新網域,通報給全世界的主要伺服器基地,讓它們收錄你的網域,如此一來你的網域才會被找到(這個也稱為 DNS 指向,通常生效時間約 24 ~ 48 小時不等)。

等系統作業完成後,Bluehost 會自動把臨時網域,更改成你剛申請的網址(在此之前,如果要登入 WordPress 後台,建議先從 Bluehost 後台前往)。

補充訊息:WordPress 網站後台

首次登入 WordPress 後台,建議可優先更改網站語言、網站標題、永久連結 等 .. 主要項目,方便未來操作。可參考 WordPress 後台教學


6. Bluehost 其他設定

bluehost 網站架設,功能設定
Bluehost 其他設定

如果有跟著上面的教學,你應該也順利建立 WordPress 網站了。

接著還有一些事項需完善它,像是信件認證(WhoIs 網域身份認證)、Bluehost & WordPress 設定、網站正式上線、SSL 安全憑證等 .. 。

如果網域是在第三方網域商申請(不是在 Bluehost 一起申請),別忘了需設定網域的 DNS 指向,把網域指向剛申請好的 Bluehost 主機,這樣搜尋網域才會順利看到網站唷。

上面提到的待辦事項,可以參考 Bluehost 網站製作,補充尚未學習到的部分。

完成後,我們的基礎設施就都建置完成了,恭喜大家。


7. Flatsome WordPress 主題介紹

flatsome 主題推薦:WordPress 購物網站主題
Flatsome 主題推薦:WordPress 購物網站主題

Flatsome 是最暢銷的 WooCommerce 購物網站和商業主題,它在 ThemeForest 主題森林的電子商務分類上,蟬聯 No.1 許久。更多 Flatsome 完整教學

如果你正打算架設購物網站,可參考下面影片將會帶你從 0 到 1,直接晉升成專業電商主。

架設購物網站:如何設計建置+購物車教學(WordPress 網路開店平台)

Flatsome 的主要功能都是為網路開店打造,有多種不同的線上商店、企業形象版型,只需一鍵安裝即可套用。

不論是服飾、運動用品、倒數特賣、服務購買 .. ,讓你自由挑選。

flatsome 主題:多種精美線上開店版型
Flatsome 主題:多種精美線上開店版型

UX Builder 它是 Flatsome 的專業頁面編輯器,你無需任何編碼經驗,就可以用拖曳方式,打造出精美的網路開店平台。

它有多種的頁面佈局方式,讓你品牌網站獨一無二。

flatsome 的 UX Builder 專業頁面編輯器
Flatsome 的 UX Builder 專業頁面編輯器

Flatsome 還有多功能區塊元素,可讓你的網頁設計天馬行空,出色的組合建置網站。

同步支援手機頁面呈現、優質的主題速度、SEO優化 .. ,這是很正常的事。

flatsome 多功能的區塊元素
Flatsome 多功能的區塊元素:僅部分截圖(來自 Flatsome 官網)

Flatsome 是打造完美的線上開店平台的最佳幫手,如果想經營電商平台,絕不能錯過它。


8. 購買 Flatsome 主題

這章節會示範,如何在 themeforest 主題森林購買 WordPress 佈景主題,詳細流程請繼續學習。

首先,前往 Flatsome 佈景主題,點擊「 Buy Now 」進行購買流程。

Flatsome教學 :購買 WordPress Flatsome 主題
購買 WordPress Flatsome 主題

使用者資訊需都填寫英文,姓名可到 外交部 查詢,完成後點 Next。

Newspaper WordPress 主題:創建 themeforest 帳號
創建 themeforest 帳號

設定 themeforest 主題森林的帳號+密碼,這是未來要登入的憑據,請妥善保存。

Newspaper WordPress 主題:創建 themeforest 帳號
創建 themeforest 帳號

填入帳單資訊,如果沒有公司可以空白,地址需填入英文,郵遞區號需填國際碼(4 – 9 碼),可用 中華郵政 翻譯查詢,完成後點下一步。

填入帳單明細
填入帳單明細

輸入付款資訊,常用的有信用卡或 PayPal 付款,這裡用信用卡示範,點擊按鈕確認付款。

Newspaper WordPress 主題:輸入付款資訊
輸入付款資訊

這樣一來 WordPress 佈景主題就購買完成囉!下一章節,我們會進行主題安裝教學。


9. 安裝 Flatsome 主題+套用預設模板

這章節會示範如何把第三方主題,安裝到 WordPress 網站上,我們開始吧。

主題購買完成後,點擊右上角圖像前往 downloads 頁面。

登入 themeforest 帳號,和前往 downloads 頁面
登入 themeforest 帳號,和前往 downloads 頁面

在購買清單,會看到剛買的 Flatsome 佈景主題,點擊 Download > Installable WordPress file only,下載 WordPress 主題安裝檔。

Flatsome教學 :下載 WordPress 主題安裝檔
下載 WordPress 主題安裝檔

接著,前往並登入 WordPress 後台,到 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題。

上傳 Flatsome 主題檔案(副檔名是zip),安裝成功後就直接「 啟用 」。如果不太會安裝,也可參考 WordPress 主題安裝

上傳 Newspaper 主題
上傳 Newspaper 主題

啟用 Flatsome 主題後,系統會自動前往購物站安裝畫面,引導你繼續安裝。我擷取其中幾個步驟做教學,如果沒提到的就持續點下一步即可。

首先須激活憑證,點選下圖 Generate a token 生成一組憑證,輸入完成後點下一步。完整憑證申請+激活,可參考 這篇文章

輸入產品序號,激活 flatsome
輸入產品序號,激活 flatsome

基本上會建議安裝並使用子主題,因為未來 Flatsome 主題升級時,在上面所做的設定或樣式更改,才不會受到影響。

Flatsome教學 :創造和使用 WordPress 子主題
創造和使用 WordPress 子主題

然後,安裝此主題需具備的 WordPress 外掛,點 Continue 就會自動安裝。

系統也會安裝 Demo 相關內容,包括文章、頁面、產品、設定等 .. ,可都安裝起來。

Flatsome教學 :安裝主題相關的必備外掛
安裝主題相關的必備外掛

然後,可更換網站 Logo 和網站樣板,這邊先建議跟我挑選同款的樣板,方便後續教學。網站 Logo 和網站模板,之後都能再更換。

選擇 logo 和網站樣板
選擇 logo 和網站樣板

Flatsome 購物站安裝成功,可前往 WordPress 網站前台看成果囉。

Flatsome教學 :Flatsome 網路開店平台安裝成功
Flatsome 網路開店平台安裝成功

太棒了。初版的 WordPress 購物網站已經架設成功了。

購物網站建置 :WordPress 購物車網站,初版架設成功。
購物網站建置 :WordPress 購物車網站,初版架設成功。

10. 更改 Header(網站頁首)

這章節學習更換網站頁首,前往 Flatsome > Theme Options(或是 WordPress 外觀 > 自訂也可以),就會看到很多主題調整功能。找到 Header 然後點選。

購物網站建置 :WordPress 網站頁首修改
購物網站建置 :WordPress 網站頁首修改

裡面有多個頁首調整選項,像是頁首版型(Presets)、網頁 Logo、黏性選單(Sticky Header)、下拉選單樣式(Dropdown Style)等 ..,可自行點選玩玩看看。

Flatsome教學 :WordPress 頁首 Header 調整
WordPress 頁首 Header 調整
  • Presets 頁首版面:可設定頁首版面設計,通常改變幅度最明顯。
  • Logo & Site Identity 品牌圖示:設置網站 Logo、圖標,也可調整圖片大小和內距離等。
  • Header Main 主頁首:可設定頁首高度、頁首顏色、導航尺寸、導航高度等 ..。
  • Header Mobile Menu  手機頁首:調整手機頁首高度、佈局、顯示元素等 ..。
  • Sticky Header 黏性選單:選單置頂相關調整,像是頁首高度、Logo內距等。
  • Dropdown Style 下拉選單樣式:背景顏色、邊線顏色、選單寬度等 ..。
  • Contact 聯絡資訊:可更改商店的聯絡資訊。
  • Follow Icons 社群連結:設定不同的社群連結,像是 FB、Twitter、IG、Email ..。

這邊的網頁設計+修改完成後,網站頁首應該有變化了,接下來我們可以做更多。

Flatsome 主題提供頁 Header Builder(頁首編輯器),只需把想使用的元素功能拖放到功能放置區,畫面就會顯示。也可針對不同裝置放置不同元素。

點擊每個元素功能,畫面就會顯示可調整的項目。網頁設計完成後,記得點 發佈 儲存。

Flatsome教學 :網站頁首,區塊編輯器
網站頁首,區塊編輯器

這樣一來,網站頁首客製化設計就不是問題囉。


11. 更改商品分類&標籤

導入 Flatsome 預設樣板時,系統有幫我們匯入許多資料,裡面包含商品分類、標籤,可以把其中一些改成符合個人商店的中文名稱,並把多餘的刪除。

前往 WordPress 商品 > 分類,可新增新的商品分類,或是把現有改成自己要的。更多 WordPress 後台教學

在指定的分類點「 編輯 」或「 快速編輯 」都可修改,可拖放排序和從屬關係,分類前面有一橫的代表是子分類。

購物網站建置 :WordPress 設定商品分類
購物網站建置 :WordPress 設定商品分類

備註:編輯分類時,「 代碼 」代表分類的網址名稱,會建議填英文。

商品分類修改完成後,我們來更改商品標籤,前往 WordPress 商品 > 標籤,一樣可在這編輯或刪除多餘的標籤。

WordPress 編輯商品標籤
WordPress 編輯商品標籤

商品分類和標籤都更改完成後,之後再設定商品相關內容時,就比較不會亂掉。

到此,我們的「 購物網站建置 」又更邁進一步了!


12. 更改商品內容

Flatsome 預設有匯入多筆商品資料,可從中挑選修改或是刪除多餘的資料,前往 WordPress 商品 > 所有商品,就會看到多筆商品。

你可以先稍微修改幾筆商品,等等新增或編輯商品頁面會比較真實,等之後教學流程都學完後,再回來編輯其他商品即可。

可修改商品標題、商品網址(永久連結)、商品描述等 ..。

Flatsome教學 :WordPress 新增或編輯商品內容
WordPress 新增或編輯商品內容

編輯商品類型、商品金額、庫存、運送方式 ..,這部分可搭配 WooCommerce 電商教學,如果需新增不同類型商品,可參考 常見商品建立

目前先任意填寫即可,主要先讓大家熟悉編輯商品流程。

購物網站建置 :WooCommerce 購物網站,編輯商品內容
購物網站建置 :WooCommerce 購物網站,編輯商品內容

然後可編輯商品分類、標籤、商品圖片 .. ,讓商品內容更加豐富,完成後點發佈或更新即可。

Woocommerce 編輯商品分類、標籤、圖片等 ..
Woocommerce 編輯商品分類、標籤、圖片等 ..

前往 WordPress 網路商店前台,剛剛編輯的商品就會呈現在眼前,有了 Flatsome 主題一切都變得很容易:)

Woocommerce 網路商品內頁
Woocommerce 網路商品內頁

13. UX Builder 頁面編輯器

一個完整 WordPress 線上購物網站,可能包含一般頁面、商品頁面等 ..,這些頁面也可用 Flatsome 自帶的 UX Builder 編輯。

保持 WordPress 登入狀態,前往網站前台任一頁面,點擊上方 Edit with UX Builder 進行編輯。

購物網站建置 :使用 UX Builder 頁面編輯器
購物網站建置 :使用 UX Builder 頁面編輯器

UX Builder 簡單介面認識

這邊我用首頁當簡單範例,進入該頁面的 UX Builder 後,這邊做個介面認識。

購物網站建置 :UX Builder 頁面編輯器
購物網站建置 :UX Builder 頁面編輯器
  • 結構設定區:當頁的網站結構會在這顯示,點擊齒輪 > Options 或是視覺化區,這裡會出現指定區塊可編輯的項目。底部的 Add elements 按鈕,可新增其他佈局或功能。點擊齒輪 > Delete 可刪除區塊。
  • 視覺化區:所見即所得編輯器,點擊指定區塊左側會出現可編輯項目。滑向指定區塊可能會出現加號,點擊可新增其他佈局或功能。對著指定區塊點右鍵 > Delete 可刪除區塊。
  • 頁面設定:可設定標題、上層項目、特色圖片等 ..,或是前往 WordPress 頁面 > 全部頁面,找到指定頁面也能編輯。更多 WordPress 頁面教學
  • 存檔:保存當前紀錄,刷新 WordPress 前台就會有變化。
  • 前進 / 還原:像 Excel 的前進、還原。
  • 裝置切換:可切換不同裝置看顯示的狀況,進行客製化網頁設計。

網站頁面組成邏輯(UX Builder)

UX Builder 頁面佈局邏輯,主要是由這 3 個組成,分別是 Row(行)、Column(欄)、Element(功能),這可組合而成完全客製化頁面,自由調整欄位寬度。

一條 Row 行可以切成多個 Column 欄,每個 Column 欄上面可以放置多個 Element 功能,它們之間大概就是這個邏輯,點擊就可調整。

Flatsome教學 :UX Builder 頁面編輯器,切換到不同結構
UX Builder 頁面編輯器,切換到不同結構

如何新增頁面佈局 or 區塊功能(含套用模板)?

滑鼠移到視覺化區,就會出現新增加號。或是左側的結構設定區,點擊 Add elements 新增元素,就會在當頁最下方新增功能。

購物網站建置 :Flatsome 主題,新增元素功能區塊
購物網站建置 :Flatsome 主題,新增元素功能區塊

會看到有許多現成的版面配置、WooCommerce 購物功能、內容區塊等 .. 可直接拿來套用,是不是非常方便呢。

UX Builder 頁面編輯器,新增區塊功能 or 佈局資源庫
UX Builder 頁面編輯器,新增區塊功能 or 佈局資源庫

點擊上圖 Flatsome Studio 模板資源庫,會出現非常多類型的現成模板,選擇喜歡的點擊 Import 就可匯入溜。

Flatsome 多種現成模板
Flatsome 多種現成模板

以上就是 UX Builder 頁面編輯器的功能瀏覽,這個工具掌握後,就能隨心所欲製作網頁啦!


14. 更改文章分類&標籤&內容

一個完整的網路開店平台,可能包含部落格功能,讓你寫些網誌加強對顧客的凝聚力。

文章分類&標籤

前往 WordPress 文章 > 分類,把現有的分類改名或新增分類,文章分類可設置父子關係。

flatsome教學 :新增或編輯 WordPress 分類
新增或編輯 WordPress 分類

再來,前往 WordPress 文章 > 標籤,可以新增或修改文章標籤。

購物網站建置 :新增或編輯 WordPress 標籤
購物網站建置 :新增或編輯 WordPress 標籤

完成文章分類、標籤修改後,接著可開始撰寫文章啦~

新增 or 編輯網站文章

會建議使用 WordPress 預設的區塊編輯器寫文章,不但頁面輕量且假設未來有這麼一天,不再使用 Flatsome 主題,至少文章部分都不會受到影響。更多 WordPress 文章教學

前往 WordPress 文章 > 全部文章,可挑現有文章修改,或是新增新文章。

進入文章後,點左上角可新增不同功能區塊。

WordPress 新增文章內容(左上角是 WordPress 區塊編輯器)
WordPress 新增文章內容(左上角是 WordPress 區塊編輯器)

編輯完成後,記得將文章發布出去,就能到網站前台看一下文章成果囉:)


15. 設置網站選單

到這步驟,我們已經學會如何新增 WordPress 商品、頁面、文章等 ..,把這些東西都準備好後,就可以把它放到網站選單裡面。更多 WordPress 選單

前往 WordPress 外觀 > 選單,可編輯網站選單。預設選單項目沒有商品相關類型,所以需自行勾選導入。

點擊右上角的 顯示項目設定,把網站商品、商品分類、商品標籤等 .. 導入。

WordPress 選單類型,新增商品 / 商品分類 / 商品標籤等 .. 選單類型
WordPress 選單類型,新增商品 / 商品分類 / 商品標籤等 .. 選單類型

選擇需編輯的選單,由於剛有勾選商品選單類型,左側會出現相關類型,你可以把單一商品、商品分類、商品標籤等 .. 放入至選單中。選單可拖放排序。

購物網站建置 :WordPress 編輯網站選單
購物網站建置 :WordPress 編輯網站選單

設定網站選單的顯示位置,因為 Flatsome 有多個選單位置,由於剛是選擇編輯 Main 主選單,所以顯示位置我們勾選 Main Menu(主選單位置)、Main Menu – Mobile(手機主選單位置)。

WordPress 設定選單出現位置
WordPress 設定選單出現位置

前往 WordPress 前台看一下選單成果,會發現剛編輯的選單已經出現了。手機版也可以確認,應該也正常顯示了。

WordPress 網站選單編輯完成
WordPress 網站選單編輯完成

16. 網站首頁、部落格閱讀設定

Flatsome 預設已經指定好首頁,如果想變更首頁到剛自己指定的頁面,要如何做呢?還有部落格內容列表,要如何顯示在指定頁面?這章節帶你操作。

前往 WordPress 設定 > 閱讀,在靜態首頁選擇你想設定的頁面,就不一定要用 Flatsome 預設的囉,文章頁面顯示也是一樣的邏輯。

WordPress 設定閱讀頁面
WordPress 設定閱讀頁面

文章顯示方式建議使用 內容摘要,預防內容顯示過長的問題,完成後儲存即可。如此一來,網站首頁就變成你指定的頁面囉。


17. WooCommerce 基礎建置

WooCommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬,更多 WooCommerce 電商教學

一開始安裝 Flatsome 購物網站流程,系統會自動協助安裝 WooCommerce 這款核心外掛,你也能搭配更多 WooCommerce 生態圈外掛,讓電商網站變得更完整。

前往 WooCommerce > 首頁,會自動跳到電商配置程序。

安裝過程中,照指示填入訊息即可,有商店地址、產品所屬產業、產品類型等 .. ,先隨意填寫即可,然後不斷按下一步即可。

其中有步驟是詢問產品類型,這邊不要勾選到付費項目。

WordPress Woocommerce 安裝流程,詢問產品類型
WordPress Woocommerce 安裝流程,詢問產品類型

簡單列出商店的業務資訊,這裡會推薦一些 WordPress 外掛,這都不需要安裝未來再裝即可。

購物網站建置 :WordPress Woocommerce 商品業務訊息
購物網站建置 :WordPress Woocommerce 商品業務訊息

WooCommerce 會詢問要使用哪種主題,當然是繼續使用 Flatsome 主題,就是我們本文教學用的。

購物網站建置 :使用 Flatsome 佈景主題
購物網站建置 :使用 Flatsome 佈景主題

完成後,再度前往 WooCommerce 首頁,就會發現網站面板出現許多資訊囉,可以使用所有功能了。

購物網站建置 :Woocommerce 開店平台架設
購物網站建置 :Woocommerce 開店平台架設

「 購物網站建置 」的基礎,是以 WooCommerce 外掛作為基底,因為 WooCommerce 涵蓋了重要的購物流程,所以架設購物網站,它是重要的一步。

至於未來 WooCommerce 可能會微幅調整安裝步驟,但也不會有什麼影響,就是照著它的指示安裝即可:)


18. WooCommerce 基本設定+金物流串接

完整的線上購物網站,我們需設定好商店地址、銷售地區、是否使用稅金、貨幣選項、商品庫存設定、金流物流等 .. ,才能讓網路商店營運。

前往 WooCommerce > 設定,這裡有許多可調整選項。更多 WooCommerce 電商教學

Woocommerce 購物相關設定
Woocommerce 購物相關設定

還有一個重點,就是網站的金物流串接,由於 WooCommerce 預設的金物流功能不夠多,建議可以安裝外掛擴充。

有關於金物流設定+串接,可以參考 設定 WooCommerce 金流+物流RY WooCommerce Tools 教學PayPal 串接教學 這幾篇文章,相信你會收穫良多:)

都搞定後,最後再到 WordPress 網站跑一次購買流程,看是否順利。


19. 網頁區塊+小工具設定

WordPress 網頁區塊,通常會有頁首(Header)、主內容(Content)、側邊欄(Sidebar)、F頁尾(Footer),這是最常見的區塊。

WordPress 主要 4 區塊
WordPress 主要 4 區塊

如果大一點的佈景主題,可能還會有頂端欄(Top Bar)、多個側邊欄(Sidebar #1、#2 ..)、多個子頁尾(Footer Column #1、#2 ..)等等。購物網站主題,會有產品側邊欄(Product Sidebar)等 .. 產品頁相關側邊欄可設置小工具。

備註:不同 WordPress 主題的工具欄位命名可能不同。

除了主內容(Content)以外,其他主區塊都能在裡面添加其他功能元素,讓網頁變得更豐富,我這邊進行教學。

前往 WordPress 外觀 > 小工具,Flatsome 主題 提供很多功能, 這邊都能自行運用。

WordPress 小工具設定
WordPress 小工具設定

備註:因為 WordPress 在 5.8 版本後,小工具頁面已經改為區塊編輯的方式,可參考 新版小工具 操作(裡面也有分享,如何還原到原來的操作介面)。

調整完成後,可到網站前台查看相對應的頁面,應該會發現有所變化。

這樣就可自由編輯網頁側邊欄、或是網站頁尾,「 購物網站建置 」你的專屬網站排版了:)


到網站頁尾修改的部分了,這邊示範如何使用 Flatsome 主題,來設計+修改網站頁尾。

前往 Flatsome > Theme Options > 點選 Footer,這裡可改動大部分頁尾樣式。

Flatsome主題 :網站側邊欄調整
Flatsome主題 :網站側邊欄調整

下面有列出一些頁尾功能介紹,可點 Edit Footer Widgets 修改小頁尾工具、是否開啟 Footer 頁尾、頁尾欄數 .. ,可自行玩玩看。

Flatsome教學 :頁尾 Footer 內容編輯
Flatsome教學 :頁尾 Footer 內容編輯

還有其他的頁尾設定,修改完成記得按 發佈,網站前台才會顯示唷。


21. 客製化網頁設計

使用 Flatsome 主題,進行網路開店平台客製化佈局,可前往 Flatsome > Theme Options,這裡可改動大部分網頁設計。

Flatsome 主題教學,客製化網頁設計
Flatsome 主題教學,客製化網頁設計

下面的「 Flatsome教學 」我列出一些功能介紹,像是選單、小工具、首頁設定剛都有提到,這裡就不再敘述,更改完記得 發佈 即可。

Flatsome 主題,客製化網頁設計
Flatsome 主題,客製化網頁設計
  • Header 頁首設定:頁首佈局和功能設定,像是佈局版型、Logo、選單樣式 .. 。
  • Style 樣式&配色:整站的網站配色,字體樣式 .. 。
  • Blog 部落格設定:部落格相關頁面調整,像是版型調整、是否顯示社群、顯示作者 .. 。
  • Woocommerce 電商頁面設定:電商相關調整,像是產品頁面調整、會員帳戶、付款圖示、結帳流程設定、商品圖片大小 .. 。
  • Layout 全站佈局:調整全站的佈局模式、內容呈現寬度等 ..。
  • Footer 頁尾設定:可編輯頁尾小工具、頁尾欄位數、頁尾版權等 ..。
  • Share 社群媒體:社群按鈕設定。

以上就是 Flatsome 的 Theme Options 客製化介紹,到此整個 Flatsome 主要功能講的都差不多了,希望有幫助到你。

相信上面這些教學,應該足夠你完成個人、公司的「 購物網站建置 」。

如果還想知道些什麼,歡迎在下方留言給我,我會再補充:)


常見問題

自架網站需要準備什麼?

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

這也是每個網站主都需負擔的小投資,沒有例外。

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

網域如何取名呢?

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

網域取名時,注重幾個簡單原則即可,像是簡單好記、品牌名稱、與服務 or 產品有關、去除 www、 .com 優先、勿用中文。

虛擬主機是什麼?

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

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

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

WordPress 是什麼?

WordPress 它是全球知名的網頁設計軟體,全球有 40 % 以上的網站,都來自於 WordPress。

它可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

有推薦的 WordPress 優質虛擬主機嗎?

Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站並持續增加中。可參考 Bluehost 心得評價,了解更多。

不論網站空間、網站速度、價格便宜、客戶服務等 .. 多方面表現都令人滿意,對於剛入門的網站新手是最優質的選擇。

許多國內外的部落客、企業主、電商經營者,也都把網站建置在 Bluehost 主機。可參考 Bluehost 教學,有完整教學。

如果對速度有一定程度的要求,則可以參考其他款進階主機,像是 Cloudways(VPS) 或是 A2 Hosting(中高階方案)。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈購物網站建置+設計:WordPress 網路商店架設,完整教學(Flatsome)〉中有 40 則留言

  1. 您好,請問在flatsom佈景主題下,我可以自訂「單項」商品的首頁上方圖片的樣式嗎?比如,比如圖片的高度。
    謝謝您!

  2. 您好 請問footer中怎麼新增綠界付款的icon呢?(我在woocommerce的payment icon選單中找不到)另外payment icon怎麼改成彩色的呢?謝謝小犬:)

  3. 小犬~~
    看您的影片受益良多!!
    我想請問一下您有沒有知道哪一款外掛可以授權讓會員(寄賣/上架)自己的商品?

  4. 小犬你好,最近用flatsome主題做了一個購物網站,聽說flatsome是最適合做購物車的網站,但做好之後發現了一個很大的問題就是,網站的動~作~很~慢,用pagespeed測只有8%,不知小犬是否有碰到同樣問題,聽說flatsome已經有針對速度優化了,但不知道為什麼還是這麼慢,主機也是選台灣的智邦,也都升速了,在考慮是不是該換主題呢,但那真的是大工程,心好累

    1. 犬哥網站

      嗨,Jasmin,

      Flatsome 主題經過國內外許多電商網站的使用與測試,應該沒有加載速度上的問題,這部分也許需要洽詢主機商。

      也可以試試看安裝速度優化外掛: WP Rocket 教學推薦 7 種網站速度優化外掛

      在上傳圖片至網站媒體庫時,先將圖片進行一次不破壞性壓縮,降低加載圖片的速度,也會有幫助。

      希望我的回答有幫助到你唷:)

  5. 小犬你好
    想請教關於Flatsome我只有看到它是一次性買斷,但是否有限制可以套用的網站數量呢?
    找不太到資訊,再麻煩您了,謝謝。

    1. 犬哥網站

      嗨,CHIAN,

      Flatsome 憑證現在可用在 5 個網站,但未來規定可能隨時更新,

      建議你直接到 Flatsome 官方頁面查詢唷~

  6. 小犬您好
    首先感謝你的文章跟YT
    讓我在這陣子學了很多
    有一個問題請教您
    我安裝了”Flatsoome”,
    但是在首頁的地方”Search icon”跟”Social Icons”都變成正方型,
    我是否有什麼地方設定錯了
    我也試了把整個網站全部刪除又重來一次
    但是結果還是一樣,這個網路空間是在Godaddy
    跟著你的教學在bluehost在重新做一次的就沒有問題
    請問您是否能協助我解決這個問題?

    1. 犬哥網站

      嗨,育奇,

      主題的出錯應該跟主機商無關。

      我猜有可能是因為你之前有安裝過別款主題,後續再次安裝 Flatsoome ,導致 CSS 覆蓋重疊,

      也有可能是其他外掛衝突。

      可以一一停用並檢查看看。

  7. 小犬您好,我想請問一下 我的帳號頁面好像不小心被我刪掉了 現在我的帳號頁面整個都是空白的
    這有甚麼辦法解決嗎?

    1. 犬哥網站

      嗨,勝凱,

      有看見你在 FB 社團的留言,發現已經有人幫你解答囉,

      下次再不小心刪除「我的帳號」頁面,重新添加 [woocommerce_my_account] 短代碼即可,

      Flatsome 不會修改&覆蓋 WooCommerce 的頁面代碼,若是不小心刪除其他 WooCommerce 代碼,

      可前往 WooCommerce 短代碼資料庫,搜尋關鍵字找出缺失的短代碼:)

  8. 您好!想請問使用您的文章優惠申請bluehost之後若想續約是否會變回原價續約呢?

    1. 犬哥網站

      嗨,路特克,

      是的唷,第一次購買會是優惠價格,往後續約會變回原價,

      但是可以等到季節折扣再做續訂的動作,也會較原價優惠唷:)

  9. 你好,感謝你花這麼多時間編制各種教學,我現在正開始建設網站,因為我的產品是訂製的,所以在產品購買頁面,需要一個客戶留言的位置,目的是給客戶填寫訂單內容,
    請問,怎樣才可以設置?感謝。

    我現在是使用Wordpress+Woocommerce、謝謝。

      1. 謝謝回復!
        雖然不能在産品頁面加上留言位置,但在結帳頁面可修改text box內的予設內容,已算是暫時解決了問題,感謝。

        1. 很開心能幫助到你,不用客氣唷!

          也可以考慮加入 FB 社團,日後有其他 WordPress 疑問,或是學習資源分享,都可在社團發文,與廣大 WordPress 愛好者一同交流唷~

  10. 犬哥網站您好,請問Flatsome軟體(如購買$59方案*1套)可支援一個網站還是可支援應用在多個網站使用呢,求解?感謝!

    1. 犬哥網站

      嗨,hung,

      購買一個 Flatsome 憑證,可以套用 5 個網站,相關規定可以前往 Flatsome 頁面 查詢。

      不過有些主題 / 外掛規定可能都不同,可以前往各自的官方網站,應該都會對購買方案進行說明唷~

  11. 您好犬哥,我原本編輯好了但是不知道為什麼要再次編輯時候按下edit with UX builder進去時候就一直轉圈卡住….求解

    1. 犬哥網站

      嗨,Jovi,

      這跟主題關係不大,可能是網路問題,可先檢查網路線路是否有其他狀況,

      或者可能是主機商的問題,如果使用共享主機,有時候其他人佔用太多網站資源,就會發生其他網站資源被臨時佔用的情況,

      建議你直接寫信跟客服反應,請主機商客服協助你進行處理唷!

  12. 請問小犬:
    我目前在架設購物網站,在最上面Header選單,其中一個選單下的下拉選單底圖如何改顏色,找了很多地方都找不到

    1. 嗨,Yanci,

      Header 相關設置應該都會在 Flatsome > Theme Options > Header 裡,建議可再找尋看看,

      若還是無法順利找到,可前往 FB 社團,貼上截圖,更方便我們和廣大網友幫助你解決疑問唷:)

  13. 犬哥您好

    跟著您的影片做到1:00:31,
    Flatsome Studio裡選擇Services/Icons,
    再點選Import後,出現了以下的文字無法點Start
    「Please register your site to import from Flatsome Studio
    Register now」

    想請問我是不是有什麼步驟漏掉?該如何解決這個問題呢?
    感謝喔

    1. 犬哥網站

      嗨,HSUAN LO

      請確定你的網站憑證是否有套用成功,若是確認有套用憑證後,還是有相關問題,可以先停用快取外掛,並清除快取刷新試試看,

      如果還是無法順利使用,建議你洽詢客服,能夠幫助你更快速解決疑問唷!

  14. 請問若在架站之初, 使用暫時網址時, 安裝主題激活後, 會不會在變更成正式網址後, 不能使用呢?

  15. 您好,非常謝謝分享教學。

    問題:
    在跟著影片步驟做到「測試下單」後,進入WP後台 > WooCommerce > 訂單 > 點選測試的訂單進去,發現「綠界物流資訊」欄裡資料沒被帶入是空白的,沒有可以按「列印」。想請教犬哥,不知道我哪步驟有誤,該怎麼解決這個問題呢?感謝唷。

    1. 犬哥網站

      嗨,HSUAN LO

      你可以檢查一下綠界的測試憑證是否有輸入正確。

      以及訂單狀態是否為「 處理中 」,如果是「 等待付款中 」代表訂單有成立了,只是沒有執行刷卡付款這件事

      如果還是有相關問題,可能要看一下會不會是因為外掛衝突問題而導致的,或是直接問一下開發者尋求支援~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端