如果您已經安裝了一個 WordPress 主題,但它不太適合您,您可能會感到沮喪。在定製 WordPress 主題方面,您有很多選擇。
挑戰在於找到正確的方法。
在本篇文章中,我將引導您瞭解自定義 WordPress 主題的各種選項,幫助您決定哪一個適合您,並向您展示如何安全高效地進行自定義。
自定義主題的選項
在我們開始對主題進行修改之前,最好先了解一下有哪些選項,因為它們適用於不同的情況。
以下是可供您選擇的選項概覽:
- 如果您想為主題新增功能,請安裝外掛。
- 根據您的主題,使用 WordPress 管理介面中的自定義器自定義字型、顏色和佈局。
- 如果您使用的是頁面生成器主題,請使用其功能自定義網站設計。
- 如果您安裝的是框架主題,則可使用其中一個可用的子主題來定製網站,並在管理螢幕上使用任何可行的定製選項。
- 如果你的主題是針對你的網站的,而且你也願意這樣做,那就直接編輯主題的程式碼。
- 如果你想編輯第三方主題的程式碼,請建立一個子主題。
如果您想編輯程式碼,您可以有多種選擇,從使用區塊編輯器到自定義編輯器,直至編輯檔案。我們將在這篇文章中一一介紹,但我們還是從最簡單的選項開始:安裝外掛。
真的需要自定義主題嗎?
有時您根本不需要自定義主題:相反,您需要安裝一個外掛。
主題決定了網站的設計:網站的外觀和內容顯示方式(使用我們的主題檢測工具來確定您喜歡的設計的底層主題)。外掛增加了額外的功能。
如果你想做的改動主要集中在功能上而不是設計上,可以考慮自己安裝一個外掛。這可以是你需要編寫的外掛,也可以是從外掛目錄中下載的外掛,還可以是你購買的外掛。
如果你發現自己想編輯主題中的 functions.php 檔案,請捫心自問:
如果將來換了主題,我還想保留這個功能嗎?
如果答案是肯定的,那麼這些程式碼就應該放在外掛中,而不是主題中。
使用外掛而不是主題的好例子包括新增小工具、註冊自定義文章型別和分類法、建立自定義欄位以及新增商店或搜尋引擎優化增強等額外功能。
通過 WordPress 管理後臺定製 WordPress 主題
如果您要做的更改以設計為主,而且相對簡單,您可以通過管理螢幕進行更改。自定義器為您提供了多種調整主題的選項:具體有哪些選項取決於您的主題。你可能會在 “外觀” 選單中看到一個叫做 “自定義” 的東西。請不要使用它,原因我稍後會介紹。
通過自定義定製主題
WordPress 主題的最簡單方法是使用 WordPress 定製器。
訪問方式有兩種:
- 檢視網站時(登入後),點選螢幕頂部管理欄中的 “自定義” 連結。
- 在管理介面中,點選外觀 > 自定義。
這將帶您進入定製器。
WordPress 自定義程式
在上面的截圖中,我安裝了一個名為 ColorMag 的免費主題,它有很多自定義選項。它在 “自定義 “版塊中新增了一些設計功能,包括標題圖片、社交媒體、類別顏色,還有一個 “設計選項 “選項卡,可以讓你進入更多選項卡,對網站的佈局和設計進行更改。
不同的主題有不同的自定義選項,但較新的主題似乎一直在新增越來越多的自定義選項。如果你發現自己喜歡的主題卻不太適合自己,你可能會發現,對它進行自定義後,你就能得到自己需要的設計和佈局。
主題檔案編輯器(以及為什麼不使用它)
在你的管理介面中,你可能會注意到一個名為 “主題編輯器” 的選項,你可以通過 “外觀“>”主題檔案編輯器” 進入。
WordPress 主題檔案編輯器
這樣您就可以訪問主題中的檔案,這意味著您可以直接編輯它們。
不要這樣做。
即使你很擅長編寫 CSS 或 PHP,這樣編輯主題中的檔案也不是個好主意,原因有二:
- 如果你購買或下載的是第三方主題,你所做的任何修改都會在下次更新主題時丟失(出於安全考慮,你應該及時更新主題)。
- 更重要的是,如果你所做的更改破壞了你的網站,它將不會被跟蹤,檔案的前一版本也不會被更改。您可能會不可逆轉地破壞網站。
如果你想編輯主題中的程式碼,應該使用程式碼編輯器(檢視最好的免費 HTML 編輯器),而且在 WordPress 暫存站點上測試之前,不應該編輯實時站點中的檔案。如果需要編輯第三方主題,則應使用子主題。本篇文章稍後將詳細介紹這兩方面的內容。
WordPress 知道使用主題編輯器有多不安全:當你試圖訪問它時,它甚至會發出警告。
不使用 WordPress 主題編輯器的警告
因此,請聽從 WordPress 的建議:不要使用主題編輯器!
使用頁面生成器和框架定製 WordPress 主題
大部分 WordPress 主題都有自定義選項,這意味著你可以通過自定義器更改設計和佈局。
但有些主題則更進一步,可以進行擴充套件和大幅定製。這些主題被稱為主題框架。
另一種方法是使用外掛,它可以讓你使用使用者友好的介面設計網站:這些外掛被稱為頁面生成器。
使用頁面生成器定製主題
頁面生成器外掛的設計目的是讓你可以通過一個介面輕鬆設定網站的設計,讓你一目瞭然。
你可以將頁面生成器外掛與相容的主題一起安裝,然後使用它提供的選項按照你想要的方式設計網站。
最著名的頁面生成器之一是 Elementor,但你也可以在我們的頁面生成器綜述中找到一些替代產品。
頁面生成器讓你可以通過拖放介面編輯帖子和頁面,這意味著你可以看到內容的外觀,並讓每個頁面都獨一無二。
下面,我使用的是 Elementor 頁面生成器和與之相容的 Hello Elementor 主題。
Elementor 介面
頁面生成器在頁面佈局和設計方面具有很大的靈活性。如果您習慣使用 Wix 等建站工具,它們可以幫助您輕鬆過渡到 WordPress。如果你喜歡所見即所得的 WordPress 內容介面,它們可以幫助你快速設計頁面。
使用主題框架定製主題
主題框架是頁面構建工具的另一種選擇。它們是設計用於協同工作的主題套件。有一個作為框架的父主題,還有一些子主題供你選擇,你可以用它們來定製主主題,讓它看起來像你想要的樣子。
Divi 就是主題框架的一個例子,它有自定義選項,可以讓你進一步調整子主題的設計,包括類似於頁面生成器的拖放介面。
Divi 主題
推薦閱讀:Divi 與 Elementor: WordPress 頁面生成器外掛比較
編輯 WordPress 主題程式碼
如果您擅長編輯 CSS 和/或 PHP,那麼您可以編輯主題中的程式碼來定製您的主題。
這將為您提供最大程度的控制。
如果你正在編輯自己的主題,它是專門為你的網站開發的,那麼你可以直接對主題進行編輯。但如果您使用的是第三方主題,並希望對其進行編輯,則應建立一個子主題,以免下次更新主題時丟失更改內容。
編輯主題檔案
編輯 WordPress 主題的第一步是瞭解哪些主題檔案控制什麼,哪些需要編輯。
樣式表
每個 WordPress 主題都有一個樣式表,稱為 style.css。它包含了為網站設計樣式的所有程式碼:佈局、字型、顏色等。
例如,如果你想更改主題中的顏色,就需要對樣式表進行編輯。如果你想新增一種新字型,你可以使用樣式表將其應用到不同的元素,如正文和標題。
編輯樣式表時要注意:特定性意味著元素的程式碼並不總是來自於你想象的地方。除非你新增了針對下層元素的樣式,否則元素會繼承頁面層次結構中位於其上的其他元素的樣式。
要了解哪些 CSS 會影響頁面上的哪些元素,可以使用瀏覽器中的檢查器來檢視 CSS(本例中使用的是 Chrome 瀏覽器 DevTools):
使用 Chrome DevTools 檢查 WordPress 網站中的程式碼
然後,你就可以用它來編寫針對頁面上單個元素或一系列元素或類的新 CSS。
如果你對元素、類和特殊性不甚瞭解,那麼你最好不要直接編輯主題的 CSS。至少在你對 CSS 及其工作原理有更多瞭解之前是這樣。
Functions 檔案
幾乎每個主題都會有的另一個檔案是函式檔案 (functions.php)。該檔案能讓主題中的許多功能發揮作用。在該檔案中,你可以找到註冊主題功能的程式碼,如特色圖片、小部件等。
如果你想在主題中新增功能程式碼,這裡就是你要新增的地方。但要注意:在大多數情況下,你應該編寫一個外掛。問問你自己
如果將來換了主題,我還想保留這個功能嗎?
如果答案是肯定的,那就編寫一個外掛,而不是在功能檔案中新增程式碼。外掛不一定要很大:幾行程式碼就能建立一個外掛,沒有什麼能阻止你。
功能檔案都是用 PHP 編寫的,所以你需要熟悉 PHP。不要盲目照搬谷歌搜尋到的程式碼:花時間弄清楚程式碼的作用並理解它。這樣你就不容易新增到不盡如人意的程式碼中。
主題模板檔案
主題中的大部分檔案都是主題模板檔案。這些檔案決定了 WordPress 在特定頁面上輸出的內容,並根據模板層次結構進行選擇。
如果你想改變特定文章型別、頁面或存檔的內容輸出方式,你需要編輯其中一個檔案或建立一個新檔案。
例如,你的主題有一個 archive.php 檔案,用於輸出分類和標籤的存檔頁面。你想更改標籤的輸出方式。因此,你可以建立一個名為 “tag.php “的檔案,該檔案將在 archive.php 的基礎上進行調整。
再次提醒,編輯檔案時一定要小心:它們可能會破壞你的網站。請務必先使用工具在本地安裝測試。
無論您需要編輯哪種檔案型別,都應正確操作。請閱讀下面有關最佳實踐的部分,瞭解如何以不會破壞網站、不會給安全帶來麻煩的方式編輯程式碼。
使用子主題自定義第三方主題
如果你網站上執行的主題來自第三方,而你又想編輯程式碼,那麼你需要建立一個子主題。
這是因為如果你直接編輯主題,然後再更新它(你應該這樣做),就會丟失你所做的所有更改。
建立子主題包括四個步驟:
- 在 wp-content/themes 中建立一個新資料夾。
- 在該資料夾中建立一個樣式表。在樣式表中,告訴 WordPress 這是現有主題的子主題。
- 在子主題中新增要編輯的檔案副本,並在其中進行編輯。
- 在網站中啟用子主題。
WordPress 將始終使用子主題中的檔案來輸出內容,除非在父主題的層次結構中有更高的檔案。如果同一個檔案有兩個版本,它會使用子主題中的版本。這意味著您在子主題中新建的檔案將覆蓋父主題中的檔案。
定製 WordPress 主題的最佳實踐
您打算定製自己的主題。在進行更改之前,請遵循以下提示,以確保安全操作,不會破壞網站、使其易受攻擊或丟失程式碼。
如果可能,在不編輯程式碼的情況下進行定製
如果您可以通過 “自定義” 或管理螢幕的其他地方進行自定義,這比編輯程式碼更安全。
只有在熟悉 CSS(樣式表)和 PHP(其他主題檔案)並知道如何安全操作的情況下,才能編輯程式碼。
使用本地開發網站進行修改
如果您要編輯主題中的程式碼或建立子主題進行修改,您應該在本地安裝的 WordPress 上進行開發工作,並安裝好主題和從實時網站複製的內容。
這樣,您就有了一個實時網站的映象來測試您的更改。在本地網站上進行開發不會對您的實時網站產生任何影響,而且開發速度更快。
即使您使用的是自定義器,使用本地版本的網站進行測試也會很有幫助,因為您可以在不影響實時網站的情況下發布更改並進行測試。
測試完主題更改後,就可以將其上傳到實時網站,或者在暫存網站上進行測試,然後將其推送到實時網站。
使用版本控制
對主題進行修改時,應使用版本控制來跟蹤修改。
最簡單的方法就是更改主題的版本號,並保留兩個版本的副本。但如果你想正確進行版本控制,就需要使用 GitHub 等服務來跟蹤更改。
這樣,如果某個改動引起了問題,你就可以很容易地將其回滾,而無需進行手動編輯。
如果你是團隊成員之一,版本控制會更有幫助,因為你可以看到其他成員在做什麼。請務必閱讀我們的 git 與 Github 指南。
使主題具有響應性
您需要對主題進行的任何改動都應能在手機和桌上型電腦上執行。
隨著越來越多的人通過手機上網,以及谷歌推出的移動優先索引,您的主題在手機上的執行可能比在桌面上更重要。因此,您對主題所做的任何更改都必須是移動友好的,或者在相關情況下最好是移動優先。
這主要適用於您對樣式或佈局所做的任何更改:檢查新佈局是否能在移動裝置上執行,以及是否新增了媒體查詢,以便根據不同的螢幕尺寸調整佈局。
如果您的主題不是響應式的,就會對您的搜尋引擎排名和轉化率產生負面影響。
如果您無法使用大量不同的移動裝置進行測試,可以使用 BrowserStack 等工具檢視網站在不同裝置上的顯示效果。您還可以使用瀏覽器中的 “開發者” 工具和自定義器中的響應式檢視。
WordPress 自定義中的響應式工具
確保您的定製不會影響可訪問性
對主題的任何改動都需要確保殘疾或有感官障礙的使用者可以訪問。
這不僅僅是要確保您的網站能在螢幕閱讀器上執行:其他考慮因素,如配色方案和字型大小,對很多人來說都很重要。
如果您對主題所做的更改是為了讓顏色更鮮豔或讓文字更小,那麼請再三考慮:這可能會讓人們難以閱讀或與您的網站互動。
在您對網站進行任何修改之前,請使用可訪問性檢查器來測試您的網站,確保它不會將人們排除在外。
遵守 WordPress 編碼標準
如果您要編輯主題中的程式碼或建立子主題,您必須確保您的程式碼符合 WordPress 的編碼標準。
這些標準旨在確保程式碼的一致性和質量,避免程式碼混亂。PHP、CSS 和 JavaScript 都有相應的標準,因此請花些時間檢查與您相關的標準,並確保您遵循了這些標準。
如果您現有的 WordPress 主題編碼良好,並且您在編寫新程式碼時與之保持一致,那麼您就可以確保您的程式碼符合標準。確保為您對主題所做的任何更改新增註釋,以便您或其他人在將來再次修改程式碼時知道您做了什麼。您可能認為自己不會忘記,但幾個月過去後,您很容易就會忘記為什麼要編輯一行程式碼。
小結
定製 WordPress 主題並不難。有時,只需使用定製器修改字型、顏色或收藏夾圖示即可(請務必閱讀我們的 WordPress 字型深度指南)。其他時候,你必須建立一個新的子主題,為主題新增新的模板檔案。
自定義主題的選項包括使用外掛或自定義器、直接編輯 WordPress 主題程式碼或建立子主題。
找出適合您的選項,安全地進行自定義,而不會破壞您的網站。
評論留言