如何使用 WordPress 自定義 HTML 塊

自定義 HTML 塊可讓您添加 HTML 內容並對其進行編輯，而無需查看頁面或以 HTML 形式發布。 您可以嵌入 HTML，甚至可以使用它來標記您的文本，然後根據需要將其轉換為帶有樣式文本的段落塊。 這個塊非常適合那些喜歡在 HTML 中工作的人，它是嵌入某些類型代碼（例如 Google 地圖）的最佳方式之一。

在本文中，我們將仔細研究自定義 HTML 塊。 我們將了解如何將其添加到您的帖子和頁面、查看其設置和選項、查看有關如何使用它的提示以及常見問題解答。

訂閱我們的 YouTube 頻道

如何將自定義 HTML 塊添加到您的帖子或頁面

要將自定義 HTML 塊添加到您的內容，請將光標放在您希望塊出現的位置，然後選擇插入器工具。 將打開一個搜索框，您可以在其中輸入搜索詞或滾動選項。 搜索html並在結果中顯示該塊時選擇該塊。

或者，您可以在希望塊出現的位置鍵入/html並按 Enter 鍵或從塊區域上方的選項中選擇它。

現在，您的內容中有一個自定義 HTML 塊，您可以在其中添加 HTML。 當我們完成設置時，我們將看到一些帶有代碼的示例。

自定義 HTML 塊設置和選項

與大多數塊不同，自定義 HTML 塊不包括編輯器側欄中的選項。 您將在工具欄中找到所需的所有選項。

自定義 HTML 塊工具欄

單擊塊內的任意位置以查看其工具。 如果您沒有看到它們，請在新區域中的塊下方單擊，然後當您再次選擇塊時，將顯示其餘工具。

每個塊都有自己的特定控件，您可以在其中選擇塊的選項。 工具欄上方的一小組塊選項允許您更改塊類型、轉換為塊以及打開選項。

讓我們詳細看看每個設置。

自定義 HTML 更改塊或樣式

在選項中選擇 HTML 會打開一個下拉框，您可以在其中將塊轉換為其他類型的塊。 選項包括代碼、列或組。

代碼– 將自定義 HTML 塊轉換為代碼塊，以便您可以顯示不同類型的代碼。

列– 將塊放置在列中。

組- 將塊添加到組中，以便您可以將它們作為單個塊進行調整。

自定義 HTML 塊拖動工具

拖動工具包括六個點，您可以用鼠標抓住它們來移動它。

然後，只需將塊拖動到內容中您想要的任何位置並將其放下。 將出現一條藍線，指示在您四處拖動塊時將放置塊的位置。

一旦您看到藍線出現在您想要塊的位置，鬆開鼠標按鈕，您的塊將被放置在新位置。

自定義 HTML 塊移動

每次單擊時，向上和向下箭頭都會將塊移動到一個內容部分。 當塊自動移動到新位置時，屏幕將滾動。 這是將塊移動一兩個部分的簡單方法。

自定義 HTML 塊 HTML 和預覽

HTML 和預覽按鈕讓您可以選擇塊如何在編輯器中與 HTML 配合使用。 默認情況下選擇 HTML 按鈕。 這以代碼形式顯示 HTML，而不是執行它。 此示例顯示了 Google 地圖的 HTML。

選擇預覽顯示 HTML 在瀏覽器中執行時在前端的外觀。 在視圖之間來回切換以編輯 HTML 並查看最終用戶的外觀很容易。 這是進行編輯和快速查看結果的絕佳方式。 此示例顯示了嵌入的 Google 地圖，因為它會出現在內容中。

再舉一個例子，這裡有一些 HTML 來為一行文本添加樣式。 這是 HTML 視圖，我可以在其中創建和編輯 HTML。

這是預覽模式，顯示了它在前端的外觀。

自定義 HTML 塊選項

工具欄的最右側是垂直堆疊的三個點。 這三個點在三個分區中打開一組 10 個選項，允許您隱藏設置、轉換為塊、複製、複製、前後插入、移動到、添加到可重用塊、分組或刪除塊。

以下是自定義 HTML 塊選項可以執行的操作：

隱藏更多設置- 這會隱藏右側邊欄，擴展您的工作區。

轉換為塊- 這會將內容轉換為其他適當的塊。 文本將轉換為段落塊，圖像將轉換為圖像塊等。嵌入代碼，例如我在示例中使用的 Google 地圖代碼，將保留為自定義 HTML 塊。 如果塊中的其他 HTML 可以轉換，則它將從塊中刪除，放置在不同的塊中。

複製- 這會將塊複製到剪貼板，以便您可以將其粘貼到編輯器中的任何位置。

複製- 這會將塊的副本放置在原始塊下方。

插入前- 這會在自定義 HTML 塊之前添加一個塊區域，以便您可以放置​​另一個塊。

插入後- 這會在塊之後添加一個區域，您可以在其中放置另一個塊。

移動到- 這讓您可以使用箭頭鍵向上或向下移動塊。 您將移動一條藍線。 當它到達你想要的位置時，按回車鍵，方塊會立即移動。

添加到可重用塊- 將自定義 HTML 塊添加到您的可重用塊中，以便您可以在任何頁面或帖子上再次使用它。

組- 這會將塊添加到組中，以便您可以將塊作為單個單元進行調整。

刪除塊- 這將刪除塊。

有效使用自定義 HTML 塊的提示和最佳實踐

首先使用此塊設置文本樣式並編輯 HTML，然後使用轉換為塊工具創建段落或其他類型的內容。 這使您可以更好地控制內容，並且在您不需要保留 HTML 版本時尤其有用。 您可以隨時查看預覽。 這使您不必在側邊欄中的 WordPress 設置中的可視化編輯器和代碼編輯器之間進行更改。

將此塊用於嵌入的地圖、廣告、視頻等。這樣您就不必切換到代碼編輯器視圖並將代碼添加到其他類型的塊中，例如段落塊。

使用此塊而不是頁面和帖子的代碼編輯器版本可以讓您不必使用頁面和帖子標籤。 這創造了一個更清潔、更易於使用的工作環境。

無論您是添加自己的 HTML 還是嵌入來自其他來源的代碼，請經常使用預覽功能來確保您的 HTML 以您想要的方式執行。

不要在塊中使用腳本標籤。 它可能會被刪除，然後您的代碼將無法工作。

關於自定義 HTML 塊的常見問題

自定義 HTML 塊有什麼作用？

它允許您將 HTML 輸入到一個字段中，這樣您就可以在將頁面或帖子保留在可視化編輯器中的同時使用它。

如何使用自定義 HTML 塊？

可以添加任何帶有受支持標籤的 HTML。 您可以將塊用於廣告、地圖、視頻、任何帶有 iframe、表格等的內容。這也是標記文本然後將其轉換為段落塊的簡單方法。

它會對標記進行顏色編碼嗎？

不，塊中的標記看起來像任何文本編輯器。

自定義 HTML 塊是否運行 HTML？

它在前端正常運行 HTML。 在編輯器中，它可以運行 HTML 或向您顯示代碼。 由您決定查看哪個，您可以隨時單擊按鈕在兩個選項之間進行選擇。

是否支持所有 HTML 標籤？

否。您可以在 WordPress 支持的代碼頁面上看到支持的 HTML 標籤列表。

結論

這就是我們對自定義 HTML 塊的看法。 此塊不僅適用於開發人員。 使用此塊的主要優點是您無需在可視化編輯器和代碼編輯器之間切換即可使用 HTML。 這意味著您可以處理正常顯示的其餘內容。 然後您可以在塊中使用 HTML 並隨時預覽它。 自定義 HTML 塊提供了一種在塊編輯器中使用 HTML 的簡單方法。

我們希望聽到您的意見。 您使用自定義 HTML 塊嗎？ 請在評論中告訴我們您的體驗。

精選圖片來自 enterlinedesign/shutterstock.com