想經營電商，但不知道要在哪一個電商平台架設網站嗎？還是 WordPress 網站設計，遇到了困難？
從 0 開始掌握購物網站架設的技巧，帶你學會使用 WordPress 架站，搭配 WooCommerce 電商平台，就來打造出屬於你的線上品牌。
你不一定要花大筆錢租用市面的電商平台，也不用被網頁設計公司綁架。
從選購虛擬主機 > 網域申請 > 安裝 WordPress＋WooCommerce 電商常用外掛 ，使用最少預算，帶大家了解怎麼用 WordPress 架設電商網站！
★☆ — 重要資訊 — ☆★
犬哥網站與 hosting.com 主機有長期合作關係，點擊網站上任一個 hosting.com 連結 前往官網（包含點擊此連結），最高可享有 3 折的讀者優惠，請一定要把握：）
這篇文章，是使用知名的 Astra 主題＋Elementor 頁面編輯器來示範購物網站架設的流程。至於另一種架站方式，則可參考 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 是全球知名的網頁設計軟體，全球有 40 % 以上的網站，都來自於 WordPress。更多 WordPress 是什麼 。
擁有上萬個佈景主題（樣板）和功能外掛，只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選，請參考 優質佈景主題 和 優質外掛推薦，會給你應該的幫助。
WordPress 可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、購物網站架設 等。
最大好處是，它是免費開源的軟體，可完全掌握自己網站資料，不需被任何網路平台、網頁設計公司牽制。
且不會因為任一網頁製作平台的營運問題，造成網站消失（舉例來說，無名小站結束營運，原來的內容也隨著關站而消失，但這不會發生在 WordPress 身上）。
因為你就是網站的擁有者！
2. 虛擬主機推薦 – hosting.com
hosting.com 是一家全球知名的虛擬主機和網域託管服務商，它從 2001 年就開始提供相關服務，由於創辦人本身有程式相關背景，所以主機速度優化上，一直是它們的服務重點。
它在虛擬主機上提供多種服務項目，像是共享主機、WordPress 專業主機、VPS 主機、獨立主機，隨著你的網站規模越大（流量越多）可同步升級服務，滿足不同時期的需求。
搭配 24 / 7 / 365 全年無休的線上客服，遇到任何問題能在第一時間幫助解決。
不需擔心語言不通問題，因為 hosting.com 客群來自世界各地，用簡單的英文程度（Google 翻譯），他們都聽得懂唷。
hosting.com 正常運行時間和安全性
根據過去 24 個月的數據，hosting.com 全年有 99.9% 以上的正常運行時間（沒任何一家能保證 100%），這代表你網站幾乎不會異常斷線，都是穩定的在線上運作。
這使它成為主機穩定度、安全性的有力競爭者。
hosting.com 網站速度表現好嗎？
hosting.com 在全球各地有多個數據基地台，滿足不同地點的主機連線速度，像是台灣用戶就可到連線最近的新加坡基地。
這是我之前主機放置在 hosting.com 所做的記錄（評測紀錄是 A+），網站加載速度大約 83 毫秒，是優質的主機速度。
Google 建議的響應時間是 200 毫秒（越短越好）。所以低於 180 毫秒的網站內容會被評為A +。
hosting.com 主機任一主機方案，均採用業內高等級 Lightspeed Performance 速度表現（比一般 SSD 硬碟還更快），讓用戶擺脫主機緩慢的惡夢。
每降低一秒的網站速度，這代表能保留更多訪客留存，進而轉化成網站訂單。
加上不同方案均有贈送免費的一年網域，就能夠在同一家一次完成網域＋主機租用，非常方便划算！
3. hosting.com 購買流程
這章節會進行「 hosting.com 」的網域申請＋主機租用流程，並帶你建置自己的 WordPress 網站。
這邊我會簡單分成 3 個步驟，帶你順利取得 hosting.com 主機。
Step1：選擇 hosting.com 方案
首先，點擊前往 hosting.com 主機 官網，會直接來到 Web Hosting 主機頁面，或是點選 Hosting > Web Hosting 前往也可以。
接著往下滑，會看到不同的主機方案，如果你正猶豫如何選擇，下面我會給你一些選擇建議。
小備註：方案價格會隨著主機廠商有所調整，以 hosting.com 官網呈現價格為主。
要選擇哪種 hosting.com 主機方案？
hosting.com 共享主機提供 4 種方案選擇，分別是 Starter 方案、Plus 方案、Pro 方案、Max 方案。
它的任一種方案，全都享有免費一年網域、WordPress 一鍵安裝、大量儲存空間、不計網站流量、 SSL 免費憑證、Litespeed 加速提升、cPanel 多功能介面、數據中心選擇等，這是超值的功能服務！
不同方案主要差異在可建置的網站數量，還有主機可使用的空間，其他功能大致差不多。
- 只需架設 1 個網站：Starter 方案（空間 15 GB）
- 需架設 2 個網站：Plus 方案（空間 30 GB）
- 需架設 10 個網站：Pro 方案（空間 50 GB）
主要挑選方法，就依自己想架設的網站數量做挑選即可，在選擇上簡單滿多的！
小備註：接下來我會用 hosting.com 的 Starter 方案，進行主機申請教學（不一定要和我同方案，不會影響教學流程）。
Step2：選擇主機規格和網域
首先可選擇租用時間，建議至少需要租用一年以上，才會享有高比例的折扣優惠價，這邊我先用一年做為示範。
有關 Server Location 指的是伺服器位置，若是面向亞洲的客戶，通常就直接選擇 Singapore（新加坡）即可。
再來就是選擇網域的環節了，分別有這幾種模式：Register new domain（註冊新網域）、Transfer domain（移轉現有網域到 hosting.com 做代管）、Use existing domain（使用現有網域）。
如果是新手剛開始建立網站，在沒有網域的情況，就先選 Register new domain（註冊新網域），然後輸入想申請的網域名稱。
備註說明：輸入網域時，hosting.com 會自動跳出選擇視窗，你可以輸入想購買的網域。若沒人註冊過的話，就能點選加入購物車（下圖的兩個按鈕都要按，才能順利加入成功）。然後關閉彈跳視窗，就會回到原來的流程畫面。
當網域加入購物車之後，系統會自動產生出「 Use domain in basket（使用購物車內的網域）」，確認好網域確實有被選到，同時也會看到下圖右下角的底線有顯示網域，就能前往到下一步。
這邊會進入到購物車頁面，正常來說會看到準備購買的網域一組＆主機一組，若是網域被選到 2 年去，也可以點擊編輯 Icon，把網域更改為一年即可（hosting.com 主機的首年網域是贈送的）。
主機部分仍建議租用至少一年，才享有高比例的折扣優惠幅度，都沒問題的話可前往到下一步。
Step3：註冊 hosting.com 會員＆進行結帳
接著會同步申請 hosting.com 的會員，到時就可以透過註冊的帳密，登入到 hosting.com 後台。由於是國外平台，故這裡的資訊都需填寫英文。
可分別輸入名字、姓氏、信箱、密碼，點選按鈕就能前往下一步。有關姓名部分這裡沒這麼嚴格，通常有正常英文都能通過，若是需要姓名中翻英的話，可使用 外交部 的工具。
接著會前往帳單資訊、付款方式設定頁面，這邊同樣需輸入英文，同樣使用 地址中翻英 工具，直接複製貼上就可以了。
有關帳單資訊填寫的方法如下，完成後按下儲存按鈕。
接著繼續下滑，就會看到付款資訊填寫。有關 hosting.com 提供常見的信用卡付款、PayPal 付款，可以滿足不同需求。
輸入完成後就能進行付款！
付款完成後，系統會進行後台功能建置，所以需要等待一下。完成後就會出現成功畫面，若點下面按鈕的話就能前往到 hosting.com 會員後台介面。
好囉，到這裡就算順利申請完畢 hosting.com 主機了：）
4. 信件認證＆環境設置
當如果有順利申請完畢，這一章節同樣很重要，就是要做信件認證＆環境設置，這樣剛所購買的主機或網域，才會正式生效。
前往剛註冊所留的信箱，這時系統應該有寄信過來了，除了會有訂單完成的通知，裡面有兩封驗證信可以分別做處理。
小提醒：有關需驗證的信件，hosting.com 主機都可能會再做調整，故建議可把信都打開來確認一下，若有需驗證的部分就照信中所寫的執行即可：）
第一封信件：安全性驗證
打開安全性驗證信件，點擊連結就能進行驗證，這樣就搞定囉。
第二封信件：激活網域＆主機
點擊另一封信件，主要是在做網域＆主機環境的啟動，可以點擊信件裡面的連結前往（或是直接從 hosting.com 後台登入前往也可以）。
接著，若跳出 hosting.com 登入視窗，就輸入剛註冊的帳密即可順利登入。進入後台後，有關剛註冊的網域和主機，都需要進行最後設定，才會正式生效。
步驟一、網域設定確認
首先我們進行網域的最後設置，可點擊網域欄位的「 Complete setup（完成設定）」。
接著輸入相關的必填資訊，有一些 hosting.com 主機會預設帶進去，若沒有的話再自行補上即可，完成後就送出。
小提醒：Phome 電話部分因為需輸入國際碼有 +886，所以把開頭 0 去掉加上手機或市內電話就可（例如手機： +886911000111），最開頭的「 + 」號記得加上。
到這裡有關網域的最終設定就完成囉！
步驟二、主機環境啟動
接著就是啟動主機環境的部分，一樣找到自己申請的主機方案，點進去後輸入剛申請的網域名稱，完成後送出。
小提醒：若是網域不是在 hosting.com 主機申請的，可同樣在下圖欄位輸入自己的第三方網域名稱，然後再進行 DNS 指向到 hosting.com 主機即可。
如果有順利完成，到這步應該會發現剛申請的網域和主機，應該都會是「 Active 啟用 」狀態，這樣就大功告成囉！
第三封信件：驗證網域的申請人資料
如果網域是在 hosting.com 購買的，可同步進行網域的申請人資料驗證，確保網域所有權。
流程很簡單，打開信件點擊連結後，跟著流程進行驗證，最後就會出現成功訊息，就搞定了！
5. 建立 WordPress 網站
這章節，我們將來進行 WordPress 網站的建置，找到剛所租用的主機，然後點擊「 Login to Control Panel 」登入到控制台（大多數跟網站有關的設定，都放在控制台內）。
開始建立 WordPress 網站
前往「 Websites > Apps 」，點擊「 Install App 」新增 WordPress 網站。
應用程式選擇 WordPress，設定網站帳號、信箱、密碼等相關資訊，點擊 Install 安裝。有關這裡的帳密，是之後登入到 WordPress 網站會使用到的，所以要把它記起來唷！
若是 WordPress 網站有建立完成，就會看到相關訊息，點擊「 Login to admin（前往網站後台）、Visit site（前往網站前台）」。
有關於 WordPress 後台功能有很多，如果想瞭解更多的話，也可前往 犬哥網站的文章 學習。
開啟 SSL 加密聯繫
有關 SSL 憑證對於 Google 或是網站本身來說，都是非常重要的。若是網站沒有 SSL 安全性加密，除了在連線上容易被駭客從中擷取資料外，也不利於 SEO 關鍵字排名！
有關 SSL 加密憑證部分，hosting.com 主機在 WordPress 網站建立完畢後，會自動幫我們做安裝，就不用自己再設定很方便！
但有個小地方，也就是強制 SSL 加密連線的功能可以打開，這樣不論你的網站原來是用 http 或是 https，都會強制使用 https 的方式做連線。
好囉，到這裡有關 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 教學。
特殊商品運費計算，可參考 客製化運費外掛設置。
新增＆編輯網站頁面
建置品牌形象網站，可能會想自行新增、編輯網站頁面，豐富整個網頁設計，這章節教大家如何做。
使用 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）展露頭角，就有機會提升網站能見度。
搜尋引擎每日需處理龐大的網站資料，如果主動提交自己的網站地圖（又稱 Sitemap），可有效加速網站被搜尋引擎收錄的速度，有效 提升 WordPress SEO 的分數。
Google、Bing 是台灣目前兩大搜尋引擎，Google 可把 Sitemap 提交到 Google Search Console，Bing 則是提交到 Bing Webmaster Tool。
當網站被收錄到搜尋結果，網站才可以被訪客搜尋到，這時就會開始有網站流量進入。
有關於網站流量的分析統計，幾乎都會使用 Google Analytics 軟體，需要把 GA 追蹤碼嵌入到 WordPress 網站，Google 才會幫你統計分析。
最後，我們可以安裝優質 WordPress SEO 外掛，搭配 關鍵字行銷工具，幫助站長們更有效的規劃 SEO 行銷策略。
常見問題
自架網站需要準備什麼？
網站能正常運作，就需有「 個人網域 」＋「 虛擬主機 」，這是基本配備。
這也是每個網站主都需負擔的小投資，沒有例外。
差別是，跟著我的架站教學，你可用最少的預算，建置你的網站：）
網域如何取名呢？
網域是什麼？「 網域 」是網站組成的第一步，就像家的門牌一樣，讓人可以順利找到你的網站。
網域取名時，注重幾個簡單原則即可，像是簡單好記、品牌名稱、與服務 or 產品有關、去除 www、 .com 優先、勿用中文。
虛擬主機是什麼？
「 虛擬主機 」是主機公司在自管的實體主機上，切分成多個虛擬空間，並把這些空間，租給一般使用者使用。
這樣可大幅降低使用者的費用，因為養實體主機是很貴的，所以絕大部分的網站主，通常都是租用現成的。
另一個比喻，如果把網址比喻成「 門牌 」，那虛擬主機就是「 家 」的角色。
WordPress 是什麼？
WordPress 它是全球知名的網頁設計軟體，全球有 40 % 以上的網站，都來自於 WordPress。
它可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、電商網站架設 等。
聯絡犬哥網站
在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。
資源一：犬哥網站（專業 WordPress 網頁設計＆SEO 行銷公司）
如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆SEO 行銷公司），請專家協助你會更容易！
我們有多年網頁設計、SEO 網站排名經驗，加上上百個高質感作品、SEO 實戰案例，絕對能滿足您的需求！
資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）
如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？
可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！
- WordPress 高手架站課：
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！ - SEO 排名飆升課：
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
