如何在WordPress網站上輕鬆顯示代碼(3種方法)


您是否要在WordPress博客文章中顯示代碼? 如果您嘗試添加常規文本之類的代碼,則WordPress將無法正確顯示它。

每次您保存帖子時,WordPress都會通過幾個清理過濾器來運行您的內容。 這些過濾器可以確保沒有人通過帖子編輯器注入代碼來入侵您的網站。

在本文中,我們將向您展示在WordPress網站上輕鬆顯示代碼的正確方法。 我們將向您展示不同的方法,您可以選擇最適合您的方法。

如何輕鬆地在WordPress帖子中顯示代碼

方法1.使用WordPress中的默認編輯器顯示代碼

建議初學者和不需要經常顯示代碼的用戶使用此方法。

只需編輯您要顯示代碼的博客文章或頁面。 在帖子編輯屏幕上,將新的代碼塊添加到帖子中。

將代碼塊添加到您的WordPress帖子中

現在,您可以在塊的文本區域中輸入代碼段。

將代碼添加到您的博客文章中

之後,您可以保存您的博客文章並對其進行預覽以查看實際的代碼塊。

WordPress中顯示的PHP代碼

根據您的WordPress主題,代碼塊在您的網站上可能看起來有所不同。

方法2。使用插件在WordPress中顯示代碼

對於這種方法,我們將使用WordPress插件在您的博客文章中顯示代碼。 建議經常在其文章中顯示代碼的用戶使用此方法。

與默認代碼塊相比,它具有以下優點:

  • 它使您可以輕鬆地以任何編程語言顯示任何代碼
  • 它顯示帶有語法突出顯示和行號的代碼
  • 您的用戶可以輕鬆學習代碼並將其複制

首先,您需要安裝並激活SyntaxHighlighter Evolved插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您可以繼續編輯要在其中顯示代碼的博客文章。 在帖子編輯屏幕上,將“ SyntaxHighlighter代碼”塊添加到您的帖子中。

語法Highlighter代碼塊

現在,您將在帖子編輯器中看到一個新的代碼塊,您可以在其中輸入代碼。 添加代碼後,您需要從右列中選擇塊設置。

語法Highlighter代碼塊設置

首先,您需要選擇代碼的語言。 之後,您可以關閉行號,提供第一行號,突出顯示所需的任何行,然後關閉該功能以使鏈接可單擊。

完成後,保存您的帖子,然後單擊“預覽”按鈕以查看其實際效果。

語法高亮顯示的代碼

該插件帶有許多配色方案和主題。 要更改顏色主題,您需要訪問 設置»語法突出顯示 頁。

語法突出顯示設置

在設置頁面上,您可以選擇顏色主題並更改SyntaxHighlighter設置。 您可以保存設置以在頁面底部查看代碼塊的預覽。

代碼塊預覽

在經典編輯器中使用SyntaxHighlighter

如果您仍在使用舊的經典WordPress編輯器,則可以使用SyntaxHighlighter插件將代碼添加到WordPress博客文章中。

只需使用語言名稱將代碼包裝在方括號中即可。 例如,如果要添加PHP代碼,則將如下添加:

[php]
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

同樣,如果您想添加HTML代碼,則可以將其包裝在HTML短代碼周圍,如下所示:

[html]
A sample link
[/html]

方法3。在WordPress中手動顯示代碼(無插件或阻止)

此方法適用於高級用戶,因為它需要做更多的工作,而且並不總是能按預期工作。

它適用於仍在使用舊的經典編輯器並且不使用插件即可顯示代碼的用戶。

首先,您需要通過在線HTML實體編碼器工具傳遞代碼。 它將代碼標記更改為HTML實體,這將允許您添加代碼並繞過WordPress清理過濾器。

現在,將代碼複製並粘貼到文本編輯器中,然後將其包裝起來

 and  tags. 

在經典編輯器中手動添加代碼

Your code would look like this:


<p><a href="/home.html">This is a sample link</a></p>

現在,您可以保存您的帖子並預覽實際使用的代碼。 您的瀏覽器將轉換HTML實體,並且用戶將能夠查看和復制正確的代碼。

在WordPress中手動顯示代碼

我們希望本文能幫助您學習如何輕鬆地在WordPress網站上顯示代碼。 您可能還想查看我們最想要的WordPress技巧,竅門和技巧的最終列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。