建立Blog :如何架設教學,寫網誌+部落格平台(Astra 主題)

WordPress Blog 教學:如何建立+架設部落格網站(Astra 主題)

這是一篇完整的「 WordPress Blog 架設教學 」。

想要架設個人或公司部落格,寫網誌文章紀錄心情、學習經驗、作品案例分享嗎?還是想打造網路自媒體,讓更多人認識你?

比較過多家部落格平台,我最終使用 WordPress 網頁製作平台,完成了 Blog 架設和寫了多篇網誌,而且成效非常的理想。

★☆ — 重要資訊 — ☆★

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

這篇文章,我將會手把手帶你「 架設部落格 」網站(使用 Astra 主題),章節如下。


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 身上)。

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


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 網站速度表現好嗎?

A2 Hosting 在全球各地有多個數據基地台,滿足不同地點的主機連線速度,像是台灣用戶就可到連線最近的新加坡基地

這是我之前主機放置在 A2 Hosting 所做的記錄(評測紀錄是 A+),網站加載速度大約 83 毫秒,是優質的主機速度。

A2 hosting :虛擬主機響應速度
虛擬主機響應速度(來自 bitcatcha 評測)

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 前往也可以。

前往 WordPress Hosting 主機

接著往下滑,會看到不同的主機方案,如果你正猶豫如何選擇,下面我會給你一些選擇建議。

A2 Hosting 方案費用
A2 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 台幣),和主機 $12.99 美元 / 月(一年約 4,680 台幣)。

值得開心的是,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 教學 」的申請網域+租用虛擬主機,我把流程整理為 4 步驟,幫助大家快速完成。

選擇主機方案

首先,點擊前往 A2 Hosting 官網,會直接來到共享主機頁面,然後往下滑會看到主機方案。

若沒看見,可依圖片指示,選擇 Hosting > Shared Hosting 即可看見方案資訊。

a2-hosting
前往 A2 Hosting 主機

選擇你想租用的方案,如果預算有限可選 StartUp 方案,如果想架設多個網站可選 Drive 方案以上,如果對速度有高規格需求就選 Turbo Boost 方案。

A2 Hosting 方案費用
A2 Hosting 方案費用

小備註:接下來我會用 A2 Hosting 的 StartUp 方案,進行主機申請教學(不一定要和我同方案,不會影響教學流程)。

Step1:輸入註冊資訊

這裡需填入主機註冊資訊(參考下圖)。使用者資訊需都填寫英文,姓名可到 外交部 查詢,地址和郵遞區號可用 中華郵政 查詢。

電話部分因為需輸入國際碼有 +886,所以把開頭 0 去掉加上手機或市內電話就可(例如手機: 886911000111)。

A2 Hosting 輸入註冊資訊
A2 Hosting 輸入註冊資訊

小備註:有關租用時間,建議至少選擇一年才能享有大幅度的折扣優惠喔!

Step2:申請網域

開始選擇網域,I have a Domain 是使用已經有的網域,I need to create a new Domain 是註冊新網域。

這裡我選擇註冊新網域,然後輸入想註冊的網域名稱,點選 Check Avaliability 檢查網址是否可用。

若網址可用就會在下方顯示網域價格,如果網域已經被別人註冊過,就會顯示「 Your Domain is NOT available for Register! Try Again! 」,這時就需要再重新想一個。

A2 Hosting 選擇網域

Step3:選擇伺服器位置

亞洲地區建議選擇 Singapore(新加坡),離台灣比較近。

A2 Hosting 選擇伺服器位置
A2 Hosting 選擇伺服器位置

Step4:選擇付款資訊

選擇付款方式,這裡我選最多人用的信用卡方式,另一種 PayPal 也滿多人用的。

然後輸入相關資訊,確認沒問題後進行結帳。

點擊送出按鈕後需稍微等待一下(建議留在當前頁面),因為 A2 Hosting 會進行主機的所有設定,所以等待時間會久一點,這期間請確保電腦正常運作。

A2 Hosting 選擇付款方式
A2 Hosting 選擇付款方式

Step5:A2 Hosting 租用成功

走到這一步,就代表已經順利租用 A2 Hosting 成功囉!接著只要做後續的 WordPress 網站建置即可。

點選下圖的「 Client Area 」,就可直接進入到後台的會員專區,若需要輸入帳號密碼,就填入剛在註冊時留的即可。

A2 Hosting 主機租用成功
A2 Hosting 主機租用成功

5. 前往 cPanel 後台&更換語言

cPanel 是一個多功能的管理後台,讓使用者可用簡單的介面,管理網站檔案、備份、FTP 等 ..。

這裡面有非常多功能,如果要設定網站&主機設定,大部分都是在這處理。

登入 A2 Hosting 後台,會看到自己租用的服務,選擇要管理的項目,點擊「 cPanel Login 」,就可前往了。

登入 A2 Hosting 後台&前往 cPanel 專區
登入 A2 Hosting 後台&前往 cPanel 專區

進入後,首先更改一下語言,方便我們操作。找到 Preferences > Change Language,更換網站語言。

A2 Hosting教學 :更改操作語言
A2 Hosting教學 :更改操作語言

選擇語言,然後儲存即可。

A2 Hosting教學 :更改操作語言
A2 Hosting教學 :更改操作語言

再度回到主面板就會看到語言切換囉。

完整的 cPanel 功能介面
完整的 cPanel 功能介面

6. 建立 WordPress 網站

這章節會開始教學,如何透過 A2 Hosting 快速建立 WordPress 網站。

首先,一樣在 cPanel 面板內會看到 WordPress 快速安裝的功能,先點擊前往。

選擇 WordPress 快速安裝功能
選擇 WordPress 快速安裝功能

點選 Install,進行 WordPress 網站安裝流程。

點選 Install 安裝 WordPress
點選 Install 安裝 WordPress

選擇 WordPress 網站要安裝在哪個網域下,這裡系統通常會幫你設定好,可用預設值即可。

會建議先選擇「 http:// 」的模式,避免因 SSL 憑證尚未生效問題,導致網站無法瀏覽(有關 SSL 後面再設定也可以)。

設定 WordPress 網域
設定 WordPress 網域

分別輸入像是你的網站名稱、標語,還有 WordPress 後台的登入帳號、密碼、管理員信箱,有關帳密部分自己要記得喔。

輸入 WordPress 建立資訊
輸入 WordPress 建立資訊

選擇 WordPress 後台的語言,下圖是選擇繁體中文,可依自身需求挑選。

都設定完畢後,就點擊「 Install 」就會開始安裝 WordPress 網站了!

選擇網站語言&開始安裝
選擇網站語言&開始安裝

如果在安裝 WordPress 的過程中,系統跳出來類似下圖的警示,可以把下圖的選項打勾(若沒出現就無需理會),然後再重跑一次安裝就可以成功。

勾選覆蓋原來的檔案
勾選覆蓋原來的檔案

恭喜!看到這訊息就代表 WordPress 安裝成功了!

裡面應該會看到兩個網址,分別是 WordPress 前台&後台的路徑,點擊就能直接前往。

小提醒:WordPress 的後台路徑,就是網域後面加上 /wp-admin ,舉例來說像是:demo.com/wp-admin

WordPress 前台&後台網址
WordPress 前台&後台網址

好囉,以上就是透過 cPanel 內建的 WordPress 快速安裝工具,這樣就能迅速架站成功!

如果搜尋網址沒看到網站,可能是 ..

  • 剛申請的網域還沒生效,最多可能需等待一天時間(因 A2 Hosting 需要把你的新網域,通知給世界各地的主要伺服器認識+收錄)。若遲遲未能訪問到網站,也可直接聯繫 A2 Hosting 客服,它們會幫助你處理。
  • 網域不是同時在 A2 Hosting 申請的(像是使用第三方網域商:NameCheap 等 ..),則需到你的網域商進行 DNS 設定,等待 24 – 48 小時生效時間,才會順利看到網站。

接下來,我們還有重要的事要做。

就是確認 A2 Hosting 寄過來的信件,其中包含網域認證信件(WhoIs 認證)請務必認證唷:)


7. 信件認證

A2 Hosting 主機申請完成後,系統會自動寄出多封信件,其中網域認證信(WhoIs 認證)是比較重要的,我帶大家認識。

網域認證信(WhoIs 認證)

網址購買後,會收到來自 ICANN 透過網域註冊商,發送過來的網址認證信件,用來確認聯絡人資訊,這務必需認證完成,來保持網域的所有權。

所要做的就是打開信件,然後點擊 Verify Your Email 連結驗證,就認證完成了:)

A2 hosting 主機:網域驗證信(WhoIs 認證)
網域驗證信(WhoIs 認證)

點擊下圖連結就可以認證網域了,完成會出現認證成功訊息。

A2 hosting 主機:點擊網域認證連結
點擊網域認證連結

以上是比較值得一提的信件內容,至於其他信件有需求也能點擊查看。


8. WordPress 設定

如果有照著上面的 WordPress 架站步驟,你應該也有自己的形象網站了。

這章節我們到 WordPress 後台做些一般設定,方便我們後續的網站經營。

WordPress 網站的 2 個重要路徑(請把 demo.com 改成自己的網域):

  • WordPress 前台:demo.com
  • WordPress 後台:demo.com/wp-admin(加上 wp-admin 就是後台路徑)

首先,登入並前往 WordPress 後台 > 一般,可依需求更改「 網站標題、網站說明、網站管理員Email、網站語言、時區 」等 ..。

至於網站網址除非很確定目的,不然不建議更動,因為會影響整個網站連結。

網站管理員Email:需填寫正確,未來網站相關訊息,如:更改密碼等 .. 會寄送至此信箱。

網站語言:更改成繁體中文,方便後續操作(若已經有更改則無需理會)。

Bleuhost教學 :WordPress 網站一般設定
WordPress 網站一般設定

如果都修改完畢,按下 儲存設定 就設定好囉,請參考 WordPress 後台教學 有更多完整教學。


9. SSL 憑證申請

安全通訊協定,又稱為 SSL(Secure Sockets Layer)是一種安全協定,可在瀏覽器和主機伺服器之間,建立安全加密連結。

只要瀏覽器的網址欄前面有安全鎖頭,就代表目前是用 SSL 連線狀態。

網域加上 SSL 憑證的好處,除了訪客搜尋到你的網頁時,不會顯示不安全網站,也能幫助網站 SEO 排名。

下面我教學了幾個方法,幫助你達成目標,只需選擇其中一個進行即可。

如果你使用的 WordPress 虛擬主機 就有提供 SSL 服務,那我會優先建議你使用。

方法1:使用 A2 Hosting 申請 SSL 憑證

前往並登入 A2 Hosting,在首頁面版會看到剛申請的網域+主機,點 cPanel Login 前往 cPanel。

備註:cPanel 是主機開放的多功能面板,裡面有多種功能可使用。

A2 hosting 主機教學:前往 cPanel 功能面板
前往 cPanel 功能面板

進入 cPanel 後,前往 SSL / TLS 進入申請 SSL 憑證。

A2 hosting 主機教學:SSL 憑證申請
SSL 憑證申請

點選產生憑證(CRT)。

A2 hosting 主機教學:前往 HTTPS 憑證功能
前往 HTTPS 憑證功能

A2 Hosting 預設會將我們網站上的所有服務,像是主網域、cPanel、webmail 等 ..,全都納入準備套用 SSL 憑證的範圍。

直接點選「 安裝 」。

A2 hosting 主機教學:安裝 SSL 憑證
A2 hosting 主機教學:安裝 SSL 憑證

選擇需安裝 SSL 憑證的網域,然後點 Autofill by Domain(依憑證自動填入),系統會自動帶入 SSL 憑證碼到欄位中,完成後在當頁面往下滑,點 Install Certificate(安裝憑證)。

A2 主機教學:安裝免費 SSL 憑證
安裝免費 SSL 憑證

安裝成功後,可能需等一些時間讓 SSL 憑證生效(時間長短不一定)。生效後再到瀏覽器輸入你的網址,應該就會看到安全鎖頭了。

方法2:使用 WordPress 外掛申請 SSL 憑證

WordPress 是強大的 網頁製作平台,有上千萬個 佈景主題 和 網站外掛,幫助你達成網站需求。

這裡我推薦使用 Really Simple SSL 外掛幫助你 SSL 憑證申請,請參考 如何安裝 WordPress 外掛

操作流程很容易,你只需安裝和啟用這個外掛,過段時間網址就有安全性鎖頭了。


WordPress 主題安裝+更改網站 Logo

這個章節,我們會教如何安裝 WordPress 佈景主題,讓網站看起來美觀且功能性更強。

WordPress 主題是什麼?

全套用模板網頁,是公司已完成網站模板,接到案件時,會直接套用,不經過客製化
WordPress 佈景主題是什麼?有什麼作用?

WordPress佈景主題可以控制網站版型&設計,就像是人類的衣服,或是房子的佈景裝飾,一鍵即可輕鬆更改網站外觀設計。

WordPress佈景主題可以更改許多網頁設計選項,大部分都可做到更改以下外觀選項:

  • 網站 Logo&網站圖示:網站圖示是在搜尋引擎列表中,網站標題前面會顯示的圖樣,網站 Logo 則通常會顯示於頁首&頁尾。
  • 入門版型套用:通常市面上免費&付費主題,都會有各種不同的網站模板,像是商業形象、電商網站等 .. 都可直接套用,馬上就有現成網站修改細項即可,不用重頭設計。
  • 頁首 / 頁尾 / 側邊欄:外觀及顯示選項、側邊欄顯示小工具項目等 .. 都可自由設計。
  • 文章 / 頁面設計:可修改文章 / 頁面設計,搭配 優質頁面編輯器 可獲得更好的效果唷。

以上只是列出基本的可控制項目,還有更多種客製化選項,依據不同主題,可調整的選項也會有所不同,但通常只會更多,不會更少!

這篇教學,我們會以熱門佈景主題 Astra 為範例教學。更多 WordPress 佈景主題推薦

Astra 是一款熱門多功能的輕量級主題,主題執行速度快速,可拿來建立 Blog 網站。

為了方便接下來教學,建議先跟我一起安裝 Astra 主題,有免費版可安裝。更多相關教學,可參考 Astra Theme 主題入門

WordPress 佈景主題安裝

首先,前往 WordPress 後台 > 外觀 > 佈景主題,點選 安裝佈景主題

wordpress blog 佈景主題安裝
WordPress Blog 佈景主題安裝

在搜尋欄位輸入 Astra,我們安裝 Astra 提供的免費版本,安裝完成後先別急著啟用,我們下一步驟,來安裝 Astra 子主題。

建立Blog :wordpress 佈景主題安裝
建立Blog :wordpress 佈景主題安裝

Astra Child Theme 子主題安裝

前往 Astra Child Theme 生成頁面,下載子主題,可任意命名子主題名稱,也可參考我的命名。

點擊 Generate 按鈕下載。

下載&命名 Astra 子主題
下載&命名 Astra 子主題

使用子主題好處:

因為主題都會進行升級&維護,如果有些程式碼改在原主題上,就可能會被還原掉。

所以有些人會使用子主題方式,保持住自己設定的程式碼(或功能設定),而不用再重新做一次。

跟上面安裝主題流程一樣,前往 WordPress 後台,把子主題上傳安裝,只是這次需點 啟用

啟用 Astra 子主題
啟用 Astra 子主題

到此步驟,應該會看到有兩個 Astra 主題,分別是 Astra 主題& Astra 子主題,而 Astra 子主題也有正常啟用,這是完成圖。

Astra 子主題順利啟用
Astra 子主題順利啟用

備註:原主題&子主題只能擇一啟用,上面示範的是啟用子主題。

主題啟用完成,前往網站前台看一下成果,看起來還不錯的 WordPress 主題,成功出現啦。

WordPress 佈景主題安裝成功
WordPress 佈景主題安裝成功

更換網站 Logo

每一種 WordPress 佈景主題,都有不同的網頁設計風格、功能設定項。

這邊示範更改網站 Logo&網站圖示,點選 Astra > 網站識別,就能迅速前往網站 Logo 設定。

快速自訂網站識別

畫面會自動切換到下圖,點選「 選取網站圖示 」就能上傳圖檔作為網站 Logo。

上傳網站 Logo
上傳網站 Logo

如果想設定更多細節,點選「 網站標題及標誌設定 」畫面就會自動來到頁首編輯器,可以設定網站圖示、網站標題與可見度、標誌寬度、網站說明、不同裝置的能見度 .. 等。

WordPress 網站 Logo 設定

如果品牌 Logo 本身就有設計文字,就不需要特別設定「 網站標題 」和「 網站說明 」,最後記得按「 發佈 」儲存以上設定。我們一起前往 WordPress 前台看成果,果然網站 Logo 和圖示都完成囉。

WordPress 網站 Logo+圖示完成

到這裡,先恭喜你完成 WordPress 佈景主題安裝+網站 Logo 設定啦。


新增第一篇文章

繼續「 WordPress Blog 」架站教學,這章節會實際寫一篇文章,開始我們的部落格之旅。

首先,前往 WordPress 後台的 文章 > 新增文章。在 WordPress 平台裡,文章和頁面是不同形式,可參考 文章頁面差別

進入後點左上角的加號,可新增不同的 WordPress 區塊功能,這是 WordPress 預設的 Gutenberg 編輯器。

可以用它來編寫文章,像是新增圖片影片、段落標題、清單列表、網站按鈕等 ..,可自由的編寫個人或公司網誌。更多 圖片優化流程

WordPress Blog 架站教學:區塊編輯器&文章發佈
區塊編輯器&文章發佈

寫 WordPress 文章的過程中,可隨時點右上角的 儲存草稿,保存目前的文章資料。

文章正式發佈前,我們會設定網址路徑、文章分類&標籤、精選圖片(網站封面)、是否開啟留言等 ..,可參考如何 新增 WordPress 文章 有完整教學。

最後,可點擊 發佈 上線。接著前往 WordPress 前台首頁,就會發現文章已經正式上線囉:)

建立Blog :wordpress文章編輯成功
WordPress Blog 文章編輯成功

如果你對於如何產生對 SEO 有益處的文章有疑問,可參考 撰寫 SEO 文案教學,幫助你寫出第一篇優質文章。更多 SEO 是什麼


網站分類&標籤

WordPress 有完整的網站分類和標籤功能,方便你統整文章和維護更新,且有助於訪客搜尋。

WordPress 文章分類

前往 WordPress 後台的文章 > 分類,這邊可新增多個文章分類。

備註:「 代稱」是分類網址的設定(建議英文),文章分類可設定父子階層。

新增 WordPress 文章分類
新增 WordPress 文章分類

可對現有的分類進行 編輯,或是點 快速編輯 可直接修改重點。

WordPress 分類編輯&刪除
WordPress 分類編輯&刪除

WordPress 文章標籤

前往 WordPress 後台的文章 > 標籤,這邊也可新增多個文章標籤。

WordPress 標籤編輯&刪除
WordPress 標籤編輯&刪除

以上是簡單的 WordPress 分類和標籤教學,接下來我們會編輯網站選單。

因為 WordPress 選單功能很多,可把單一文章或多個文章分類放入選單中,繼續下一章學習。


修改網站選單

WordPress 選單提供多種類型,可把頁面、文章、分類、自訂連結等 .. 放入選單中,是很豐富的設計。更多學習,可參考 WordPress 選單設計

有關這章節「 WordPress Blog 教學 」課程,我們來調整網站上方的選單,這是帶領訪客瀏覽的地圖,需好好的設計規劃。

首先,前往 WordPress 外觀 > 選單,填入選單名稱後,點 建立選單

WordPress 建立第一個選單
WordPress 建立第一個選單

我剛有新增兩個文章分類(依你的為主),勾選新增至選單 > 可拖拉排序&父子階層 > 設定顯示位置 Primary Menu 主選單,最後儲存。

WordPress Blog 新增網站選單
WordPress Blog 新增網站選單

前往網站前台看一下成果,太好了選單順利出現了。如此一來,網站頁首就越來越完整了。

前台 WordPress 選單出現
前台 WordPress 選單出現

WordPress 外掛安裝+管理

WordPress 是完全開源軟體,任一個軟體工程師皆可在上面開發功能,所以讓 WordPress 生態圈非常豐富(有高達 5w 個可用外掛),可以幫助你擴充網站功能。

前往 外掛 > 安裝外掛,可選擇喜歡的外掛安裝,有確定目標可善用搜尋安裝。如果不知道如何選擇,我在 WordPress 最佳外掛推薦,有整理可幫你節省時間。

WordPress 外掛搜尋&安裝
WordPress 外掛搜尋&安裝

對於新手來說,會先建議安裝 WordPress 基礎外掛即可,然後同一種類型裝一款即可,還有外掛不是越裝越多就好,需考量到網站效能。

多種 WordPress 基礎外掛(僅列舉部分)

有關於 WordPress 外掛的管理設定,可前往 外掛 > 已安裝外掛,這邊可啟用或停用外掛,或是刪除不需要的外掛。

WordPress 外掛管理面板
WordPress 外掛管理面板

通常網站主隨著經營時間,網站外掛都會越來越多(因為可能有更多網站需求)。

所以一開始安裝必要外掛就好,然後暫時用不到外掛可以先停用,完全用不到的就直接刪除。


增加聯絡頁面

到了這裡,或許剛「 建立 Blog 」的網站需要一個聯絡頁面,讓訪客有機會聯絡上你。不論是與你心得分享,還是有不同的合作機會,都感覺都滿好的。

關於新增聯絡頁面,請前往 WordPress 後台的 頁面 > 新增頁面,然後參考 新增 WordPress 頁面 有完整的教學。

新增完成後,記得把頁面放置選單中,這樣訪客才能順利看到唷。

wordpress 新增頁面:聯絡我們
wordpress 新增頁面:聯絡我們

如果想在聯絡頁面裡加入表單功能,我推薦使用 WPForms 或是 Contact Form 7,除此還有其他 WordPress 表單外掛 可供參考。

順帶一提,有些人在做網站頁面設計時,喜歡全版製作,會想把網頁側邊欄拿掉。

只需在左側欄位點選「 資訊欄 」,預設版面配置選擇「 無資訊欄 」。

使用 Astra 主題功能,可細項調整 WordPress 頁面
使用 Astra 主題功能,可細項調整 WordPress 頁面

舊版的 Astra 主題有提供多種頁面設定,我挑選常用的做介紹(可對應上圖英文),其他可自行玩玩看(這些都是針對單一頁面的調整)。

  • Sidebar:側邊欄調整,可設定左右或是不顯示。
  • Disable Title:不顯示頁面標題。
  • Disable Breadcrumb:不顯示頁面路徑。
  • Disable Featured Image:不顯示封面圖片。

如此一來,你也學會新增 WordPress 頁面,並讓網頁設計的更完整,實在太好了。


網頁區塊+小工具設定

通常一個網站設計,都會有側邊欄的存在,可以多提供訪客一些功能使用。

WordPress 預設就有許多小工具可使用,如果搭配不同的網站主題或外掛,可能會幫小工具增加額外功能。更多 WordPress 新版小工具教學

前往 外觀 > 小工具,就能看到目前有哪些小工具,下文以設定「 主要資訊欄 」為範例。

小工具快速設定資訊欄
小工具快速設定資訊欄

展開頁面以後,就能進入主要資訊欄目前有哪些功能,可以自行新增功能,也能點選各項功能直接進階設定,我們以「 近期文章 」做示範。

小工具設定主要資訊欄
小工具設定主要資訊欄

點選「 近期文章 」就會跳出更多設定的內容,可以調整標題、文章顯示數量、是否顯示文章發佈日期,也可以拖曳這項工具的位置。

最後記得按「 更新 」儲存以上設定,就完成囉!讓我們一起來看看最後的畫面效果。

主要資訊欄的畫面效果
主要資訊欄的畫面效果

有關更多的 WordPress 後台功能操作,也可參考 WordPress 後台教學 學習。


有關於網站頁尾的設計,可以使用 Astra 的頁尾編輯器,也就是舊版的 Footer Builder 功能,能處理大部分的頁尾佈局+功能設定。

隨意點選任意頁面的「 自訂 」就能前往「 頁尾編輯器 」。

前往頁尾編輯器的路徑
前往頁尾編輯器的路徑

頁尾編輯器有分為上方、主要、下方頁尾,點擊要修改的齒輪,就能調整欄位數量、寬度、高度、垂直對齊方式,還可以針對不同的裝置(電腦、平板、手機)設定版面配置和可見度。

Footer Builder 頁尾編輯器
Footer Builder 頁尾編輯器

當然你也能自行新增許多小工具,豐富你的網站頁尾。至於要修改樣式,一樣切換到 Design 分頁即可。

頁尾編輯器設定 Copyright

下圖實際示範如何編輯 Copyright,也就是設定網站的著作權聲明。

在設定頁尾區域依序點選 + > Copyright > 來到 ELEMENTS 區域點選 Copyright,點選後即可開始編輯。

Astra Theme 教學 : 編輯頁尾小工具
Astra Theme 教學 : 編輯頁尾小工具

GENERAL 編輯區內是 Astra 系統動態文字,會自動帶入你的目前年份、網站名稱,可以依照需求刪掉或增加內容。DESIGN 則是可以編輯文字色彩、字型大小、間距的邊界設定。

設定 Copyright 內容
設定 Copyright 內容

Astra 主題設定

Astra 是個輕量快速的多功能主題,有許多可設定功能,可參考 Astra 主題教學 或下面影片:)

Astra 主題完整教學影片

前往 Astra > Quick Settings,就能快速選擇自訂項目。

Astra Theme 輕量級 WordPress 主題

如果體驗 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 主題的整體掌握度,大概也就如魚得水了!


網站提交 & GA 分析

Google Analytics 品牌 Logo

Google Analytics 是專業的網站流量分析服務,也是業界常提到的 GA 分析。

我們可以藉由使用 Google Analytics,幫助我們分析網站的流量,完整了解受眾目標,進而吸引潛在客戶購買商品、虛擬服務,增加網站留存率及商品轉化率。

完成網站架設後,我們可以開始進行網路行銷囉!

要進行網站行銷,就需要先了解 SEO 是什麼,讓自己在搜尋引擎結果頁面(SERP)展露頭角,就有機會提升網站能見度。關於 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 行銷策略。

Rank math 全攻略教學影片
SEO軟體工具分享

常見問題

自架網站需要準備什麼?

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

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

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

網域如何取名呢?

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

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

虛擬主機是什麼?

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

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

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

WordPress 是什麼?

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

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

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


A2 Hosting 是一家全球知名的虛擬主機和網域託管服務商,它從 2001 年就開始提供相關服務,由於創辦人本身有程式相關背景,所以主機速度優化上,一直是它們的服務重點。

它在虛擬主機上提供多種服務項目,像是共享主機、WordPress 專業主機、VPS 主機、獨立主機,隨著你的網站規模越大(流量越多)可同步升級服務,滿足不同時期的需求。

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


WordPress 學習資源

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

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

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

幫你增加網路曝光,提高你的線上營收!

WordPress 高手架站課|一堂課讓你變架站高手!

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

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

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

資源三:更多犬哥教學資源

如果你想學更多品牌設計知識,也歡迎追蹤 犬哥網站 IG,這裡面有很多精美圖文&短影片。

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

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

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

關於作者

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

犬哥網站

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

在〈WordPress Blog 教學:如何建立+架設部落格網站(Astra 主題)〉中有 18 則留言

  1. 請問小犬大大

    您側邊攔,文章分類,底下每個標題左邊都有一個小黑點做開頭,請問怎麼做到的,
    我只有文字 超難看的,感恩~

    1. 嗨,這部分我是自行添加 CSS 的方式處理,找到要調整地方的 class 類名,然後下「 list-style:dotted; 」。

      這樣應該就可以了~

  2. 您好,我想請問我已經有設定全站連結的顏色,其他顏色都正常,就偏偏 footer 的 widget 顏色跟人家不一樣……

    1. 犬哥網站

      嗨,Zoe,

      這可能與佈景主題或是頁面編輯器有關,

      需要到主題或是頁面編輯器設定裡,尋找有無 Footer 相關設定區塊進行調整唷~

    1. 犬哥網站

      嗨,謝謝你的鼓勵,我會繼續加油~

      可以加入我們的 FB 社團 有任何疑問可發布貼文與廣大網友集思廣益,

      也可以追蹤我們的 IG 帳號 ,利用碎片時間學習 WordPress 新知唷!

  3. 嗨,請問下,我有域名但是還沒有主機,先在Mac用mamp和Wordpress設計網站頁面,接下來是買主機進行Wordpress上網站搬家嗎?謝謝你///

  4. 犬哥您好,我正準備用wordpress自己架設網站,但架到一半出現不知如何解決的問題,我在網路上尋找解答是發現了您的教學,覺得很棒也很清楚,讓我這新手都能了解wordpress的大部分的問題(本來是有看沒有懂XD)

    架站卡關了兩週還是無法前進只好向高手犬哥詢問(因為看到您網站已玩過很多wordpress主題了,可惜沒有看到blocksy的)

    我的主題用blocksy 也有載blocksy companion,但一直用不好,也不知怎麽用才好,想問的問題如下:

    1.但當我用到自訂器時,沒有出現側邊欄,用資訊欄和一般文章那邊也毫無動靜,感覺故障故障的,(目前只有上傳一篇文章,還要要傳多篇??)

    2.頁首上的右邊也沒有出現我之前設定的分類選單(但前台卻有顯示!?覺得奇怪)

    3.文章在完成發佈前有用 #標籤,但前台點文章進去,文章ending時卻沒看到標籤顯示,
    不知哪裡出了問題,我電腦是window10系統,常叫我自動更新到window11,後來電腦強制我更新,目前應該是win11了,但在win10 就有上述的問題了

    我想克服blocksy的問題,如果真的不行是否要刪除重新下載blocksy?
    要去哪刪除,有看到停用,但停用應該不算刪除吧!

    4.換主題也不知怎麽備份,也想向您請教

    還是用其他主題比較好,卡好久無法前進,已經繳主機bluehost費用了,希望能找到解答。

    我有看您的影片用Astra,如果真的不行我再考慮用這個看看,謝謝您用心教學也很清楚易懂,希望您繼續分享,支持加油!

    不好意思,我是電白新手問很多問題,請見諒!
    因為看到可以詢問關於Wordpress的問題就決定來問您了,非常感謝您佛心教學。

    1. 犬哥網站

      嗨,Christina,

      你的問題蠻多都是關於 Blocksy 主題,配合截圖可能會讓人比較能理解你的疑問點在哪裡,建議可前往 FB 社團,貼上截圖詢問,也能夠得到比較即時的回覆唷!

      另外不管電腦主機是用 Win10 或 Win11,網站速度的部分,都是跟虛擬主機有相關,建議若出現相關問題,可洽詢 Bluehost 客服,協助你進行解決。

      若需要備份網站,可參考 如何備份網站 教學,進行學習。

      希望有幫助到你:)

  5. 犬哥您好!
    不好意思 我覺得我的網站被其他人登入後串改了,不知道怎麼會這樣?
    請問您知道什麼原因嗎?bluehost的後台看到很多不知道的帳號登入

    1. 犬哥網站

      嗨,Yanci

      建議你儘快洽詢主機客服,協助你排除安全問題,並且盡快更換主機密碼唷!

發佈留言

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

返回頂端