在文章中编写代码（经典编辑器）– 文档 – WordPress.org

无论您是为 WordPress 编写插件或修改，还是想添加关于您自己 WordPress 站点或其他编程代码（如 HTML、CSS、PHP 或 JavaScript）的零星代码，在您的文章中放入看起来像代码，但行为不像代码的内容，对博主来说是一个常见的挑战。

默认情况下，写入或粘贴到 WordPress 文章编辑器中的代码片段的解释方式取决于您是使用可视化编辑器还是 HTML 文章编辑器。可视化编辑器会将代码视为普通文本，将 < 和 > 字符转换为它们的 < 和 > 字符实体等效形式，以便代码不被网页浏览器解释。引号也会被转换，但请记住，默认情况下，WordPress 还会应用自动更正，以便文本根据您的语言特性正确引用。HTML 编辑器不会转换任何这些字符，因此请注意，您在代码示例中使用的 HTML 和 CSS 标记将被网页浏览器识别，您最终可能会得到奇怪的文本和混乱的布局。

请注意，此行为可能因 WordPress 版本、文章编辑器和所使用的其他插件而异。在某些旧版本的 WordPress 中，对 < 和 > 字符的未识别使用会被转换为 < 和 > 字符实体，并且当文章中发现 HTML 标签时，该标签会保持原样，允许其在网页浏览器中解释。

段落中的代码

会将文本转换为等宽字体的 HTML 标签是 <code> 和 <tt>。后者今天已很少使用，已被更有用且语义更正确的 <code> 取代，后者将计算机代码与自然语言文本区分开来。

This is an example which mentions code within a paragraph,
namely the functions <code>wp_title()</code>, 
<code>wp_content()</code> and <code>wp_footer()</code>, 
which are very useful in WordPress.

这对于使非 HTML 文本看起来像代码非常有用，但您想展示的 HTML 标签怎么办？

In the header.php template file,
look for the <code><div class="header"></code>
section to change the <code><h1></code> heading.

使用<code>标签并不会告诉 WordPress 对标签内的 HTML 标记进行编码或从文章中去除它。WordPress 认为您正在使用此标记进行格式化，因此将其保持不变。然后，网页浏览器会看到一个<code>标签后跟着一个<div>标签，因此它会通过在您的网页中创建一个新容器来响应。

为避免此行为，请使用字符实体或扩展字符来表示左右箭头字符，使其不被网页浏览器识别为 HTML 标签的开始和结束，例如：

In the header.php template file,
look for the <code>&lt;div class="header"&gt;</code>
section to change the <code>&lt;h1&gt;</code> heading.

段落中的URL

默认情况下，WordPress 会将任何以 http: 开头的短语转换为链接。如果您要举例说明如何链接到 WordPress 站点中的特定文章，那么与其使用带有 http://example.com/index.php?p=453 的链接并让它变成一个链接，不如为斜杠使用扩展字符，这样 WordPress 就不会“看到”该链接。

...link to a specific WordPress post using 
<code>http:& amp;#47;& amp;#47;example.com& amp;#47;index.php?p=453</code>
in your post....

注意：删除“&”和“amp”之间的空格。

以下是一些与本文主题相关的 HTML 字符实体列表。

(less than) = &lt; or &#060;
(greater than) = &gt; or &#062;
/ = &#047;
] = &#093;
[ = &#091;
" = &quot; or &#034;
' = &#039;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
(ampersand) = &amp; or &#038;

下面列出了可以帮助您自动将 HTML 标签转换为字符实体的资源列表，这样您就不必记住这些字符代码了。

使用 <pre> 标签

要将您的代码独立出来，使其看起来像一个代码框，可以在其他代码或模板文件中复制粘贴，您可以使用 <pre> HTML 标签。

<pre> 标签指示浏览器使用等宽字体，但要精确复制 <pre>标签内的所有内容。每个空格、每个换行符、每段代码都会被精确复制。

<h3>Section Three Title</h3>
<p>This is the start of a 
<a title="article on relationships" href="goodtalk.php">
good relationship</a> between you and me....

使用 <pre> 标签并不“美观”，但它能完成任务。关于如何设置其样式，请参见下一节。尽管如此，它仍然精确地展示了代码。

所谓精确，就是指完全精确。如果您的代码行很长，它会超出页面，因为没有指令告诉代码换行。它不会换行。以下是一个示例：

<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships"
href="goodtalk.php">good relationship</a> between you and I and I think you should read it because it is
important that we have these little <a title="article on communication"
href="communication.php">conversations</a> once in a while to let each other know how we feel....

不太美观，是吧。为了避免屏幕溢出，请插入换行符。不幸的是，在展示将被复制的代码时，决定在哪里插入这些换行符是一个困难的决定。

如果您熟悉编程语言，您就会知道什么时候换行不会破坏一行代码，所以请在那里选择。如果您不熟悉在哪里放置换行符，请进行尝试。将代码放入，创建换行符，然后测试代码。如果有效，则在那里使用换行符。如果无效，请更改换行符的位置。

如果您的代码行很长，请考虑只展示摘录，并提供一个链接到您网站上文本或 PHP 文件中的完整代码，或者使用许多在线代码粘贴服务中的一种来临时展示代码。

代码故障排除

在 WordPress 文章中编写代码可能是一个挑战，或许会迫使您覆盖 WordPress 的默认样式并使用“修复”我们所写内容的过滤器。如果您在 WordPress 文章中编写代码遇到问题，本节可能会有所帮助。

引号自动更正

在文章中使用代码时，一个常见问题是 WordPress 的引号自动更正功能，这在文字处理软件中最为常见。默认情况下，在提供网页时，WordPress 会根据 wp-config.php 文件中设置的 WordPress 安装语言，将“直引号”转换为起始和结束的“弯引号”。请注意，自动更正（也称为智能引号）功能无论您是在可视化编辑器还是 HTML 文章编辑器中编写引号都会应用。

在 HTML 文章编辑器中，您可以通过使用 <code>、<tt> 或 <pre> 标签包裹引号来避免此问题。另一种解决方案是用它们各自的字符实体替换引号，例如使用：

<code><p class=& #34;red& #34;></code>    // Take off space between & and #

而不是

<p class="red">

请注意，在某些旧版本的 WordPress 中，如果您在发布页面后再次编辑它，HTML 编辑器会将所有这些实体替换为它们的字面等效形式。例如，如果您仔细使用了 &#34 作为引号，它们会变回 “，如果保存，自动更正功能将对其产生影响。

资源

有趣的字符实体

常用代码用户

如果您经常在文章中使用大量公式、函数和编程代码，请考虑使用插件或 PHP 工具来简化整个过程。如果您倾向于发布大量代码块，请考虑将代码粘贴到代码粘贴站（Paste Bin）并链接到您的网站。

FigureRender – LaTeX 渲染插件
9 个用于在 WordPress 中嵌入代码片段的语法高亮插件和服务 – 以下是我在 2013 年亲自尝试过的，用于在您的博客中高亮代码片段的最佳 WordPress 插件或第三方服务列表。
Coffee2code 的保留代码格式 WordPress 插件
QuickCode WordPress 插件 – 隐藏/显示格式化后的代码块。
使用 ASCIIMath
LaTeX – 文档准备系统
在 WordPress 中使用 LaTeX
在您的文章中显示数学公式
如何构建 Dean Lee 的插件 – GeSHi – 通用语法高亮器插件
可视化代码编辑器插件 – 修改 WordPress 的行为，以便在使用可视化编辑器时保留代码格式。它将与任何接受编码/转义语法的语法高亮器兼容。
SyntaxHighlighter Evolved – 允许您轻松地在网站上发布语法高亮的代码，而无需转义代码。

在文章中编写代码（经典编辑器）

本文目录