如何创建帖子片段库以在您的帖子和页面中使用

许多 WordPress 网站在其帖子和页面中的某处使用自定义代码或功能。 该平台可以轻松添加此代码，但如果您要在整个站点中重复使用代码段，则在需要时手动添加代码可能会很麻烦。

不必每次需要时都手动插入代码片段，使用插件组织和保存它们更有意义。 在本文中，我们将讨论保持代码片段井井有条的好处，然后分两步向您展示如何使用代码片段扩展插件来做到这一点。 让我们开始工作吧！

为什么你应该组织你的代码片段

即使您不是开发人员，您也可能需要手动向网站添加一些代码。

许多 WordPress 用户将自定义代码片段添加到他们的帖子和页面中。 无论您的细分市场和规模如何，在很多情况下您都需要向您的网站添加一些代码。 以 Google Adsense 或 Facebook Pixel 为例，它们都需要您在网站中添加几行 JavaScript 才能工作。 许多 WordPress 插件还要求您使用短代码，因此向您的网站添加自定义代码的机会很高。

鉴于此，找到一种方法来保存您在网站上使用的所有代码片段是一个好主意。 原因如下：

• 您可以在必要时引用您的代码。 有时，您可能会忘记添加到文件中的自定义代码行，因此使用库来组织您的代码段是值得的。
• 您将能够更轻松地重复使用您的代码片段。 如果您需要多次使用相同的代码，最好将其存储以备后用。

当然，您可以使用计算机上或云中的常规文本文件保存这些代码片段。 但是，使用正确的 WordPress 插件可以为您提供更合适的方式将它们存储在您的站点中。 这样，您就会知道您已将哪些代码添加到您所使用的每个特定网站。

介绍代码片段扩展插件

Code Snippets Extended 插件是一个有趣的工具，可让您在 WordPress 中设置一个简单的代码库。 它允许您保存自定义代码，使用您想要的任何名称来识别它，然后只需点击几下即可将其添加到您的任何帖子和页面中。

此外，该插件还可让您预览代码片段的效果，只要它们是简单的 JavaScript 或 CSS。 它还支持 PHP，但使用该工具的预览功能通常不会显示这些片段。

虽然该插件总体上与 Divi Builder 配合得很好，但有一个问题需要解决。 默认情况下，该工具会向编辑器添加一个新按钮，使您可以将任何库的片段添加到您的帖子或页面。 但是，切换到 Divi Builder 时，该按钮会消失。 不过修复很简单，我们将在一分钟内对其进行更多探索。

主要特点：

• 将所有自定义代码片段保存到仪表板内的集中式库中。
• 使用唯一名称标识每个片段。
• 为图书馆中的每个项目分配易于使用的短代码。
• 使用 WordPress 编辑器上的新选项将片段添加到您的帖子和页面，而无需触摸代码。

价格：免费 | 更多信息

如何创建帖子片段库以在您的帖子和页面中使用（分 2 个步骤）

在我们开始之前，您需要安装并激活插件。 一旦你准备好了，跳到第一步！

第 1 步：将新片段添加到您的库中

安装插件后，您将在 WordPress 仪表板上看到一个名为Snippets的新选项卡。 单击它并查找“添加代码段”选项。 在下一个屏幕上，您将能够设置一个名称来标识库中的代码，以及上传代码执行所需的任何媒体文件：

请记住 - 即使您没有从该页面上传必要的媒体，只要它在您的库中，代码仍然可以工作。 此功能仅在那里您可以使用页面底部的测试按钮预览代码的效果。

继续前进，您还将看到一个编辑器，您可以在其中键入 CSS、JavaScript、PHP 和 jQuery 代码。 但是，它需要被包装在每种语言的特定标签中。 以下是一些快速示例供参考：

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

每当您添加新代码段时，您都可以在编辑器下方引用所有这些标签，只要您记住每种语言需要不同的语言，您就无需记住它们。 另外，您可以在同一个代码段中使用多种语言——只需确保使用各自的标签将它们包装起来。

完成输入或粘贴代码后，使用页面底部的“保存代码段”按钮，它将显示在 WordPress 仪表板上的“代码段”>“代码段”选项卡中：

现在，剩下的就是使用 WordPress 编辑器和 Divi Builder 测试您的新代码段。

第 2 步：将您的片段插入您的 Divi 帖子和页面

如果您不使用 Divi Builder，则可以使用常规 WordPress 编辑器打开任何帖子或页面。 在顶部，您会看到一个新的“插入代码段”按钮：

单击它会显示一个覆盖图，显示您库中的所有项目，您可以选择您想要的任何一个：

现在插件会将代码添加到编辑器中，您就完成了设置——就这么简单。 但是，如果您使用的是 Divi Builder，您将无法访问此选项。 解决此问题的最简单方法是在新窗口中打开仪表板的代码段选项卡，然后复制要添加的代码的相应短代码。 获得后，返回 Divi Builder 并将代码模块添加到您正在处理的页面：

进入后，将您的短代码粘贴到内容字段中并保存您的更改：

现在，您的代码段将照常工作。 使用 Divi Builder 为该过程增加了一个步骤，但您仍然可以将所有代码片段存储在一个易于访问的内部库中。

结论

如果您和我们一样，您就会重视所有项目的效率。 手动将相同的代码添加到多个页面或帖子是可能的，但这并不能很好地利用您的时间。 相反，最好对代码进行一次测试，将其保存到您的库中，然后将其保存在您的虚拟后袋中以备不时之需。

Code Snippets Extended 插件使您能够做到这一点。 只需安装它并按照以下两个步骤操作：

1. 将新片段添加到您的库中。
2. 将您的片段插入到您的 Divi 帖子和页面中。

您对如何将代码片段添加到您的 Divi 网站有任何疑问吗？ 在下面的评论部分提问！

文章缩略图由 Andrii Bezvershenko/shutterstock.com 提供。