WordPress 電商購物網站架設教學

你有試圖想要架設一個網站來販售產品，但卻不知道該如何下手嗎？難道網站一定要花費鉅額請網頁設計公司製作嗎? 其實您也可以架設屬於自己的電商網站，本篇將教您如何使用 WordPress 與 WooCommerce 架設一個購物網站，您無須支出太多的架站費用，只要根據以下 WordPress 架站教學，即可成為網路開店創業的一份子!

1. 買網址與網域 DNS 設定

網域是網站的地址，架設網站您需要申請一個網域名稱才能讓客戶找到您，並透過 DNS 設定將存放網站的主機與網域串連，如此一來網站才能上線運作。

網域註冊商推薦

買網域除了費用的優惠外，遠振資訊還提供以下多項優質服務:

免費 DNS 代管
贈送 2 組免費網域 Email
提供 DNSSEC，網域 DNS 安全有保障
購買網域價格優惠、費用透明
網域續約主動通知，避免用戶網址過期
24×7×365 全天候技術客戶支援
豐富的頂級網域、新頂級網域類型選擇

網址購買與免費 DNS 代管申請教學

Step1. 於遠振網域註冊頁面申請網域，首先需查詢網址是否可供註冊。
Step2. 確認網域為可註冊狀態後，選擇網域註冊效期(以年為單位)，接著送出申請。
Step3. 進入網域設定頁面後，若您需要遠振免費 DNS 代管請勾選「DNS 管理(免費)」，您也可以查看下方 DNS 設定教學來自行管理 DNS。若您已有自己的 DNS 代管，則可以在下方名稱伺服器的欄位輸入相關資訊，接著點擊繼續。
Step4. 於結帳頁面確認網域申請資料與費用、效期等皆無誤後，點擊繼續來完成網域申請流程。
Step5. 完成付款後即可開始使用您的網域。

網域 DNS 設定教學

Step1. 完成網域購買後，請登入遠振會員中心，於選單中點選「網域」➙「我的網域」➙ 點擊您購買的網域 ➙ 點擊左方選單中的「DNS 管理」。
Step2. 於 DNS 管理中，點選「添加新區域」➙ 輸入網站的網址與主機 IP ➙ 點擊下方「添加區域」按鈕。
Step3. 添加成功後，請點擊右方修改圖示 ➙「添加紀錄」，依照記錄類型輸入資料於各欄位中 ➙ 完成後點擊下方「添加紀錄」按鈕。
Step4. 紀錄添加成功後，列表中就會出現您輸入的 DNS 紀錄設定，請添加完所有需要設定的 DNS 紀錄後，按下「保存更改」按鈕，即完成 DNS 設定囉!

2. 購買 WordPress 網站主機

架設網站您需要有一個主機提供網站上線所需的系統資源、流量頻寬及存放網站的空間，主機其實除了資源與空間外，以遠振資訊為例，更針對 WordPress 網站的安全與速度提供優化功能，以及免費 SSL、WAF 網站應用程式防火牆、惡意軟體掃描，還有 24h 工程技術支援與免費外掛安裝服務等，租用主機能夠節省成本更能加快 WordPress 架站效率！

WordPress 架站主機推薦

WordPress 架站可選擇虛擬主機、VPS 主機或實體主機等，主要根據網站資源與規格需求來挑選主機類型。本篇針對 WordPress 架站推薦已內建 WordPress 的虛擬主機方案，該 WordPress 主機提供用戶可直接於主機內一鍵安裝與設定 WordPress，並立即製作網站，免除還要額外安裝 WordPress 與搬移網站的麻煩，WordPress 主機還具備多項網站安全與速度優化的功能，是一款最適合

WordPress 主機購買與免費試用申請

Step1. 遠振提供「台灣 WordPress 主機」與「美國 WordPress 主機」，選擇您欲購買的方案規格，並點擊「立即申請」或「免費子網域」開始訂購。
Step2. 接著需填入與主機搭配的網域，請選擇適當的網域選項並輸入網域名稱後，點擊「繼續」。若尚未註冊網域，您也可以於此頁進行網域購買。另外也可以選擇使用遠振提供的免費子網域。
Step3. 接下來請選擇主機租用的繳費週期，若您已有 WordPress 網站也可勾選「免費搬家服務」，由遠振工程師協助您搬移網站，確認金額無誤後點擊「繼續」。
Step4. 於結帳頁面確認主機訂購資料與費用等皆無誤後，點擊繼續來完成主機訂購流程。
Step5. 於訂單繳費前，點擊 WordPress 主機繳費頁面上的「使用簡訊立即開通」，並完成簡訊驗證，即可開始試用 WordPress 主機囉!

遠振 WordPress 主機與其他虛擬主機類型皆提供免費試用服務，僅須透過手機簡訊開通，無須繳納任何費用即可開始試用主機 15 天! 若您滿意 WordPress 主機的使用與服務，只須完成繳費就完成 WordPress 主機購買囉!
上述 WordPress 主機購買與免費試用申請的詳細圖文教學，您可以點擊下方按鈕查看內容哦。

3. 免費 SSL 憑證與 WAF 安裝

WordPress 是一款免費且開源的軟體，也因如此所有的 WordPress 網站的登入路徑都是一樣，若您未做好資安防護，將很容易受到駭客入侵，除了安裝外掛確保登入安全外，透過遠振資訊的 WordPress 主機架站，還可以免費安裝 SSL 與 WAF，只需要依照著以下步驟進行：

免費 SSL 憑證安裝

Step1. 完成 WordPress 主機購買後，即可登入 cPanel，點選安全性區塊中的「Let’s Encrypt™ SSL」。
Step2. 於 Let’s Encrypt™ SSL 頁面中，在「頒發新憑證」區塊中選擇想加上 SSL 憑證的網域，並點擊右方點選「+頒發」。
Step3. 接著選擇頒發憑證的驗證方式「http-01」或「dns-01」後，點選「頒發」。
Step4. 接下來將會顯示頒發成功訊息，即完成免費 SSL 憑證安裝囉!

免費 SSL 憑證安裝的詳細圖文教學，您可以點擊下方按鈕查看內容。

免費 WAF 安裝

Step1. 登入 WordPress 主機的 cPanel 後，點選安全性區塊中的「應用程式防火牆」。
Step2. 接著請選擇其中一個供應商掃描程式，即開啟 WAF 囉。
Step3. 若想要查詢 WAF 防火牆阻擋了哪些網頁，可透過「阻擋紀錄」查詢。
Step4. 若發現錯誤阻擋的網頁，則將該網頁「加入白名單」內即可。

免費 WAF 安裝的詳細圖文教學，您可以點擊下方按鈕查看內容。

4. 安裝與設定 WordPress 教學

遠振 WordPress 主機已預裝 WordPress，用戶只需透過 cPanel 一鍵安裝即可將 WordPress 安裝在虛擬主機上並進行設定。

Step1. 登入 WordPress 主機 cPanel，您也可已透過遠振客戶中心進入 cPanel 後台。
Step2. 登入遠振會員中心 ➙ 點選「服務」➙ 選擇您已購買的 WordPress 主機。
Step3. 於左邊就能看到登入「cPanel」➙ 於 cPanel 的「軟體」區塊→選擇「Installatron Applications Installer」，進行 WordPress 安裝。
Step4. 進入「Installatron」畫面後，請在右上角搜尋應用程式搜尋「WordPress」➙ 點擊右上方「安裝此應用程式」，進行 WordPress 設定。
Step5. 接著進行 WordPress 設定 → 請輸入您購買的「網域」、「路徑」。
Step6. WordPress 自動更新建議點選「備份後更新」。
Step7. 填入 WordPress 的後台管理員帳號、密碼與郵件信箱。
Step8. 設定接完成後，點擊下方「安裝」按鈕。
Step9. 完成 WordPress 安裝設定後，即可進行網站設計。

遠振 WordPress 主機也整合 WordPress 升級、編輯、備份、複製、解除安裝等功能，用戶可直接透過 cPanel 後台輕鬆地管理 WordPress 網站，遠振更提供 LiteSpeed Cache、圖片自動壓縮、PHP 與資料庫調教、免費 SSL 與 WAF 等多項針對 WordPress 網站安全及速度的優化功能!

上述 WordPress 安裝的詳細圖文教學，您可以點擊下方按鈕查看內容。

5. Woocommerce 外掛安裝設定

完成以上網站架設步驟之後，接著要回到 WordPress 上，想要在網路開店販賣產品，推薦使用 WordPress 購物車外掛 Woocommerce 來架設電商購物網站! 您可以透過 Woocommerce 外掛來串金流、物流及購物車系統等功能來販售產品，重要是 Woocommerce 外掛是免費的並提供許多電商功能，幾乎能滿足架設購物網站所有功能需求!

Step1. 於 WordPress 後台點擊「外掛」➙「安裝外掛」➙ 搜尋 WooCommerce ➙ 點擊「立即安裝」並啟用 WooCommerce 外掛。
Step2. 啟用 WooCommerce 後，需先設定商店基本資料。
Step3. 回到 WordPress 後台 ➙ 點擊「WooCommerce」➙「設定」，開始進行一般、商品、稅金、運送方式、付款、帳戶及隱私權、電子郵件、進階等設定。

上述 Woocommerce 安裝與設定的詳細圖文教學，您可以點擊下方按鈕查看內容。

Woocommerce 電商購物功能教學

以下將說明 Woocommerce 外掛提供的商品上架、庫存管理、運送方式、金流串接與優惠折扣等功能的設定教學:

Step1. 商品上架: 點擊 WordPress 列表下的「商品」➙「新增」➙ 輸入商品名稱、商品描述、定價、庫存、運送方式、相關商品連結、商品圖片、說明介紹等，若有多筆或已經有建好商品資料，也可使用「匯入商品」的功能批次匯入。
Step2. 庫存管理: 在新增產品的頁面可直接設定存貨數量、貨號、限制購買數量與低庫存通知等。
Step3. 運送方式: 點擊 Woocommerce 列表下的「設定」➙進行宅配或自行取貨等物流設定。
Step4. 金流串接: 一樣在「設定」➙ 設定銀行轉帳、支票付款、貨到付款等支付方式。若欲增加超商取貨付款或行動支付等，建議串接第三方支付平台。
Step5. 優惠折扣設定: 點擊 WordPress 列表下的「行銷」➙「折價券」➙ 建立折價券並設定選擇折扣種類、金額、免運費和到期日等。

6. 網頁建置

建立文章分類

Step1. 點擊 WordPress 後台的「文章」➙「分類」。
Step2. 在分類中您可看到「新增分類」的欄位，填寫設定後，點擊下方新增分類(按鈕)，即可為購物網站添加該分類。

新增文章

Step1. 點擊 WordPress 後台的「文章」➙「新增文章」。
Step2. 進行文章編輯頁面後，即可開始編輯內容，並可透過右邊設定永久連結、文章分類、精選圖片等，完成文章編輯後，點擊「發佈」。
Step3. 當您在購物網站瀏覽到分類時，即可看到剛剛新增的文章。

新增與編輯購物網站文章，WordPress 電商網站教學｜遠振 Blog

建立網站選單

Step1. 點擊 WordPress 後台的「頁面」➙「新增頁面」。
Step2. 在新增頁面中您可開始編輯內容，編輯完成後點擊發佈。
Step3. 回到網站，即可看到原本的選單中出現剛剛所新增的選單。

架設 WordPress 購物網站，建置網站選單｜遠振 Blog

新增與編輯產品頁與文章

Step1. 點擊 WordPress 後台的「商品」➙「新增」。
Step2. 在新增商品的頁面中您可開始編輯商品內容，包括產品名稱與描述、圖片等。
Step3. 新增頁面往下拉，即可設定商品價格、庫存、運送方式等。

WordPress 購物網站新增與編輯產品頁與文章｜遠振 Blog

以下示範編輯產品頁，首先輸入金額與折扣金額。

WordPress 電商購物網站金額與折扣券設定｜遠振 Blog

於商品簡短說明的欄位中，寫入商品說明。

WordPress 電商購物網站新增與編輯商品｜遠振 Blog

完成您所需的設定後，最後呈現出來的樣子就會是如此（本範例僅為簡易設定，基本上能自己設定的功能還是有相當多種）。

網路開店，WordPress 電商購物網站架設教學｜遠振 Blog

網站 Logo 設定

Step1. 點擊 WordPress 後台的「外觀」➙「自訂」➙「網站識別」。
Step2. 在網站識別頁面中，點擊左方「選取標誌」，即可上傳您的商店 LOGO。
Step3. 商店 LOGO 將顯示於瀏覽器的分頁、書籤列或 WordPress App 中。

WordPress 網站 LOGO 標誌設定，瀏覽器的分頁 LOGO 標籤教學｜遠振 Blog

網站 Footer 設定

Step1. 點擊 WordPress 後台的「外觀」➙「自訂」➙「小工具」。
Step2. 接著點擊左方「首尾小工具欄1」，即可自訂您要放置頁尾的文字與連結等。
Step3. 點擊左方+號可新增項目，或點擊右邊鉛筆即可進行編輯。

WordPress 購物電商網站 Footer 頁尾編輯與新增｜遠振 Blog

網站側邊攔設定

Step1. 點擊 WordPress 後台的「外觀」➙「自訂」➙「小工具」➙「資訊欄」。
Step2. 點擊左方+號可新增項目，或點擊右邊鉛筆即可進行編輯。
Step3. 新增項目後，可於右方頁面看到您所增加的側邊欄項目，設定完成後請點擊發佈。

WordPress 購物電商網站側邊攔編輯與新增｜遠振 Blog

提交 Google Search Console 與 Google Analytics

當你把網站架設完成，有虛擬主機存放，有自己的網域，接著連安全性都安裝完成了，最後一步，就是告訴瀏覽器說有一個新的網站出現了，你們要「索引」起來，而我們最常使用的搜尋引擎就是 Google，那麼要如何通知 Google 呢？其實很簡單，你只要提交 Sitemap 到 Google Search Console (GSC) 就可以了，而網站數據可以透過 Google Analytics (GA) 追蹤與分析，提交 GSC 與 GA 您可參考以下步驟來完成。

1. 提交 Google Search Console (GSC)

Step1. 首先我們透過安裝「XML Sitemaps」外掛，來幫購物網站產生 Sitemaps。
Step2. 外掛安裝完成並啟用後，於 WordPress 列表中點擊「設定」➙「XML-Sitemap」。
Step3. 接著進行 Sitemaps 相關設定，如是否每當有更新就自動通知搜尋引擎來索引、哪些文章或頁面需要優先被索引、網站地圖內容要包含/排除哪些頁面，以及索引頻率等。
Step4. XML Sitemaps 設定完成後，點擊下方「更新選項」您將會看到出現一串連結，請複製連結(請先將連結保存下來，下方我們需先開通 GSC 後，才會用到此連結)。

WordPress Sitemap 產生與提交 Sitemap 到 GSC 教學｜遠振 Blog

Step5. 接著請進入到 Google Search Console，首先需進行資源驗證，確認您是網站的管理員，可選擇網域資源或網址資源來驗證。

Google Search Console 資源驗證與埋入 GSC 中繼標記｜遠振 Blog

Step6. 驗證擁有權需將 GSC 提供的中繼標記添加到網站的中，請複製中繼標記並回到 WordPress 後台。

WordPress 網站驗證 GSC 資源與埋入 Google Search Console 中繼標記｜遠振 Blog

Step7. 接著需將 GSC 中繼標記放置網站的中: 回到 WordPress 後台 ➙ 點擊「外觀」➙ 點擊「佈景主題檔案編輯器」➙ 右方選擇「header.php」➙ 將剛剛複製的 GSC 中繼標記貼至與的中間 ➙ 貼上後，點擊下方「更新檔案」。

WordPress 串接 Google Search Console 教學，埋入 GSC 追蹤碼｜遠振 Blog

Step8. 接著再回到 GSC 並點擊「驗證」。

Google Search Console 驗證與提交 Sitemap 教學｜遠振 Blog

Step9. 驗證成功後，點擊左方「產生索引」➙「Sitemaps」，於新增 Sitemap 中輸入 Step4. 所取得的網址 ➙ 再點擊「提交」。

WordPress 建立與提交 Sitemaps 網站地圖及 Google Search Console 註冊｜遠振 Blog

以上就完成提交 GSC 囉。請注意，當您完成提交後，並不會馬上就能搜尋到，尚需要花點時間等待爬蟲將網站的資料索引完成才行，花費時間快則幾天，慢則幾個月，這部分就得要耐心等候。

2. Google Analytics 設定與埋入 GA 追蹤碼

Step1. 首先需申請 GA 帳戶，進入該連結 https://analytics.google.com/analytics/web/?authuser=0#provision/SignUp/ 後，完成帳戶與資源設定。
Step2. 接著需要進行「帳戶設定」➙「資源設定」➙「提供商家相關資訊」➙ 點擊「建立」勾選接受「Google Analytics 服務條款合約」。

WordPress 購物電商網站建立與申請 Google Analytics 帳戶｜遠振 Blog

Step3. 繼續進行「資料串流」設定: 請選擇平台: 請點擊「網站」 ➙ 設定您的網頁串流: 輸入網站網址、串流名稱(網站名稱) ➙ 點擊下方「建立串流」。

網站 GA 設定教學，WordPress 架站 Google Analytics 設定教學｜遠振 Blog

Step4. (GA3 範例) 取得 GA 追蹤碼: 進入 GA 後點擊左下角的「管理」➙ 於「資源」列下找到「追蹤資訊」➙ 點擊「追蹤程式碼」➙將「全域網站代碼(gtag.js)」欄位中的代碼全部複製下來。

WordPress 購物電商網站取得 Google Analytics 追蹤碼教學，GA3 示範｜遠振 Blog

(GA4 範例) 取得 GA 追蹤碼: 進入 GA4 後點擊左下角的「管理」➙ 於「資源」列下找到「資料串流」➙ 選擇網站 ➙ 點擊「代碼設定操作說明」 ➙ 點擊「手動安裝」並將欄位中的代碼全部複製下來。

WordPress 電商購物網站取得 GA 追蹤碼教學，GA4 範例｜遠振 Blog

Step5. 最後我們需將 GA 追蹤碼放置網站的中: 回到 WordPress 後台 ➙ 點擊「外觀」➙ 點擊「佈景主題檔案編輯器」➙ 右方選擇「header.php」➙ 將剛剛複製的 GA 追蹤碼貼至與的中間 ➙ 貼上後，點擊下方「更新檔案」。

WordPress 電商購物網站埋入 Google Analytics 追蹤碼教學｜遠振 Blog

以上就完成 GA 設定囉。請注意，當您完成提交後，並不會馬上就能搜尋到，尚需要花點時間等待爬蟲將網站的資料索引完成才行，花費時間快則幾天，慢則幾個月，這部分就得要耐心等候。

WordPress 電商購物網站架設教學 – 主機網域設定、購物車與網頁建置