fbpx
2024 年最佳 WordPress 佈景主題

WordPress 佈景主題教學:2023 新手入門完整系列

這篇文章最後更新日期:2024 年 3 月 21 日
作者: Mack Chan

WordPress 佈景主題教學:2023 新手入門完整系列
WordPress 佈景主題教學:2023 新手入門完整系列

這篇完整教學系列和指南,會教授你 WordPress 佈景主題的基礎觀念、安裝方法流程、疑難排解、備份還原和選購的注意事項。

不少初學者可能不知道,WordPress 佈景主題其實也是「WordPress 外掛」的其中一種,不過最初設計之時,官方基於其的獨特性,將佈景主題獨立出來,形成一個重要的組成部分。

由於相關的議題非常繁多,我們在複雜的概念,分割成下方的教學單位,讓新手和初學者可以輕鬆吸取知識,你可以先把這頁加入瀏覽器的書籤,每日逐點瀏覽內容。

特別推薦 Astra 佈景主題完整教學系列:


瀏覽 Astra 佈景主題
完整教學系列指南目錄

WordPress 佈景主題基礎知識和技能:

WordPress 佈景主題是什麼?

WordPress 佈景主題 (Themes) 是什麼?基礎觀念
WordPress 佈景主題 (Themes) 是什麼?

這個問題看似很簡單,但也能說三天三夜也說不完,每個人對網站的要求也不盡相同。有人喜歡家裡簡簡單單,數件家具,滿足生活所需就足夠。反之,有些人喜歡把居住的地方,裝潢成皇宮似般。如果簡單地理解,WordPress 佈景主題就是您網站給人的感覺!

這很像很抽象?因為沒有對與錯的選擇,每個人 / 公司或組織的出發點都不同,沒有絕對必然的選擇,下方我們把一些選擇的注意事項逐一列出,協助您選擇合適的佈景主題。

免費佈景主題安裝教學

WordPress 佈景主題 | 免費佈景主題安裝教學
免費佈景主題安裝教學

跟據 WordPress 官方的統計數據,初學者安裝 WordPress 免費佈景主題的機率會比較高,相較於付費佈景主題的可能性來說。

我們推薦從官方的佈景主題目錄查詢和安裝佈景主題,這個功能已經內建在我們的 WordPress 控制台 / 網站後台 (Dashboard) 裡,由專業的工程師替我們把關,WordPress 官方只會收錄優質和符合規範的佈景主題。

所以新手和初學者可以非常放心和安全地下載免費的各種類型佈景主題,在啟用佈景主題之後,持續獲得有效的更新和程式維護。因為如果操作不當,可能引起網站無法正常運作,是個具有一定風險的操作。

你將會學習得到以下知識和技能:

  • 了解 WordPress 官方佈景主題 (Theme) 目錄
  • 如何 [安裝] 免費的 WordPress 佈景主題
  • 如何 [啟用] 免費的 WordPress 佈景主題

付費 / 收費佈景主題安裝教學

WordPress 佈景主題 | 付費 / 收費佈景主題安裝教學
付費 / 收費佈景主題安裝教學

WordPress 付費和收費佈景主題的安裝流程比較複雜,也存在很多 [變數] 和 [操作步驟],初學者在網站後台是找不到任何可以下載付費佈景主題的地方,因為付費佈景主題一般需要從第三方的網站下載,然後手動上傳到 WordPress 網站。

幸運的是,大部分新手和初學者會使用到的佈景主題,都可以使用我們之前介紹的《WordPress 佈景主題 | 免費佈景主題安裝教學》解決。不過隨著站長的資歷和使用經驗增加,難免會需要開始學習如果安裝付費的外掛。

你將會學習得到以下知識和技能:

  • 了解 WordPress 官方佈景主題 (Theme) 目錄
  • 如何 [安裝] 和 [上傳] 付費的 WordPress 佈景主題
  • 如何 [啟用] 付費的 WordPress 佈景主題

分析別人網站使用什麼佈景主題?

如何找出心儀網站是使用那一套的 WordPress 佈景主題製作?(兩個步驟)
分析別人網站使用什麼佈景主題?

你有常常看到一些製作美觀和華麗的網站?心裡會想到他們到底使用什麼 WordPress 佈景主題製作的呢?是不是使用免費或付費主題?我的部落格或網站也希望換成跟他們一模一樣的外觀。那我們這次介紹的分析網站工具就不要錯過,基本上只要輸入心儀網站的網址,就會立即得出結果,快來試試測試一下你喜愛的網站?

WordPress 官方佈景主題目錄

WordPress 官方佈景主題目錄 (Themes Directory) 是什麼?
WordPress 官方佈景主題目錄

如果你需要調查和深入了解 1 個佈景主題的相關資料,前往 WordPress 官方佈景主題目錄 (Themes Directory) 是一個不錯的選擇,包含主題的簡介、功能介紹、使用說明、開發人員 / 團隊、主題評價和佈景主題專屬討論區。

在 2023 年開始,WordPress 睦續更新他們的官方網站外觀和介面,然而,世界各地官方授權的地區愛好者網站仍然維持舊網站的外觀,不過由於它們都是 [共用相同的佈景主題資料庫],搜尋的主題資料接近是相同和類似的。

WordPress 佈景主題推薦指南攻略

如何選擇合適的免費或付費 WordPress 佈景主題?5 個新手常犯的致命錯誤
如何選擇合適的免費或付費 WordPress

WordPress 佈景主題可以說是這個 內容管理系統 (CMS) 的核心組成部分,主流的免費主題和付費主題都是非常適合新手第一次接觸自架站的選擇,如果你對佈景主題在網站發揮什麼作用感到疑惑?不用擔心,網站迷谷這次會細分不同的重點解說,用淺顯易懂的文字,帶新手從零開始了解這個最迷人的地方。

直到今天為止,官方公佈有 7,500 個免費佈景主題,加上大量第三方的網頁程式開發公司協助開發的付費佈景主題,市場上總計有超過 10,000 多個的選擇給大家。網站迷谷為大家整理了一系列的選擇,替您選出最合適的 WordPress 佈景主題清單。


WordPress 佈景主題編輯、維護及更新:

WordPress 佈景主題 | 管理和編輯

WordPress 佈景主題 | 啟用 / 停用 / 管理 / 編輯教學
WordPress 佈景主題 | 啟用 / 停用 / 管理 / 編輯教學

初學者第一次進入 WordPress 的生態圈,會被五花八門的 WordPress 佈景主題吸引,一不小心可能就會下載和安裝大量主題和外觀,但你可能會想知道「如何刪除多餘和無用」的主題呢?下方會一步接一步介紹最簡單的解決方法。

溫馨提醒:
✅ 規則一:你無法刪除 [已經啟用 / 使用中] 的 WordPress 佈景主題,這是官方的預設設定,請變更成為其他佈景主題,才會出現 [刪除] 的選項。

✅ 規則二:WordPress 預設最少要保留 1 個 WordPress 佈景主題,建議最少保留一個官方的預設佈景主題備用,例如用於偵錯和除錯也合適。

關閉和取消外掛自動更新功能

WordPress 關閉和取消自動更新功能
WordPress 關閉和取消自動更新功能

過往 WordPress 新手要取消自動更新,要修改程式碼或安裝外掛等複雜的程序,可能會感到煩惱和不懂操作。

所以這次網站迷谷介紹大家簡單的方法去停用網站的自動更新功能,適用於 WordPress 的核心程式 (Core)、佈景主題 (Theme) 和外掛程式 (Plugins)。

但不適用於 WordPress 的語言套件 (Translations)。這個方法大約從 WordPress 5.5 版本開始推行,但直到近期才變得比較穩定,下方我們分為 3 個部分來詳盡解釋操作。

WordPress 的版本降級或升級

如何將 WordPress 的版本降級或升級?利用 WP Downgrade 外掛指定核心程式版本
如何將 WordPress 的版本降級或升級?

網站管理員常見的例行性工作之一,當中包含更新「WordPress 核心程式版本」、「佈景主題」和「外掛」等等。需要這樣做的可能性很多,可能基於安全性、功能強化和解決錯誤的需要,但萬一當中「某一個」步驟出現不協調或衝突,就必須將版本回溯至之前有效的版本。

這次我們介紹的外掛就可以滿足這個單一的要求,WP Downgrade 外掛可以指定核心程式版本,無論你希望回復到之前,還是往後的版本也可以,而且步驟非常少和簡單易用。

更新外掛和佈景主題失敗?

更新外掛和佈景主題失敗?導致網站無法運作或出現錯誤,WP Rollback 能夠還原和恢復指定外掛版本
WP Rollback 能夠還原和恢復指定外掛版本

當你決定成為一位網站管理員,關於「外掛」或「佈景主題」升級後導致的問題就無可避免,但我們不能夠因為害怕錯誤,就「永遠」不更新和升級系統,這是斬腳趾避沙蟲的消極態度。一般來說只要我們「定期備份 Daily Backups」,如果主機商能夠提供「每日備份」服務就最佳。

然後如果主機商更有提供讓我們建立「測試網站環境 Staging Site」的服務,在測試站中試驗升級沒問題後才發佈到正式網站,也是站長必須學習的管理技能之一。不過我們這次介紹免費的 WP Rollback 外掛 ,可以協助你將升級的失誤減低,還原至之前安全穩定的版本,建議新手站長要學懂這招喔。

官方建議網站主機的最低規格

WordPress 官方建議網站主機的最低規格
官方建議網站主機的最低規格

為了保障網站運作暢順,基於 WordPress 是一套開放原始碼的程式,隨著科技和硬體的水平不斷提高,源代碼也會提高主機的消耗和執行壓力,所有官方不定時會提供建議主機的最低規格,但屬建議性質,不代表您必須依據這個指引,但新手在初次購買網站主機時,可以依據這份指引,去尋找合適的網站主機商。

如何獲得更高安全性的建議?不使用伺服器預設的共用使用者名稱,而是使用專屬帳號的使用者名稱去執行像 WordPress 這類 PHP 應用程式時,主機會更加安全。請洽詢你有意採用的主機服務提供商,他們採取了哪些措施來確保使用者帳號的安全性。

如何移除 WordPress 佈景主題?

如何移除或刪除 WordPress 佈景主題?
如何移除或刪除 WordPress 佈景主題?

初學者第一次進入 WordPress 的生態圈,會被五花八門的 WordPress 佈景主題吸引,一不小心可能就會下載和安裝大量主題和外觀,但你可能會想知道「如何刪除多餘和無用」的主題呢?下方會一步接一步介紹最簡單的解決方法。

溫馨提醒:
✅ 規則一:你無法刪除 [已經啟用 / 使用中] 的 WordPress 佈景主題,這是官方的預設設定,請變更成為其他佈景主題,才會出現 [刪除] 的選項。

✅ 規則二:WordPress 預設最少要保留 1 個 WordPress 佈景主題,建議最少保留一個官方的預設佈景主題備用,例如用於偵錯和除錯也合適。


WordPress 佈景主題頁首 (Header) 調整:

如何新增和上載網站 Logo 商標?

如何新增和上載網站 Logo 商標?
如何新增和上載網站 Logo 商標?

作為網站的重要形象識別的象徵,每當新手建立完 WordPress 網站之後,在 議定好《網站名稱》的過程後,如果你本身已經有製作好的 Logo 商標圖片,我們可以準備上傳 Logo 的工作。

一般最低要求就是一張圖片,不過部分專業的 WordPress 佈景主題能夠設定更進階的細部項目,不過我們這次教學以一般最通用的情況為基調。一般來說,新手站長只是不知道在什麼位置上傳,而不是遇到技術卡關。

新增 Favicon (網站小圖示)?

如何在 WordPress 設定 Favicon (網站小圖示)?
如何在 WordPress 設定 Favicon (網站小圖示)?

Favicon 是「Favorites 喜愛」+「Icon 圖示」的縮寫,亦被稱為 Website Icon (網站圖示)、Page Icon (頁面圖示) 或 URL Icon (URL 圖示)。Favicon 是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示,而目前也有很多網頁瀏覽器支援此功能。

如何變更 WordPress 網站名稱?

如何變更 WordPress 網站名稱?命名有那些要注意的事項?
如何變更 WordPress 網站名稱?命名有那些要注意的事項?

一般在設定完主機和安裝 WordPress 之後,我們進入設定網站基礎資訊的階段。像網站標題 (Site Title) 和網站說明 (Tagline) 就是需要優先設定的地方,這次介紹兩個常見和簡易的方法,協助新手完成這個部署。當中對 Google 搜尋結果和 SEO 相關的注意事項也會一拼提出,更改網站名稱也算是網站草創初期要考慮的因素之一。

如何新增網站的選單 (Menu)

如何新增 WordPress 網站的導覽選單 (Navigation Menu)?
如何新增 WordPress 網站的導覽選單 (Navigation Menu)?

WordPress 選單作為網站設計最重要的部分之一,首先值得新手去重視和研究基礎原理,你需要瞭解在眾多選單外觀和形態之中,挑選最合適網站的方案。讓我們完整地一起探討怎樣去選擇網站選單。

WordPress 本身內建了足夠大部分網站使用的選單系統,配塔市場上主流的 佈景主題 已經可以製作很多不同類型的外觀,但有一些小細節可能讓新手感到迷惘和卻步,本篇教學先以基礎理論作為開首,打好基礎後在後半部會和初學者一起製作一個簡單的選單。

善用錨點語法,連結不同內容章節

WordPress HTML 錨點是什麼?連結不同內容章節
WordPress HTML 錨點是什麼?連結不同內容章節

當你的 WordPress 網站已有不錯的文章數量,約 50 篇至 200 篇左右,這時候你「必須停下來思考一個問題」。網站的主題應該繼續擴闊更多單元?寫更多的文章嗎?不少研究顯示不少的網站的內容深度是嚴重不足,代表文章數量很多,但又不夠深入報道主題核心。

這次我們介紹新手常常忽視的「HTML 錨點 (Anchor) 」的應用,這個存在已久的功能,配合文章裡的「相關文章的超連結」,可以讓你建立主題架構緊密的的文章系列和整理文章。

HTML 超連結是什麼?

什麼是網頁裡的超連結 (Hyperlink)?
什麼是網頁裡的超連結 (Hyperlink)?

跟據權威的《維基百科》記載和文獻,超連結 (Hyperlink) 是指超文字內由一檔案連接至另一檔案的連結。作用與論文中的參考或注釋類似,以方便讀者隨時參考某一詞彙的定義。

超連結有點像是文學作品中的參考資料列表,它可以結合電腦網路和適當的存取協定來追蹤資料的原始出處,並被儲存、檢視,或顯示為關聯檔案中的一部份。


WordPress 佈景主題資訊欄 / 側邊欄 (Sidebars) 調整:

WordPress 區塊小工具

什麼是新版 WordPress 小工具 (Widget)?以區塊為核心的設計
什麼是新版 WordPress 小工具 (Widget)?

隨著 WordPress 5.8 的更新 到來,新版的 WordPress 小工具 (Widget) 正式登場。一般小工具主要應用在資訊欄 (俗稱側邊欄 Sidebars Widget) 或頁尾小工具 (Footer Widget) 之上,當然不限於這些區域,理論上大部分位置都能應用小工具。

不少專業的 WordPress 佈景主題更允許你大幅度調整這些工具,怎至安裝更強的擴充套件,這是網站外觀不可或缺的一部分,不過新版 WordPress 小工具應用了《區塊編輯器》的概念,初接觸可能需要一點時間適應。

WordPress 傳統小工具

什麼是 WordPress Classic Widgets (傳統小工具)?
什麼是 WordPress Classic Widgets (傳統小工具)?

伴隨著 新版的 WordPress 小工具 (Widget) 正式登場,引發了一連串因為「外掛」和「佈景主題」跟不上進度而產生的疑難雜症,小工具介面顯示一堆「紅色錯誤訊息」,因為未能符合 WordPress 5.8 的要求的外掛和佈景主題會出現無法編輯小工具的困境和錯誤。

官方預期短期內無法解決,所以早有準備,同步推出這次介紹的《Classic Widgets (傳統小工具)》,讓新手們不致手忙腳亂,加上外掛的設定非常簡單。

如何變更網頁捲軸配色?

如何變更網頁捲軸配色?
如何變更網頁捲軸配色?

大家在瀏覽網頁時,有沒有發現右方 [灰色和平平無奇的網頁捲軸] 很單調,和網站的整體風格不是太塔和配合,其實您可以輕鬆複制貼上 [數行程式碼],就能一口氣改調每頁都出現的網頁捲軸配色。

個性化和統一您公司網站的風格排版,這篇教學文章把複雜的步驟移除掉,新手只需要挑選合適的配色,然後把 [CSS 程式碼] 複制貼上到您網站的 [自訂 CSS] 區域即可生效,簡單易用的小技巧呢!


WordPress 佈景主題頁尾 (Footer) 調整:

如何移除 WordPress 版權聲明

如何輕鬆移除顯示於網站頁尾版權宣告的「本站採用 WordPress 建置」字樣?
如何輕鬆移除顯示於網站頁尾版權宣告?

新手在安裝完成 WordPress 佈景主題之後,是否發現在網站頁尾的版權宣告很礙眼?出現像「本站採用 WordPress 建置」或「Powered by WordPress」之類的聲明連結。

現在不少佈景主題已經允許使用者自由地修改這部分,但也有不少佈景主題沒有提供可以移除的選項,讓新手站長感到無可奈何。這次我們介紹比較簡單和不需要懂程式碼的方法,因為不推薦和鼓勵新手改動 footer.php 檔案,所以我們使用「Remove “Powered by WordPress”」這套簡單的外掛。

新增社交媒體的圖示 (icon)

社交網路服務圖示區塊 | 擴闊網絡版圖
社交網路服務圖示區塊 | 擴闊網絡版圖

如果網站站長希望在 WordPress 網站裡插入不同「社交媒體的圖示 icon」的網頁元素,從前我們需要透過專門處理這類需求的外掛如 AddToAny 去導入在網站不同的區塊。

但隨著區塊編輯器不斷的變強,現在你可以輕鬆拖拉出相關區塊即可,然後選擇自己心儀的社交平台和貼上對應的連結,並選擇不同的色彩和外觀樣式,就可以輕鬆解決這類複雜的問題,而不需要額外安裝多餘的外掛。

AddToAny 社交分享按鈕外掛

AddToAny - 如何把社交分享按鈕加在您的網站?不需要懂程式碼
AddToAny – 如何把社交分享按鈕加在您的網站?

AddToAny 是什麼?社交媒體是現在每個人都無法脫離的溝通工具,世界各地的人類這類社群中參與不同種類的活動。例如分享工作、學校、家庭、娛樂或興趣的內容。

每天有大量的部落格和網站文章被分享到社群,這次介紹的 WordPress 外掛 AddToAny 正正可以協助您提高文章被分享的機會率,沒有複雜的設定,大部分新手都能把一整排的社交平台 icon 整齊的列隊出來。

「回到頂端 / Back to Top」按鈕

Astra 佈景主題教學 | 新增回到頂端 (Back to Top) 按鈕
Astra 佈景主題教學 | 新增回到頂端 (Back to Top) 按鈕

在網站設計的領域,主打「文章」為主的部落格應該佔了最大份額的比例。根據您管理的網站類型,你可能會提供短文格式或長文格式的文章內容。

我們這次討論一個「貼心」的小功能,你可否曾經有過這樣的經驗,就是當你閱讀一篇 5,000 至 1 萬字左右的長篇文章,當你閱讀到中段或接近完結時,如果你需要回到網站的最上部,你需要拉動網頁捲軸到頁首的位置,這非常不方便和花費時間。此時,如果你網站右下方有一個「返回最上 Back to Top」的按鈕,他 / 她們就可以輕鬆一按回到網站頂端。

Facebook Messenger 外掛程式

【電商客服必備】如何在 WordPress 網站新增 Facebook Messenger 顧客聊天外掛程式?
如何在 WordPress 網站新增 Facebook Messenger?

由於近年電商網站大行其道,使用 WordPress + WooCommerce 可以建立簡單的小型 / 微型電商網站,我們這次探討關於訪客在整個銷售流程裡的「初期瞭解」和「售後服務」階段。

潛在消費者會希望取得直接和一對一的客戶查詢服務,這不需要額外付款和購買外掛,我們將會帶你使用 Facebook 官方的 Facebook Messenger 顧客聊天外掛程式,難度並不高,但卻能為你的網站帶來源源不絕的產品和服務查詢。


WordPress 佈景主題 CSS 樣式調整:

新增自訂 CSS (附加的 CSS)

如何在 WordPress 新增自訂 CSS (附加的 CSS)
如何在 WordPress 新增自訂 CSS (附加的 CSS)

當 WordPress 的佈景主題和外掛在外觀設定上無法滿足我們的需求,站長們可能希望透過自行調整 CSS 語法來達到自己理想的視覺效果,這個時候應該怎麼辦?

WordPress 有提供內建的「自訂 CSS 語法」的設定,但前題是站長應該要對 CSS 和 HTML 語法有基礎的認知和實作能力,才適合自行調整這個部分,因為如果操作不當,可能引起網站無法正常運作,是個具有一定風險的操作。

快速進入自訂 CSS 的捷徑:
✅ 1. 請前往 [上方黑色管理列] → [自訂] → [附加的 CSS]

✅ 2. 請前往 [網站後台] → [外觀] → [自訂] → [附加的 CSS]

Class Name 和 ID Selector?

如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)?
如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)?

這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。這是一個非常重要的「起手式」,在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱,不然我們無法指定一些 [新的 CSS 屬性] 給它們。

這篇教學約 5 分鐘就可以學會,我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具,讓新手快速進入學習的狀態。

文章標題外觀的 CSS 語法

3 分鐘了解如何自訂文章標題和引言外觀的 CSS 語法
3 分鐘了解如何自訂文章標題和引言外觀的 CSS 語法

不少 WordPress 新手常常會疑問自己能否調整 [文章的標題] 和 [引言] 外觀樣式?例如文字顏色、大小、間距、背景色或邊框等等,害怕自己不會 CSS 語法會做不來。

但其實技術沒有很複雜,跟著我們的手把手教學,人人都學得會調整,正式來說,您只需要 [複制 / Copy] 和 [貼上 / Paste] 即可以完成,當然色調需要換成您喜歡的樣式。


瀏覽 Astra 佈景主題
完整教學系列指南目錄

常見問題 FAQ

閱讀完以上教學,你將會學習得到以下知識和技能:

1. 了解 WordPress 官方佈景主題 (Theme) 目錄
2. 如何 [安裝] 付費 / 收費的 WordPress 佈景主題
3. 如何 [啟用] 付費 / 收費的 WordPress 佈景主題

WordPress 安裝付費 / 收費佈景主題的步驟?

快速進入安裝 WordPress 佈景主題的捷徑:
請前往 [網站後台] → [外觀] → [佈景主題] → [新增佈景主題]


參考資料和引用文獻:


我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

WordPress 學員人數
12,000+ 人 (持續增加之中)

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表

在〈WordPress 佈景主題教學:2023 新手入門完整系列〉中有 1 則留言

發表您的留言