如何在 WordPress 中添加代码片段

已发表: 2024-01-18

如果您想将代码片段添加到您的 WordPress 网站,那么您来对地方了。

通常,人们复制代码并将其粘贴到 WordPress 主题文件中。 这是一个简单的过程,但此过程适合专家用户。

对于初学者和中级用户来说,复制和粘贴可能看起来令人生畏。 这就是我写这篇文章的原因。

此外,专家用户也可以获得好处,因为我将向您展示如何轻松添加代码片段。

让我们开始!

将代码片段添加到 WordPress 网站的原因

首先,WordPress 是最受欢迎的网站构建器,因为它具有适合初学者的设置和以用户为中心的功能。

但是,添加一些自定义代码可以扩展 WordPress 的功能,而不会破坏您的网站。

假设您有一些可以在您的网站上实现的代码。 但是您将在哪里或如何发布它们?

这就是粘贴代码选项的用武之地。这是为您的网站提供创新功能的好方法。

使用自定义代码的另一个原因是它是扩展 WordPress 功能的有效方法。

几乎对于所有需要,您都会找到一个 WordPress 插件。 但是安装满足所有需求的插件并使您的网站变得沉重是明智的吗?

如果您可以使用一小部分代码来解决问题,那么您应该这样做。

话虽如此,让我们看看向 WordPress 网站添加自定义代码的过程。

添加自定义代码的方法

您可以通过多种方式向 WordPress 网站添加自定义代码。 在讨论这一部分之前,我希望您安装一个 WordPress 备份插件,以便您的新代码不会破坏网站中的任何内容。

如果出现问题,您可以从备份中恢复以前的版本,并将您的站点恢复到早期阶段。 话虽这么说,添加代码片段的另一个方面是在哪里添加它们。

通常,您可以将代码添加到主题模板文件中,例如index.php。 还有其他 PHP 文件,您可以直接粘贴代码。

我想,最流行的方法是将片段添加到functions.php。 至少,这是您在大多数可用教程中看到的内容。

但是,当您更改主题或想要一次停止该功能时,我将展示对您最有帮助的最佳方法。

不过,您可以使用以下一些方法将自定义代码添加到 WordPress 网站。

如何在 WordPress 中添加代码片段 (FluentSnippets)

第一步是使用名为 FluentSnippets 的插件添加自定义代码。 顺便说一句,这个插件是我们(您最喜欢的 WPManageNinja)开发的。 如果您已经是 Fluent 用户(使用任何 Fluent 产品),您就会知道我们的插件保持着多么高品质。

第一步 – 安装免费插件

转到插件 > 添加新插件并搜索 FluentSnippets。

添加新插件

单击立即安装按钮。

现在单击“激活”按钮,您的插件将被激活。

FluentSnippets - 激活插件

返回 WordPress 仪表板并从左侧面板中找到 FluentSnippets。 您将看到一个按钮,上面写着Create Your First Snippet 。 或者,您可以随时按右上角的“新建片段”按钮。

创建您的第一个片段

第二步 – 粘贴代码片段

现在粘贴您的代码片段并为其命名。 如果需要,您可以写一些描述。 毕竟,告诉它在哪里运行并单击“创建片段”按钮。

粘贴您的自定义代码片段

您还可以使用数字设置一些优先级,数字越低,优先级越高。

当您有多个片段时,您可以将它们组织到组中。 您还可以分配一些标签以轻松找到您的片段。

有一个称为高级条件逻辑的选项。 如果启用它,您可以过滤您的代码片段并让它在满足条件时运行。

顺便说一句,您可以为 PHP、PHP + HTML、CSS 和 JS 编写脚本。

复制和粘贴代码的最简单方法就在这里完成。 您可以去查看“设置”,尽管那里没什么可做的。

将代码粘贴到主题文件中

默认情况下,WordPress 具有丰富的功能可应用于您的网站。 主题通常具有丰富的功能和自定义选项。 但是当您需要精确的东西时,您可能会添加一些自己编写的代码。

这里的 function.php 文件可以拯救你的背部。 好吧,您可以在每个主题中找到该文件,但我希望您遵循最安全的方式。 这就是为什么我建议您创建一个儿童主题。

不要不知所措。 子主题位于主主题之下,其工作方式与父主题类似。 好处是,如果出现任何问题,只有早午餐会受到影响,而不是树(主题)。

第一步 – 创建子主题

要创建子主题,您必须通过 FileZilla 等 FTP 客户端访问站点的文件夹。 您还可以使用站点托管位置的文件管理器进行访问。

成功登录后,转到wp-content > 主题。 当您导航到那里时,您可以看到网站上安装的所有主题的文件夹。

现在您需要为要创建的子主题创建一个文件夹。 给文件夹命名。 我建议您写一个描述性的名称,以免将来发生混淆。 假设您的主题名称是 tropica,您可以将您的子主题命名为 tropica_childtheme。

第二步 – 添加 css 文件

创建文件夹后,在其中添加 style.css 文件。 在文本编辑器中,粘贴以下代码:

 /* Theme Name: My Child Theme Theme URI: https: //mysite.com/ Description: This is a new child theme I have created for experimentation. Author: Your Name Author URI: https: //mysite.com/ Template: parenttheme Version: 0.1 */

不要忘记用虚拟内容替换您的信息。 确保正确书写父主题的名称(此处为tropica)。 另一件重要的事情是,您需要在子主题的 style.css 文件中调用父主题的 CSS。

您只需添加以下代码即可做到这一点:

 @import url("../parenttheme/style.css");

这里的“父主题”是tropica。 正确的?

因此,不要忘记正确写出您的父主题的名称。 完成后,将文件另存为 style.css 在子主题的文件夹中。

步骤 3 – 创建一个functions.php 文件

接下来,您必须为您的子主题创建一个functions.php 文件。 打开文本编辑器并粘贴以下 PHP 标签:

 <?php //* Write your code here

现在将此文件另存为functions.php并将其添加到子主题的文件夹中。 另外,使用 FTP 客户端将此文件夹拖到站点的主题目录中。

第四步 – 激活您的主题

是时候激活您的主题了。 为此,请从 WordPress 仪表板的左侧面板转到外观 > 主题。 您可以在那里看到您创建的子主题。 单击“激活”按钮,您的子主题将开始工作。

第五步 – 添加代码片段

这里主要做任务。 要将代码片段添加到子主题,请导航至外观 > 主题文件编辑器。 现在选择functions.php 或您想要自定义的任何其他文件。

函数.php 示例

这是一个functions.php的例子

完成后,单击“更新文件”,您的更改将在您的网站上实施。 只需重新加载网站并自行检查即可!

结论

现在您知道如何将自定义代码片段添加到您的 WordPress 网站。 让我们利用这些知识,通过自定义代码使您的网站比以往更加强大。 我希望添加代码不再是一件困难的事情。