WordPress 網頁設計步驟全解,帶你5分鐘學會WordPress架站! — Website Builder

2023/10/03閱讀時間約 20 分鐘

隨著數位時代的深入發展,建立並營運自己/企業/品牌的專業網站已經變得十分重要。無論你是自由職業者、企業經營者還是品牌主理人,只要你想在網路上表達個人看法、推廣公司業務、宣傳品牌形象,擁有一個與眾不同的網站都能讓你在眾多競爭者中脫穎而出。

那網站架設可以怎麼做呢?如果你想低成本高效益架站,並且可以隨時自定義自己的網站,那麼我們強烈建議你選擇WordPress 這個多功能網站架設+網頁設計平台。這是一款能幫助你輕鬆建立網站的工具。

在這篇文章中,我們將為你解析 WordPress 網頁設計的每一個步驟,讓你在5分鐘內學會 WordPress 架站!無需專業的程式設計知識,只要一步步跟隨我們的指南,你就能擁有自己專屬的強大功能網站。

本文轉載自WordPress 網頁設計步驟全解,帶你5分鐘學會WordPress架站!

請點擊以上鏈接閱讀完整原文,學會高效網站架設!

架站準備及平台

架站前期準備工作

架設一個網站的三要素是:網域名稱 (Domain Name)、網站主機 (Web Hosting)、以及網站內容 (Website Content)。以下是關於這三要素的準備工作:

  • 網域名稱 (Domain Name):網域名稱是你網站的網址,例如 “www.yourwebsite.com"。選擇一個好的網域名稱是非常重要的,因為它不僅是你的品牌的一部分,也是用戶找到你網站的方式。你可以在NameCheap等的域名註冊商購買你的域名。
  • 網站主機 (Web Hosting):網站主機是存儲你的網站內容的地方,並讓用戶可以訪問這些內容。選擇一個好的網站主機供應商可以確保你的網站的速度和穩定性,你可以使用例如HostGatorBluehostKinsta等的虛擬主機。
  • 網站內容 (Website Content):你的網站內容和網頁設計是吸引並留住用戶的關鍵。無論你的網站是提供產品、服務,或是資訊,你都需要提供高質量且有價值的內容。通常,我們使用內容管理系統(CMS)去管理所有網站內客及架設網站,而最多人使用的CMS平台就有WordPress

網站架設平台 — WordPress

WordPress 是一款開源的內容管理系統(CMS),從業餘愛好部落格到最大型的新聞媒體,世界上有 43% 的網站採用 WordPress 進行建置。由於其高度的靈活性和易用性,以及其大量的主題和插件,WordPress 成為了個人、初創公司、大型企業,或者是新聞機構等各種使用者的首選。

WordPress.org 和WordPress.com 的差別

但要註意,市面上的WordPress 有兩個版本:WordPress.com 和 WordPress.org。 我們更推薦使用的是WordPress.org的免費開源版本

WordPress.org 是自託管的全免費版本,提供更高的網頁設計自定義可能性,同時你也可以擁有全部的網站架設權,可自由在網站上進行商業活動,但需要你自行購買主機和域名(使用 HostGator、 Bluehost 等主機服務即可輕鬆解決)。

而 WordPress.com 是一種月費形式的託管服務,由 Automattic 公司運營。你可以在此平台上創建並管理網站,而無需自行處理網站託管、安全性、備份或更新等問題。WordPress.com 提供多種產品和服務,包括域名註冊、網站建設工具、專業電子郵件、網站設計服務等。然而,WordPress.com 的自訂性有限,免費計劃中不允許使用者安裝自訂插件或主題,在網站架設上有較多局限性。

託管/主機服務

WordPress.com 提供託管服務,你的網站將在其伺服器上運行。

你可以在所選擇的WordPress網站託管商主機(如 HostGator、 Bluehost、 Kinsta 等)上一鍵安裝和運行自己的WordPress.org網站。

價格

WordPress.com 有免費的基礎方案,但使用進階功能和設定需要購買付費方案。

WordPress.org 系統使用是全免費的,你只需要購買網站託管和網域名稱。

自訂和靈活性

WordPress.com 的自訂性較低,並且在免費方案中,你不能安裝插件或使用自訂主題。

WordPress.org 提供無限自訂性和靈活性,你可以安裝任何主題或插件,也可以修改網站的程式碼。

維護和更新

WordPress.com 會統一處理所有的網站維護和更新,包括安全性、備份和速度優化。

在 WordPress.org,你需要自行處理網站維護和更新,這可能需要一些技術知識,不過大部分主機託管商都提供維護更新服務。

賺錢機會

在WordPress.com,你只有購買某些付費方案中才有網站廣告收益。

使用 WordPress.org,你可以在網站上放置任何廣告,並通過各種方式來賺取收益。

電子商務功能

WordPress.com 支援簡單的電子商務功能,但可能不適合架設大規模線上商店。

你可以透過WordPress.org的WooCommerce 插件來建立強大的線上商店。

總的來說,如果你正在尋找具備高度自訂性且便捷操作的網站架設+網頁設計解決方案,並且利用HostGator、Bluehost或Kinsta等去處理一些如網站託管和維護等技術性問題,那麼 WordPress.org 是最佳選擇。你可以通過其完全控制你的網站,並且進行深度網頁設計定制。最重要的是,你可以安裝任何需要的功能插件,讓你的網站擁有更多樣的功能。

並且,你也不用過於擔心網站的主機託管問題,Hostgator 和Kinsta 作為熱門的主機服務託管商,都提供WordPress.org 專用主機服務,可以讓你放心購買主機、註冊域名並提升網站效能。我們也為你準備了Hostgator 和Kinsta 功能介紹說明:

HostGator 是一家提供各種主機服務的公司,包括共享主機、專用主機和 VPS 雲主機,也提供專門的WordPress 主機計劃,為你優化WordPress網站性能及穩定性。HostGator 的優勢包括:

  • 提供多樣化且高性價比的WordPress 主機計劃選擇,尤其適合新手進行WordPress架站
  • 承諾 99.9% 的運行時間,並提供每天 24 小時的客戶服務技術支援
  • 提供免費網站遷移服務和一年的免費域名服務,方便你將現有的 WordPress 網站轉移到 HostGator
  • 提供一鍵 WordPress 安裝功能,讓你方便快捷進行WordPress網站架設和管理
raw-image

Kinsta 是一家專門提供高性能 WordPress 主機服務的公司,適用於多類型的WordPress 網站,如大型企業、管理機構、電商業務、非營利組織、獨立站等,為WordPress 提供了網站免費遷移服務和全方面的使用教程。Kinsta 的優勢包括:

  • 提供極高的性能和速度,能夠滿足WordPress 高流量網站的運行需求
  • 提供專門的 WordPress 安全性措施,包括防火牆、惡意程式掃描和 DDoS 防護
  • 提供每日自動備份和一鍵恢復功能,確保你的WordPress 網站數據安全
  • 提供專門的 WordPress 專家技術支援團隊,包括網站問題的排查和解決
raw-image

Hostgator 和Kinsta 都為你使用WordPress.org 架設網站提供了可靠且便捷的主機托管服務,你可以根據自己的網頁設計具體需求和預算進行選擇。你也可以先試用其方案,Hostgator 和Kinsta 都提供了 30 退款保證服務和免費試用,讓你可以更自由放心地進行選擇合適主機計劃。

接下來,我們將為你詳細介紹 WordPress.org 的功能特色和具體網頁設計流程,讓你能夠掌握通過WordPress 進行低成本高效益的網站架設方法。

WordPress 優點及作用

總的來說,無論你是創建個人博客,還是為你的業務建立功能全面的電子商務網站,WordPress 都是你進行網頁設計的首選。

網頁設計的重要性

網頁設計對於一個網站的成功與否起著至關重要的作用。以下是網頁設計重要性的幾個主要原因:

raw-image

總的來說,優秀專業的網頁設計不只是為了美觀,更是為了提升使用者體驗、提高搜索引擎排名、提升轉化率,以及強化品牌形象。

WordPress 知名網頁設計範例

WordPress 適合哪種類型的網頁設計?

WordPress 是一個非常靈活且功能豐富的內容管理系統(Content Management System, CMS),它適用於設計各種類型的網站。以下是一些常見的可以用 WordPress 建立的網站類型:

  • 部落格(Blogs):WordPress 最初是作為一個部落格平台而創建的,所以它對於部落格來說是一個非常強大的工具。用戶可以輕鬆地發布和管理文章,並且可以使用各種主題和插件來自訂他們的部落格。
  • 企業網站:WordPress 也適合建立企業網站。有許多專為企業設計的 WordPress 主題,包含了所有企業可能需要的功能,如自訂首頁、產品和服務頁面、關於我們頁面、聯繫我們頁面等。
  • 電子商務網站:透過像是 WooCommerce 這樣的插件,WordPress 可以變成一個功能強大的電子商務平台。用戶可以輕鬆地添加和管理產品,設定付款和運送選項,以及處理訂單和庫存。
  • 新聞和雜誌網站:由於 WordPress 的高度可自訂性和強大的內容管理功能,它也常被用來建立新聞和雜誌網站。
  • 社區和討論區網站:透過像是 BuddyPress 這樣的插件,WordPress 也可以建立社區和討論區網站,用戶可以註冊賬號、發布訊息、與其他用戶互動等。
  • 學習管理系統:有許多 WordPress 插件,如 LearnDash 和 Sensei,可以讓你在 WordPress 上建立一個完整的學習管理系統,提供線上課程給學生。
  • 個人網站和作品集:WordPress 的高度自訂性也使其成為建立個人網站和作品集的理想選擇。
raw-image

總的來說,由於 WordPress 的靈活性和豐富的插件選擇,它可以適應各種不同的需求,並用於建立幾乎任何類型的網站。

WordPress 知名網站

WordPress是一個強大且靈活的內容管理系統,許多知名的網站都採用WordPress作為其平台。以下是一些使用WordPress的知名網站範例:

TechCrunch(科技新聞網站)

TechCrunch 成立於 2005 年 6 月 11 日,是一個致力於分析和評論新網路產品和公司的部落格網站,提供科技新聞和分析等線上出版物,特別專注於新興的科技公司、新產品和新技術趨勢,還介紹對新網路空間產生影響(商業/文化)的現有公司。

Vogue(雜誌網站)

Vogue 是一本全球知名的美國時尚與生活風格雜誌,由康泰納仕每月出版。訪客可以在其網站探索各種主題的文章和畫廊,包括時尚趨勢、名人新聞和生活方式建議。Vogue.com 設有專門討論美容與健康、婚禮、旅行和家居裝飾的版塊,以及購物網站,讀者還可以在其中購買特色產品。

Vogue.com 也提供印刷雜誌的數位版以及獨家採訪和幕後影片等線上內容,是一個使用 React 和 WordPress Rest API 技術建立現代網站的優秀案例。

BBC America(電視網站)

BBC America的網站也使用WordPress 進行架設,提供電視節目時間表、全集視頻和最新新聞等內容。BBC America 呈現英國最好的節目和開創性的美國原創節目,是來自大洋兩岸的精彩電視節目大本營,采用了WordPress 多站點安裝,且每個站點都有自己的子主題,由WordPress 主框架提供支援。

PlayStation Blog(企業部落格)

PlayStation官方部落格也使用WordPress進行架設,發布關於PlayStation產品和遊戲的最新新聞和公告。官方 PlayStation Blog 是 PlayStation 體驗創造者直接與遊戲玩家和粉絲溝通交流的地方。

這些例子展示了WordPress的多樣性和靈活性,無論是新聞出版、個人部落格、企業網站,還是電視網或名人網站,WordPress都可以為其網站架設提供強大功能和高度自訂性。

選擇和設定WordPress主題

如何選擇適合的 WordPress 主題

選擇一個適合的 WordPress 主題是創建網站的重要步驟。以下是一些在選擇主題時需要考慮的因素:

WordPress主題目錄 是 WordPress 主題的官方網站。目錄中的每個主題都由專門的團隊審核,並根據廣泛的規則進行測試,所有這些都確保主題使用者獲得安全和愉快的體驗。

目錄中有超過 9,000 個主題,你可以使用佈局、主題和特定主題功能的過濾器,透過進階搜尋功能輕鬆找到適合你網站的主題。這包括尋找支援完整網站編輯功能的區塊主題。

如何安裝及設定你的主題

你可以使用【外觀】子菜單中的【添加新選項】將WordPress 主題目錄中的任何主題直接下載到你的網站。

  1. 登錄 WordPress管理屏幕。
  2. 選擇【外觀】屏幕,然後選擇【主題】。
  3. 選擇【新增主題】。
  4. 使用【搜索】或【過濾選項】來查找你想要使用的主題。
  5. 單擊【預覽】鏈接預覽主題或單擊【安裝】鏈接將主題上傳到你的網站站點。
  6. 或者使用頁面頂部的【上傳主題】按鈕上傳你之前下載到計算機的主題的壓縮副本。
  7. 當主題已下載但未激活時,【實時預覽】選項將為你提供站點的預覽以及你自己的現有內容。

下載後符合需求的網站佈景主題後,你還需要進行激活才能正式使用這個佈景主題:

  1. 在 WordPress用戶管理介面,點擊【外觀】並選擇【主題】。
  2. 你可以在這裡看到【/wp-content/themes/】目錄中的所有主題,並且從這裡你可以通過單擊【主題詳細信息】(將鼠標懸停在主題縮略圖上)來查看每個主題的詳細信息。
  3. 【實時預覽】選項將為你提供網站內容的預覽。
  4. 單擊【激活】按鈕,啟用主題,你的選擇將立即生效。
  5. 當主題被激活時,這意味著該主題的樣式和功能(外觀和行為)將應用於你的網站。你將收到有關成功激活主題的管理通知。

主題被啟用後,你可以點選【自訂】來設定你的主題詳細內容,例如網站的標題和副標題、顏色方案、字體、背景圖片、導航菜單、小工具等。

每個主題的設定選項可能會有所不同,因此你可能需要花一些時間來熟悉你的新主題的所有選項。以下是一些常見的設定項目:

設定好你的主題後,記得點擊【發佈】來保存你的所有變更。

這些都是安裝和設定 WordPress 主題的基本步驟。不過,每個主題可能都有其獨特的設定項目和功能,因此在你開始使用一個新主題時,可以花一些時間來熟悉它的所有選項和功能。

使用插件擴展功能

WordPress 網頁設計必備插件

WordPress 插件可以擴展你的網站的功能和設計。以下是一些常見的 WordPress 網頁設計必備插件:

Elementor

Elementor 作為領先的 WordPress 網站建立平台,讓網頁創作者能夠使用直觀的視覺建構器建立專業、像素完美的網站,而且能完全自定義控制網站每一部分,無需編寫任何程式碼。 Elementor 的開源解決方案附帶了數十個開箱即用的小部件和功能供你使用。 此外,你還可以與其他行銷服務集成,或透過開發人員文件進一步擴展 Elementor 的功能。

raw-image

Yoast SEO

使用 Yoast SEO 外掛能改進 WordPress 網站的 SEO 成效,協助你撰寫更符合搜尋引擎規則的內容,並能將 WordPress 網站進行完整搜尋引擎最佳化,以獲得更好的搜索引擎排名。

Contact Form 7

Contact Form 7 可管理多份聯絡表單,也能透過簡單的標記靈活地自訂表單及郵件內容。表單支援 AJAX 傳送方式、CAPTCHA、Akismet 垃圾留言篩選等功能。你可以通過這個插件輕鬆添加聯繫表格到你的網站。

WooCommerce

如果你打算在你的網站上銷售產品或服務,那麼 WooCommerce 是一個必備的插件,它提供完整的電子商務解決方案,是全世界最受歡迎的開放原始碼電商平台,讓你能完全掌控自己商店的內容和資料。

而且,WooCommerce 的核心平台完全免費且靈活彈性,還有全球社群協助增強效能。 不論你是要開展業務、將實體零售業務拓展到線上,或是為客戶開發網站,使用 WooCommerce 便能打造完美融和內容與商務的線上商店。

Akismet Anti-spam

Akismet Anti-spam 可以幫助你過濾和阻止垃圾留言,是能夠封鎖垃圾留言及聯絡表單濫填的最佳防護外掛,同時也是最受 WordPress 及 WooCommerce 信賴的反垃圾留言解決方案,保護網站免受惡意內容侵害。你可以在網站的【留言】管理頁面中檢視已遭 Akismet 攔截的垃圾留言。

Jetpack

Jetpack 由 WordPress 專家開發,內含 WordPress 安全性、效能、行銷、設計等工具,能夠加強保護 WP 網站安全、提升網站速度並協助增加網站流量。

WP Super Cache

WP Super Cache這一外掛程式從你的動態 WordPress 部落格生成靜態 html 檔案。 產生 html 文件後,你的網頁伺服器將提供該文件,而不是處理相對較重且更昂貴的 WordPress PHP 腳本。作為一款緩存插件,WP Super Cache可以令你的網站加載速度更快。

如何選擇並安裝插件

要在 WordPress 上選擇並安裝插件,你可以按照以下步驟操作:

首先在 WordPress 的後台,點選左側的【插件】,選擇【新增插件】。

在搜索欄位中輸入你想要安裝的插件名稱,或者使用關鍵詞搜索相關插件。

raw-image

在顯示的搜尋結果中,點擊插件的標題或連結【更多詳細資訊】以閱讀有關該插件的更多信息,包括安裝說明、插件文件或其他有用的信息。

接著,點選【立即安裝】按鈕安裝插件。

最後,插件安裝完成後,點擊【啟動】以正式使用插件。

raw-image

插件被啟用後,你可能需要進行一些初步的設定。這將取決於你安裝的插件的具體設計。在插件列表中,你可以找到【設定】或者在左側菜單中找到相應的設定選項。

請注意,雖然 WordPress 插件可以擴展你的網站功能,但過多的插件可能會導致你的網站變慢,或者產生相容性問題。因此,你需要經過考慮後最好只安裝真正需要的插件。

創建WordPress 網頁內容及文章

如何創建新的網頁或文章

首先,登入你的WordPress 管理畫面,點選左側邊欄中的【頁面】>【新增頁面】。

或者,你也可以點擊頁面畫面中的【新增】按鈕。

接著,新增頁面標題和頁面的內文內容,在新頁面或新文章的編輯器裡,你可以添加標題和內容,並設定其他選項,如特色圖片、類別和標籤(對於文章)等。

你也可以自訂頁面的側邊欄設定。

當完成頁面編輯後,請記得點擊【儲存】或【發佈】。

你還可以使用 WordPress 區塊編輯器(又稱 Gutenberg 編輯器)中的不同區塊來設計頁面、添加和編輯內容,或者你也可以使用其他頁面編輯器插件,如 Elementor。

使用 Elementor 編輯器添加和編輯內容

首先,你需要在 WordPress 的後台,前往【插件】 > 【新增插件】,然後搜索【Elementor】,找到後點擊 【安裝】,然後點擊【啟動】。

在你創建或編輯頁面或文章時,你可以點擊【用 Elementor 編輯】,這將開啟 Elementor 的編輯界面。

在 Elementor 的界面裡,你可以拖拽各種小工具(widgets)到你的頁面上,如文本、圖選擇適合的 WordPress 主題,安裝並設定主題,以及創建新的網頁或文章,都是建立一個 WordPress 網站的重要步驟。

WordPress 網頁設計的常見問題(FAQs)

什麼是 WordPress?

我需要會寫程式碼才能使用 WordPress 嗎?

我該如何選擇 WordPress 主題?

我該如何更新我的 WordPress 網站?

我的 WordPress 網站如何進行 SEO 優化?

我的 WordPress 網站被駭了怎麼辦?

這些僅是一些基本的問題,你在設計和管理你的 WordPress 網站時可能會遇到更多的問題。幸運的是,WordPress 有一個龐大的用戶社區,你可以在許多網站和論壇上找到幫助和資源。

留言0
查看全部
發表第一個留言支持創作者!