Wordpress【購物車電商網站設計】架設大解析,教你從無到完整可刷卡的網站, 除了要有網站設計的概念,對於Wordpress網頁設計也要有一定的認識。 若你仍有許多不懂,請先閱讀 【網站架設】外包全攻略。 若你二者皆備,那就直接開工了。

Step1 Godaddy買網址+Cloudflare設定DNS+https加密連線

貴設計買網址就是Godaddy,理由是介面清楚明瞭、DNS轉換設定簡單好用、速度快(用過中華電信你就知道慢)、網址多樣化選擇(可參考 Godaddy買網址影片示範 )。

注意上方你看到的費用部份只有首年,在價錢的下面有一排灰色字"適用於第一年",你下次購買網址使用權就會恢復成原價。 若以長期購買使用的話,其實你是一點折扣也沒有賺到的,若你一次買10年,其實一點打折也沒有。

購買網址需註冊Godaddy,購買網址後去"帳戶-->我的產品",就會看見你買的網址了。

接著點選DNS設定(如下圖) ,何謂DNS設定呢? 簡單講,你買了一個網址,你要將網址指去某個主機的IP(URL、IP、Domain是什麼?)

進入畫面之後,你會看見類似如下的畫面,尋找一個叫做類型為A,再將值輸入你的主機IP即可(我知道還沒有租主機,等會講)。這個動作稱之為DNS設定
但貴設計為了能夠使用免費https (Https是什麼?) 的服務,我們會選擇將DNS交給Cloudflare代管 ,因為Cloudflare有是供免費的https服務,這樣子我們就不用額外一年花個好幾千買https。 如何將Godaddy的DNS交給Cloudflare代管呢?方式如下
  1. 註冊Cloudflare:https://www.cloudflare.com/zh-tw/,並新增網站將網址填入
  2. 完成後,你就會看見你的網址,接著點擊進去(貴設計是網站架設公司就有很多網址要設定)
  3. 將畫面拉到下方Cloudflare名稱伺服器,接著將紅色部份回填到Godaddy名稱伺服器即可。
  4. 再回到Cloudflare DNS設定,將IP填入以下紅色區塊就大功能告成。
影片解說: 延伸閱讀 【網站架設流程 】:買網址、租主機、準備素材、網站設計、Google收錄

Step2 Siteground購買主機 + 安裝Wordpress

SiteGround成立於2004年主機商公司,擁有400多名員工。SiteGround提供虛擬主機、雲託管主機、網域等等。 SiteGround運作時間保證是99.99%,所以他們的伺服器不會有當機或連不上的問題。

為何選擇SiteGround?

  1. 免費SSL加密憑證
  2. 免費 CDN
  3. 每天自動備份,自動備份前30天資料
  4. 主機穩定性優
  5. 24/7客服服務,線上即時聊天,回覆速度快
  6. SG介面乾淨,好上手
  7. Wordpress一鍵安裝,5分鐘搞定
  8. Wordpress免費輕鬆搬家,SG提供免費外掛
  9. Wordpress自動更新

如何在SiteGround建立Wordpress?

  1. 註冊登入後,到HOME 就會看到 Set Up Site,點進去。

  2. 選擇Start a New Website。 ps.如果你現有Wordpress網站才選擇Migrate Website。

  3. 選擇Wordpress。 ps.如有需要WooCommerce可以點選Wordpress+WooCommerce。

  4. 設定登入資訊,之後登入都以這帳密登入。

  5. SiteGround有提供加購網站掃毒的工具,看需不需要加購,不需要直接按Finish,Wordpress網站就完成了!

  6. 直接登入網站。

在完成Siteground主機之後,將Siteground取得的IP設定至Cloudflare DNS即可 。

Step3 Wordpress網頁設計與安裝佈景主題(版型、theme)

安裝好Wordrpess後,請輸入 "https://購買的網址/wp-admin"。再輸入登入帳密就可以登入。
登入之後,就會看見如下的後台。就代表你已經成功至少50%了。

接著安裝Wordpress版型幾個步驟:

  1. 外觀->佈景主題
  2. 選擇想要的佈景主題:
    • 如已購買佈景主題:請先下載主題後,至安裝佈景主題進行安裝。
    • 也可以使用Wordpress提供免費版型
  3. 選好後只需要在下方按「啟用」,即可蓋掉現有的佈景主題。
  4. 佈景主題就安裝好了!

Wordpress注意事項、購買Wordpress版型,Wordpress版型請參考【Wordpress版型推薦】佈景主題下載秘技 剩的請閱讀以下的Wordpress網站教學。
  1. 【Wordpress是什麼?】Wordpress形像網站有什麼優勢?
  2. 【Wordpress網站前後台】教學
  3. 【Wordpress版型推薦】佈景主題下載秘技
  4. 【WordPress 媒體庫】教學
  5. 【Wordpress 選單教學 (Menu)】教學
  6. 【Wordpress頁面新增、刪除、修改 】教學
  7. 【Wordpress文章新增、刪除、修改、列表、分類】教學
  8. 【Wordpress外掛】教學及推薦
  9. 【All in one Migration 】Wordpress網站備份外掛
到這個步驟結束之後,其實你已經完成了一個網站。剩的就是安裝

Step4 購物車外掛 - WooCommerce

WooCommerce你想網路銷售嗎? 選擇WooComerce就對了,市面有一些其他的電商開源架構 (如Opencart),都不如WooComerce值得被推薦。最大的好處莫過於WooComerce 在Wordpress的廣泛使用,使得有任何疑難雜症、新功能開發,在網路上相較於其他平台都容易尋找。而無需再花上萬元,找外包工程師開發。所以想要購物車電商網站設計嗎? WooCommerce是唯一選擇。
WooCommerce的功能涵蓋了以下幾個重要功能

  1. 商品管理:對商品圖文影介紹、商品上下架、定價、折扣、庫存管理、運送方式....。
  2. 訂單管理:訂單清單、訂單資訊、訂單狀態調整
  3. 銷售報表:依年、月、過去七日統計銷售總額、曲線報表
  4. 折價券:折價券類型、折扣種類、金額、描述、到期日、使用限制等。
    其他還有顧客管理、分析各式資料。上述功能對於一個需要電商購物網站的客戶是已經非常足夠的,而部份的網站會特別安裝一些組合優惠的外掛。 這也只需要網站搜尋Wordpress外掛即可。EX:Advanced Dynamic Pricing for WooCommerce、WPC Product Bundles for WooCommerce、YITH WooCommerce Product Add-Ons。

    如何安裝WooCommerce,請參考以下影片。安裝完成後在你的左選單會看見WooCommerce的項目,就代表安裝成功了,接著就要開始串金流囉!

Step5 線上刷卡-以藍新金流為例

申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的手續費(100元收2.8元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。 此外請先準備銀行帳號及個人or企業的基本資訊(身份證、統編、地址),申請時均需要輸入。

藍新金流個人會員可自行開立商店使用信用卡支付、Web ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。 註冊個人會員 https://www.newebpay.com/main/registration

企業會員則可自行開立商店使用信用卡支付、Web ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。 註冊企業會員 https://www.newebpay.com/main/registration

了解更多藍新金流可參考https://www.newebpay.com/website/Page/content/faq。 接著回到主題,要能夠申請線上刷卡會分為三個步驟

  1. 註冊藍新金流:註冊後需輸入銀行帳號(需要等1~2個星期驗證銀行帳號),提款時錢才能夠轉進你的戶頭內,另外要記的開通信用卡刷卡、ATM轉帳、到貨付款等功能(如上所述)。
  2. 安裝藍新金流Wordpress外掛:記得先下載WooCommerce線上刷卡外掛。下載後解壓縮,內有一個zip檔,再使用手動上傳外掛即可安裝(可參考以下影片)。
  3. 設定藍新金流外掛:請務必設定三個值 1)藍新金流商店 Merchant ID(即商店代號) 。2)藍新金流商店 Hash Key 。 3)藍新金流商店 Hash IV,如何設定請參考影片。 設定完成請把啟動測試模組取消,接著在商品新增一個1元的商品,再拿自已的信用卡刷卡試用即可。若刷卡有誤請檢查剛設定的3個值。若仍是不行請洽藍新金流的客服部門。他們回話速度還滿快的。