想要打造成功、可觸及全球的品牌,就必須擁有專業且具吸引力的網站!而 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 是全球知名的網頁設計軟體,全球有 40 % 以上的網站,都來自於 WordPress。更多 WordPress 是什麼 。
擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選,請參考 優質佈景主題 和 優質外掛推薦,會給你應該的幫助。
WordPress 可完成多種網頁設計,如:部落格架設、個人品牌或公司企業官網、購物網站架設 等 ..
最大好處是,它是免費開源的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。
且不會因為任一網頁製作平台的營運問題,造成網站消失(舉例來說,無名小站結束營運,原來的內容也隨著關站而消失,但這不會發生在 WordPress 身上)。
因為你就是網站的擁有者!
架設網站前的必備三要素
架設網站 3 要素 | |||
---|---|---|---|
1. 網域申請 (申請門牌) |
2. 主機租用 (租一塊地) |
3. 網頁設計 (搭建房子) |
開始架設網站前,讓我們先來了解網站是由什麼組成的吧!
基本上,網站是由「 網域 」、「 主機 」和「 網頁設計 」這 3 個要素組成。「 網域 」就像家的門牌一樣,讓人可以順利找到你的網站。
「 主機 」則是蓋房子的土地,用來存放網站的數據資料。有了網域(門牌)和主機(土地)後,就可以開始來進行網頁設計(蓋房子)囉!
ㄧ、網域名稱選擇與購買
選擇合適的網域名稱是架設網站的重要關鍵之一。通常會使用品牌名作為網址,以增加辨識度。
建議優先選擇 .com 頂級網域,例如「 apple.com 」、「 nike.com 」。簡單來說,網域取名要以簡單、易記、有辨識度為主。
想好網域名稱後,就可以向網域商購買網域。你可以透過 Gandi、Namecheap 或 GoDaddy 等知名網域註冊商申請網域,或是查詢網域是否被註冊過。
另外,許多虛擬主機公司,也有提供網域註冊申請服務,讓你一站完成網域+主機申請,架站更快速方便。
我會建議挑選國外知名的網域商,因為公司規模大、網址種類更多,且網域通常較便宜,能給予站長更多的服務&保護。更多 網域申請教學。
二、虛擬主機推薦
為了讓網站能順利運行,選擇優質的主機是重要且不能馬虎的決定!
網站主機的品質,將影響網站的速度、安全性與穩定性,選擇優質的主機,才能確保用戶獲得良好的使用體驗。更多 虛擬主機推薦。
不同的主機公司提供的主機空間、流量和價格,都有所不同。在選用主機方案時,需確保方案提供足夠的空間資源,讓網站順利執行,避免影響網站速度。更多 網站速度測試工具。
建議新手先選擇共享主機,除了主機費用便宜,操作也較簡單好上手,可以快速完成 WordPress 網頁設計。
隨著 WordPress 用戶越來越多,許多虛擬主機公司,紛紛著手開發「 WordPress主機 」,主打一鍵安裝 WordPress 軟體、WordPress 速度優化、WordPress 搬家等功能。
像是 WordPress.org 官方推薦的 Bluehost 主機,不論是價格、速度等都讓人滿意,且操作介面很容易上手,對於新手站長來說,是個非常棒的入門選擇。更多 Bluehost 教學。
三、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.org 下載軟體檔,搭配 FTP 軟體進行手動安裝。
- 挑選喜歡的主題:WordPress 有上萬種免費、付費佈景主題,可直接安裝套用,且客製化程度高,能輕鬆打造充滿設計感的網頁。
- 安裝需要的外掛:WordPress 上萬種外掛,可以幫助你強化網站功能,包含 速度優化外掛、資安外掛、表單外掛 等。
- 進行頁面設計 / 編輯:WordPress 預設的區塊編輯器就能進行網站頁面設計。許多 WordPress 站長還會搭配熱門的頁面編輯器(如:Elementor、Divi)製作更豐富的頁面內容。
- 網站完成發布:確認所有內容與設定無誤後,點擊發布就能讓網站正式上線,供世界各地的用戶瀏覽啦!
使用 WordPress 開始製作網站
這一章節將手把手帶大家開始製作 WordPress 網頁設計,從安裝主題、調整外觀,到文章功能、頁面編輯器教學,帶你一次上手 WordPress 操作!
選擇與安裝適合主題
選擇適合品牌的佈景主題,對品牌形象非常重要。網站主題不僅決定了網站的美觀程度,也影響了網站的易用性。
站長可以登入 WordPress 後台,前往外觀 > 佈景主題 > 安裝佈景主題,瀏覽上萬種優質主題,找到喜歡的後,直接安裝套用。更多 WordPress 主題安裝教學。
在挑選主題時,可以考量以下幾點:
- 下載次數:高下載量通常代表主題的品質穩定,受多數人喜愛,比較不會有問題。
- 使用者評價:下載前先確認其他使用者留下的星級評分&評論,可有效避免踩雷。
- 更新頻率:建議選擇有在定期更新的主題,可確保相容性與安全性。
- 功能:確認主題支援的排版功能&客製程度,以利後續進行客製化設計調整。
另外,也建議站長們挑選輕量的佈景主題,避免影響網站載入速度,拖垮網站 SEO 表現。
推薦站長選用 Astra、OceanWP、Blocksy 等輕量主題,這些主題都使用了優質的程式編碼,在多個速度評測軟體上,都有著優異的表現。
站長可以在搜尋欄位輸入主題名稱(如:Astra),就能找到主題並點擊安裝。
小備註:主題安裝完成之後,還要點擊「 啟用 」才能正式套用佈景主題。
啟用後,WordPress 後台會顯示正在使用的佈景主題,就代表成功啟用囉!更多 WordPress 佈景主題推薦。
主題設定與網站外觀調整
主題安裝完成後,就可以開始利用主題功能,進行網站外觀調整,製作客製化頁面樣式。
每種 WordPress 主題都有不同功能,像是版面配置、頁首頁尾編輯器、模板等,通常會顯示在 WordPress 側邊欄,站長們可以確認看看自己的主題有那些功能。
接下來會以 Astra 主題為例做介紹。Astra 有多種自定義選項,可充分設定網頁佈局,讓你的網站看起來更獨一無二。更多 Astra 主題教學、Astra Pro 教學。
包含網站頁首 / 頁尾修改、主視覺顏色調整、字體調整、選單佈局調整、各頁面版面配置等。
調整樣式的同時,可同步預覽修改效果,確認網站最終呈現樣貌,設計起來更有效率。
此外,Astra 還提供 Starter Templates 模板外掛,裡面有上百種風格模板(免費&付費),只需一鍵套用,就能獲得高品質的 WordPress 網頁設計!
文章功能發布與分類管理
完成基本的頁面設計後,接著就要來新增文章,以豐富網站內容。站長可以前往 WordPress 後台 > 文章 > 新增文章,開始撰寫。更多 文章和頁面差別。
WordPress 預設的區塊編輯器,可以幫助站長撰寫文章時,快速插入圖片、標題、按鈕等區塊,打造豐富的文章內容。
站長不需會任何程式碼,只要點擊功能按鈕,就能輕鬆完成一篇文章。
在撰寫的過程,可善用右上角「 儲存草稿 」保存辛苦作業的成果。如果都確認沒問題,再點擊「 發佈 」或「 排程 」按鈕,就可順利發佈 WordPress文章囉!更多 WordPress 文章教學。
另外,WordPress「 分類 」和「 標籤 」功能,還能幫助站長整理網站的所有文章,將文章放置在指定分類下。
站長們可在文章內新增&設定分類,或是前往 WordPress 文章 > 分類 / 標籤,新增分類或標籤,依照自身需求設定即可。
新增完分類後,可以再透過 區塊小工具,將分類列表安插至網站側邊欄,讓用戶更容易找到想看的主題,進而提升網站 SEO!
Elementor 頁面編輯器教學
除了 WordPress 預設的區塊編輯器外,多數站長會再搭配頁面編輯器外掛(如:Elementor、Divi),製作更豐富的版面。
Elementor 是最受歡迎的 WordPress 頁面編輯器之一,內建多種美觀模板,點擊按鈕就能套用,再從中調整,改成符合品牌的風格,就能節省大量的網站架設時間。更多 Elementor 教學。
Elementor 提供多種設計小工具,像是圖片、按鈕、輪播區塊、表單等,站長只需要將想要的元素,拖拉至指定位置即可。
之後可再針對元素調整大小、間距、顏色或動畫效果,享受高度自由的編輯體驗。
若你想架設購物網站,Elementor 針對 WooCommerce 電商外掛 也有良好的支援。除了一般的頁面設計,還能客製化購物結帳頁面。
Elementor 有免費版方案可使用,推薦站長們可以試試!如果感覺不錯用且有更多設計上的需求,再升級為進階版就好囉!更多 Elementor Pro 教學。
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 架設購物網站,站長可以自由新增電商外掛,強化網路商店功能,輕鬆架設專業的電商網站。
電商外掛能提供購物車整合、訂單管理、會員管理、折價券等功能,讓你用最少成本開設網路商店,不用被其他電商平台綁架。
推薦外掛:
- WooCommerce:WordPress 旗下最知名的電商外掛,免費的軟體加上安裝快速,在全球各地累積許多使用者,是世界排名前幾的電商系統。更多 WooCommerce 教學。
- MailChimp:最受歡迎的電子郵件行銷的軟體之一,軟體的使用體驗良好,功能非常齊全且有免費版方案。
不論你是架設 WordPress 形象網站、部落格網站或購物網站,都可以搭配合適的 WordPress 外掛,強化網站功能,讓網站更完美!
結論
許多新手小白在學習架站時,最擔心複雜的操作難以上手,WordPress 就是個很好的解決方案。
除了後台介面直覺、易上手,還有龐大的佈景主題&外掛,能幫助站長架設多功能網站,滿足各種網站的需求。
再搭配像 Elementor 這類的頁面編輯器,讓網站設計變得更簡單、靈活,即使是零程式碼概念的新手,也能變架站專家!
最重要的是,WordPress 核心軟體本身是開源免費的,這代表你可以用最少的費用(只需主機+網域費用),打造屬於自己的品牌網站。
而且也能擁有完整的網站自主權,不用再被網頁設計公司侷限功能,更不需擔心平台公司倒閉,連帶讓自己長期經營的心血白費。
總結來說,WordPress 是目前最熱門&好用的架站工具,網路上的 WordPress 教學資源也很多,可以從中免費學習架站,非常推薦!
常見問題
WordPress 免費?
WordPress 核心軟體本身是開源免費的,你可以用最少的費用(主機+網域費用),打造屬於自己的品牌網站。但如果需要使用進階的主題、外掛,可能會需付額外費用。
沒有程式設計基礎,適合使用 WordPress 架站嗎?
非常適合!WordPress 介面直覺、易上手,還有龐大的佈景主題&外掛,能幫助你架設多功能網站,即使是零程式碼概念的新手,也能變架站專家!
WordPress 可以架設購物網站嗎?
沒問題!使用 WordPress 架設購物網站,可以搭配電商外掛(如:WooCommerce),強化網路商店功能,輕鬆架設專業的電商網站,讓你用最少成本開設網路商店。
聯絡犬哥網站
在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。
資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)
如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!
我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!
資源二:WordPress+SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!