建站
咨詢
售后
建站咨詢
新聞中心
自定義HTML區(qū)塊可讓您添加HTML內(nèi)容并對(duì)其進(jìn)行編輯，而無(wú)需查看頁(yè)面或以HTML形式發(fā)布。您可以嵌入HTML，甚至可以使用它來(lái)標(biāo)記您的文本，然后根據(jù)需要將其轉(zhuǎn)換為帶有樣式文本的段落區(qū)塊。這個(gè)區(qū)塊非常適合那些喜歡在HTML中工作的人，它是嵌入某些類型代碼（例如 Google 地圖）的最佳方式之一。
在本文中，我們將仔細(xì)研究自定義HTML區(qū)塊。我們將了解如何將其添加到您的文章和頁(yè)面、查看其設(shè)置和選項(xiàng)、查看有關(guān)如何使用它的提示以及常見(jiàn)問(wèn)題解答。
如何將自定義HTML區(qū)塊添加到文章或頁(yè)面
要將自定義HTML區(qū)塊添加到您的內(nèi)容，請(qǐng)將光標(biāo)放在您希望區(qū)塊出現(xiàn)的位置，然后選擇插入器工具。將打開一個(gè)搜索框，您可以在其中輸入搜索詞或滾動(dòng)選項(xiàng)。搜索html并在結(jié)果中顯示該區(qū)塊時(shí)選擇該區(qū)塊。
或者，您可以在希望區(qū)塊出現(xiàn)的位置鍵入/html并按 Enter 鍵或從區(qū)塊區(qū)域上方的選項(xiàng)中選擇它。
現(xiàn)在，您的內(nèi)容中有一個(gè)自定義HTML區(qū)塊，您可以在其中添加HTML。當(dāng)我們完成設(shè)置時(shí)，我們將看到一些帶有代碼的示例。
自定義HTML區(qū)塊設(shè)置和選項(xiàng)
與大多數(shù)區(qū)塊不同，自定義HTML區(qū)塊不包括編輯器側(cè)欄中的選項(xiàng)。您將在工具欄中找到所需的所有選項(xiàng)。
自定義HTML區(qū)塊工具欄
單擊區(qū)塊內(nèi)的任意位置以查看其工具。如果您沒(méi)有看到它們，請(qǐng)?jiān)谛聟^(qū)域中的區(qū)塊下方單擊，然后再次選擇區(qū)塊時(shí)將顯示其余工具。
每個(gè)區(qū)塊都有自己的特定控件，您可以在其中選擇區(qū)塊的選項(xiàng)。工具欄上方的一小組區(qū)塊選項(xiàng)允許您更改區(qū)塊類型、轉(zhuǎn)換為區(qū)塊以及打開選項(xiàng)。
讓我們?cè)敿?xì)看看每個(gè)設(shè)置。
自定義HTML更改區(qū)塊或樣式
在選項(xiàng)中選擇HTML會(huì)打開一個(gè)下拉框，您可以在其中將區(qū)塊轉(zhuǎn)換為其他類型的區(qū)塊。選項(xiàng)包括代碼、欄目或組。
- 代碼– 將自定義HTML區(qū)塊轉(zhuǎn)換為代碼區(qū)塊，以便您可以顯示不同類型的代碼。
- 欄目– 將區(qū)塊放置在欄目中。
- 組– 將區(qū)塊添加到組中，以便您可以將它們作為單個(gè)區(qū)塊進(jìn)行調(diào)整。
自定義HTML區(qū)塊拖動(dòng)工具
拖動(dòng)工具包括六個(gè)點(diǎn)，您可以用鼠標(biāo)抓住它們來(lái)移動(dòng)它。
然后，只需將區(qū)塊拖動(dòng)到內(nèi)容中您想要的任何位置并將其放下。將出現(xiàn)一條藍(lán)線，指示在您四處拖動(dòng)區(qū)塊時(shí)將放置區(qū)塊的位置。
一旦您看到藍(lán)線出現(xiàn)在您想要區(qū)塊的位置，松開鼠標(biāo)按鈕，您的區(qū)塊將被放置在新位置。
自定義HTML區(qū)塊移動(dòng)
每次單擊時(shí)，向上和向下箭頭都會(huì)將區(qū)塊移動(dòng)到一個(gè)內(nèi)容部分。當(dāng)區(qū)塊自動(dòng)移動(dòng)到新位置時(shí)，屏幕將滾動(dòng)。這是將區(qū)塊移動(dòng)一兩個(gè)部分的簡(jiǎn)單方法。
自定義HTML區(qū)塊的HTML和預(yù)覽
HTML和預(yù)覽按鈕讓您可以選擇區(qū)塊如何在編輯器中與HTML配合使用。默認(rèn)情況下選擇HTML按鈕。這以代碼形式顯示HTML，而不是執(zhí)行它。此示例顯示了Google地圖的HTML。
選擇預(yù)覽顯示HTML在瀏覽器中執(zhí)行時(shí)在前端的外觀。在視圖之間來(lái)回切換以編輯HTML并查看最終用戶的外觀很容易。這是進(jìn)行編輯和快速查看結(jié)果的絕佳方式。此示例顯示了嵌入的Google地圖，因?yàn)樗鼤?huì)出現(xiàn)在內(nèi)容中。
再舉一個(gè)例子，這里有一些HTML來(lái)為一行文本添加樣式。這是HTML視圖，我可以在其中創(chuàng)建和編輯HTML。
這是預(yù)覽模式，顯示了它在前端的外觀。
自定義HTML區(qū)塊選項(xiàng)
工具欄的最右側(cè)是垂直堆疊的三個(gè)點(diǎn)。這三個(gè)點(diǎn)在三個(gè)分區(qū)中打開一組10個(gè)選項(xiàng)，允許您隱藏設(shè)置、轉(zhuǎn)換為區(qū)塊、復(fù)制、復(fù)制、前后插入、移動(dòng)到、添加到可重用區(qū)塊、分組或刪除區(qū)塊。
以下是自定義HTML區(qū)塊選項(xiàng)可以執(zhí)行的操作：
- 隱藏更多設(shè)置– 這會(huì)隱藏右側(cè)邊欄，擴(kuò)展您的工作區(qū)。
- 轉(zhuǎn)換為區(qū)塊– 這會(huì)將內(nèi)容轉(zhuǎn)換為其他適當(dāng)?shù)膮^(qū)塊。文本將被轉(zhuǎn)換為段落區(qū)塊，圖像將被轉(zhuǎn)換為圖片區(qū)塊等。嵌入代碼，例如我在示例中使用的Google地圖代碼，將保留為自定義HTML區(qū)塊。如果區(qū)塊中的其他HTML可以轉(zhuǎn)換，則它將從區(qū)塊中刪除，放置在不同的區(qū)塊中。
- 復(fù)制– 這會(huì)將區(qū)塊復(fù)制到剪貼板，以便您可以將其粘貼到編輯器中的任何位置。
- 新建副本– 這會(huì)將區(qū)塊的副本放置在原始區(qū)塊下方。
- 在區(qū)塊前插入– 這會(huì)在自定義HTML區(qū)塊之前添加一個(gè)區(qū)塊區(qū)域，以便您可以放置??另一個(gè)區(qū)塊。
- 在區(qū)塊后插入– 這會(huì)在區(qū)塊之后添加一個(gè)區(qū)域，您可以在其中放置另一個(gè)區(qū)塊。
- 移動(dòng)到– 這讓您可以使用箭頭鍵向上或向下移動(dòng)區(qū)塊。您將移動(dòng)一條藍(lán)線。當(dāng)它到達(dá)你想要的位置時(shí)，按回車鍵，區(qū)塊會(huì)立即移動(dòng)。
- 添加至可重用區(qū)塊– 將自定義HTML區(qū)塊添加到您的可重用區(qū)塊中，以便您可以在任何頁(yè)面或文章上再次使用它。
- 組合– 這會(huì)將區(qū)塊添加到組中，以便您可以將區(qū)塊作為單個(gè)單元進(jìn)行調(diào)整。
- 刪除區(qū)塊– 這將刪除區(qū)塊。
有效使用自定義HTML區(qū)塊的提示和最佳實(shí)踐
首先使用此區(qū)塊設(shè)置文本樣式并編輯HTML，然后使用轉(zhuǎn)換為區(qū)塊工具創(chuàng)建段落或其他類型的內(nèi)容。這使您可以更好地控制內(nèi)容，并且在您不需要保留HTML版本時(shí)尤其有用。您可以隨時(shí)查看預(yù)覽。這使您不必在側(cè)邊欄中的WordPress設(shè)置中的可視化編輯器和代碼編輯器之間進(jìn)行更改。
將此區(qū)塊用于嵌入的地圖、廣告、視頻等。這樣您就不必切換到代碼編輯器視圖并將代碼添加到其他類型的區(qū)塊中，例如段落區(qū)塊。
使用此區(qū)塊而不是頁(yè)面和帖子的代碼編輯器版本可以讓您不必使用頁(yè)面和帖子標(biāo)簽。這創(chuàng)造了一個(gè)更清潔、更易于使用的工作環(huán)境。
無(wú)論您是添加自己的HTML還是嵌入來(lái)自其他來(lái)源的代碼，請(qǐng)經(jīng)常使用預(yù)覽功能來(lái)確保您的HTML以您想要的方式執(zhí)行。
不要在區(qū)塊中使用腳本標(biāo)簽。它可能會(huì)被刪除，然后您的代碼將無(wú)法工作。
關(guān)于自定義HTML區(qū)塊的常見(jiàn)問(wèn)題
自定義HTML區(qū)塊有什么作用？
它允許您將HTML輸入到一個(gè)字段中，這樣您就可以在將頁(yè)面或帖子保留在可視化編輯器中的同時(shí)使用它。
如何使用自定義HTML區(qū)塊？
可以添加任何帶有受支持標(biāo)簽的HTML。您可以將區(qū)塊用于廣告、地圖、視頻、任何帶有iframe、表格等的內(nèi)容。這也是一種標(biāo)記文本然后將其轉(zhuǎn)換為段落區(qū)塊的簡(jiǎn)單方法。
它會(huì)對(duì)標(biāo)記進(jìn)行顏色編碼嗎？
不，區(qū)塊中的標(biāo)記看起來(lái)像任何文本編輯器。
自定義HTML區(qū)塊是否運(yùn)行HTML？
它在前端正常運(yùn)行HTML。在編輯器中，它可以運(yùn)行HTML或向您顯示代碼。由您決定查看哪個(gè)，您可以隨時(shí)單擊按鈕在兩個(gè)選項(xiàng)之間進(jìn)行選擇。
是否支持所有HTML標(biāo)簽？
否。您可以在 WordPress支持的代碼頁(yè)面上看到支持的HTML標(biāo)簽列表。
小結(jié)
這就是我們對(duì)自定義HTML區(qū)塊的看法。此區(qū)塊不僅適用于開發(fā)人員。使用此區(qū)塊的主要優(yōu)點(diǎn)是您無(wú)需在可視化編輯器和代碼編輯器之間切換即可使用HTML。這意味著您可以處理正常顯示的其余內(nèi)容。然后您可以在區(qū)塊中使用HTML并隨時(shí)預(yù)覽它。自定義HTML區(qū)塊提供了一種在區(qū)塊編輯器中使用HTML的簡(jiǎn)單方法。
當(dāng)前名稱：古騰堡編輯器教程：如何使用WordPress自定義HTML區(qū)塊
文章出自：http://www.dlmjj.cn/article/djsghcd.html
