隨著數位時代的深入發展,建立並營運自己/企業/品牌的專業網站已經變得十分重要。無論你是自由職業者、企業經營者還是品牌主理人,只要你想在網路上表達個人看法、推廣公司業務、宣傳品牌形象,擁有一個與眾不同的網站都能讓你在眾多競爭者中脫穎而出。
那網站架設可以怎麼做呢?如果你想低成本高效益架站,並且可以隨時自定義自己的網站,那麼我們強烈建議你選擇WordPress 這個多功能網站架設+網頁設計平台。這是一款能幫助你輕鬆建立網站的工具。
在這篇文章中,我們將為你解析 WordPress 網頁設計的每一個步驟,讓你在5分鐘內學會 WordPress 架站!無需專業的程式設計知識,只要一步步跟隨我們的指南,你就能擁有自己專屬的強大功能網站。
內容目錄
Toggle架站準備及平台
架站前期準備工作
架設一個網站的三要素是:網域名稱 (Domain Name)、網站主機 (Web Hosting)、以及網站內容 (Website Content)。以下是關於這三要素的準備工作:
- 網域名稱 (Domain Name):網域名稱是你網站的網址,例如 “www.yourwebsite.com”。選擇一個好的網域名稱是非常重要的,因為它不僅是你的品牌的一部分,也是用戶找到你網站的方式。你可以在NameCheap等的域名註冊商購買你的域名。
- 網站主機 (Web Hosting):網站主機是存儲你的網站內容的地方,並讓用戶可以訪問這些內容。選擇一個好的網站主機供應商可以確保你的網站的速度和穩定性,你可以使用例如HostGator、Bluehost及Kinsta等的虛擬主機。
- 網站內容 (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.org |
---|---|---|
託管/主機服務 | 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 是最佳選擇。你可以通過其完全控制你的網站,並且進行深度Wordpress 設計定制。最重要的是,你可以安裝任何需要的功能插件,讓你的網站擁有更多樣的功能。
並且,你也不用過於擔心網站的主機託管問題,Hostgator 和Kinsta 作為熱門的主機服務託管商,都提供WordPress.org 專用主機服務,可以讓你放心購買主機、註冊域名並提升網站效能。我們也為你準備了Hostgator 和Kinsta 功能介紹說明:
HostGator 是一家提供各種主機服務的公司,包括共享主機、專用主機和 VPS 雲主機,也提供專門的WordPress 主機計劃,為你優化WordPress網站性能及穩定性。HostGator 的優勢包括:
- 提供多樣化且高性價比的WordPress 主機計劃選擇,尤其適合新手進行WordPress架站
- 承諾 99.9% 的運行時間,並提供每天 24 小時的客戶服務技術支援
- 提供免費網站遷移服務和一年的免費域名服務,方便你將現有的 WordPress 網站轉移到 HostGator
- 提供一鍵 WordPress 安裝功能,讓你方便快捷進行WordPress網站架設和管理
Kinsta 是一家專門提供高性能 WordPress 主機服務的公司,適用於多類型的WordPress 網站,如大型企業、管理機構、電商業務、非營利組織、獨立站等,為WordPress 提供了網站免費遷移服務和全方面的使用教程。Kinsta 的優勢包括:
- 提供極高的性能和速度,能夠滿足WordPress 高流量網站的運行需求
- 提供專門的 WordPress 安全性措施,包括防火牆、惡意程式掃描和 DDoS 防護
- 提供每日自動備份和一鍵恢復功能,確保你的WordPress 網站數據安全
- 提供專門的 WordPress 專家技術支援團隊,包括網站問題的排查和解決
Hostgator 和Kinsta 都為你使用WordPress.org 架設網站提供了可靠且便捷的主機托管服務,你可以根據自己的網頁設計具體需求和預算進行選擇。你也可以先試用其方案,Hostgator 和Kinsta 都提供了 30 退款保證服務和免費試用,讓你可以更自由放心地進行選擇合適主機計劃。
接下來,我們將為你詳細介紹 WordPress.org 的功能特色和具體的Wordpress 网页设计流程,讓你能夠掌握通過WordPress 進行低成本高效益的網站架設方法。
WordPress 優點及作用
- 易用性:WordPress 的用戶介面設計直觀,你無需擁有程式設計背景,就能輕鬆添加和編輯內容,更換主題,安裝插件等。
- 靈活性:WordPress 提供數千種免費和付費的主題,讓你可以根據需要來設計你的網站。此外,有數以萬計的插件可以用來添加各種功能,如聯繫表格、照片滑動展示、SEO 優化工具等。
- 社區支援:由於 WordPress 的廣大用戶群,你可以在許多論壇和網站上找到有關 WordPress 的教程、解答和建議。此外,許多主題和插件的開發者也提供了良好的客戶支援。
- SEO 友好:WordPress 的設計使其對搜索引擎友好。你可以使用插件(如 Yoast SEO)來進一步優化你的網站,提高在搜索結果中的排名。
- 擴展性:無論你的網站是小型還是大型,WordPress 都可以很好地應對。隨著你的業務的成長,你可以輕鬆地添加更多的頁面和功能。
總的來說,無論你是創建個人博客,還是為你的業務建立功能全面的電子商務網站,WordPress 都是你進行網頁設計的首選。
網頁設計的重要性
網頁設計對於一個網站的成功與否起著至關重要的作用。以下是網頁設計重要性的幾個主要原因:
- 專業形象與品牌形象:網站往往是潛在客戶對你的第一印象,一個專業、吸引人的網頁設計可以提升你的品牌形象,並給予客戶信心。反之,一個混亂、難以導航的網站可能會讓客戶對你的品牌產生負面的觀感。
- 使用者體驗:網頁設計不只是關於視覺呈現,也是關於網站的功能性和易用性。良好的網頁設計應該讓使用者可以輕易地找到他們需要的信息,並且在網站上的導航應該是直觀的。
- 搜索引擎優化(SEO):網站設計也可以影響你的搜索引擎排名。例如,網頁的加載速度、響應式設計(適應不同裝置的螢幕尺寸)、以及結構化的內容,都是搜索引擎在評估網站排名時會考慮的因素。
- 轉化率:網頁設計也可以影響你的轉化率,也就是將訪問者轉變為付費客戶的比例。例如,清晰的呼叫行動(Call to Action, CTA)、易用的購物車功能、以及信任性的設計元素(如客戶評論、信任標誌)都可以提升轉化率。
- 競爭優勢:在競爭激烈的市場中,一個優秀的網頁設計可以幫助你在眾多競爭對手中脫穎而出。如果你的網站比競爭對手更吸引人、更易用,那麼客戶更有可能選擇你的產品或服務。
總的來說,優秀專業的網頁設計不只是為了美觀,更是為了提升使用者體驗、提高搜索引擎排名、提升轉化率,以及強化品牌形象。
WordPress 網站範例|WordPress 知名網頁設計範例
WordPress 適合哪種類型的網頁設計?
WordPress 是一個非常靈活且功能豐富的內容管理系統(Content Management System, CMS),它適用於設計各種類型的網站。以下是一些常見的可以用 WordPress 建立的網站類型:
- 部落格(Blogs):WordPress 最初是作為一個部落格平台而創建的,所以它對於部落格來說是一個非常強大的工具。用戶可以輕鬆地發布和管理文章,並且可以使用各種主題和插件來自訂他們的部落格。
- 企業網站:WordPress 也適合建立企業網站。有許多專為企業設計的 WordPress 主題,包含了所有企業可能需要的功能,如自訂首頁、產品和服務頁面、關於我們頁面、聯繫我們頁面等。
- 電子商務網站:透過像是 WooCommerce 這樣的插件,WordPress 可以變成一個功能強大的電子商務平台。用戶可以輕鬆地添加和管理產品,設定付款和運送選項,以及處理訂單和庫存。
- 新聞和雜誌網站:由於 WordPress 的高度可自訂性和強大的內容管理功能,它也常被用來建立新聞和雜誌網站。
- 社區和討論區網站:透過像是 BuddyPress 這樣的插件,WordPress 也可以建立社區和討論區網站,用戶可以註冊賬號、發布訊息、與其他用戶互動等。
- 學習管理系統:有許多 WordPress 插件,如 LearnDash 和 Sensei,可以讓你在 WordPress 上建立一個完整的學習管理系統,提供線上課程給學生。
- 個人網站和作品集:WordPress 的高度自訂性也使其成為建立個人網站和作品集的理想選擇。
總的來說,由於 WordPress 的靈活性和豐富的插件選擇,它可以適應各種不同的需求,並用於建立幾乎任何類型的網站。
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 網站 設計的重要步驟。以下是一些在選擇主題時需要考慮的因素:
- 需求與目標:首先,你需要明確瞭解你的網站需求和目標。你希望網站是一個部落格、企業網站、線上商店、或者其他什麼類型的網站?你希望網站的風格是專業、現代、藝術、或者其他風格?
- 功能性:不同的主題提供不同的功能。一些主題可能包含了內建的網頁建立器、SEO 優化工具、社群媒體整合、電子商務功能等。選擇一個包含你需要的功能的主題可以節省你很多時間。
- 響應式設計:現在越來越多的人使用手機或平板電腦瀏覽網站,所以選擇一個具有響應式設計的主題(也就是可以根據裝置的螢幕大小自動調整網頁的排版)是非常重要的。
- 更新與支援:選擇一個由開發者積極維護並提供支援的主題可以讓你在遇到問題時獲得幫助,並確保主題可以與 WordPress 的最新版本兼容。
- 評價與評論:查看其他用戶的評價和評論可以讓你瞭解一個主題的優點和缺點,並幫助你做出決定。
WordPress主題目錄是 WordPress 主題的官方網站。目錄中的每個主題都由專門的團隊審核,並根據廣泛的規則進行測試,所有這些都確保主題使用者獲得安全和愉快的體驗。
目錄中有超過 9,000 個主題,你可以使用佈局、主題和特定主題功能的過濾器,透過進階搜尋功能輕鬆找到適合你網站的主題。這包括尋找支援完整網站編輯功能的區塊主題。
如何安裝及設定你的主題
你可以使用【外觀】子菜單中的【添加新選項】將WordPress 主題目錄中的任何主題直接下載到你的網站。
- 登錄 WordPress管理屏幕。
- 選擇【外觀】屏幕,然後選擇【主題】。
- 選擇【新增主題】。
- 使用【搜索】或【過濾選項】來查找你想要使用的主題。
- 單擊【預覽】鏈接預覽主題或單擊【安裝】鏈接將主題上傳到你的網站站點。
- 或者使用頁面頂部的【上傳主題】按鈕上傳你之前下載到計算機的主題的壓縮副本。
- 當主題已下載但未激活時,【實時預覽】選項將為你提供站點的預覽以及你自己的現有內容。
下載後符合需求的網站佈景主題後,你還需要進行激活才能正式使用這個佈景主題:
- 在 WordPress用戶管理介面,點擊【外觀】並選擇【主題】。
- 你可以在這裡看到【/wp-content/themes/】目錄中的所有主題,並且從這裡你可以通過單擊【主題詳細信息】(將鼠標懸停在主題縮略圖上)來查看每個主題的詳細信息。
- 【實時預覽】選項將為你提供網站內容的預覽。
- 單擊【激活】按鈕,啟用主題,你的選擇將立即生效。
- 當主題被激活時,這意味著該主題的樣式和功能(外觀和行為)將應用於你的網站。你將收到有關成功激活主題的管理通知。
主題被啟用後,你可以點選【自訂】來設定你的主題詳細內容,例如網站的標題和副標題、顏色方案、字體、背景圖片、導航菜單、小工具等。
每個主題的設定選項可能會有所不同,因此你可能需要花一些時間來熟悉你的新主題的所有選項。以下是一些常見的設定項目:
- 網站標識:這包括你的網站標題和副標題,以及網站的 favicon(或稱網站圖示),這是在瀏覽器標籤上顯示的小圖示。
- 顏色和字體:你可以選擇你的主題的主要顏色方案,以及網站的主要字體。某些主題可能也會讓你設定其他的顏色和字體選項,如標題字體、連結顏色等。
- 導航菜單:你可以設定你的導航菜單,這通常包括一個主菜單以及一個或多個次要菜單(如底部菜單或社交菜單)。你需要創建菜單,然後將它們分配到你的主題的菜單位置。
- 小工具(Widget):小工具是 WordPress 的一種功能,它們可以提供各種額外的內容和功能。你的主題可能包含一個或多個小工具區域,如側欄、底部欄等,你可以在這些區域添加和排列小工具。
- 首頁設定:你可以選擇你的首頁顯示你的最新文章(即博客格式),或者顯示一個靜態頁面。如果你選擇靜態頁面,你需要選擇一個頁面作為首頁,並且你也可以選擇一個頁面作為你的博客頁面(即你的文章會在這個頁面顯示)。
設定好你的主題後,記得點擊【發佈】來保存你的所有變更。
這些都是安裝和設定 WordPress 主題的基本步驟。不過,每個主題可能都有其獨特的設定項目和功能,因此在你開始使用一個新主題時,可以花一些時間來熟悉它的所有選項和功能。
使用插件擴展功能
WordPress 網頁設計必備插件
WordPress 插件可以擴展你的網站的功能和設計。以下是一些常見的 WordPress 網頁設計必備插件:
Elementor
Elementor 作為領先的 WordPress 網站建立平台,讓網頁創作者能夠使用直觀的視覺建構器建立專業、像素完美的網站,而且能完全自定義控制網站每一部分,無需編寫任何程式碼。 Elementor 的開源解決方案附帶了數十個開箱即用的小部件和功能供你使用。 此外,你還可以與其他行銷服務集成,或透過開發人員文件進一步擴展 Elementor 的功能。
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 的後台,點選左側的【插件】,選擇【新增插件】。
在搜索欄位中輸入你想要安裝的插件名稱,或者使用關鍵詞搜索相關插件。
在顯示的搜尋結果中,點擊插件的標題或連結【更多詳細資訊】以閱讀有關該插件的更多信息,包括安裝說明、插件文件或其他有用的信息。
接著,點選【立即安裝】按鈕安裝插件。
最後,插件安裝完成後,點擊【啟動】以正式使用插件。
插件被啟用後,你可能需要進行一些初步的設定。這將取決於你安裝的插件的具體設計。在插件列表中,你可以找到【設定】或者在左側菜單中找到相應的設定選項。
請注意,雖然 WordPress 插件可以擴展你的網站功能,但過多的插件可能會導致你的網站變慢,或者產生相容性問題。因此,你需要經過考慮後最好只安裝真正需要的插件。
WordPress網頁設計|創建WordPress 網頁內容及文章
WordPress網站製作|如何創建新的網頁或文章
首先,登入你的WordPress 管理畫面,點選左側邊欄中的【頁面】>【新增頁面】。
或者,你也可以點擊頁面畫面中的【新增】按鈕。
接著,新增頁面標題和頁面的內文內容,在新頁面或新文章的編輯器裡,你可以添加標題和內容,並設定其他選項,如特色圖片、類別和標籤(對於文章)等。
你也可以自訂頁面的側邊欄設定。
當完成頁面編輯後,請記得點擊【儲存】或【發佈】。
現在,你已經掌握了Wordpress 網站設計的基礎操作了。除此之外,你還可以使用 WordPress 區塊編輯器(又稱 Gutenberg 編輯器)中的不同區塊來設計頁面、添加和編輯內容,或者你也可以使用其他頁面編輯器插件(如 Elementor)進行Wordpress網站設計。
使用 Elementor 編輯器添加和編輯內容
首先,你需要在 WordPress 的後台,前往【插件】 > 【新增插件】,然後搜索【Elementor】,找到後點擊 【安裝】,然後點擊【啟動】。
在你創建或編輯頁面或文章時,你可以點擊【用 Elementor 編輯】,這將開啟 Elementor 的編輯界面。
在 Elementor 的界面裡,你可以拖拽各種小工具(widgets)到你的頁面上,如文本、圖選擇適合的 WordPress 主題,安裝並設定主題,以及創建新的網頁或文章,都是建立一個 WordPress 網站的重要步驟。
WordPress網頁設計的常見問題(FAQs)
WordPress 是一種開源的內容管理系統(CMS),它可以讓你輕鬆地創建和管理自己的網站或博客。
WordPress.com 是一種託管服務,你可以在這裡免費創建和管理網站,但一些進階功能需要付費。WordPress.org 則是自託管的 WordPress 版本,你需要自己提供網站主機和域名,但可以完全自由地定制你的網站並使用任何插件。
不需要。雖然知道一些 HTML 和 CSS 可以讓你更深入地定制你的網站,但你可以完全不用寫任何程式碼就能創建一個看起來專業的 WordPress 網站。
你應該選擇一個符合你的網站風格和功能需求的主題。考慮一下主題的版面設計、顏色選擇、字型以及是否支援你需要的特性,如響應式設計、電子商務功能等。
你可以在 WordPress 的儀表板中找到更新選項。建議你定期更新你的 WordPress 版本、主題和插件,以確保網站的安全和功能。
你可以使用像 Yoast SEO 這樣的插件來幫助你進行 SEO 優化。此外,你也應該確保你的網站有清晰的標題和 Meta 描述,以及優質的內容和鏈接。
如果你的網站被駭,你應該立即聯繫你的主機提供商,並使用像 Wordfence 這樣的安全插件來掃描並清理惡意軟體。你還應該定期備份你的網站,以防萬一。
這些僅是一些基本的問題,你在設計和管理你的 WordPress 網站時可能會遇到更多的問題。幸運的是,WordPress 有一個龐大的用戶社區,你可以在許多網站和論壇上找到幫助和資源。