在WordPress頁面和文章中顯示程式碼可能很棘手。僅在內容中釋出程式碼可能會產生有趣的結果，特別是如果WordPress顯示錯誤或您的安全系統將您鎖定在惡意活動之外。幸運的是，WordPress程式碼區塊可以輕鬆顯示程式碼片段。瞭解如何使用此塊將幫助您以最佳方式在您的網站和讀者的內容中顯示程式碼。
在本教程中，我們將檢視WordPress程式碼區塊並瞭解它的作用。我們將瞭解如何將其新增至文章和頁面，並檢視其設定和選項。堅持到底，檢視有關如何使用它的提示和最佳實踐，並檢視常見問題。
如何將程式碼區塊新增至文章或頁面
要將程式碼區塊新增到頁面和文章，請選擇要放置程式碼塊的內容區域旁邊的區塊插入器工具，或選擇頁面左上角的插入器。輸入區塊的名稱並在它出現時選擇它或滾動區塊以檢視其中的內容。
如果您願意，可以在希望區塊出現的區域鍵入/code。然後，只需按Enter鍵或從出現的選項中選擇區塊。
現在，您的內容中有一個程式碼區塊，您可以在其中新增要顯示的任何型別的程式碼。程式碼會自動標記程式碼標籤，因此它可以正確顯示為程式碼。這有助於為讀者提供示例以供他們在自己的專案中學習或使用。在這個例子中，我使用了來自WordPress支援頁面的虛擬碼（因為）lazy.level = advanced。
程式碼區塊設定和選項
程式碼區塊有兩個地方可以找到設定和選項。第一個是區塊上方的程式碼工具欄。第二個是右側欄中的選項。我們會看看兩者。
程式碼區塊工具欄
單擊區塊中的任意位置以檢視其工具欄。如果您沒有看到所有工具，請將滑鼠放在塊下方的新區塊位置，然後單擊該區塊。所有設定都會出現。
更改程式碼區塊型別或樣式
第一個設定使用左右箭頭。這會將塊更改為自定義HTML區塊、預格式化區塊、更改列，並允許您建立一個組，以便您可以調整背景顏色、選擇邊框和調整其他選項。將滑鼠懸停在它們上方可讓您預覽它們的外觀。我將滑鼠懸停在自定義HTML選項上。
拖拽
拖動工具包括六個點。抓住這些點將塊拖動到任何你想要的地方。當您將滑鼠懸停在不同區域上時，會出現一條藍線，它將放置在每個可能的位置。
當你放下它時，方塊將被放置在它的新位置。
上下移動
每次單擊內容區塊時，向上和向下移動箭頭都會將塊向上或向下移動一個區塊。
粗體和斜體
粗體和斜體設定適用於您突出顯示的程式碼。您可以一起或單獨使用它們。在這個例子中，我同時使用和獨立使用。這是引起對程式碼中某些行或命令的注意的好方法。
連結
該連結可讓您將任何程式碼設為可點選的連結。您可以搜尋或輸入突出顯示的程式碼部分的 URL。如果您想連結到每個命令的教程、其他示例、程式碼的來源等，這很好。您可以在同一選項卡或新選項卡中開啟連結。
更多設定
程式碼區塊的更多設定會開啟一個包含多個選項的下拉框。我已經應用了這個例子中的每個選項。
- 內聯程式碼– 顯示格式化為程式碼的文字。它將文字單獨放置在一行上。由於所有內容都格式化為程式碼，因此字型看起來相同。
- 內嵌影象– 在您放置滑鼠的文字中放置影象。它會開啟媒體庫，您可以在其中選擇影象。如果單擊影象，您將看到一個下拉框，您可以在其中更改其寬度。
- 鍵盤輸入– 將鍵盤標籤新增到您選擇的程式碼中。程式碼以瀏覽器的預設等寬字型顯示。
- 刪除線– 在您突出顯示的程式碼中新增一行。
- 下標– 將程式碼格式化為下標。
- 上標– 將程式碼格式化為上標。您可以同時使用下標和上標。這減小了字型的大小並使程式碼水平居中。
- 文字顏色– 更改您突出顯示的程式碼的顏色。從預製顏色中選擇，在顏色選擇器工具上選擇一種顏色，或輸入 HEX、RBG 或 HSL 形式的值。
更多選項
程式碼區塊選項位於工具欄最右側的三個點內。選項包括：
- 隱藏更多設定 – 隱藏右側邊欄，為您提供乾淨寬敞的工作區。
- 複製– 複製區塊，以便您可以將其貼上到內容區域內的任何位置。
- 建立副本– 複製區塊並將其放在原始區塊下。
- 在區塊前插入– 在程式碼區塊上方新增一個內容區域。
- 在區塊後插入– 在程式碼區塊下方新增一個內容區域。
- 移動到– 允許您通過放置一條藍線來移動塊，您可以使用箭頭鍵向上或向下移動該線。當您將線路送到您想要的位置時，只需按Enter。
- 作為HTML編輯 – 更改為塊的程式碼編輯器，您可以在其中將程式碼編輯為HTML。選擇Edit Visually將塊更改回可視模式。
- 新增至可重用塊– 將區塊新增到您的可重用塊中，以便您可以在任何頁面或文章上重複使用它。
- 組合– 將區塊新增到組中，以便您可以將它們作為一個單元進行更改。
- 刪除區塊– 刪除程式碼區塊。
程式碼區塊設定
程式碼區塊設定位於右側邊欄中。它們包括排版和高階設定。選擇塊將顯示設定。如果側邊欄未顯示，請單擊右上角的齒輪圖示。
排版
排版可讓您選擇整個塊的字型大小。從具有7種大小的下拉框中選擇字型大小或在欄位中輸入自定義大小。單擊重置將其更改回預設字型大小。
高階
高階設定包括一個HTML錨點和一個用於附加CSS類的欄位。錨點是此區塊的URL，因此您可以直接連結到它。附加CSS類欄位允許您新增自定義CSS類來設定區塊的樣式。
有效使用程式碼區塊的技巧和最佳實踐
任何時候您想在您的內容中顯示程式碼時都可以使用此區塊。程式碼本身對塊沒有任何影響。
用空格格式化程式碼，就像使用文字編輯器建立程式碼時一樣。使用粗體和斜體設定來引起對程式碼中某些片段的注意。
與任何程式碼一樣，將其標記好以便於理解。您可以在區塊中註釋程式碼或新增註釋，但請確保它們不在程式碼元素中，以防有人想要複製程式碼。
關於程式碼區塊的常見問題
WordPress程式碼區塊的目的是什麼？
顯示程式碼供他人檢視和使用。它以乾淨的佈局顯示程式碼，以保持間距。
程式碼區塊是否執行程式碼？
不。它顯示格式化的程式碼，以便您的讀者可以看到和使用它。程式碼會自動與HTML程式碼標籤一起包裝。
它可以顯示什麼樣的程式碼？
它將顯示來自任何程式設計或指令碼語言的任何程式碼。語言沒有任何區別。
它是否格式化程式碼？
不能。它不能用作程式碼編輯器，因此它不會更改間距、顏色、新增數字等。它只是按照您鍵入的方式顯示程式碼。
程式碼區塊與HTML區塊有何不同？
HTML區塊使您無需更改頁面的程式碼編輯器檢視即可建立HTML。它將在前端執行HTML。您可以從後端預覽結果。如果您不希望它執行，您可以使用程式碼區塊來顯示HTML。
它與預格式化區塊有何不同？
預格式化區塊以等寬字型顯示帶有空格的文字。它為側邊欄選項新增字型和背景顏色。
小結
這就是我們對WordPress程式碼區塊的看法。該區塊簡單且易於使用。由於它不執行程式碼，因此語言本身並不重要。此塊提供了一種很好的方式來顯示任何型別的程式碼供您的讀者複製或學習。
評論留言