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

07/23/2024

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

你想在WordPress博客文章中显示代码吗?如果你尝试像普通文本一样添加代码,WordPress不会正确显示。这是因为每次你保存帖子时,WordPress都会将你的内容通过多个清理过滤器,这些过滤器的目的是确保没有人通过帖子编辑器注入代码来攻击你的网站。

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

为什么要在WordPress网站上显示代码?

如果你正在撰写有关技术主题的博客文章或为你的产品创建文档,那么显示代码片段非常有用。用户可以简单地复制这段代码并将其添加到他们的网站。 然而,在WordPress网站上显示代码并不那么简单。WordPress会将代码片段解释为功能代码,并尝试在你的网站上实施它,而不是将其显示为文本。这会导致用户在他们的网站上输入代码时出现错误。此外,WordPress使用多个过滤器作为安全措施。它过滤内容以防止黑客通过内容编辑器注入恶意代码并攻击你的网站。

话虽如此,显示代码在WordPress中有不同的方法。你可以点击下面的链接跳转到你喜欢的方法部分:

方法1:使用WordPress默认编辑器显示代码

这种方法适用于不经常显示代码的初学者和用户。只需编辑你想要显示代码的博客文章或页面。在WordPress内容编辑器屏幕上,向你的帖子添加一个新的代码块。

你现在可以在代码块的文本区域中输入代码片段。代码块将显示你的代码预览。然后,你可以保存你的博客文章并预览它以查看代码块的效果。当你对代码的外观满意后,继续发布你的博客文章。根据你的WordPress主题,代码块在你的网站上的外观可能会有所不同。

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

对于这种方法,我们将使用WordPress插件在您的博客文章中显示代码。这种方法推荐给经常在文章中显示代码的用户。它相对于默认代码块具有以下优势:

  • 它允许你轻松显示任何编程语言的代码。
  • 它以语法高亮和行号显示代码。
  • 你的用户可以轻松研究代码并复制它。

首先,你需要安装并激活SyntaxHighlighter Evolved插件。激活后,你可以编辑你想要显示代码的博客文章。在文章编辑屏幕上,向文章添加‘SyntaxHighlighter Code’块。你现在将在文章编辑器中看到一个新的代码块,你可以在其中输入你的代码。添加代码后,你需要从右侧列中选择块设置。首先,你需要选择代码的语言,如PHP、CSS、Java等。然后,你可以关闭行号,提供第一个行号,突出显示任何你想要的行,并关闭使链接可点击的功能。一旦你完成,保存你的文章并点击预览按钮观看效果。插件带有多种配色方案和主题。要更改颜色主题,你需要访问Settings » SyntaxHighlighter页面。在设置页面,你可以选择颜色主题并更改SyntaxHighlighter设置。保存设置以在页面底部查看代码块的预览。

在经典编辑器中使用SyntaxHighlighter

如果你仍在使用旧版经典WordPress编辑器,那么你可以使用SyntaxHighlighter插件将代码添加到你的WordPress博客文章中。只需将代码用带有语言名称的方括号包裹。例如,如果你要添加PHP代码,那么你将这样添加:

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

类似地,如果你想添加HTML代码,那么你将它包裹在HTML短代码中,如下所示:

<a href="example.com">一个示例链接</a>

方法3:手动在WordPress中显示代码(无需插件或块)

这种方法适用于高级用户,因为它需要更多工作,并不总是按预期工作。适用于仍在使用旧版经典编辑器并希望无需插件显示代码的用户。首先,你需要通过在线HTML实体编码器工具传递你的代码。它会将你的代码标记转换为HTML实体,允许你添加代码并绕过WordPress清理过滤器。现在复制并粘贴你的代码到文本编辑器中,并将其包装在

标签中。你的代码应该如下所示:

<pre><code><p><a href="/home.html">这是一个示例链接</a></p></code></pre>

现在你可以保存你的文章并预览代码的效果。浏览器将转换HTML实体,用户将能够看到并复制正确的代码。

我们希望这篇文章能帮助你学习如何轻松在WordPress站点上显示代码。你可能还想查看我们最想要的WordPress技巧、窍门和黑客的终极列表,以及如何增加你的博客流量。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>