如何在WordPress網站上輕鬆顯示代碼

您想在WordPress博客文章中顯示代碼嗎?如果您嘗試添加常規文本代碼,則WordPress將無法正確顯示。

每次保存文章時,WordPress都會通過幾個清理過濾器運行您的內容。這些過濾器用於確保有人不通過文章編輯器注入代碼來破解您的網站。

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

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

 

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

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

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

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

 

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

在您的博客文章中添加代碼

之後,您可以保存您的博客文章並預覽它以查看代碼塊的運行情況。

Word代碼中顯示的PHP代碼

 

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

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

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

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

  • 它允許您以任何編程語言輕鬆顯示任何代碼
  • 它顯示帶有語法突出顯示和行號的代碼
  • 您的用戶可以輕鬆學習代碼並進行復制

首先,您需要安裝並激活SyntaxHighlighter Evolved插件。

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

SyntaxHighlighter代碼塊

 

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

語法高亮顯示代碼塊設置

 

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

完成後,保存您的帖子並單擊預覽按鈕以查看其運行情況。

顯示語法高亮顯示的代碼

 

該插件附帶了許多配色方案和主題。要更改顏色主題,您需要訪問設置»語法高亮頁面。

語法高亮度設置

 

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

代碼塊預覽

 

將SyntaxHighlighter與經典編輯器一起使用

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

只需使用語言名稱將代碼包裝在方括號內。例如,如果您要添加PHP代碼,那麼您將添加如下:

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

同樣,如果你想添加一個HTML代碼,那麼你將它包裝在HTML短代碼中,如下所示:

[html] <a href=”example.com”>A sample link</a> [/html]

方法3. 手動顯示WordPress中的代碼(無插件或塊)

此方法適用於高級用戶,因爲它需要更多工作,並不總是按預期工作。

它適用於仍在使用舊經典編輯器並希望在不使用插件的情況下顯示代碼的用戶。

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

現在將代碼複製並粘貼到文本編輯器中並將其用<pre>和<code>標記包裝。

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

 

您的代碼如下所示:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;This is a sample link&lt;/a&gt;&lt;/p&gt;
</pre></code>

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

在WordPress中手動顯示代碼

我們希望本文能幫助您瞭解如何在WordPress網站上輕鬆顯示代碼。你可能也希望查看在WordPress中重新排序博客文章的4種簡單方法這篇文章瞭解如何重新排序網站中的文章。

閱讀更多WordPress初學者指南文章

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章