跳到主要内容

您是否要在WordPress博客文章中显示代码?如果您尝试添加常规文本之类的代码,则WordPress将无法正确显示它。

每次您保存帖子时,WordPress都会通过几个清理过滤器来运行您的内容。这些过滤器可以确保没有人通过帖子编辑器注入代码来入侵您的网站。

在本文中,我们将向您展示在WordPress网站上轻松显示代码的正确方法。我们将向您展示不同的方法,您可以选择最适合您的方法。

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

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

建议初学者和不需要经常显示代码的用户使用此方法。

只需编辑您要显示代码的博客文章或页面。在帖子编辑屏幕上,将新的代码块添加到帖子中。

使用wordpress中的默认编辑器显示代码
使用wordpress中的默认编辑器显示代码

现在,您可以在块的文本区域中输入代码段。

使用wordpress中的默认编辑器显示代码
使用wordpress中的默认编辑器显示代码

之后,您可以保存您的博客文章并对其进行预览以查看实际的代码块。

使用wordpress中的默认编辑器显示代码
使用wordpress中的默认编辑器显示代码

根据您的WordPress主题,代码块在您的网站上可能看起来有所不同。

方法2。使用插件在WordPress中显示代码

对于这种方法,我们将使用WordPress插件在您的博客文章中显示代码。建议经常在其文章中显示代码的用户使用此方法。

与默认代码块相比,它具有以下优点:

  • 它使您可以轻松地以任何编程语言显示任何代码
  • 它显示带有语法突出显示和行号的代码
  • 您的用户可以轻松学习代码并将其复制

首先,您需要安装并激活SyntaxHighlighter Evolved插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

激活后,您可以继续编辑要在其中显示代码的博客文章。在帖子编辑屏幕上,将“ SyntaxHighlighter代码”块添加到您的帖子中。

使用插件在wordpress中显示代码
使用插件在wordpress中显示代码

现在,您将在帖子编辑器中看到一个新的代码块,您可以在其中输入代码。添加代码后,您需要从右列中选择块设置。

安装wordpress插件
安装wordpress插件

首先,您需要选择代码的语言。之后,您可以关闭行号,提供第一行号,突出显示所需的任何行,然后关闭该功能以使链接可单击。

完成后,保存您的帖子,然后单击“预览”按钮以查看其实际效果。

使用插件在wordpress中显示代码
使用插件在wordpress中显示代码

该插件带有许多配色方案和主题。要更改颜色主题,您需要访问设置»SyntaxHighlighter页面。

使用插件在wordpress中显示代码
使用插件在wordpress中显示代码

在设置页面上,您可以选择颜色主题并更改SyntaxHighlighter设置。您可以保存设置以在页面底部查看代码块的预览。

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>标记周围。

在wordpress中手动显示代码(无插件或阻止)
在wordpress中手动显示代码(无插件或阻止)

您的代码如下所示:

<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网站上显示代码。您可能还想查看我们最想要的WordPress技巧,窍门和hack的最终列表。

回到顶部