建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)建站擁有10余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、成都App制作、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、域名注冊(cè)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。
在wordpress頁(yè)面和文章中顯示代碼可能很棘手。僅在內(nèi)容中發(fā)布代碼可能會(huì)產(chǎn)生有趣的結(jié)果，特別是如果WordPress顯示錯(cuò)誤或您的安全系統(tǒng)將您鎖定在惡意活動(dòng)之外。幸運(yùn)的是，WordPress代碼區(qū)塊可以輕松顯示代碼片段。了解如何使用此塊將幫助您以最佳方式在您的網(wǎng)站和讀者的內(nèi)容中顯示代碼。
在本教程中，我們將查看WordPress代碼區(qū)塊并了解它的作用。我們將了解如何將其添加至文章和頁(yè)面，并查看其設(shè)置和選項(xiàng)。堅(jiān)持到底，查看有關(guān)如何使用它的提示和最佳實(shí)踐，并查看常見問(wèn)題。
如何將代碼區(qū)塊添加至文章或頁(yè)面
要將代碼區(qū)塊添加到頁(yè)面和文章，請(qǐng)選擇要放置代碼塊的內(nèi)容區(qū)域旁邊的區(qū)塊插入器工具，或選擇頁(yè)面左上角的插入器。輸入?yún)^(qū)塊的名稱并在它出現(xiàn)時(shí)選擇它或滾動(dòng)區(qū)塊以查看其中的內(nèi)容。
如果您愿意，可以在希望區(qū)塊出現(xiàn)的區(qū)域鍵入/code。然后，只需按Enter鍵或從出現(xiàn)的選項(xiàng)中選擇區(qū)塊。
現(xiàn)在，您的內(nèi)容中有一個(gè)代碼區(qū)塊，您可以在其中添加要顯示的任何類型的代碼。代碼會(huì)自動(dòng)標(biāo)記代碼標(biāo)簽，因此它可以正確顯示為代碼。這有助于為讀者提供示例以供他們?cè)谧约旱捻?xiàng)目中學(xué)習(xí)或使用。在這個(gè)例子中，我使用了來(lái)自WordPress支持頁(yè)面的偽代碼（因?yàn)椋﹍azy.level = advanced。
代碼區(qū)塊設(shè)置和選項(xiàng)
代碼區(qū)塊有兩個(gè)地方可以找到設(shè)置和選項(xiàng)。第一個(gè)是區(qū)塊上方的代碼工具欄。第二個(gè)是右側(cè)欄中的選項(xiàng)。我們會(huì)看看兩者。
代碼區(qū)塊工具欄
單擊區(qū)塊中的任意位置以查看其工具欄。如果您沒有看到所有工具，請(qǐng)將鼠標(biāo)放在塊下方的新區(qū)塊位置，然后單擊該區(qū)塊。所有設(shè)置都會(huì)出現(xiàn)。
更改代碼區(qū)塊類型或樣式
第一個(gè)設(shè)置使用左右箭頭。這會(huì)將塊更改為自定義HTML區(qū)塊、預(yù)格式化區(qū)塊、更改列，并允許您創(chuàng)建一個(gè)組，以便您可以調(diào)整背景顏色、選擇邊框和調(diào)整其他選項(xiàng)。將鼠標(biāo)懸停在它們上方可讓您預(yù)覽它們的外觀。我將鼠標(biāo)懸停在自定義HTML選項(xiàng)上。
拖拽
拖動(dòng)工具包括六個(gè)點(diǎn)。抓住這些點(diǎn)將塊拖動(dòng)到任何你想要的地方。當(dāng)您將鼠標(biāo)懸停在不同區(qū)域上時(shí)，會(huì)出現(xiàn)一條藍(lán)線，它將放置在每個(gè)可能的位置。
當(dāng)你放下它時(shí)，方塊將被放置在它的新位置。
上下移動(dòng)
每次單擊內(nèi)容區(qū)塊時(shí)，向上和向下移動(dòng)箭頭都會(huì)將塊向上或向下移動(dòng)一個(gè)區(qū)塊。
粗體和斜體
粗體和斜體設(shè)置適用于您突出顯示的代碼。您可以一起或單獨(dú)使用它們。在這個(gè)例子中，我同時(shí)使用和獨(dú)立使用。這是引起對(duì)代碼中某些行或命令的注意的好方法。
鏈接
該鏈接可讓您將任何代碼設(shè)為可點(diǎn)擊的鏈接。您可以搜索或輸入突出顯示的代碼部分的 URL。如果您想鏈接到每個(gè)命令的教程、其他示例、代碼的來(lái)源等，這很好。您可以在同一選項(xiàng)卡或新選項(xiàng)卡中打開鏈接。
更多設(shè)置
代碼區(qū)塊的更多設(shè)置會(huì)打開一個(gè)包含多個(gè)選項(xiàng)的下拉框。我已經(jīng)應(yīng)用了這個(gè)例子中的每個(gè)選項(xiàng)。
- 內(nèi)聯(lián)代碼– 顯示格式化為代碼的文本。它將文本單獨(dú)放置在一行上。由于所有內(nèi)容都格式化為代碼，因此字體看起來(lái)相同。
- 內(nèi)嵌圖像– 在您放置鼠標(biāo)的文本中放置圖像。它會(huì)打開媒體庫(kù)，您可以在其中選擇圖像。如果單擊圖像，您將看到一個(gè)下拉框，您可以在其中更改其寬度。
- 鍵盤輸入– 將鍵盤標(biāo)簽添加到您選擇的代碼中。代碼以瀏覽器的默認(rèn)等寬字體顯示。
- 刪除線– 在您突出顯示的代碼中添加一行。
- 下標(biāo)– 將代碼格式化為下標(biāo)。
- 上標(biāo)– 將代碼格式化為上標(biāo)。您可以同時(shí)使用下標(biāo)和上標(biāo)。這減小了字體的大小并使代碼水平居中。
- 文本顏色– 更改您突出顯示的代碼的顏色。從預(yù)制顏色中選擇，在顏色選擇器工具上選擇一種顏色，或輸入 HEX、RBG 或 HSL 形式的值。
更多選項(xiàng)
代碼區(qū)塊選項(xiàng)位于工具欄最右側(cè)的三個(gè)點(diǎn)內(nèi)。選項(xiàng)包括：
- 隱藏更多設(shè)置 – 隱藏右側(cè)邊欄，為您提供干凈寬敞的工作區(qū)。
- 復(fù)制– 復(fù)制區(qū)塊，以便您可以將其粘貼到內(nèi)容區(qū)域內(nèi)的任何位置。
- 創(chuàng)建副本– 復(fù)制區(qū)塊并將其放在原始區(qū)塊下。
- 在區(qū)塊前插入– 在代碼區(qū)塊上方添加一個(gè)內(nèi)容區(qū)域。
- 在區(qū)塊后插入– 在代碼區(qū)塊下方添加一個(gè)內(nèi)容區(qū)域。
- 移動(dòng)到– 允許您通過(guò)放置一條藍(lán)線來(lái)移動(dòng)塊，您可以使用箭頭鍵向上或向下移動(dòng)該線。當(dāng)您將線路送到您想要的位置時(shí)，只需按Enter。
- 作為HTML編輯 – 更改為塊的代碼編輯器，您可以在其中將代碼編輯為HTML。選擇Edit Visually將塊更改回可視模式。
- 添加至可重用塊– 將區(qū)塊添加到您的可重用塊中，以便您可以在任何頁(yè)面或文章上重復(fù)使用它。
- 組合– 將區(qū)塊添加到組中，以便您可以將它們作為一個(gè)單元進(jìn)行更改。
- 刪除區(qū)塊– 刪除代碼區(qū)塊。
代碼區(qū)塊設(shè)置
代碼區(qū)塊設(shè)置位于右側(cè)邊欄中。它們包括排版和高級(jí)設(shè)置。選擇塊將顯示設(shè)置。如果側(cè)邊欄未顯示，請(qǐng)單擊右上角的齒輪圖標(biāo)。
排版
排版可讓您選擇整個(gè)塊的字體大小。從具有7種大小的下拉框中選擇字體大小或在字段中輸入自定義大小。單擊重置將其更改回默認(rèn)字體大小。
高級(jí)
高級(jí)設(shè)置包括一個(gè)HTML錨點(diǎn)和一個(gè)用于附加CSS類的字段。錨點(diǎn)是此區(qū)塊的URL，因此您可以直接鏈接到它。附加CSS類字段允許您添加自定義CSS類來(lái)設(shè)置區(qū)塊的樣式。
有效使用代碼區(qū)塊的技巧和最佳實(shí)踐
任何時(shí)候您想在您的內(nèi)容中顯示代碼時(shí)都可以使用此區(qū)塊。代碼本身對(duì)塊沒有任何影響。
用空格格式化代碼，就像使用文本編輯器創(chuàng)建代碼時(shí)一樣。使用粗體和斜體設(shè)置來(lái)引起對(duì)代碼中某些片段的注意。
與任何代碼一樣，將其標(biāo)記好以便于理解。您可以在區(qū)塊中注釋代碼或添加注釋，但請(qǐng)確保它們不在代碼元素中，以防有人想要復(fù)制代碼。
關(guān)于代碼區(qū)塊的常見問(wèn)題
WordPress代碼區(qū)塊的目的是什么？
顯示代碼供他人查看和使用。它以干凈的布局顯示代碼，以保持間距。
代碼區(qū)塊是否運(yùn)行代碼？
不。它顯示格式化的代碼，以便您的讀者可以看到和使用它。代碼會(huì)自動(dòng)與HTML代碼標(biāo)簽一起包裝。
它可以顯示什么樣的代碼？
它將顯示來(lái)自任何編程或腳本語(yǔ)言的任何代碼。語(yǔ)言沒有任何區(qū)別。
它是否格式化代碼？
不能。它不能用作代碼編輯器，因此它不會(huì)更改間距、顏色、添加數(shù)字等。它只是按照您鍵入的方式顯示代碼。
代碼區(qū)塊與HTML區(qū)塊有何不同？
HTML區(qū)塊使您無(wú)需更改頁(yè)面的代碼編輯器視圖即可創(chuàng)建HTML。它將在前端運(yùn)行HTML。您可以從后端預(yù)覽結(jié)果。如果您不希望它執(zhí)行，您可以使用代碼區(qū)塊來(lái)顯示HTML。
它與預(yù)格式化區(qū)塊有何不同？
預(yù)格式化區(qū)塊以等寬字體顯示帶有空格的文本。它為側(cè)邊欄選項(xiàng)添加字體和背景顏色。
小結(jié)
這就是我們對(duì)WordPress代碼區(qū)塊的看法。該區(qū)塊簡(jiǎn)單且易于使用。由于它不運(yùn)行代碼，因此語(yǔ)言本身并不重要。此塊提供了一種很好的方式來(lái)顯示任何類型的代碼供您的讀者復(fù)制或?qū)W習(xí)。
網(wǎng)站標(biāo)題：古騰堡編輯器教程：如何使用WordPress代碼區(qū)塊
本文路徑：http://www.dlmjj.cn/article/dhojcjh.html
