对于持续在线发布代码供受众使用的博主和内容创建者来说，掌握在 WordPress 中有效展示代码的技能至关重要。 正如预期的那样，计算机代码在网站前端生成新颖的视觉输出，与实际代码片段中存在的标签、斜杠和括号不同。
然而，这给编写开发和设计的个人带来了困境，因为他们需要一种方法来适当地呈现代码而不执行其预期功能，例如生成按钮或将样式应用于段落块。
简而言之，当撰写包含代码片段作为示例的博客文章时，必须阻止代码执行。 这种方法允许读者以原始形式感知代码，在格式良好的块中查看它，甚至复制其内容以供自己的开发工作。
本指南旨在演示在 WordPress 中显示代码的各种方法，无论选择哪种 WordPress 主题。 此外，它将帮助您确定最适合您的特定工作流程的方法。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始当您在 WordPress? 中添加常规代码时会发生什么
当您直接将常规代码添加到 WordPress 帖子或页面中而不采取任何特定措施时，该代码可能会导致意想不到的后果。 WordPress 具有自动处理和清理内容的内置机制，以确保安全性和正常功能。 因此，当添加常规代码时，它可能会被 WordPress 修改或完全删除。
在 WordPress 中添加常规代码时可能会发生以下情况：
- 代码更改：WordPress 可能会通过删除或修改某些元素来更改代码，以防止潜在的安全风险或与平台功能发生冲突。 这可能会导致代码无法按预期执行或产生错误。
- 代码剥离：WordPress 具有适当的过滤器和安全措施，可以删除某些被认为不安全或不必要的类型的代码。 这可能会导致删除重要的代码片段或整个代码块本身。
- 视觉失真：代码通常包含特殊字符、符号和格式，可能会干扰 WordPress 内容的视觉呈现。 它可能会导致格式问题、错位或代码显示为纯文本而不是呈现为代码。
- 代码的执行：在某些情况下，如果代码没有得到正确的清理或处理，它可能会执行并执行其预期的功能。 这可能会产生意想不到的后果，例如创建按钮、改变内容的外观，甚至影响网站的整体功能。
为了克服这些问题并在 WordPress 中安全地显示代码，建议使用专门为展示代码片段而设计的适当方法或插件。 这些方法可确保代码正确格式化、保存和显示，而不会进行任何不需要的修改或执行。
在这里，我们将在代码片段中添加以下 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
此特定代码摘录采用 HTML 样式元素来生成三个以绿色装饰的内容块，并包含标题和段落。
尽管如此，我们的目的是在博客文章中呈现未处理的代码，而不是允许它在给定的块中呈现。
当代码直接粘贴到 WordPress Gutenberg 块编辑器中时，可以观察到以下结果：
鉴于上述情况，很明显 WordPress 致力于将代码用于生成内容的主要功能。 但是，它从代码中删除了样式，从而无法向读者呈现所需的结果。
为了避免这种情况，我们强烈建议使用下面列举的方法之一来显示代码。
在 WordPress 中显示代码的 4 种方法
以下技术按难度升序排列，我们为那些通过在 Markdown 编辑器中编写代码和内容而不是使用 WordPress 获得满足感的人提供了量身定制的特定方法。
方法 1：使用古腾堡块编辑器
古腾堡编辑器包括一个预先存在的代码块，可以方便地呈现代码片段，同时保留其格式并且无需执行代码。
首先，访问 WordPress 中的帖子或页面，然后继续选择“添加块”按钮之一。
请选择“添加块”按钮之一以继续。
通过这样做，可用块的种类将被揭开。 您可以选择搜索“代码”块或在搜索栏中输入“代码”等关键字。
找到代码块（可通过其括号图标识别）后，继续单击它以将一段代码插入到帖子中。
现在，您应该可以看到带有提示“Compose code…”的区域。
WordPress Gutenberg 编辑器提供 Markdown 支持，可以通过使用正斜杠 (/) 并在编辑器中输入“C”或“Code”来发现和插入代码块。 WordPress 随后将显示所有相关块，以促进更方便的插入过程。
请务必注意代码块和自定义 HTML 块之间的区别。 虽然自定义 HTML 块旨在包含要在前端呈现的自定义 HTML 代码，但代码块专门设计用于添加用于显示目的的原始代码。
目前，是复制所需代码并将其插入标记为“写入代码...”的指定区域的适当时机。
您提供的代码现已包含在指定的代码块中。
代码块的一个优点是它遵循原始代码片段中空格和制表符的格式。 因此，显示的代码应与其复制源保持视觉一致性。
要在 WordPress 帖子或页面中展示您的代码，请单击“发布”按钮结束该过程。 此外，您可以选择在发布之前通过选择“预览”来获取其外观的视觉表示。
单击“发布”按钮后，继续访问帖子的实时版本，以验证代码片段是否显示为原始代码。
正如所观察到的，代码块的特点是简单，但它的基本目的是在博客文章中呈现代码时保留格式。
请参阅下面提供的屏幕截图。 在这个特定的示例中，原始代码片段保持不变； 它仅呈现在前端的灰色框中。
为了增强代码块的突出性，建议考虑修改其默认外观。
要访问该块的可用样式选项，请选择代码块并继续单击“设置”（齿轮图标）按钮。 此操作将打开“块”选项卡，专门显示适用于所选块的块设置，即本例中的“代码块”。
人们可以根据个人喜好自定义代码块，包括修改文本和背景颜色等方面的选项。
方法2：使用插件
请使用您首选的插件安装方法将Enlighter – 可自定义语法荧光笔插件合并到您的 WordPress 网站中。
激活后，该插件将具有完整的功能，并允许您通过古腾堡块或经典编辑器插入按钮将代码插入到任何帖子/页面中。
如果您正在使用 WordPress 古腾堡块编辑器，请访问您想要展示代码的帖子。 选择“添加块”按钮之一（由“+”符号标识）以显示可用块的分类。
仔细阅读或输入与 Enlighten Sourcecode 块相关的关键字。 继续单击相应的块，以便将其合并到帖子中。
Enlighter 荧光笔块随后出现在块编辑器界面中，具有标题为“通用突出显示”的指定标题和标记为“插入源代码...”的文本输入字段
请将要在 WordPress 上显示的所需代码输入或复制并粘贴到指定的“插入源代码...”文本字段中。
作为语法荧光笔，该插件保留所有格式首选项和表格。 对结果感到满意后，请继续选择“发布”按钮。
通过利用此功能，您可以访问帖子的用户界面，以便观察与网站访问者相同的内容。
Enlighter 插件提供了一个简单的默认主题来显示代码，并附有有助于构建和引用过程的行号。
如前所述，与其他方法相比，使用插件在 WordPress 平台上展示代码具有明显的优势。 这种优点的一个说明性示例是 Enlighter 语法插件提供的前端功能，其中当用户滚动内容时，代码行会动态突出显示。
此外，在右上角的代码框中，有几个增强用户体验的按钮。 值得注意的是，这些按钮之一可以以纯文本格式呈现代码，没有行号。
第二个按钮，称为“复制到剪贴板”，有助于即时复制代码框中的所有内容，使用户能够方便地将代码传输并粘贴到任何所需的程序中。
最后，第三个按钮在新窗口中打开代码，从而将其以纯文本格式显示在浏览器窗口中。
Enlighter 插件提供了一系列主题和强大的自定义工具，可以根据您的喜好定制代码框的外观。 如果您不想使用默认主题，您可以导航回 WordPress 中的帖子并选择当前活动的 Enlighter 源代码块。
此操作将在 WordPress 中揭开 Block 侧边栏。 如果它没有立即出现，请确保单击 WordPress 窗口右上角的“设置”（齿轮图标）按钮。
首先要考虑的自定义选项是语言字段，因为它指示插件显示哪种代码语言，从而启用适当的格式和突出显示功能。
有相当多的编码语言可供选择，因此请仔细阅读列表并选择最合适的一种。
特殊行功能通过允许用户输入以逗号分隔的行号来强调指定的行。
因此，对于所有访问该站点的个人来说，您指定的指定线路都会在视觉上得到强调。
Lineoffset 参数提供了一种在特定行号处开始编码片段的方法，这在显示较大行集中的代码子集时非常有利。
显然，通过在 Lineoffset 字段中输入值“10”，整个代码框从第 10 行开始。
方法 3：使用编码器工具
请访问 W3Docs HTML 编码器网站。 在该页面上，您将找到两个相邻的框字段。 左侧用于粘贴代码，右侧则显示编码版本，您可以将其复制并粘贴到 WordPress 中。
在继续之前，需要指定所需的代码保存类型：
- 如果您打算粘贴包含 JavaScript 元素的代码，请选择 JavaScript Unicode。
- 如果您使用 HTML，请选择 HTML 符号。
请将要在 WordPress 中显示的所需代码插入到左侧指定字段中。 随后，找到并选择位于右侧上方的“编码”按钮。
最终的结果可能会令人困惑； 然而，它本质上是 HTML 元素的合并，旨在保留插入的完整代码，同时避免在前端意外激活或显示替代内容。
请点击“复制”按钮。
返回 WordPress 并访问预期的帖子或页面。 继续选择位于右上角的选项（由三个垂直点表示）菜单。 随后，选择代码编辑器功能。
当前界面将显示代码编辑器而不是可视块编辑器。 找到代码显示所需的部分，然后继续将编码的 HTML 插入编辑器中。
如果您使用的是经典 WordPress 编辑器，则必须导航到“文本”选项卡，该选项卡对应于古腾堡块编辑器中的代码编辑器。
请选择“更新”或“发布”选项来完成帖子，然后前往帖子的前端观察其视觉呈现。
您将能够观察到在包含 HTML 编码元素之前最初插入编码器的未更改的代码。 值得注意的是，编码器不提供任何样式功能，这使得这种方法非常适合实现整洁和简约的美感。
方法 4：使用自定义简码
创建自定义短代码可以完成插入可重用代码块的任务，而无需手动复制和粘贴。 这正是自定义短代码为在 WordPress 平台上显示代码提供强大机会的原因。
使用自定义简码进行代码呈现的优点如下：
- 自定义短代码可以保存复杂的代码部分以供将来重用，从而无需重复键入冗长的代码片段。
- 可以为代码荧光笔和容器定义个性化 CSS 样式。
- 任何用户都可以使用短代码，使其他贡献者只需单击一下即可轻松利用您的代码突出显示和块。
创建自定义短代码需要熟练地修改 WordPress 主题文件、使用 PHP 代码以及可能开发 WordPress 插件。 因此，为 WordPress 制作自定义短代码可能会给 PHP 新手带来困难。
尽管如此，最终结果提供了一种相当简单的方法来在 WordPress 平台上显示代码。
人们可以自由地为自定义短代码选择任何所需的名称，并建立各种替代方案，例如 [html] [/html] 和 [css] [/css]，以适应不同的编程语言。
请注意，为了获得最佳语法突出显示效果，建议在使用 WordPress 古腾堡块编辑器时将自定义短代码与文本编辑器（在 WordPress Classic 中）或自定义 HTML 框结合使用。
目标是构建一个定制的短代码，使用户能够在短代码的开始和结束标签的分隔边界内输入或插入代码。
目标是开发一个定制的短代码，允许用户在短代码的指定开始和结束标签内输入或插入代码。
包起来
在 WordPress 中显示代码对于共享编程概念、确保准确性、提高美观性和促进协作至关重要。 它允许开发人员教育受众、提供具体证据、增强用户体验并鼓励社区参与。 展示代码片段可以促进透明度、信任和可靠的信息。 自定义短代码或插件可以确保视觉上有吸引力且结构良好的代码显示。 共享代码有助于讨论、反馈和创新。 总的来说，WordPress 中有效的代码显示对于知识传播、质量保证和 WordPress 开发社区的成长至关重要。
