WordPress 快速架站教學:不懂程式碼也能自學製作網頁 ⚡

8 分鐘建站教學的精選圖片

在這篇「WordPress 快速架站教學」,我會帶你用 8 分鐘快速學會如何自己建立網站。

就算不會寫程式也沒問題,只要 5 大步驟就能建立自己的網站,想要自學架設 WordPress 網站的話看這篇筆記就對了!

那事不宜遲,我們現在就開始吧!


如果你偏好用影片學習,歡迎觀看下面的 YouTube 影片。

WordPress 架站教學!8 分鐘自學快速建立網站!不懂程式碼也能製作網頁 ⚡

如果你喜歡透過圖文學習,請繼續往下閱讀吧!

圖文版會比較詳細、方便快速瀏覽,還會持續更新與補充內容。



步驟 1:註冊域名 & 租用 Bluehost 主機

使用諾特斯觀眾專屬優惠連結

首先,點擊下方的諾特斯觀眾專屬連結,就可以用全網最優惠的 25 折價格租用 Bluehost 主機。

Bluehost 的 Logo

點擊連結優惠即生效

Bluehost 操作介面簡單,又有 24 小時真人客服,是 CP 值很高的新手入門主機首選!

註冊域名與租用主機空間

項目BASIC 方案
(基本方案)
CHOICE PLUS 方案
(優選加值方案)
ONLINE STORE 方案
(網路商店方案)
PRO 方案
(專業方案)

諾特斯觀眾
專屬優惠價格
每月 $1.99 美金
(約 $60 台幣)
每月 $3.99 美金
(約 $120 台幣)
每月 $7.45 美金
(約 $224 台幣)
每月 $9.99 美金
(約 $300 台幣)
網站數量105050100
儲存空間10 GB50 GB50 GB100 GB
同時可負荷
流量
10 位500 位500 位1000 位
適合的
網站流量
(每月)
4 萬訪客20 萬訪客20 萬訪客40 萬訪客
1 年
免費域名
✔️✔️✔️✔️
免費
SSL 憑證
✔️✔️✔️✔️
免費 CDN✔️✔️✔️✔️
全天候
客服支援
✔️✔️✔️✔️
電話支援✔️✔️✔️
網站備份每日備份
(第 1 年免費)
自動化即時備份每日備份
(第 1 年免費)
其他最便宜的
入門選擇
自動安裝
WooCommerce
Bluehost 方案 & 費用
(使用 諾特斯觀眾專屬優惠 )

備註:
台幣價格是用美金兌台幣匯率 30 來估算。不過,因為匯率會隨時間浮動,實際的台幣價格還是要看交易時的匯率喔。

第 1 步

新手的話,我會建議先從最便宜的「Basic」方案開始,點擊「Select」(選擇)。

選擇 Basic 方案 1

第 2 步

輸入想註冊的域名,然後按「Search For Domain」(搜尋域名)。

輸入轉移域名並搜尋

第 3 步

確認「CART」(購物車) 裡的內容,目前會看到 4 個項目:

第 1 項「WordPress Basic Hosting」(WordPress 基本主機服務),我推薦選擇折扣力度最大的一年期,價格是一年 $23.88 美金 (約 $716 台幣)。

WordPress 基本主機服務

第 2 項,「.COM Domain」(.COM 域名)。因為 Bluehost 贈送了一年免費域名,所以費用是 0 元。

購物車項目 .COM 域名

剩下的「Domain Privacy + Protection」(域名隱私保護) 跟「Professional Email」(專業電子郵件),經過我們團隊實測,發現之後在 Bluehost 後台購買 會更便宜。

購物車項目域名隱私保護 專業電子郵件

第 4 步

我們先刪除掉這兩個項目,未來有需要的時候再加購就好。

點擊「垃圾桶」圖示。

按垃圾桶刪除購物車項目

第 5 步

選擇「REMOVE FROM CART」(從購物車移除)。

點擊從購物車移除

第 6 步

點擊「CONTINUE TO CHECKOUT」(繼續結帳)。

點擊繼續結帳

第 7 步

填寫域名註冊者的英文聯絡資訊,「取消勾選」同意寄送促銷訊息。

填寫域名聯絡資訊

第 8 步

在「Account Information」(帳戶資訊) 設定登入 Bluehost 的密碼。

設定 Bluehost 的密碼

第 9 步

在最下方的「Billing Information」(帳單資訊) 填寫付款資料。

填寫付款帳單資訊

第 10 步

在右側的「Order Summary」(訂單摘要) 確認最終金額,包括了主機費用和 5% 的加值營業稅,總共 $25.07 美金 (約 $752 台幣)。

按下藍色按鈕「SUBMIT PAYMENT」(提交付款),完成主機的租用。

確認最終金額提交付款

Bluehost 會自動在主機上幫我們安裝免費 WordPress 軟體。

安裝免費 WordPress 軟體
WordPress 網站準備就緒

收取域名聯絡資訊確認信

到註冊時填寫的 Email 信箱,找到主旨寫著「Alert: Keep Your Domain Active」(提醒:保持你的域名活躍) 的「域名聯絡資訊確認信」。

收到域名聯絡資訊確認信

點擊信件中的橘色按鈕「CONFIRM EMAIL ADDRESS」(確認電子郵件地址)。

確認電子郵件地址 1

當看到「Your Email is Confirmed」(你的電子郵件已確認),就表示已完成驗證。

然後耐心等待幾個小時到 1 天的時間,Bluehost 會自動完成域名和主機的 DNS 指向設定,並為網站安裝免費 SSL 憑證。

你可以先休息一下,晚點再回來進行下個步驟。

確認後等待 Bluehost 自動設定

步驟 2:調整 WordPress 基本設定

等待幾個小時後再回來,從 Bluehost 後台點擊「EDIT SITE」(編輯網站)。

Bluehost 後台點擊編輯網站

可以看到網址列中先前註冊的域名生效了。

網址列域名生效

選擇畫面底部的「I’m following a tutorial, take me to the WP Admin Dashboard」(我正在跟著教學,帶我前往 WordPress 後台),直接進入 WordPress 後台。

直接進入 WordPress 後台

WordPress 一般設定

第 1 步

點擊左側欄位的「Settings」(設定)、「General」 (一般)。

WordPress 後台一般設定

第 2 步

找到「Site Language」(網站語言),選擇「繁體中文」。

網站語言繁體中文 1

第 3 步

再點擊「Save Changes」(儲存變更)。

儲存語言變更

介面變成中文,操作就更直覺方便了。

介面變成繁體中文

第 4 步

繼續修改「網站標題」跟「網站說明」,也就是網站的名稱跟簡介,它們會顯示在搜尋結果和瀏覽器的標籤頁中

修改網站標題跟說明

第 5 步

調整時區以及時間、日期的顯示格式。

  • 時區:依你的所在位置填寫 (範例:台北)
  • 日期格式:「Y 年 n 月 j 日」(範例:2024 年 8 月 21 日)
  • 時間格式:「a g:i」(範例:上午 2:17)
一般設定調整時間顯示方式

第 6 步

點擊「儲存設定」。

儲存一般設定

步驟 3:修改網站設計

安裝 Blocksy 佈景主題

第 1 步

左側欄位切換到「外觀」、「佈景主題」。

外觀佈景主題

透過修改佈景主題,我們可以輕鬆地更換網站的版型、設計

網站版型設計

在試用過各種佈景主題之後,我最推薦免費的 Blocksy 主題!

這個主題風格簡約,但功能非常強大,這個「諾特斯網站」也是使用 Blocksy 主題製作的。

推薦 Blocksy

第 2 步

點擊下方連結,前往 Blocksy 官方網站。

第 3 步

點擊網頁右上角的「Free Download」(免費下載)。

Blocksy 免費下載

第 4 步

點擊「Download」(下載) 取得 zip 檔。

下載 Blocksy zip 檔

第 5 步

回到 WordPress 後台,點擊「Upload」(上傳)。

上傳佈景主題

第 6 步

將下載到的 zip 檔拖曳進來。

拖曳佈景主題 zip 檔

第 7 步

點擊「立即安裝」。

立即安裝佈景主題

第 8 步

安裝完成後,點擊「啟用」。

安裝完成點擊啟用

第 9 步

另外再安裝附加外掛 Blocksy Companion,可以讓 Blocksy 主題的功能更進化。

安裝附加外掛 Blocksy Companion

套用模板 (入門網站)

網站的版型可以點擊「入門網站」,套用主題提供的現成模板,來節省設計的時間。

套用模板 入門網站

我挑選的是「Blog」(部落格) 分類裡的「News」(新聞)。

點「預覽」可以看到,它的版面簡潔,頁首、頁尾、資訊欄這些網站基本要素齊全,適合新手使用

選擇部落格 News
預覽部落格新聞

第 1 步

點擊「匯入」來套用模板。

匯入入門網站

第 2 步

安裝子佈景主題「打勾」,點擊「下一個」。

安裝子佈景主題打勾

第 3 步

再次點擊「下一個」。

安裝並啟用外掛

第 4 步

點擊「安裝」匯入模板。

點擊安裝外掛

編輯頁首、頁尾

第 1 步

模板成功匯入後,點擊「自訂器」,前往自訂器介面。

點擊前往自訂器

在自訂器中,可以調整網站的版型、設計。

在自訂器調整網站版型設計

第 2 步

滑鼠移到頁首的 LOGO 上,點擊彈出的「三個點」圖示,叫出「標誌」選項。

點擊三個點叫出標誌選項

第 3 步

選擇標誌的「編輯」。

選擇標誌編輯

第 4 步

將自己的 LOGO 圖片拖曳進來上傳。

拖曳標誌圖片上傳

第 5 步

按「Select」(選擇) 來替換。

點擊選擇替換標誌

第 6 步

為了保持畫面簡潔,頁首我只會保留標誌跟選單。

所以要在畫面下方的編輯器,將其他元素都一一按「✕」刪除。

頁首只保留標誌跟選單

第 7 步

向下滑到最底部的頁尾,我只會留下版權聲明。

點擊「編輯」,也是一樣刪掉不需要的元素。

編輯頁尾區域
頁尾只保留版權聲明

第 8 步

再點擊「版權」。

點擊頁尾版權

第 9 步

修改版權文字,通常會寫成以下形式:

版權所有© + 年份 + 品牌名稱

修改版權文字 推薦格式

我再來提倡一個諾特斯觀眾之間的小默契,你可以在頁尾的地方,加上「✏️」這個 Emoji,也就是諾特斯觀眾的秘密記號

有加這個秘密記號的人,都有著一段看諾特斯的影片或文章,架設網站的共同回憶。

以後看到頁尾有這個秘密記號的網站,就知道是自己人,大家可以互相照顧一下。

頁尾加入諾特斯觀眾小默契

其實在自訂器中,除了我示範操作的項目以外,還有非常多可以修改的細節,大家有時間可以多探索看看,打造出自己風格的網站設計

第 10 步

完成設計後,按左上的「發佈」儲存設定。

點擊發佈儲存設定

第 11 步

最後,按「✕」退出自訂器。

按 X 退出自訂器

步驟 4:發佈第 1 篇文章

網站的外觀設計都搞定後,接下來要來發佈網站的第 1 篇文章。

刪除預設文章

第 1 步

從左側欄位切換到「文章」、「全部文章」。

發佈網站第 1 篇文章

第 2 步

「全選」安裝模板時匯入的預設文章。

全選預設文章

第 3 步

按「批次操作」,選擇「移至回收桶」。

批次操作移至回收桶

第 4 步

點擊「套用」把它們都刪除。

套用刪除文章

編輯文章

點擊「新增文章」,打開 WordPress 編輯器。

新增文章

WordPress 編輯器的使用方式其實跟 Word 之類的文書軟體差不多,最上面要輸入標題。

編輯器最上面打標題

下方輸入文章內容,文字可以變更對齊、顏色、粗體等等的設定。

輸入內容編輯文字樣式

插入圖片

除了文字,文章中也可以插入圖片做搭配,增添內容的多樣性。

第 1 步

點擊「+」,選擇「圖片」。

點擊 選擇圖片

第 2 步

選擇「媒體庫」。

點擊媒體庫

第 3 步

拖曳圖片檔案上傳。

拖曳文章圖片檔案上傳

第 4 步

點擊「選取」,將圖片加入文章中。

點擊選取將圖片加入文章中
圖片加入文章成果

這次只簡單說明圖文的編輯方式,其實編輯器裡還有很多不同功能的區塊可以運用,等著大家以後去挖掘!

發佈文章

文章寫好了,就按右上角的「發佈」。

文章完成點右上角發佈

再按一次「發佈」做確認。

再按一次發佈做確認

跳出的視窗選「Publish without launching」(發佈但不啟動),表示將文章先發佈到網站上,但網站目前尚未公開。

點擊發佈但不啟動

步驟 5:公開網站

終於來到最後 1 個步驟了!

按右上角的「WordPress」圖示回到後台。

點擊右上角 WordPress 圖示

點擊右上角的「Site Status: NOT LIVE」(網站狀態:未上線)。

點擊網站狀態未上線

把「Coming Soon page」(即將上線頁面) 選項「關閉」,就能把網站公開到網路上了。

關閉即將上線頁面選項

如此一來,在任何瀏覽器的網址列輸入你的域名,都可以訪問你的網站,看到你寫的文章囉!

網址列輸入域名訪問網站

結語:跟著諾特斯快速架站

以上就是如何快速建立網站的方法,是不是很簡單呢?

如果你想知道更多有關網站架設的細節,歡迎觀看我用心製作的其他 WordPress 筆記。

WordPress 網站架設教學總整理的精選圖片

WordPress 新手教學 (總整理)

希望這樣的教學對你有所幫助,祝你架站一切順利!


參考資料

製作團隊

總編輯、發佈:諾特斯
文字撰寫、文字編輯、圖片製作、圖片編輯:鹹魚
圖片製作:蚊子