自定義HTML區塊可讓您新增HTML內容並對其進行編輯，而無需檢視頁面或以HTML形式釋出。您可以嵌入HTML，甚至可以使用它來標記您的文字，然後根據需要將其轉換為帶有樣式文字的段落區塊。這個區塊非常適合那些喜歡在HTML中工作的人，它是嵌入某些型別程式碼（例如 Google 地圖）的最佳方式之一。
在本文中，我們將仔細研究自定義HTML區塊。我們將瞭解如何將其新增到您的文章和頁面、檢視其設定和選項、檢視有關如何使用它的提示以及常見問題解答。
如何將自定義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的簡單方法。
評論留言