如何在 WordPress 中編輯 HTML

您想自定義您的網站嗎？ 如果您正在尋找個性化網站及其設計的方法，那麼您來對地方了。 在本指南中，我們將向您展示不同的初學者友好方法，無需聘請自由職業者即可在 WordPress 中編輯 HTML 文件。

為什麼要在 WordPress 中編輯 HTML 代碼？

儘管 WordPress 是一種即用型 CMS，不需要任何編碼經驗並提供數千個主題和插件來自定義您的網站，但學習編輯 HTML 將為您提供很大的靈活性。

通過自定義 HTML 代碼，您將獲得對網站的更多控制權，並且您將能夠執行高級設計自定義，為您的主題添加自定義功能或效果。 此外，當您無權訪問管理儀表板時，您將能夠解決問題。

通過自定義 HTML 代碼可以做的一些主要事情是：

• 包括文本、圖像和視頻
• 添加功能或特性
• 更好地控制您的 WordPress 網站
• 當您無權訪問 WordPress 管理儀表板時解決問題

總而言之，如果您學習如何在 WordPress 中編輯 HTML 代碼，您將有更多選項來自定義您的網站，並且可以將其提升到一個新的水平。

什麼時候不應該編輯 HTML？

您可能知道，WordPress 使用四種主要語言：HTML、CSS、PHP 和 JavaScript。 這意味著要進行一些更改，您需要了解的不僅僅是 HTML。 這就是為什麼在某些情況下自定義 HTML 代碼不是一個好主意的原因。

HTML 用於構建網頁，因此如果您需要更改網站的設計並編輯顏色、字體、行高等類似內容，您可以簡單地自定義 CSS 代碼。 此外，當您嘗試同時控制多個頁面的佈局時，不應編輯 HTML。

最重要的是，我們不建議在實時環境中自定義代碼。 錯誤位置的單個逗號或撇號可能會給您的站點帶來重大問題，因此最好在暫存環境中測試所有內容。

如何在 WordPress 中編輯 HTML

在本指南中，我們將向您展示在 WordPress 中自定義 HTML 代碼的不同方法：

1. WordPress 經典編輯器
2. WordPress塊編輯器
3. 編輯 HTML 源代碼
4. 帶插件
5. 小部件

讓我們來看看它們中的每一個，以便您選擇最適合您的那個。

在你開始之前…

在繼續之前，我們強烈建議您創建一個子主題。 如果您不知道如何操作，請查看此分步指南或使用這些插件中的任何一個。 這很重要，因為如果您修改父主題文件，則每次更新主題時都會丟失所有自定義項。

此外，請確保創建站點的完整備份並將其存儲在安全位置。 這樣，如果出現問題，您可以隨時返回並恢復您的網站。

1) WordPress 經典編輯器

經典編輯器是流行的 WordPress 內容編輯器。 該插件允許您輕鬆編輯站點上的 HTML 文件。

首先，在您的站點上安裝並激活經典編輯器插件。 然後，打開任何帖子或頁面，您將看到兩種模式：視覺和文本。

視覺顯示您在前端看到的內容。 您將看到不同的標題大小、圖像、粗體文本等。

另一方面，當您使用文本編輯器時，您會看到帖子的 HTML 版本，因此您可以從此處編輯 HTML 代碼。

好消息是您可以切換到可視模式以查看您的更改在前端的外觀，而無需發布任何內容。

添加或自定義 HTML 代碼後，只需更新或發布帖子即可！

2）WordPress塊編輯器

最新的 WordPress 版本帶有一個名為 Gutenberg 的新編輯器。 它是具有更多功能的高級內容編輯器。 如果您使用的是 Gutenberg，您還可以像以前一樣編輯 HTML 代碼。

要在您的帖子或頁面中添加自定義 HTML 部分，請使用HTML 塊並將 HTML 代碼添加到其中。 然後更新帖子，您就可以開始了。

有時，您需要編輯現有的段落或圖像並添加額外的樣式。 要使用 Gutenberg 在 WordPress 中編輯現有 HTML 代碼，請選擇要自定義的元素，然後按更多選項。

之後，選擇編輯為 HTML選項。

您將看到元素的 HTML 模式，並且可以對其進行自定義。

一旦您對更改感到滿意，您可以通過點擊Edit visible輕鬆切換回可視化編輯器。

如您所見，使用 Gutenberg 添加或編輯現有 HTML 代碼既快捷又簡單。 在發布之前，請務必檢查預覽以確保一切正常。

3) 在 WordPress 中編輯 HTML 源代碼

另一種選擇是在 WordPress 中編輯 HTML 源代碼。 這個過程比以前的過程風險更大，因為如果您不知道自己在做什麼，您可能會破壞您的網站。 讓我們看看如何使用四種不同的方法自定義 HTML 源代碼。

1. 儀表板文件編輯器
2. FTP

3.1) 儀表板文件編輯器

這是無需訪問任何其他網站或依賴任何其他工具即可編輯源代碼的最直接方法。

在您的 WordPress 儀表板中，轉到外觀 > 主題編輯器。

在右側，您將看到所有主題文件。

在右上角，您還可以選擇更改主題目錄。

在我們的例子中，我們使用的是二十二十個主題。 選擇正確的主題後，選擇要編輯的相應文件夾和文件。

您可能想要編輯的一些最常見的文件是：

• 索引.php
• 頭文件.php
• 頁腳.php
• 函數.php
• 樣式.css

假設您要編輯主題的標題，請從列表中選擇header.php文件。

通常， .php文件包含 PHP，但也包含其他語言，例如 HTML、JavaScript（有時）和 CSS（在某些情況下）。 因此，您可以從那裡編輯 HTML 文件。 如上所述，單個逗號或撇號可能會破壞您的網站，因此請謹慎操作。

3.2) FTP

如果您更喜歡技術性更強的方法，您可以使用 FTP 客戶端自定義 HTML 代碼。 為此，您可以使用 FileZilla，它是目前最好、安全且用戶友好的 FTP 客戶端之一。

首先，下載 FileZilla 並創建一個帳戶。 大多數 WordPress 託管公司會通過 cPanel 為您提供免費的 FTP 帳戶訪問權限。 生成主機名、用戶名和密碼後，連接到服務器。

如果要編輯主題文件，請轉到wp-content >主題文件夾。

如您在上面的屏幕截圖中所見，我們的網站上有四個主題：GeneratePress、 29 歲、 20 歲和21 歲。

假設我們要編輯 GeneratePress 文件，所以我們打開主題文件夾。

要編輯文件，請右鍵單擊它並選擇查看/編輯選項。 例如，要編輯頁腳，您需要編輯footer.php文件。

FileZilla 將在文本編輯器上打開文件，如下所示。

之後，您可以進行更改、保存文件並將其上傳回服務器。

3.3) 面板

大多數託管公司都為其客戶提供 cPanel（控制面板）訪問權限，因此這是在 WordPress 中編輯 HTML 代碼的另一種絕佳方式。

為此，請登錄您的網​​絡託管帳戶並訪問 cPanel。 然後，打開文件管理器。

之後，轉到wp-content >主題。

打開要自定義的主題，然後右鍵單擊要更改的文件，然後按Edit 。

這將在文本編輯器中打開文件，您可以在其中對其進行自定義。 進行更改後，不要忘記保存文件。

4) 插件

在 WordPress 中編輯 HTML 代碼的另一種方法是使用插件。 WP File Manager 是一款出色的免費工具，可將 FTP 功能帶入您的儀表板。 讓我們看看如何使用它。

首先，登錄您的 WordPress 站點並轉到插件 > 添加新的. 搜索文件管理器，安裝並激活它。

之後，從側邊欄中選擇 WP 文件管理器選項。

現在，打開wp-content目錄。

然後，打開主題文件夾並選擇要修改的文件夾。 在我們的例子中，我們將編輯Astra 主題文件。

打開文件夾後，您將看到所有可用的文件。 找到要編輯的內容後，右鍵單擊它並選擇代碼編輯器選項。

與大多數 FTP 程序一樣，此插件不需要您在筆記本電腦上安裝文本編輯器軟件。 如果是這種情況，插件將在基於 Web 的文本編輯器上打開文件，您可以在其中編輯代碼。

一旦你完成了修改文件，保存它，就是這樣。

5) 小部件

現在讓我們看看如何將 HTML 代碼添加到小部件區域。

首先，轉到外觀 > 小部件。

在那裡，您將看到所有小部件區域。

現在將 HTML 小部件添加到任何小部件區域。 對於本教程，我們將選擇側邊欄。

您可以為代碼添加標題並在其中包含您的自定義 HTML 代碼。

添加代碼後，保存小部件，一切順利。

獎勵：在 WordPress 中編輯 CSS 和 PHP

WordPress 使用四種主要語言：

• PHP
• HTML
• CSS
• JavaScript

到目前為止，您已經學習瞭如何在 WordPress 中編輯 HTML 代碼。 在本節中，我們將向您展示如何自定義站點的 CSS 和 PHP 代碼並添加自定義腳本。

編輯和添加 CSS 代碼

除了我們上面提到的方法之外，您還可以使用 WordPress 定制器將自定義 CSS 代碼添加到您的站點。 為此，在您的WordPress 儀表板中，轉到外觀 > 自定義。

進入定制器後，轉到Additional CSS 。

在那裡你可以簡單地輸入你的 CSS 代碼。

最好的部分是您可以在實時預覽模式下看到所有更改。

一旦您對更改感到滿意，請更新/發布帖子或頁面。

這是向您的網站添加 CSS 代碼的最簡單方法之一。 請記住，此代碼將疊加在我們主題的style.css文件之上。

注意：某些 WordPress 主題（例如 Divi 或 Avada）帶有內置功能來添加 CSS 代碼，因此您可以使用主題面板來包含您的 CSS 代碼，而不是使用定制器。

編輯/添加 PHP 代碼

PHP 是 WordPress 的核心語言。 與編輯 HTML 類似，自定義現有 PHP 代碼很容易。 您可以使用主題編輯器或上述任何方法來執行此操作。 在本節中，我們將向您展示如何使用名為 Code Snippets 的插件添加 PHP 片段。

首先，在您的站點上安裝並激活代碼片段。

之後，轉到插件的設置並單擊“添加新”以將新代碼段包含到您的站點中。

為您的代碼段命名以記住您正在添加的內容，粘貼您的 PHP 代碼，然後保存代碼段。

在本教程中，我們採用了一個簡單的片段來向我們的站點添加自定義圖像大小。 之後點擊保存，你就完成了！

這樣，您可以向您的 WordPress 網站添加無限的 PHP 代碼，並根據需要對其進行自定義。

結論

總而言之，自定義 HTML 代碼可以幫助您更好地控制您的網站以及添加功能和解決問題。 最好的部分是在 WordPress 中，您可以輕鬆地編輯 HTML 代碼並個性化您的網站。

在本指南中，我們看到了不同的方法：

1. 使用 WordPress 經典編輯器
2. 使用塊編輯器
3. 編輯 HTML 源代碼
4. 使用插件
5. 將 HTML 添加到小部件

自定義 HTML 代碼的最簡單方法是通過 WordPress 主題編輯器。 如果您正在尋找更高級的解決方案，您可能需要使用 FileZilla 等 FTP 客戶端編輯 HTML 源代碼。 如果您不想在計算機上安裝任何軟件，可以使用 cPanel 方法。

另一方面，如果您更喜歡插件，您可以使用 WP File Manager 來包含或編輯 HTML 代碼，而無需依賴任何其他 FTP 軟件或文本編輯器。

最後，您還可以使用 WordPress Customizer 或 Code Snippets 插件包含和編輯 CSS 或 PHP。

我們希望這篇文章對您有所幫助並幫助您自定義您的網站。 您知道在 WordPress 中編輯 HTML 文件的任何其他方法嗎？ 你用哪一個？ 在下面的評論部分讓我們知道！