如何轻松在你的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

  • 2025-03-12
  • WordPress 教学

最近,我们在审计某个客户的网站时发现了一件令人警觉的事情:他们的Google Analytics报告中显示了电子邮件地址和电话号码,暴露了他们本不打算收集的敏感访客信息。收集用户的个人身份信息可能会成为一个重大问题,它违反了诸如GDPR这样的隐私法规,使您的企业面临巨额罚款的风险。幸运的是,一旦您知道如何做,防止个人身份信息出现在您的分析数据中实际上很简单。这篇指南会向您展示如何在保护访客隐私的同时,从您的网站分析数据中获取所需有价值的洞察。

閱讀更多
  • 2025-03-06
  • WordPress 教学

你经常登录Google Analytics查看你的网站表现吗?我们也是在初建WordPress站点时这样做的,耗时且令人沮丧,尤其是当想要追踪特定指标或发现流量的异常模式时。我们发现了Google Analytics的自定义电子邮件提醒后,节省了大量时间,并帮助我们在重要变动尚未成为严重问题之前就捕捉到。现在,我们将在本文中教你两种简单方法来设置自定义电子邮件提醒。

閱讀更多
  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多

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