雖然WordPress使非編碼人員可以輕鬆管理網站，但有時您可能希望在WordPress中編輯程式碼以更好地控制您的網站的外觀或功能。
為了幫助您做到這一點，這篇文章將向您展示如何以幾種不同的方式在WordPress中安全地編輯程式碼：
如果您已經知道要做什麼，可以單擊上面的連結之一直接跳到該特定部分。否則，讓我們開始編輯！
為了更好地控制WordPress網站的外觀和功能，您可以編輯WordPress程式碼以自定義不同的區域：
- 新的區塊編輯器和經典編輯器支援編輯單個文章或頁面的HTML程式碼。
- 如果要編輯WordPress主題的原始碼，請使用子主題。
- 考慮使用外掛來管理新增到主題的<head>或functions.php檔案中的程式碼片段。
- 如果您只想新增自定義CSS，您可以使用WordPress定製器中的附加CSS區域或“Simple CSS”等外掛。
如何為單個文章/頁面編輯WordPressHTML
讓我們從編輯WordPress的HTML程式碼的最簡單方法開始——訪問單個WordPress文章、頁面或其他文章型別的原始碼。
您可以在新的WordPress區塊編輯器 (Gutenberg)以及較舊的經典TinyMCE編輯器中執行此操作。
如何在區塊編輯器中編輯HTML (Gutenberg)
您可以通過多種方式在Gutenberg中使用 HTML。
首先，如果您只想將自己的HTML程式碼新增到一段內容中，我建議不要嘗試編輯文章的整個原始碼，因為這會使事情變得不必要地複雜化。
相反，您可以只使用專用的自定義HTML區塊並貼上您想在那裡使用的HTML：
古騰堡自定義HTML區塊
但是，有時您也可能需要直接編輯不同區塊的HTML。例如，如果您想向塊編輯器中的連結新增nofollow標記，則需要編輯該區塊的HTML。
有兩種方法可以做到這一點……
首先，您可以單擊單個區塊的選項並選擇作為HTML編輯選項：
如何將單個區塊作為HTML編輯
這將讓您編輯該單個區塊的HTML：
編輯區塊的HTML的示例
或者，如果您想編輯整個文章的HTML ，您可以從主工具和選項下拉選單中訪問程式碼編輯器。或者，您也可以僅使用此鍵盤快捷鍵在程式碼和視覺化編輯之間切換 – Ctrl + Shift + Alt + M：
如何在Gutenberg中訪問完整的程式碼編輯器
請記住，在完整的程式碼編輯器中，您必須處理區塊的所有標記 – 例如<!-- wp:paragraph -
如何在經典編輯器 (TinyMCE) 中編輯HTML
如果您仍在使用經典WordPress編輯器 (TinyMCE)，則可以通過轉到“文字”選項卡來編輯整個文章的HTML ：
如何在經典WordPress編輯器中編輯HTML
如何編輯WordPress主題中的原始碼
現在，讓我們進入更大的主題，即如何在WordPress主題中編輯程式碼。風險有點高，所以在我們進入操作方法之前，我們需要先解決一些初步問題。
為什麼賭注更高？嗯，很簡單，這是因為如果你在這裡搞砸了一些東西，你可能會破壞你的網站！
在最近的版本中，WordPress使您更難不小心這樣做，但是編輯網站的原始碼總是會開啟問題的大門，因此您要確保安全地進行。
使用子主題進行任何直接程式碼編輯
如果您打算直接編輯主題檔案中的任何程式碼，則需要使用子主題而不是編輯“父”主題。
如果沒有子主題，您所做的任何程式碼更改都將在您下次更新主題時被覆蓋。但是，當您使用子主題時，您將能夠及時更新父主題而不會丟失您在子主題中所做的更改。
考慮使用外掛而不是在子主題中編輯程式碼
如果您打算修改主題的工作方式，則可能需要通過直接編輯子主題的原始碼來進行工作。
但是，如果您出於其他原因想在WordPress中編輯程式碼——例如向網站的<head>部分新增跟蹤指令碼或向主題的functions.php檔案新增程式碼段——您最好使用外掛代替.
例如， Head, Footer and Post Injections可以很容易地在需要的地方注入程式碼片段。而且因為這些程式碼片段都被隔離在外掛的介面中，所以將來管理它們也更容易。
同樣，如果您要新增可以放入子主題的functions.php檔案的程式碼片段，免費的Code Snippets外掛是一個不錯的選擇。
總之，如果您想在WordPress中編輯程式碼以將片段新增到您的主題…
<head>部分- Functions.php
…那麼您應該考慮使用外掛而不是指導編輯主題檔案，因為這樣可以更輕鬆地管理這些片段並確保更新主題時它們不會被覆蓋。
如果您需要進行其他編輯，讓我們深入瞭解如何為您的主題編輯原始碼。
使用儀表盤內的WordPress程式碼編輯器
如果您打算直接編輯您的主題程式碼，我們強烈建議您在這樣做之前備份您的網站（您的整個網站或您正在編輯的檔案）。
完成後，您可以通過轉到外觀→ 主題編輯器來訪問儀表板內的主題程式碼編輯器。在這裡，WordPress會首先給你一個類似於你上面學到的警告：
訪問儀表盤內程式碼編輯器之前的警告
然後，您將能夠使用右側的側邊欄在不同的主題檔案和程式碼編輯器本身之間導航以進行實際編輯：
儀表盤內的WordPress程式碼編輯器
使用SFTP編輯WordPress程式碼
作為儀表盤程式碼編輯器的替代方案，您還可以通過SFTP編輯主題檔案。這種方法有兩個好處：
- 您可以使用您喜歡的程式碼編輯器。
- 如果您不小心弄壞了某些東西，您可以立即解決問題。相比之下，如果您通過WordPress儀表盤編輯程式碼，則總有可能會導致你無法進入WordPress儀表盤，這意味著您需要通過SFTP連線來解決問題（儘管再次 – 這是由於最近的變化，可能性較小）。
以下是通過FTP連線到您的站點的方法。
完成後，導航到您的主題資料夾 – …/wp-content/themes/child-theme-name。找到要編輯的檔案並右鍵單擊它。大多數FTP程式都會為您提供編輯檔案的選項，並在您進行更改後自動重新上傳檔案。
但是，我們強烈建議您在進行任何更改之前將該檔案的原始版本下載到您的桌面。這樣，如果您不小心破壞了某些內容，您可以重新上傳原始版本：
如何通過SFTP編輯WordPress的檔案程式碼
如何將自定義CSS新增到WordPress
如果您只想向WordPress新增自定義CSS，而不是編輯WordPress的HTML或PHP程式碼，則不需要使用儀表板內程式碼編輯器或SFTP方法。
相反，您可以使用WordPress定製器。除了是一個更簡單的選擇之外，採用這種方法的另一個好處是您將能夠實時預覽您的更改。
要開始，請轉到WordPress儀表盤中的外觀 → 自定義：
如何訪問WordPress定製器
然後，在WordPress定製器中查詢額外CSS選項：
WordPress定製器中的額外CSS選項
這將開啟一個程式碼編輯器，您可以在其中新增所需的CSS。新增CSS時，站點的實時預覽將根據這些更改自動更新：
如何在WordPress定製器中編輯CSS
新增CSS的另一個不錯的選擇是Tom Usborne的Simple CSS外掛。它在WordPress定製器中為您提供了一個類似的選項，它還允許您通過元框將自定義CSS新增到單個文章或頁面。
最後，如果您想新增大量自定義CSS——比如數百或數千行——另一個選擇是建立您自己的自定義CSS樣式表並使用wp_enqueue_scripts將其新增到您的主題中。
小結
如果您想在單個WordPress文章或頁面中編輯程式碼，新的區塊編輯器和經典編輯器都為您提供了直接編輯HTML的選項。
另一方面，如果您想編輯WordPress主題的原始碼，則需要考慮以下幾點：
- 始終使用子主題，而不是直接對父主題進行程式碼編輯。
- 考慮使用外掛來管理您新增到<head>或functions.php檔案的片段，因為這些外掛可以提供更簡單、更易於管理的方法。
如果您在考慮這些因素後仍需要直接編輯程式碼，您可以通過轉到外觀 → 主題編輯器，從您的WordPress儀表盤編輯您的子主題的原始碼。或者，您可以通過SFTP連線到您的站點並以這種方式編輯程式碼。
最後，如果您只想新增一些自定義CSS，則無需直接編輯主題程式碼。相反，您可以只使用WordPress定製器中的額外CSS區域或像Simple CSS這樣的外掛。
評論留言