如何在WordPress网站上轻松显示代码

您想在WordPress博客文章中显示代码吗?若是您尝试添加常规文本代码,则WordPress将没法正确显示。php

每次保存文章时,WordPress都会经过几个清理过滤器运行您的内容。这些过滤器用于确保有人不经过文章编辑器注入代码来破解您的网站。html

在本文中,咱们将向您展现在WordPress网站上轻松显示代码的正确方法。咱们将向您展现不一样的方法,您能够选择最适合您需求的方法。web

如何在WordPress帖子中轻松显示代码

 

方法1. 使用WordPress中的默认编辑器显示代码

对于不须要常常显示代码的初学者和用户,建议使用此方法。编程

只需编辑要显示代码的博客文章或页面便可。在帖子编辑屏幕上,为帖子添加新的代码块。浏览器

将代码块添加到您的WordPress帖子

 

您如今能够在块的文本区域中输入代码段。编程语言

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

以后,您能够保存您的博客文章并预览它以查看代码块的运行状况。编辑器

Word代码中显示的PHP代码

 

根据您的WordPress主题,您的网站上的代码块可能会有所不一样。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初学者指南文章