這是一篇完整的「 架設購物網站 」教學，可搭配 WooCommerce 電商教學，進行完整學習。
想經營線上商店，但網路開店平台太多種，不知如何選擇？還是 WordPress 網站設計，遇到了困難？
你不一定要花大筆錢租用市面的電商平台，也不用被網頁設計公司綁架。
我會從選購虛擬主機 > 網域申請 > 安裝 WordPress＋WooCommerce 電商常用外掛 ，使用最少預算，帶大家完整架設 WordPress 購物網站。
★☆ — 重要資訊 — ☆★
犬哥網站與 A2 Hosting 主機有長期合作關係，點擊網站上任一個 A2 Hosting 連結 前往官網（包含點擊此連結），最高可享有 3 折的讀者優惠，請一定要把握：）
這篇文章，是使用知名的 Astra 主題＋Elementor 頁面編輯器，完整示範電商架設。至於另一種架站方式，則可參考 Flatsome 電商架站。
1. 架設網站方式選擇
如果你正起步創業，在還沒收入時，用最少預算開始「 購物網站架設 」，是最好的選擇。
但台灣市面上的網路開店平台，在租金選擇上，基本款動則每月 3000 元以上的電商平台租用價格，已是常態。
使用基本款方案，要不是綁一堆功能沒開放，就是想讓你升級成進階版。
使用進階版費用，每月約莫 5000 / 6000 元以上，換算一年也要 6w / 7w 以上 .. ，當然還有更高階的收費方式。
重點是 .. 你還不確定商品是否有市場，且還沒開始賺錢！
也許，能考慮用更低費用，開始網路商店架設的第一步。
架設購物網站 ，有推薦的嗎？
許多人問如何用最少費用，自己架設購物網站 ，我推薦使用 WordPress + Woocommerce。
WordPress 是全球知名的網頁設計軟體，全球有 40 % 以上的網站，都來自於 WordPress。更多 WordPress 是什麼？
Woocommerce 是 WordPress 旗下最知名的網路商店架設外掛，全球下載量已超過 4500 萬。
有關於如何完全掌握 WooCommerce，可參考 WooCommerce 完整教學。
任何想的到的功能，如：商品管理、訂單管理、會員管理、優惠管理、頁面管理、金物流串接等 .. ，都擁有。
除此之外，還有眾多 Woocommerce 週邊外掛，可協助你擴展電商平台，只需尋找你所需要的功能，即可輕鬆找到相關功能外掛，點擊一鍵安裝。
WordPress Woocommerce 購物網站架設費用？
WordPress＋Woocommerce 架站軟體，本身就是免費的。
電商主，需要負擔的只有每年一次的網址＋虛擬主機費用，最少可用不到 2200 台幣（文章內有教學），就能開始你的網路事業。
網址＋虛擬主機費用，是每一個 WordPress 站長都需負擔的費用，沒有例外。
如果已有穩定流量，也可租用 不同等級虛擬主機，來負荷你的網站流量。
如果想了解更多 網站架設教學，也可前往學習。
2. 虛擬主機推薦
A2 Hosting 是一家全球知名的虛擬主機和網域託管服務商，它從 2001 年就開始提供相關服務，由於創辦人本身有程式相關背景，所以主機速度優化上，一直是它們的服務重點。
它在虛擬主機上提供多種服務項目，像是共享主機、WordPress 專業主機、VPS 主機、獨立主機，隨著你的網站規模越大（流量越多）可同步升級服務，滿足不同時期的需求。
搭配 24 / 7 / 365 全年無休的線上客服，遇到任何問題能在第一時間幫助解決。
不需擔心語言不通問題，因為 A2 Hosting 客群來自世界各地，用簡單的英文程度（Google 翻譯），他們都聽得懂唷。
A2 Hosting 正常運行時間和安全性
根據過去 24 個月的數據，A2 全年有 99.9% 以上的正常運行時間（沒任何一家能保證 100%），這代表你網站幾乎不會異常斷線，都是穩定的在線上運作。
這使它成為主機穩定度、安全性的有力競爭者。
A2 Hosting 網站速度表現好嗎？
A2 Hosting 在全球各地有多個數據基地台，滿足不同地點的主機連線速度，像是台灣用戶就可到連線最近的新加坡基地。
這是我之前主機放置在 A2 Hosting 所做的記錄（評測紀錄是 A+），網站加載速度大約 83 毫秒，是優質的主機速度。
Google 建議的響應時間是 200 毫秒（越短越好）。所以低於 180 毫秒的網站內容會被評為A +。
A2 Hosting 的 Turbo Boost 以上方案，有針對主機速度做特別優化，官方表示會比一般常規站點最多快上 20 倍，這是它的特別優勢。
配上 A2 Hosting 任一個共享主機方案，全部皆使用 SSD 存儲，這確實有助於其快速加載速度（SSD的速度比普通硬碟快 30％）。
每降低一秒的網站速度，這代表能保留更多訪客留存，進而轉化成網站訂單。
3. A2 Hosting 方案選擇
這章節會進行「 A2 Hosting 」的主機方案選擇，帶你選擇適合自己的方案。
首先，點擊前往 A2 Hosting 官網，會直接來到 Web Hosting 主機頁面，或是點選 Hosting > Shared Hosting 前往也可以。
接著往下滑，會看到不同的主機方案，如果你正猶豫如何選擇，下面我會給你一些選擇建議。
小備註：方案價格會隨著主機廠商有所調整，以 A2 Hosting 官網呈現價格為主。
要選擇哪種 A2 Hosting 主機方案？
A2 Hosting 共享主機提供 4 種方案選擇，分別是 StartUp（入門）、Drive（行駛）、Turbo Boost（渦輪）、Turbo Max（增大渦輪）。
它的任一種方案，全都享有 WordPress 一鍵安裝、大量網路 SSD 儲存空間、不計網站流量、 SSL 免費憑證、A2 速度優化軟體 、免費網站搬家、CloudFlare CDN 服務、CPanel 多功能介面、數據中心選擇等 ..，這是超值的功能服務。
隨著方案提升又提供更多進階功能，這邊我簡單的統整，方便你找到適合自己的方案。
- 只需架設一個網站，且有預算考量：StartUp 方案
- 需架設多個網站，且有預算考量：Drive 方案
- 需架設多個網站，且預算還算足夠，對主機速度有進一步追求者：Turbo Boost 方案
如果是 WordPress 新手入門，會建議選擇 StartUp 或是 Drive 方案，能讓你用最少預算開始，也不會一開始負擔就太多。
Drive 方案以上，都能架設無限網站、無限網路儲存空間，所以整體會比 StartUp 划算一點（但還是要看你的預算）。
不管選擇的是哪種主機方案，A2 Hosting 本身賣點就是注重主機速度，所以表現基本都會在水準之上（不會因為你是否選擇 Turbo Boost 方案）。
但如果你有現成或是較多的穩定流量，會建議直接選擇 Turbo Boost 方案。此方案大幅優化了主機速度，它們表示 Turbo Boost 方案以上的主機速度，比一般常規站點快上 20 倍，比較不會遇到速度上的問題。
至於 Turbo Max 方案我不建議使用，因為這個費用太貴了（同樣費用有更好的選擇），且和 Turbo Boost 方案功能差不多。
如果 A2 Hosting 整個共享主機方案都還是無法滿足你，有關於更高規格的主機，會比較推薦 Cloudways 雲端主機。
A2 Hosting 費用了解
A2 Hosting 原價入門費用是，網址 $10.99 美元 / 年（一年約 330 台幣），和主機 $11.99 美元 / 月（一年約 4,400 台幣）。
值得開心的是，A2 Hosting 官方同意為我們網站讀者，提供最高可享有 2.5 折的主機優惠，一次購買越多年折扣越多（這裡需特別留意， A2 Hosting 只有年租方案才享有優惠價格）。
下表是用台幣計算，美元台幣匯率用經常的 1：30 換算。
| StartUp 方案 | Drive 方案 | Turbo 方案 |
|---|---|---|
| 買一年：特價約 1,080 元 | 買一年：特價約 2,160 元 | 買一年：特價約 2,520 元 |
| 買三年：特價約 5,390 元 | 買三年：特價約 6,470 元 | 買三年：特價約 7,550 元 |
小提醒：新手可購買 1 年的 StartUp 或是 Drive 方案，用最少預算入門：）
這等於說，在 A2 Hosting 申請個人網域和主機，最少可用不到 2,000 台幣（網域＋主機費用），就能開始啟動你的網路事業，並享有完整的主機規格服務。
不論你購買的是哪種主機方案，只要點擊本站 A2 Hosting 連結，讀者們都享有優惠價格。
4. 網域申請＋租用虛擬主機
這章節開始「 A2 Hosting 教學 」的申請網域＋租用虛擬主機，我把流程整理簡單幾步驟，幫助大家快速完成。
選擇主機方案
首先，點擊前往 A2 Hosting 官網，會直接來到共享主機頁面，然後往下滑會看到主機方案。
若沒看見，可依圖片指示，選擇 Hosting > Shared Hosting 即可看見方案資訊。
選擇你想租用的方案，如果預算有限可選 StartUp 方案，如果想架設多個網站可選 Drive 方案以上，如果對速度有高規格需求就選 Turbo Boost 方案。
小備註：接下來我會用 A2 Hosting 的 StartUp 方案，進行主機申請教學（不一定要和我同方案，不會影響教學流程）。
Step1：選擇你的網域
首先第一步是「 選擇網域 」。
如果還沒有網域的話，可以選擇「 Register a new domain（註冊新網域）」。如果已經有網域，可以選擇「 Use my own domain（輸入已有的網域）」。
然後輸入想註冊的域名，接著點選驗證按鈕（如果網域已經被別人註冊過，就再重新想一個即可）。
確認網域是沒有被註冊過的，就可前往下一步。
Step2：設定主機、網站規格
這邊可以設定主機租用時間，會建議至少選擇一年才能享有大幅度的折扣優惠喔！
有關數據中心位置，亞洲地區建議選擇 Singapore（新加坡）。因為離台灣比較近，通常連線起來會比較快。
這邊可以選擇 WordPress 安裝方式，這邊先用最簡單的方式做安裝，選擇「 WordPress 」。
然後會出現 WordPress 後台帳密，這邊要先記起來，因為稍後就不會出現了，然後前往下一步。
接著會出現網域功能加購，這邊目前都用不到，可直接略過點下一步。
接著確認購買的品項，目前是購買一台 1 年期的主機服務＆網域，完成後前往結帳流程。
Step3：輸入結帳相關資訊
再來就是填入結帳資訊的流程啦（詳細可參考下圖）。使用者資訊需都填寫英文，姓名可到 外交部 查詢，地址和郵遞區號可用 中華郵政 查詢。
電話部分因為需輸入國際碼有 +886，所以把開頭 0 去掉加上手機或市內電話就可（例如手機： 886911000111）。
然後設定 A2 Hosting 後台的會員登入帳密（帳密同樣也要記得喔），然後依自身喜好選擇安全性提示＆輸入答案。
接著選擇付款方式，這裡我選最多人用的信用卡方式，另一種 PayPal 也滿多人用的。
然後輸入相關資訊，確認沒問題後進行結帳。
點擊送出按鈕後需稍微等待一下（建議留在當前頁面），因為 A2 Hosting 會進行主機的所有設定，所以等待時間會久一點（我自己大約 5-7 分鐘，每個人不同），這期間請確保電腦正常運作。
接著，若是有出現類似的成功訊息，也就代表順利租用 A2 Hosting 成功啦！
然後可點擊按鈕，前往到 A2 Hosting 會員後台。
備註：若不小心關掉網頁，也可透過 A2 Hosting 頁首應該會有 Login 之類的選項，輸入帳密登入一樣看得到會員後台。
Step4：訪問 WordPress 網站
進入到 A2 Hosting 會員後台，會看到剛購買的主機服務＆網域。
這時可以透過瀏覽器搜尋這串網址，應該就會順利看到基礎的 WordPress 網站了！
備註：A2 Hosting 會自動安裝 SSL 安全性憑證，但會等一些時間才生效，若生效後網址欄就不會顯示「 不安全 」的字。
5. Whois 信件認證
A2 Hosting 主機申請完成後，系統會自動寄出多封信件，其中網域認證信（WhoIs 認證）是比較重要的，我帶大家認識。
網域認證信（WhoIs 認證）
網址購買後，會收到來自 ICANN 透過網域註冊商，發送過來的網址認證信件，用來確認聯絡人資訊，這務必需認證完成，來保持網域的所有權。
所要做的就是打開信件，然後點擊 Verify Your Email 連結驗證，就認證完成了：）
點擊下圖連結就可以認證網域了，完成會出現認證成功訊息。
以上是比較值得一提的信件內容，至於其他信件有需求也能點擊查看。
6. WordPress 一般設定
這章節我們到 WordPress 後台做些一般設定，方便我們後續的網站經營。
WordPress 網站的 2 個重要路徑（請把 demo.com 改成自己的網域）：
- WordPress 前台：demo.com
- WordPress 後台：demo.com/wp-admin（加上 wp-admin 就是後台路徑）
首先，登入並前往 WordPress 後台 > 一般，可依需求更改「 網站標題、網站說明、網站管理員Email、網站語言、時區 」等 ..。
網站管理員Email：需填寫正確，未來網站相關訊息，如：更改密碼等 .. 會寄送至此信箱。
網站語言：更改成繁體中文，方便後續操作（若已經有更改則無需理會）。
至於 WordPress 位址、網站位址這兩欄，除非很確定目的，不然「 不建議 」更動，因為會影響整個網站連結。
如果都修改完畢，按下 儲存設定 就設定好囉，請參考 WordPress 後台教學 有更多完整教學。
WordPress 主題安裝＋使用購物模板
這章節，會教如何安裝 WordPress 佈景主題＋套用模板，讓網站看起來美觀且功能性更強。
Astra 是一款熱門多功能的輕量級主題，主題執行速度快速，可拿來建立多種類型的網站。
為了方便接下來教學，建議先跟我一起安裝 Astra 主題，有免費版可安裝。更多可參考 Astra 主題入門、Astra Pro 進階教學。
WordPress 佈景主題安裝
首先，前往 WordPress 後台 > 外觀 > 佈景主題，點選 安裝佈景主題。
在搜尋欄位輸入 Astra，我們安裝 Astra 提供的免費版本，安裝完成後請記得 啟用，才會真正套用主題。
主題啟用完成，前往網站前台看一下成果，看起來還不錯的 WordPress 主題，成功出現啦。
使用 Astra 形象模板
Astra Theme 有多種風格模板可一鍵套用，再從現有的樣板修改，架站速度會很快。但使用 Astra 風格模板之前，需安裝相關外掛。
點選左側 Astra > 最右側 Useful Plugins > Starter Templates，點 Install，就會自動安裝 Astra 模板外掛。
或是可在 WordPress 外掛 > 安裝外掛，搜尋 Astra 找到下圖的外掛並安裝，都是一樣的。（兩個方法 2 選 1 就好）
安裝完成後，進入初始設定頁面，模板外掛會詢問常用的頁面編輯器是哪個，這邊選擇 Elementor 作為教學範例。更多 Elementor 基礎教學。
備註：上面如果是用第二種方法安裝，需自行前往外掛設定項，才會有下圖流程。
接著就會看到非常多種 Astra 使用 Elementor 編輯器做的起始模板。
找到喜歡的模板點入，可進行全站安裝 or 單一頁面安裝，就看自己的需求囉。
備註：右上角有標註 Premium 是 Astra 進階版才能使用，可參考 Premium Starter Templates 教學。
可搜尋 Brandstore 模板進行安裝。（建議先跟我安裝一樣的，方便接下來教學，學會後都能再更換）
這邊可簡單預覽樣式，點選下面的 Import Complete Site 完整匯入。
其他設定大多維持預設值即可，之後就會開始安裝囉！
安裝完成後，前往 WordPress 前台就會看到成果囉。恭喜你，這樣架設網站速度快多了：）
接下來呢，要做的就是把它改成我們想要的樣子，繼續學習吧。
新增＆編輯第一個商品
如果有套用 Astra 預設的購物模板，系統會自動導入許多商品，可以從現有的商品修改，比較容易進入狀況。
前往 商品 > 所有商品，會呈現商店的所有商品，任何的新增、編輯、刪除都可從這操作。
點擊其中一個商品，進入編緝。
修改商品內容，可參考下面步驟對應學習。
第 1 步驟：設定商品標題、商品連結。可參考 WordPress 永久連結，有更多教學。
第 3 步驟：設定商品形式，有分「 簡單商品、組合商品、外部/加盟商品、可變商品 」，如沒特殊需求，先選簡單商品即可。學習更多 商品類型新增。
第 4 步驟：有分成一般、庫存、運送方式、連結商品、屬性等細項 ..，可依需求填入商品資訊。請參考 WooCommerce 教學、電商金物流設定，有更多教學。
第 6 步驟：設定商品分類，也可新增商品分類（點增加新分類）。
第 8 步驟：可針對單一商品頁面，客製化版面設計。更多 Astra 主題入門。
第 9 步驟：設定商品圖片，也可新增多張圖庫。更多 圖片優化流程。
第 10 步驟：一切都搞定後，就點擊發佈 / 更新，商品就會出現在網站上囉。
最後，來看一下的剛修改好的商品，太好了！調整成功！
設定商品分類＆標籤
WordPress 商品分類設定，可前往 商品 > 分類，左邊區塊可新增分類，右邊區塊可編輯已存在分類。
然後把 Astra 主題預設的商品分類改為中文，或是自己新增一個都可以。
- 名稱：前台顯示的分類名稱。
- 代稱：就是商品分類網址，建議填寫英文。
- 上層分類：可設定父子階級。
- 縮圖：每個 WordPress 佈景主題不同，有的會呈現有的不會。
如何把商品分類 or 標籤放入選單 / 側邊欄中？
至於新增好的商品分類，有些可能會想放到網站選單中，給訪客點選。
可前往 WordPress 外觀 > 自訂，找到「 選單 」並在裡面進行設定。更多 WordPress 選單教學。
想放入側邊欄，可參考 新版小工具教學。
如何排序商品分類 or 標籤？
如果想對商品選單進行排序，可參考 WordPress 分類排序，或是使用 優質頁面編輯器，來幫助你唷。
WooCommerce 商店＆金物流設定
這章節，是有關商店設定的「 WooCommerce教學 」。
有包括一般設定、商品設定、金物流設定等 .. ，這是滿重要的一步，因為 WooCommerce 多數基礎設定都在這調整，我將帶大家上手。
因為擔心篇幅過長，下面只會挑一些出來介紹，完整教學請移駕參考 WooCommerce 教學。
一般設定
前往 WooCommerce > 設定 > 一般，設定商店相關資訊，如果沒有實體地址就空白即可。
以台灣中小型商家設定當範例，銷售和運送地區可設定台灣。
如果商店販售的是虛擬商品，沒有實際運送的動作，可把運送地區改為「 停用運送＆運費計算 」。
然後設定貨幣選項，貨幣設定新台幣，小數位可以調成 0 ，最後儲存。
商店基本資料就設定完成了。
商品設定
商品設定，分成 一般 / 庫存 / 可下載商品，這邊挑選「 庫存 」做教學。
前往「 庫存 」後，可以啟用庫存管理功能，之後在商品管理中，就可以設定庫存數量。
當頁還可設定保留庫存時間（預防扣留商品）、低庫存通知信、庫存顯示格式等 .. 。
運送方式＆付款方式
WooCommerce 有提供許多基本金流、物流方式，可提供給商家來使用，滿足顧客的消費需求。完整教學，請參考 如何設定 WooCommerce 金流＋物流？
- 預設金流類型：銀行轉帳、支票付款（不常用）、貨到付款、PayPal 付款（不常用）。
- 預設物流類型：單一費率、免費運送、自行取貨。
物流類型可新增多個項目，舉例單一費率類型，可新增取名為宅配到府（黑貓）、宅配到府（大嘴鳥）、郵寄送貨等 .. 。
免費運送類型，可取名為台灣常見的 “滿千元免運費” 之類的，免運的物流欄位記得放在最前面，達成免運條件，系統才會自動選取。
如果需要更多符合台灣人的金物流方式，像是金流的信用卡付款、超商代碼、超商條碼等 .. ，物流的超商取貨功能，請參考 WooCommerce 綠界教學、RY WooCommerce Tools 教學。
特殊商品運費計算，可參考 客製化運費外掛設置。
若有國外金物流需求，可參考 WooCommerce 串接 PayPal 功能教學。
新增＆編輯網站頁面
建置品牌形象網站，可能會想自行新增、編輯網站頁面，豐富整個網頁設計，這章節教大家如何做。
使用 Elementor 頁面編輯器
一開始安裝 Astra 模板時， Astra 有自動幫我們安裝 Elementor 外掛，也新增幾個使用 Elementor 製作而成的頁面。更多 Elementor 教學。
備註：全球知名的 WordPress 頁面編輯器，有超過 500w 次下載量，提供視覺化的編輯模式，就算不懂程式也能網頁設計。
如果需設計網站頁面，這會是比較推薦的方法，因為功能比較多且完整，而且可以直接套模板下去用，就不需重新開始製作。
在新增頁面中，點擊上方的按鈕就可改用 Elementor 編輯頁面。
然後會看到 Elementor 的視覺化設計面板，免費版有提供許多功能可使用，用拖拉的方式就可以製作頁面，真的非常方便。
以上就是新增＆編輯頁面的簡單介紹，可自行新增網站頁面，或從現有的頁面做修改。
還有一種前往 Elementor 頁面編輯器比較快的方法，就是前往你想修改的頁面，點選上方的使用 Elementor 編輯，就能直接編輯指定頁面囉。
如何管理全部的 WordPress 頁面？
至於如何完整管理全部的 WordPress 頁面。
前往 頁面 > 全部頁面，這裡就是目前所有的頁面清單，你可以自由的編輯管理，而有 Elementor 標記的就代表是使用 Elementor 製作的頁面。
小提醒：已經使用 Elementor 編輯器設計的頁面，會建議就繼續使用，不要再改回到 WordPress 預設編輯器了，不然排版會整個亂掉。
使用 WordPress 預設的區塊編輯器（Gutenberg）
Gutenberg 區塊編輯器是 WordPress 系統預設的，如果沒安裝像 Elementor 之類的 頁面編輯器，也能使用它設計頁面，只是功能比較少一點。
前往 頁面 > 新增頁面，就可用 WordPress 區塊編輯器製作頁面，一樣點選左上角加號，就有多個區塊功能可使用。
詳細可參考 WordPress 新增頁面，有完整頁面教學。
恭喜你，以上已經教會你大致上的 WordPress 頁面設計概念了。
接下來，你可用現有的頁面修改會比較快，然後新增或刪除多餘的頁面，就能完整你的網站設計囉：）
頁首編輯器
Astra 頁首編輯器功能，讓站長直覺操作就能自行客製化網站頁首，下圖是頁首編輯器的主要功能一覽。
- 上方 / 主要 / 下方頁首：主要分為 3 層頁首項目，點擊齒輪 ICON 可進行編輯。
- OFF CANVAS：側邊滑動式設定，這是針對行動版裝置的導覽列設定，需要在左下方切換成平板或手機的檢視模式，才會顯示出這項功能設定。
- ＋：滑鼠移至指定區塊上，即可新增不同的網站小工具，小工具也可拖曳排序。
- Elements 當前功能：根據點擊的項目，會進行可設定項的切換。
- Design 樣式設計：編輯樣式的地方，像是顏色、內距離、外距離 .. 等。
- 透明頁首：Astra 有分為「 一般頁首 」和「 透明頁首 」兩種，而 Astra 有些風格樣板會用到透明頁首（如果發現編輯樣式時，畫面沒有反應，那可能就是用透明頁首，就需點擊進入編輯）。
接下來分 3 個小步驟，實戰示範網站頁首的調整，從實際操作中應該會更能掌握。
Step1：編輯網站 LOGO
首先，先把滑鼠移至 Logo 上點擊筆 Icon，就會自動切換到 Logo 設定欄位。
P.S 或是點選 頁首編輯器 > 網站標題及標誌。
上傳 Logo 後可調整大小（點擊電腦圖示，可針對不同裝置設定大小），你可以輸入網站標題、網站說明，並設定每個裝置的能見度，如果考慮行動版裝置的版面較小，可以限定平板或手機不要出現網站標題或網站說明。
Step2：編輯網站選單
點選 選單 > Main Menu > 新增選單項目。
可以調整導覽選單的項目名稱，並根據自己的需求增加選單項目。長按就能拖曳選單的位置，拖曳的位置會決定選單是主要項目，或是旗下的子項目。
Astra 的電腦版選單（Primary Menu）和手機版選單（Mobile Menu），這 2 個選單需要「 切換裝置模式 」才能進行設置。
首先，介紹電腦版選單設定，模式切換到電腦裝置以後，可以在頁首區域新增想要的工具，最左側 ELEMENTS 區域就會顯示出目前有哪些工具項目，可以點選做進一步設定。
DESIGN 則會根據你現在點選的工具項目，跳出不一樣的設定選項。
再來，介紹手機版選單，我們先切換到手機版視窗，會自動跳出 OFF CANVAS，這是專門設定行動版裝置的選單區域（電腦版沒有），可以新增工具，還能長按工具進行拖曳排列，畫面呈現會按照這個順序排列。
Step3：設計上方頁首
上方頁首可以新增小工具，我們以 Social 社群工具作為示範。
先在上方首頁的區域新增 Social 工具，並在右上角點擊筆，左側 GENERAL 就會自動跳出「 社交網路服務圖示 」的設定。DESIGN 則可以設定社群圖示的尺寸、間距、圓角半徑、色彩類型 .. 等。
如此一來，我們的網站頁首就變得更加美觀了！以上就是 Astra 的頁首編輯器的操作介紹。
額外提醒：透明頁首設定
Astra 有些風格樣板是使用「 透明頁首 」進行設計，確認是不是的方法很簡單，只要看一下當前頁面的頁首，是否是透明的就大概可知道。
而透明頁首的樣式調整是在不同地方，記得要到對的位置更改唷：）
- Enable on Complete Website：是否把透明頁首應用在全網站。
- Enable On：可選應用在哪個裝置。
- Different Logo for Transparent Header：是指在透明頁首的情況，是否使用不同 Logo。
新增文章列表頁面＆側邊欄設定
這章節，我們來新增文章列表頁面，這頁面功用是將網站上的所有文章，都會在這裡顯示出現。
我主要拆成 4 步驟，完成後在網站主選單上就會看到「 文章列表 」選單，此頁面也有側邊欄佈局。
Step1：新增頁面
前往 WordPress 後台的 頁面 > 新增頁面，任意輸入頁面標題，頁面內容可以空白，因為之後會被取代成一系列的文章。
設定網址連結、封面等 ..，完成後點 發佈。更多的 WordPress 新增頁面 學習。
Step2：閱讀設定
前往 設定 > 閱讀，把「 文章頁面 」設定成剛剛新增的「 文章列表 」頁面。
下面「 資訊提供中的文章顯示方式 」改為「 內容摘要 」避免頁面過長，完成後儲存。
Step3：放入選單
設定完成的文章列表頁面，我們需把它放入選單中，WordPress 網站前台才看得到。
前往 外觀 > 選單，選單順序可拖曳排序，也可排父子關係，完成後儲存。更多 WordPress 選單教學 參考。
最後前往 WordPress 前台看一下成果。
Great！文章列表頁順利出現在選單上了，點擊進去也看得到文章。
如果點擊文章列表，但沒內容沒關係，可能是你的網站目前還沒有文章，下一章節會教大家如何新增文章。
新增第一篇文章
這章節實際寫一篇文章，讓網站多增加一些文章介紹，這有助於讓訪客更認識形象品牌，且能加強信任感。
首先，前往 文章 > 新增文章。在 WordPress 平台裡，文章和頁面是不同形式，可參考 文章頁面差別。
WordPress 預設是使用自訂的 Gutenberg 編輯器，進入後點左上角的加號，就可新增不同的區塊功能。
像是新增圖片影片、段落標題、清單列表、網站按鈕等 ..，可自由的編寫個人或公司文章。
寫 WordPress 文章的過程中，可隨時點右上角的 儲存草稿，保存目前的文章資料。
文章正式發佈前，我們會設定網址路徑、文章分類＆標籤、精選圖片（網站封面）、是否開啟留言等 ..，完成後點 發佈 上線。可參考如何 新增 WordPress 文章 有完整教學。
前往網站前台，就會看到文章順利出現囉：）
備註：有關於「 文章 」不建議使用 Elementor 頁面編輯器編輯，因為 WordPress 預設編輯器來寫文章就很夠用了。至於「 頁面 」再用 Elementor 編輯會比較適合。
設定文章分類＆標籤
WordPress 有完整的網站分類和標籤功能，方便你統整文章和維護更新，且有助於訪客搜尋（下面僅示範教學，實際依照自己需求新增即可）。
WordPress 文章分類
前往 WordPress 後台的文章 > 分類，這邊可新增多個文章分類。更多 分類排序功能。
備註：「 代碼 」是分類網址的設定（建議英文），文章分類可設定父子階層。
可對現有的分類進行 編輯，或是點 快速編輯 可直接修改重點。
文章分類也可放入選單中，參考 WordPress 選單 學習更多。
WordPress 文章標籤
前往 WordPress 後台的文章 > 標籤，這邊也可新增多個文章標籤。
以上是簡單的 WordPress 分類和標籤教學，這有助於文章歸類和訪客搜尋。
網頁區塊＋小工具設定
通常一個網站設計，都會有側邊欄的存在，可以多提供訪客一些功能使用。
WordPress 預設就有許多小工具可使用，如果搭配不同的網站主題或外掛，可能會幫小工具增加額外功能。更多 WordPress 新版小工具教學。
前往 外觀 > 小工具，就能看到目前有哪些小工具，下文以設定「 主要資訊欄 」為範例。
展開頁面以後，就能進入主要資訊欄目前有哪些功能，可以自行新增功能，也能點選各項功能直接進階設定，我們以「 近期文章 」做示範。
點選「 近期文章 」就會跳出更多設定的內容，可以調整標題、文章顯示數量、是否顯示文章發佈日期，也可以拖曳這項工具的位置。
最後記得按「 更新 」儲存以上設定，就完成囉！讓我們一起來看看最後的畫面效果。
有關更多的 WordPress 後台功能操作，也可參考 WordPress 後台教學 學習。
頁尾編輯器
頁尾編輯器（Footer Builder）跟頁首編輯器的操作方法大同小異，也是能讓你客製化網站的好幫手。
頁尾編輯器有分為上方、主要、下方頁尾，點擊要修改的齒輪，就能調整欄位數量、寬度、高度、垂直對齊方式，還可以針對不同的裝置（電腦、平板、手機）設定版面配置和可見度。
當然你也能自行新增許多小工具，豐富你的網站頁尾。至於要修改樣式，一樣切換到 Design 分頁即可。
頁尾編輯器設定 Copyright
下圖實際示範如何編輯 Copyright，也就是設定網站的著作權聲明。
在設定頁尾區域依序點選 ＋ > Copyright > 來到 ELEMENTS 區域點選 Copyright，點選後即可開始編輯。
GENERAL 編輯區內是 Astra 系統動態文字，會自動帶入你的目前年份、網站名稱，可以依照需求刪掉或增加內容。DESIGN 則是可以編輯文字色彩、字型大小、間距的邊界設定。
以上就是頁尾的修改教學，趕快來試看看吧。
WordPress 外掛安裝＋管理
WordPress 是完全開源軟體，任一個軟體工程師皆可在上面開發功能，所以讓 WordPress 生態圈非常豐富（有高達 5w 個可用外掛），可以幫助你擴充網站功能。
前往 外掛 > 安裝外掛，可選擇喜歡的外掛安裝，有確定目標可善用搜尋安裝。如果不知道如何選擇，我在 WordPress 最佳外掛推薦，有整理可幫你節省時間。
對於新手來說，會先建議安裝 WordPress 基礎外掛即可，然後同一種類型裝一款即可，還有外掛不是越裝越多就好，需考量到網站效能。
多種 WordPress 基礎外掛（僅列舉部分）
- Akismet：垃圾留言防護外掛。更多 Akismet 外掛教學。
- Jetpack：官方綜合型外掛，範圍涵蓋安全性、備份、速度優化、工具強化 ..。
- Rank Math：優質 SEO 優化外掛，可參考 Rank Math教學。
- WPForms：優質表單設計外掛。更多 WordPress 表單製作外掛推薦。
有關於 WordPress 外掛的管理設定，可前往 外掛 > 已安裝外掛，這邊可啟用或停用外掛，或是刪除不需要的外掛。
通常網站主隨著經營時間，網站外掛都會越來越多（因為可能有更多網站需求）。
所以一開始安裝必要外掛就好，然後暫時用不到外掛可以先停用，完全用不到的就直接刪除。
Astra 主題＋Elementor 外掛組合
Astra 主題 ＆ Elementor 外掛，是很多 WordPress 玩家愛用的一種組合，它有很多優點像是：
- 新手容易上手
- 有現成模板，不用從零開始設計
- 網站客製化程度非常的高
- 都有免費版可以用
- 因為都是 WordPress 熱門軟件，所以有很多週邊外掛可搭配
- Astra 主題快速，Elementor 會有點吃主機效能，兩者剛好呈現一個平衡
這也是為什麼本文會用這個組合，做一個搭配教學。
但如果你對這個組合不感興趣，最佳主題推薦、電商主題推薦、優質頁面編輯器，這幾篇文章裡面，也有不同的選擇可以慢慢選。
下面我們對 Astra＋Elementor 更進一步認識，可讓你更掌握自己的網站功能。
Astra 主題介紹
Astra 是個輕量快速的多功能主題，有許多可設定功能（歡迎參考 Astra 主題入門）。
如果體驗 Astra 免費版後，有更多的架站需求，需要用到 Astra 進階版的讀者們。
有關於 Astra 進階版，我寫了多篇使用教學，方便你認識和上手 Astra 進階功能，如下。
- Astra Pro：Astra 進階版方案，強化功能詳細教學，可參考 Astra 進階教學。
- Astra Pro WooCommerce：WooCommerce 電商功能強化，可參考 Astra Pro WooCommerce 教學。
- WP Portfolio：製作網站作品集、展示頁面、服務案例等 .. 專用外掛，可參考 WP Portfolio 教學。
- Ultimate Addons for Elementor：在 Elementor 上新增 40+ 個元素功能、100+ 網站模板、200+ 區塊模板，可參考 UAE 教學。
- Premium Starter Templates：有更多 Astra 進階模板可使用，可參考 Premium Starter Templates 教學。
如果都看完，相信你對 Astra 主題的整體掌握度，大概也就如魚得水了！
Elementor 外掛介紹
Elementor 是全球知名的頁面編輯器，有超過 500w 次下載量，提供視覺化的編輯模式，就算不懂程式也能網頁設計。
如果需設計網站頁面，這會是比較推薦的方法，因為功能比較多且完整，而且可以直接套模板下去用，就不需重新開始製作。
更多教學，歡迎參考 Elementor 入門教學、Elementor Pro 進階教學。
網站提交 ＆ GA 分析
Google Analytics 是專業的網站流量分析服務，也是業界常提到的 GA 分析。
我們可以藉由使用 Google Analytics，幫助我們分析網站的流量，完整了解受眾目標，進而吸引潛在客戶購買商品、虛擬服務，增加網站留存率及商品轉化率。
完成網站架設後，我們可以開始進行網路行銷囉！
要進行網站行銷，就需要先了解 SEO 是什麼，讓自己在搜尋引擎結果頁面（SERP）展露頭角，就有機會提升網站能見度。關於 SEO 與 SERP 的差別，可觀看以下相關影片。
搜尋引擎每日需處理龐大的網站資料，如果主動提交自己的網站地圖（又稱 Sitemap），可有效加速網站被搜尋引擎收錄的速度，有效 提升 WordPress SEO 分數。
Google、Bing 是台灣目前兩大搜尋引擎，Google 可把 Sitemap 提交到 Google Search Console，Bing 則是提交到 Bing Webmaster Tool。
當網站被收錄到搜尋結果，網站才可以被訪客搜尋到，這時就會開始有網站流量進入。
有關於網站流量的分析統計，幾乎都會使用 Google Analytics 軟體，需要把 GA 追蹤碼嵌入到 WordPress 網站，Google 才會幫你統計分析。
如果你覺得以上的串接流程很麻煩，也可直接透過外掛快速串接。更多 Site Kit By Google 串接 GA 教學。
最後，我們可以安裝優質 WordPress SEO 外掛，搭配 關鍵字行銷工具，幫助站長們更有效的規劃 SEO 行銷策略。
常見問題
自架網站需要準備什麼？
網站能正常運作，就需有「 個人網域 」＋「 虛擬主機 」，這是基本配備。
這也是每個網站主都需負擔的小投資，沒有例外。
差別是，跟著我的架站教學，你可用最少的預算，建置你的網站：）
網域如何取名呢？
網域是什麼？「 網域 」是網站組成的第一步，就像家的門牌一樣，讓人可以順利找到你的網站。
網域取名時，注重幾個簡單原則即可，像是簡單好記、品牌名稱、與服務 or 產品有關、去除 www、 .com 優先、勿用中文。
虛擬主機是什麼？
「 虛擬主機 」是主機公司在自管的實體主機上，切分成多個虛擬空間，並把這些空間，租給一般使用者使用。
這樣可大幅降低使用者的費用，因為養實體主機是很貴的，所以絕大部分的網站主，通常都是租用現成的。
另一個比喻，如果把網址比喻成「 門牌 」，那虛擬主機就是「 家 」的角色。
WordPress 是什麼？
WordPress 它是全球知名的網頁設計軟體，全球有 40 % 以上的網站，都來自於 WordPress。
它可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、購物網站架設 等 ..
有推薦的 WordPress 優質虛擬主機嗎？
A2 Hosting 是一家全球知名的虛擬主機和網域託管服務商，它從 2001 年就開始提供相關服務，由於創辦人本身有程式相關背景，所以主機速度優化上，一直是它們的服務重點。
它在虛擬主機上提供多種服務項目，像是共享主機、WordPress 專業主機、VPS 主機、獨立主機，隨著你的網站規模越大（流量越多）可同步升級服務，滿足不同時期的需求。
如果對速度有一定程度的要求，則可以參考其他款進階主機，像是 Cloudways（VPS） 或是 A2 Hosting（中高階方案）。
WordPress 學習資源
學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。
資源一：犬哥數位（專業 WordPress 網頁設計公司）
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！
資源二：WP 精選模組攻略書
由於 WordPress 主題 / 外掛有非常多種，很多網友私訊我不知道安裝哪一款，才有辦法實現功能。或是已經試了很多款外掛，但始終找不到適合自己的。
對此我整理了 高達 100 多款精選主題＆外掛大全（電子書），這些都是我們團隊協助客戶開發案件時，會搭配使用的。一來外掛品質優良，二來功能性也足夠強！
資源三：官方教學資源（含 FB 社群解答）
如果你偏愛自架網站，也歡迎持續關注 犬哥網站 Blog，我們都持續有發布新的網站架設、網路行銷教學。
或是你比較喜歡看影片學習，也可關注 YouTube 頻道，幫助你更容易進入狀況。
當然，如果你在操作過程中遇到問題，也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。
您好，
我在WordPress安裝中使用“入門模板”插件導入模板時遇到問題。
相關文章說這可能是服務器錯誤，要求我與服務器管理/託管提供商聯繫以解決此問題。
（可選）這是我收到的錯誤通知-（在此處粘貼錯誤/通知）我是在本機安裝。
請您看看。期待您的回音。
謝謝你！
嗨，剛網路上有幫你看了一下，好像也有人遇到這問題，但目前沒確切提供解決方法。
有關於這狀況，可能須直接發信給 Astra 官方，看他們如何處理了！
非常有效的幫助!好多有用的資訊，研究了一整天受益良多，接下來要好好來實作練習看看了，感謝小犬:)
嗨～謝謝你的鼓勵！
加油唷，有相關網站問題，都歡迎提問：）
站長您好，非常感謝您提供這麼多資料跟教學，一邊研究一邊實作總算初步把網站架出來了:D。
目前有遇到一個問題，在安裝woocommerce跟Astra 主題＋Elementor外掛組合之後，我之前po的跟之後po的wordpress文章，不知道為甚麼變成無法閱讀，都只會顯示一部分文章內容，Read More >>之後的內容都無法展開
嗨，謝謝你的鼓勵＾＾
至於你提到的問題，可以到 WordPress 設定 > 閱讀，找到「資訊提供中的文章顯示方式」，改為「完整內容」。
看是否會全部展開～
請問站長Woocommerce 可以多店經營嗎?
嗨，可以的。
在外掛搜尋欄，搜尋「 Multivendor 」應該有很多。
站長您好，我剛開始建立網站，在購買WordPress 專業版後才發現您的文章，想詢問我現在是否要購買虛擬主機？
現在購買還來得及嗎？
還是建議使用一段時間之後再考慮要不要購買？
不好意思麻煩您了
嗨，會比較建議用購買虛擬主機方式，建立獨立的網站（WordPress.org）類型。
至於你提到的 WordPress 專業版，是屬於平台服務（WordPress.com）。
自己購買主機架獨立站的好處是，可以自由安裝免費版主題＆外掛（不需額外付費），重點網站是屬於自己的個人資產。
所以會建議往這個方向走，會是比較好的選擇唷：）
WordPress.org ＆ WordPress.com 差別，可參考這篇文章：https://frankknow.com/wordpress-org-vs-wordpress-com/
請問站長WCFM Marketplace這個要如何安裝?一直研究不出來!!
嗨，因為這外掛我還沒有實際玩過，所以可能要自行研究一下，不好意思。
請問站長 使用 WordPress + Woocommerce架的購物網站 產品種類不多 要有金流和物流 這樣基本至少要多少花費？
嗨，如果沒特別的電商功能需求，基本上只要負擔每年的網域＋主機費用即可，以 Bluehost 入門方案來看，一年大約 3000 – 4000 左右，但首購價會更優惠一點。
您好大神
目前自家有請人做官網，但後續覺得模板不好看，所以想自己建設，請問如果建了一個wordpress能用原本官網的網址嗎?還是必須用一個新的網址?
嗨，一個主網域只能配一個網站使用唷。
如果這個網域是打算保留下來的，可先在另一台主機架設新網站，等都架站完成後，再把原網域的 DNS 指向到新主機即可～
大神您好
目前本身有官網商店但因模板套組不喜歡，更換的話又要一筆不小費用，想請問若自己用wordpress建設的話，可以用原本官網的網址嗎?還是只能申請一個新的網址?謝謝您!
嗨，一個主網域只能配一個網站使用唷。
如果這個網域是打算保留下來的，可先在另一台主機架設新網站，等都架站完成後，再把原網域的 DNS 指向到新主機即可～
wordpress如果要使用woocommerence外掛，一定得升級到商業版方案，一年至少要9000ㄟ，不像你說的都是免費
嗨，你看到的應該是 WordPress.com 的服務，這跟我們在說的 WordPress.org 是兩種不同的架站方式唷。
相關差別可參考：WordPress.org vs WordPress.com 差別
您好
想問若是在品牌形象網站中亦包含線上購物，這樣是算兩個網站嗎?
另外我看有些網站點擊購物會跳出到新頁面，而某些網站則是在原先的主網站之下呈現，請問兩者有差異嗎?
嗨，基本上判斷是否為兩個不同網站，只要看主網域是不是同一個就好了，如果不同的話就是不同的網站，反之亦然～
站長您好
想請問前幾天都還可以用的網站，今天突然顯示“無法連上這個網路”是哪邊出錯呢？😭😭
嗨，有相關的畫面截圖嗎，比較好協助處理。
可以前往 小犬社團 發問～
您好 站長！
昨天才可以開始wordpress，結果今天就顯示 無法連上這個網站 請問是發生什麼事？😭
嗨，有相關的畫面截圖嗎，比較好協助處理。
可以前往 小犬社團 發問～
您好,最後2個影片都是在外掛”insert header and footer”填入追蹤碼,但我先安裝了GA,因此insert header and footer的頁首部分已經填入GA程式追蹤碼,再想填入Google Search Console的追蹤碼時已有GA追蹤碼存在,那我如何提交Google Search Console呢? 感謝回復
嗨，Hsunia，
GA 跟 Google Search Console 是不一樣的唷，這兩個可以同時放在頁首，是不影響的，
如果想提交 Google Search Console ，一樣複製認證碼在頁首，然後到 Google Search Console 後台進行認證即可：）
小犬老師好, 之前有依照您教學的步驟在bluehost申請了主機和網域, 但之前是申請來做個人網站, 所以網址用了自己的英文名字, 若想把網站轉為做購物網站, 有辦法更換網址嗎? 還是要重頭重新申請一個主機+網域呢?
嗨，Melody，
如果想重新更換網域，不需要重新購買主機，再另外添購網域即可唷：）
更換網址＋詳細購買網域教學，可參考網站文章： NameCheap教學：網域註冊購買＋網址後台設定
感謝老師回覆, 目前已在Namecheap購買一個新網址, 並成功指向我的網站!
但我當初購買的bluehost主機是最基本的方案, 只能選擇parked domain, 不是老師教學時選擇的Addon domain, 網站好像還是以原本買bluehost主機時贈送的網域為主要的網址, 不知道這樣在之後製作網站時會不會有影響, 以及明年要續約時是否必須將原本買bluehost主機時贈送的網域一起續約呢?
嗨，MELODY，
建議聯繫 Bluehost 客服協助你將網域替換成新購買的網域，
續約時可選擇不續約 Bluehost 現在贈送的網域，使用你在 Namecheap 購買的網域即可～
您好 , 請問google search console 裡的 html代碼, 之前已經放入Insert Headers and Footers, 但今天不小心把它洗掉了, 請問html代碼要怎麼在google search console重新取得原代碼? 謝謝
嗨，念涵，
參考犬哥網站的教學文章： 登錄 WordPress 網站到 Google Search Console 管理員工具 第二個章節，
重新複製 html 程式碼並跑完整個提交流程即可。
您好想問有沒有教學購物網站抽獎功能～～
嗨，cindt，
目前正在籌備其他教學，未來有機會，會再出相關教學：）
如果有需要抽獎功能，可以參考看看以下外掛推薦：
WooCommerce 樂透外掛推薦清單
你好，
你們的教學非常好，希望你們能持續建構.
由於我已經假設完整一個基本的網站，想請問若想要架設子網站如何設定及安裝wordpress.
例如：
原始網站：www.123.com
想要假設子網站： http://www.abc.123.com
若方便請協助，謝謝 ！！
嗨，外小艾，
若是使用 Bluehost 的話，可以參考 如何設置子網域教學，新增子網域唷！
如果是使用其他的虛擬主機，搜尋關鍵字「 主機名稱 Subdomain 」應該就可以找到不少教學，這邊貼上 A2 Hosting 和 Cloudways 教學，可以參考看看。
A2 Hosting 子網域教學
Cloudways 子網域教學