WordPress主題是一組檔案,包括影象、樣式表和程式碼,以及定義網站的視覺外觀和功能。
但是,WordPress主題並不總是包含您可能需要的功能。為了克服這個問題,WordPress有一個內建的主題編輯器,可讓您從儀表板修改主題檔案。
本文將解釋如何使用主題編輯器自定義WordPress主題。我們還將討論其他五種編輯網站的方法以及編輯WordPress主題時的有用提示。
什麼是WordPress主題編輯器?
WordPress主題編輯器是WordPress儀表盤中的一個簡單文字編輯器。它允許使用者自定義WordPress主題檔案以實現他們想要的外觀和功能。例如,附加一個額外的側邊欄,使網站適合移動裝置,或在標題中嵌入自定義視訊。
如何使用WordPress主題編輯器
WordPress主題編輯器可讓您從任何已安裝的主題開啟檔案。它在文字編輯器上顯示檔案內容,因此您可以直接在儀表板上調整主題程式碼。
雖然此工具在舊版WordPress中稱為主題編輯器,但較新的WordPress 5.9使用主題檔案編輯器。
通過Appearance -> Theme File Editor訪問主題程式碼編輯器。在右側,它將顯示主題包含的模板檔案列表。單擊任何檔案以檢視其內容並進行更改。
重要的!如果您在WordPress 5.9中使用基於塊的主題,請導航至工具 -> 主題檔案編輯器以訪問該編輯器。
要選擇其他主題進行修改,只需導航到螢幕右上角並單擊下拉選單以查詢更多主題選項。
但是,選擇另一個主題不會切換活動主題。轉到外觀->主題以檢視當前活動的主題或啟用不同的主題。
完成自定義主題檔案後,單擊“更新檔案”按鈕。如果程式碼中存在語法錯誤,WordPress 主題編輯器會阻止使用者儲存檔案。它還將指示錯誤所在的位置,從而更容易修復它。
由於大多數主題使用CSS、JavaScript和PHP檔案型別,因此確保您能夠輕鬆地使用它們至關重要。編輯或貼上程式碼片段時要小心,因為操作不當可能會導致錯誤甚至將您鎖定在網站之外。
主題檔案因主題而異。但是,每個WordPress主題都包含以下基本檔案:
- 樣式表 (style.css) – 包含與設計相關的功能,包括字型、顏色和佈局。您可以將自定義CSS新增到此檔案並更改整個網站的外觀。
- Functions.php – 確定主題的特性和功能,例如小部件、特色影象和自定義徽標。
- 模板檔案——HTML、模板標籤和 PHP 程式碼的組合,用於確定任何給定頁面的內容輸出,例如單個文章、404頁面和存檔。
如果您是為客戶工作的開發人員,最好禁用對主題編輯器的訪問。這樣做可以防止不必要的錯誤,因為客戶端可能沒有意識到編輯主題程式碼的潛在風險。
此外,禁用對主題程式碼編輯器的訪問可以防止黑客將惡意程式碼注入網站。
重要的!在自定義主題檔案之前始終建立備份。如果您想了解如何建立WordPress備份,請檢視我們的指南。
其他自定義WordPress主題的方法
WordPress主題編輯器並不是唯一可用於自定義網站主題和外觀的工具。在本節中,我們將討論幾種自定義WordPress主題的方法。
1. 通過檔案管理器編輯主題檔案
WordPress主題檔案儲存在您的虛擬主機帳戶中,並且可以使用檔案管理器對其進行修改。以下是使用寶塔面板執行此操作的步驟。
- 轉到寶塔儀表盤並單擊檔案選單。
- 進入WordPress安裝根目錄/www/wwwroot/yourdomain資料夾。
- 轉到wp_content ->themes資料夾。
- 此資料夾包含您為WordPress網站下載的所有主題。雙擊要編輯的主題的資料夾名稱。
- 選擇需要修改的主題檔案,然後單擊選單欄上的編輯圖示。
- 檔案管理器將開啟文字編輯器,以便您編輯檔案。完成後單擊“儲存”按鈕。
2. 使用基於區塊的站點編輯器
WordPress使用者還可以使用基於塊的編輯方法自定義他們的主題。
要使用此編輯器,您需要WordPress 5.9或更高版本以及基於塊的主題,例如Twenty Twenty-2或Wabi。
然後,您可以自定義主頁、文章和頁面的主題模板。通過導航到Appearance -> Site Editor來訪問編輯器。
編輯器會預設開啟主頁模板。通過單擊螢幕左上角的WordPress徽標並選擇模板來檢視所有可用模板。
由於這是一個基於區塊的編輯器,因此可以自定義和重新排列所有現有的WordPress區塊。我們有使用Gutenberg區塊編輯器的完整指南,但以下是您需要了解的主要操作:
- 單擊編輯器左上角的加號按鈕以開啟區塊庫。選擇其中一個塊將其插入到內容中。
- 單擊螢幕右上角的設定按鈕以開啟模板和區塊設定。每當您選擇一個塊時,該塊的設計工具都會出現在這裡。
- 單擊螢幕右上角的黑白圓圈以開啟全域性樣式面板。此面板可讓您自定義整個網站的顏色、版式和佈局元素,而無需使用任何CSS程式碼。
3. 安裝頁面構建器
許多WordPress主題與Divi、Elementor和Beaver Builder等WordPress頁面構建器相容。這些外掛中的大多數都具有拖放功能,允許您在不編輯程式碼的情況下調整主題。
要使用頁面構建器自定義您的網站,請安裝與您的主題相容的外掛並使用提供的選項來編輯頁面設計。
進入Elementor的拖放介面後,通過選擇左側邊欄上的小部件開始向頁面新增元素。
儘管頁面構建器為您的網站提供了靈活性和許多自定義選項,但它們也有缺點。
WordPress 頁面構建器將網站的佈局轉換為特定於外掛的短程式碼。因此,當您停用頁面構建器外掛時,短程式碼將不起作用,您將失去設計。
4.利用WordPress外掛
如果您的站點只需要基本的附加功能,安裝附加外掛是一個不錯的選擇。WordPress外掛目錄有數千個選項,從電子商務和安全外掛到社交媒體整合和SEO優化。
在安裝任何外掛之前,請注意它的最後更新時間、使用者評分以及與最新WordPress版本的相容性。經常更新的外掛通常具有較少的安全性和相容性問題,而使用者評分可以表明它們的整體質量。
如果您只是想編輯主題的樣式和設計,請使用CSS Hero之類的外掛。它生成樣式表的副本並覆蓋原始檔案,允許使用者修改網站的設計和樣式,而無需觸及主題的原始檔案。
5. 使用子主題
編輯主題檔案的缺點之一是更新主題時您將丟失更改。
安裝或建立一個新的子主題來解決這個問題。它是一個新的主題,繼承了父主題的所有特徵。
子主題的style.css和functions.php檔案儲存在單獨的目錄中,因此您可以建立新檔案來自定義子主題目錄中的樣式、佈局引數和指令碼。更新父主題時,這些檔案不會受到影響。
有幾種方法可以在WordPress中建立子主題。這些範圍從通過檔案管理器設定子主題資料夾到安裝像WPS Child Theme Generator這樣的外掛。
編輯WordPress主題時的其他提醒
儘管使用主題編輯器編輯主題的原始程式碼可以讓您完全控制結果,但它也可能導致您的網站丟失必要的程式碼片段並崩潰。
因此,以下部分將介紹在自定義WordPress主題之前要遵循的一些安全實踐。
始終建立備份檔案
在進行重大編輯時,建立 WordPress 網站的備份是必不可少的。如果出現問題,它可以防止您從頭開始修改設定和自定義。
但是,您並不總是需要完整備份。例如,如果您只編輯該檔案,則儲存一份stylesheet.css檔案就足夠了。如果出現問題,請上傳備份檔案以覆蓋更改。
設定本地測試伺服器或暫存環境
使用測試環境檢查和預覽您對WordPress主題所做的編輯。使用本地伺服器或臨時站點可防止不需要的錯誤到達實時站點。
為此,您需要使用MAMP或WampServer在本地安裝WordPress。這將為您提供在本地計算機上安裝和測試WordPress的環境。
另一種方法是使用臨時環境來複制您的站點。與本地伺服器解決方案不同,這是在您的網路託管帳戶或通過WordPress儀表板完成的。
使用WP Staging之類的外掛從您的WordPress儀表板設定網站的克隆。該外掛將提供克隆站點的URL——只需登入並開始編輯主題。
還值得注意的是,WP Staging將登臺網站的檔案儲存在您網站的子目錄中。
例如,如果您的WordPress網站安裝在public_html目錄中,則臨時站點將位於public_html/staging_site_name資料夾中。
使用版本控制
版本控制允許使用者跟蹤和撤消WordPress網站中的更改,允許他們在出現問題時恢復網站的先前版本。
這種預防方法非常適合在團隊中工作的人,因為它也是協作工作的絕佳工具。它使合併更改和測試新想法變得更加容易,而不會影響網站的實時版本。
WordPress版本控制有多種解決方案。其中之一是使用GitHub和GitLab等Git儲存庫來儲存和跟蹤程式碼更改。
另一種選擇是安裝一個像WP Rollback這樣的外掛,它可以讓你將你的網站回滾到任何以前的工作狀態。
小結
WordPress為其使用者提供了許多自定義選項和工具來修改網站的程式碼,包括主題程式碼編輯器。它提供了一種從儀表板訪問主題原始碼的簡單方法,允許您調整其網頁設計並建立新功能。
但是,我們建議您僅在具備編碼知識的情況下才使用主題編輯器,因為更改可能會覆蓋之前的調整並可能破壞您的網站。
因此,請確保實施某些預防措施以避免不可逆轉的問題:
- 建立備份檔案
- 使用本地測試伺服器或登臺環境
- 使用版本控制還原更改
或者,使用風險較小的方法來編輯網站的主題,例如安裝外掛、使用塊編輯器或建立子主題。
評論留言