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