【WordPress 網頁設計】實戰教學,手把手帶你打造專屬網站!

【WordPress 網頁設計】實戰教學,手把手帶你打造專屬網站!

想要打造成功、可觸及全球的品牌,就必須擁有專業且具吸引力的網站!而 WordPress 是許多公司首選的架站方式。更多 網頁設計公司推薦

WordPress 網頁設計不僅操作簡單,還具備高客製化的功能,幫助你打造符合品牌形象的網站。

無論是 WordPress 形象網站、部落格或是 購物網站,都能透過豐富的主題外掛,輕鬆架設吸睛且功能完善的網頁,讓你在市場中脫穎而出。

這篇文章有詳細的 WordPress 網站設計教學,從網頁設計流程到 WordPress 外掛推薦,手把手帶你挑選適合的主機網域&安裝主題外掛,用最快、最簡單的方式架站。

準備好就開始吧:)


如何學習 WordPress 網頁設計?

WordPress 網頁設計教學:如何架設網站+完整官網製作(不懂程式也做得到)

1. 影片提到的資源連結

2. 影片描述

這是一篇完整的「 網站架設 」教學課程,建置觀念到製作流程,一次學會。

想自己架設網站,如:部落格架設、形象官網製作、購物網站架設、個人或公司網站設計等 ..?

這篇網站設計教學,我會用 WordPress 為主軸進行教學,它是一款全球熱門的網頁製作平台,很適合新手架站。

就算你不懂任何程式,也能跟專家一樣,架設完美的個人網站!

3. 影片時間軸

  • 00:00:58 – 架設網站 3 要素
  • 00:04:09 – 虛擬主機推薦
  • 00:20:38 – Bluehost 其他設定
  • 00:25:17 – WordPress 基礎設定
  • 00:30:34 – 主題安裝+使用形象模板
  • 00:36:58 – 更改網站頁首
  • 00:44:41 – 新增文章列表&側邊欄設定
  • 00:49:05 – 新增第一篇文章
  • 00:54:54 – 網站分類&標籤
  • 00:56:56 – Elementor 頁面編輯器教學
  • 01:22:17 – 網頁區塊&小工具
  • 01:25:23 – 網站頁尾修改
  • 01:27:12 – 外掛推薦
  • 01:28:55 – 結尾總結

為什麼選擇 WordPress 來架設網站?

WordPress 網站使用人數(持續增加中)
WordPress 網站使用人數(持續增加中)

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

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選,請參考 優質佈景主題優質外掛推薦,會給你應該的幫助。

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

最大好處是,它是免費開源的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。

且不會因為任一網頁製作平台的營運問題,造成網站消失(舉例來說,無名小站結束營運,原來的內容也隨著關站而消失,但這不會發生在 WordPress 身上)。

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


架設網站前的必備三要素

架設網站 3 要素
1. 網域申請
(申請門牌)
2. 主機租用
(租一塊地)
3. 網頁設計
(搭建房子)

開始架設網站前,讓我們先來了解網站是由什麼組成的吧!

基本上,網站是由「 網域 」、「 主機 」和「 網頁設計 」這 3 個要素組成。「 網域 」就像家的門牌一樣,讓人可以順利找到你的網站。

「 主機 」則是蓋房子的土地,用來存放網站的數據資料。有了網域(門牌)和主機(土地)後,就可以開始來進行網頁設計(蓋房子)囉!

ㄧ、網域名稱選擇與購買

網域申請服務
網域名稱選擇與購買

選擇合適的網域名稱是架設網站的重要關鍵之一。通常會使用品牌名作為網址,以增加辨識度。

建議優先選擇 .com 頂級網域,例如「 apple.com 」、「 nike.com 」。簡單來說,網域取名要以簡單、易記、有辨識度為主

想好網域名稱後,就可以向網域商購買網域。你可以透過 GandiNamecheapGoDaddy 等知名網域註冊商申請網域,或是查詢網域是否被註冊過。

另外,許多虛擬主機公司,也有提供網域註冊申請服務,讓你一站完成網域+主機申請,架站更快速方便。

我會建議挑選國外知名的網域商,因為公司規模大、網址種類更多,且網域通常較便宜,能給予站長更多的服務&保護。更多 網域申請教學

二、虛擬主機推薦

挑選主機的技巧 :主機性能好
虛擬主機推薦

為了讓網站能順利運行,選擇優質的主機是重要且不能馬虎的決定!

網站主機的品質,將影響網站的速度、安全性與穩定性,選擇優質的主機,才能確保用戶獲得良好的使用體驗。更多 虛擬主機推薦

不同的主機公司提供的主機空間、流量和價格,都有所不同。在選用主機方案時,需確保方案提供足夠的空間資源,讓網站順利執行,避免影響網站速度。更多 網站速度測試工具

建議新手先選擇共享主機,除了主機費用便宜,操作也較簡單好上手,可以快速完成 WordPress 網頁設計。

隨著 WordPress 用戶越來越多,許多虛擬主機公司,紛紛著手開發「 WordPress主機 」,主打一鍵安裝 WordPress 軟體、WordPress 速度優化、WordPress 搬家等功能。

像是 WordPress.org 官方推薦的 Bluehost 主機,不論是價格、速度等都讓人滿意,且操作介面很容易上手,對於新手站長來說,是個非常棒的入門選擇。更多 Bluehost 教學

三、WordPress 安裝與設定教學

wordpress.org vs wordpress.com 比較:wordpress.org 架站平台
WordPress 安裝與設定教學

架設網站最重要也最辛苦的一步就是進行「 網頁設計 」,幸好 WordPress 能幫助我們更輕鬆、高效的設計網站。

即使你是零程式碼基礎小白,也能透過 WordPress 輕鬆架站!

如何安裝 WordPress?

安裝 WordPress 有兩種方式,一種是直接從 WordPress.org 下載軟體檔,搭配 FTP 軟體 進行手動安裝,但這種方法會比較慢一點,對新手來說也比較複雜。

最快、最適合新手的方法是透過主機安裝,多數主機(如:Bluehost、A2)都有內建 WordPress 快速安裝程式,只需登入主機後台,找到安裝 WordPress 按鈕,就能一鍵完成安裝囉!

如何設定 WordPress 後台?

安裝完成後,就可以登入 WordPress 後台進行基本設定,包含調整網站標題、語言、時區、永久連結設定等。

並在後台安裝適合的主題&外掛,讓網站功能更豐富、更漂亮。

此外,WordPress 文章管理、頁面管理功能,可以建立多個文章&頁面,並設定分類標籤,優化網站 SEO 結構。更多 SEO 是什麼

正確的完成 WordPress 後台設定,不僅能確保網站順利運行,也能為網站 SEO 打下良好的基礎。更多 WordPress 後台教學

【WordPress 後台教學】給新手的架站課程,完整網站實操!

WordPress 網頁設計流程,快速預覽!

WordPress 網頁設計流程
WordPress 網頁設計流程

在開始設計 WordPress 網站前,我們可以先來了解一下網頁設計流程,才能更順利的規劃網站。

以下為網站架設的幾個基本步驟,有助站長了解每個階段所進行的工作事項。

  • 安裝 WordPress 軟體:建議透過主機商後台,一鍵安裝 WordPress 網站。若主機商無此功能,可從 WordPress.org 下載軟體檔,搭配 FTP 軟體進行手動安裝。
  • 挑選喜歡的主題:WordPress 有上萬種免費、付費佈景主題,可直接安裝套用,且客製化程度高,能輕鬆打造充滿設計感的網頁。
  • 安裝需要的外掛:WordPress 上萬種外掛,可以幫助你強化網站功能,包含 速度優化外掛資安外掛表單外掛 等。
  • 進行頁面設計 / 編輯:WordPress 預設的區塊編輯器就能進行網站頁面設計。許多 WordPress 站長還會搭配熱門的頁面編輯器(如:Elementor、Divi)製作更豐富的頁面內容。
  • 網站完成發布:確認所有內容與設定無誤後,點擊發布就能讓網站正式上線,供世界各地的用戶瀏覽啦!

使用 WordPress 開始製作網站

這一章節將手把手帶大家開始製作 WordPress 網頁設計,從安裝主題、調整外觀,到文章功能、頁面編輯器教學,帶你一次上手 WordPress 操作!

選擇與安裝適合主題

前往安裝 WordPress 佈景主題
選擇與安裝適合主題

選擇適合品牌的佈景主題,對品牌形象非常重要。網站主題不僅決定了網站的美觀程度,也影響了網站的易用性。

站長可以登入 WordPress 後台,前往外觀 > 佈景主題 > 安裝佈景主題,瀏覽上萬種優質主題,找到喜歡的後,直接安裝套用。更多 WordPress 主題安裝教學

在挑選主題時,可以考量以下幾點:

  • 下載次數:高下載量通常代表主題的品質穩定,受多數人喜愛,比較不會有問題。
  • 使用者評價:下載前先確認其他使用者留下的星級評分&評論,可有效避免踩雷。
  • 更新頻率:建議選擇有在定期更新的主題,可確保相容性與安全性。
  • 功能:確認主題支援的排版功能&客製程度,以利後續進行客製化設計調整。

另外,也建議站長們挑選輕量的佈景主題,避免影響網站載入速度,拖垮網站 SEO 表現。

推薦站長選用 AstraOceanWPBlocksy 等輕量主題,這些主題都使用了優質的程式編碼,在多個速度評測軟體上,都有著優異的表現。

站長可以在搜尋欄位輸入主題名稱(如:Astra),就能找到主題並點擊安裝。

WordPress教學 :佈景主題搜尋+安裝
佈景主題搜尋+安裝

小備註:主題安裝完成之後,還要點擊「 啟用 」才能正式套用佈景主題。

啟用後,WordPress 後台會顯示正在使用的佈景主題,就代表成功啟用囉!更多 WordPress 佈景主題推薦

主題設定與網站外觀調整

主題安裝完成後,就可以開始利用主題功能,進行網站外觀調整,製作客製化頁面樣式。

每種 WordPress 主題都有不同功能,像是版面配置、頁首頁尾編輯器、模板等,通常會顯示在 WordPress 側邊欄,站長們可以確認看看自己的主題有那些功能。

接下來會以 Astra 主題為例做介紹。Astra 有多種自定義選項,可充分設定網頁佈局,讓你的網站看起來更獨一無二。更多 Astra 主題教學Astra Pro 教學

Astra 主題有多種自定義選項

包含網站頁首 / 頁尾修改、主視覺顏色調整、字體調整、選單佈局調整、各頁面版面配置等。

調整樣式的同時,可同步預覽修改效果,確認網站最終呈現樣貌,設計起來更有效率。

Astra 自訂樣式,同步預覽修改效果

此外,Astra 還提供 Starter Templates 模板外掛,裡面有上百種風格模板(免費&付費),只需一鍵套用,就能獲得高品質的 WordPress 網頁設計!

Elementor教學 :使用 Astra 的 Starter Template 功能
Astra Starter Templates 外掛,提供多種模板安裝

文章功能發布與分類管理

完成基本的頁面設計後,接著就要來新增文章,以豐富網站內容。站長可以前往 WordPress 後台 > 文章 > 新增文章,開始撰寫。更多 文章和頁面差別

WordPress 預設的區塊編輯器,可以幫助站長撰寫文章時,快速插入圖片、標題、按鈕等區塊,打造豐富的文章內容。

WordPress文章 :新增段落
WordPress 區塊編輯器,可插入圖片、標題、按鈕等區塊,打造豐富的文章內容

站長不需會任何程式碼,只要點擊功能按鈕,就能輕鬆完成一篇文章。

在撰寫的過程,可善用右上角「 儲存草稿 」保存辛苦作業的成果。如果都確認沒問題,再點擊「 發佈 」或「 排程 」按鈕,就可順利發佈 WordPress文章囉!更多 WordPress 文章教學

另外,WordPress「 分類 」和「 標籤 」功能,還能幫助站長整理網站的所有文章,將文章放置在指定分類下。

站長們可在文章內新增&設定分類,或是前往 WordPress 文章 > 分類 / 標籤,新增分類或標籤,依照自身需求設定即可。

新增完分類後,可以再透過 區塊小工具,將分類列表安插至網站側邊欄,讓用戶更容易找到想看的主題,進而提升網站 SEO!

犬哥網站文章分類列表,顯示於網站側邊欄

Elementor 頁面編輯器教學

除了 WordPress 預設的區塊編輯器外,多數站長會再搭配頁面編輯器外掛(如:Elementor、Divi),製作更豐富的版面。

Elementor 是最受歡迎的 WordPress 頁面編輯器之一,內建多種美觀模板,點擊按鈕就能套用,再從中調整,改成符合品牌的風格,就能節省大量的網站架設時間。更多 Elementor 教學

Elementor教學 :切換到頁面類型
Elementor 內建多種美觀模板,點擊就能套用

Elementor 提供多種設計小工具,像是圖片、按鈕、輪播區塊、表單等,站長只需要將想要的元素,拖拉至指定位置即可。

之後可再針對元素調整大小、間距、顏色或動畫效果,享受高度自由的編輯體驗。

Elementor教學 :Elementor 面板介紹
Elementor 多個設計小工具,站長只需將元素拖拉至指定位置即可

若你想架設購物網站,Elementor 針對 WooCommerce 電商外掛 也有良好的支援。除了一般的頁面設計,還能客製化購物結帳頁面。

Elementor 有免費版方案可使用,推薦站長們可以試試!如果感覺不錯用且有更多設計上的需求,再升級為進階版就好囉!更多 Elementor Pro 教學


WordPress 外掛推薦

WordPress 外掛推薦

WordPress 外掛高達 5 萬多種,像是資安、網站速度、SEO 行銷、網站備份、電商等功能外掛,應有盡有。

以下針對各領域推薦幾個熱門、評價好的外掛,幫助站長們節省尋找外掛的時間。更多 WordPress 外掛推薦

SEO 優化

想讓網站在 Google 搜尋結果中脫穎而出,SEO 優化是不可或缺的關鍵。

透過專業的 SEO 外掛,站長可以輕鬆優化網站頁面標題、描述、適當安插關鍵字,提升網站排名&流量。更多 SEO 外掛推薦

推薦外掛:

  • Rank Math多種 SEO 功能,像是 SEO 分析、網站圖片優化、Schema 結構化資料、Sitemap 網站地圖生成、Woocommerce 網路商店優化等,幾乎都是免費版功能。更多 Rank Math 教學
  • Yoast老牌且熱門的 SEO 外掛,提供關鍵字優化、Sitemap 網站地圖生成、多種 Schema 結構化資料等功能,免費版就很足夠使用。

網站速度與效能

網站速度不僅會影響使用者體驗,也會影響搜尋引擎排名!

安裝快取、速度優化外掛,可減少伺服器負擔,確保網站載入流暢,提升使用體驗。更多 速度優化外掛推薦

推薦外掛:

  • WP Rocket想提升網頁速度,通常只需 WP Rocket 就能搞定一切。操作介面簡單,沒有任何 WordPress 快取使用經驗,也完全沒關係。更多 WP Rocket 教學
  • WP Fastest Cache提供基本的快取功能,像是全站頁面緩存、HTML / CSS 檔案壓縮、Gzip 壓縮、瀏覽器快取等。以免費版的角度來說,算是滿夠用的。

網站安全

網站安全是不可忽視的一環!若你的網站有任何安全漏洞,就很容易被駭客攻擊,讓網站崩潰,甚至降低你的品牌信譽。

WordPress 資安外掛通常提供防火牆、登入防護、惡意軟體掃描等功能,能有效防止網站被駭客入侵,確保使用者個資安全。

推薦外掛:

  • WordFence非常熱門的安全性外掛,提供多種網站資安防護,幫助站長抵擋外來的惡意攻擊。更多 WordFence 資安教學
  • iThemes Security提供 30 多種資安保護方法,操作介面很好理解,每個資安功能放在各自的區塊,點擊進入可編輯細項。

網站備份

網站若遭受駭客攻擊或是操作失誤,就有可能導致網站內容遺失,影響品牌營運。

透過定期備份網站,可以確保網站在遇到問題時,用最快的速度還原,避免長時間停機,確保網站穩定運行。

推薦外掛:

  • UpdraftPlus手動、定期自動備份網站,可單獨還原主題 / 外掛 / 上傳內容,進行網站搬家。免費版就能擁有大部分的重點功能。
  • WPvivid提供網站備份、網站還原、網站搬家等功能,核心功能幾乎都可以免費使用。更多 WPvivid 外掛教學

電商功能

使用 WordPress 架設購物網站,站長可以自由新增電商外掛,強化網路商店功能,輕鬆架設專業的電商網站。

電商外掛能提供購物車整合、訂單管理、會員管理、折價券等功能,讓你用最少成本開設網路商店,不用被其他電商平台綁架。

推薦外掛:

  • WooCommerceWordPress 旗下最知名的電商外掛,免費的軟體加上安裝快速,在全球各地累積許多使用者,是世界排名前幾的電商系統。更多 WooCommerce 教學
  • MailChimp最受歡迎的電子郵件行銷的軟體之一,軟體的使用體驗良好,功能非常齊全且有免費版方案。

不論你是架設 WordPress 形象網站、部落格網站或購物網站,都可以搭配合適的 WordPress 外掛,強化網站功能,讓網站更完美!


結論

WordPress 網頁設計教學結論

許多新手小白在學習架站時,最擔心複雜的操作難以上手,WordPress 就是個很好的解決方案。

除了後台介面直覺、易上手,還有龐大的佈景主題&外掛,能幫助站長架設多功能網站,滿足各種網站的需求。

再搭配像 Elementor 這類的頁面編輯器,讓網站設計變得更簡單、靈活,即使是零程式碼概念的新手,也能變架站專家!

最重要的是,WordPress 核心軟體本身是開源免費的,這代表你可以用最少的費用(只需主機+網域費用),打造屬於自己的品牌網站。

而且也能擁有完整的網站自主權,不用再被網頁設計公司侷限功能,更不需擔心平台公司倒閉,連帶讓自己長期經營的心血白費。

總結來說,WordPress 是目前最熱門&好用的架站工具,網路上的 WordPress 教學資源也很多,可以從中免費學習架站,非常推薦!


常見問題

WordPress 免費?

WordPress 核心軟體本身是開源免費的,你可以用最少的費用(主機+網域費用),打造屬於自己的品牌網站。但如果需要使用進階的主題、外掛,可能會需付額外費用。

沒有程式設計基礎,適合使用 WordPress 架站嗎?

非常適合!WordPress 介面直覺、易上手,還有龐大的佈景主題&外掛,能幫助你架設多功能網站,即使是零程式碼概念的新手,也能變架站專家!

WordPress 可以架設購物網站嗎?

沒問題!使用 WordPress 架設購物網站,可以搭配電商外掛(如:WooCommerce),強化網路商店功能,輕鬆架設專業的電商網站,讓你用最少成本開設網路商店。


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!

犬哥網站|台北網頁設計&SEO 行銷公司
犬哥網站|台北網頁設計&SEO 行銷公司

資源二:WordPress+SEO 超強線上課程

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

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

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

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

關於作者

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

犬哥網站

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

發佈留言

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

返回頂端