如何在 WordPress 中添加页眉和页脚代码

WordPress 平台在帮助那些没有编码经验的人实现几乎任何类型的功能方面做得很好。 但是，在某些情况下，您需要在 WordPress 中添加页眉和页脚代码，以帮助第三方服务嵌入自己的功能。

最典型的用例是将 Google Analytics 集成到您的网站中。 但是，您还有很多其他原因想要执行此操作——您可能已经知道为什么要执行此任务。

在本教程中，我们将向您展示几种在 WordPress 中添加页眉和页脚代码的方法。 不过，首先，我们将首先了解您希望这样做的各种原因。

使用网站页眉和页脚中的额外代码可以实现什么

一个标准的网站会分解成几个不同的组件，就像一个文本文档：

• 标题。 您网站的标头包含许多“预加载”元素，以及有关您的安全套接字层 (SSL) 证书、加密、任何 JavaScript 等的详细信息。
• 页脚。 这与您的标题类似，但最终位于页面底部。
• 身体。 您在网站上实现的大部分功能都在内容的“正文”中。 这是 WordPress 仪表板中几乎所有内容的主要焦点，正文代表您在页面上看到的内容。

服务器将以线性方式加载页面——头部、正文、页脚。 这意味着标题中的代码将首先加载，但页脚代码将在其他所有内容之后加载。

日常代码片段用例

社交媒体和搜索引擎优化 (SEO) 工具通常需要您在 WordPress 中添加标头代码。 这是因为这些服务在站点加载时必须优先考虑，以便记录之后的所有内容。

CSS 代码的情况与此类似，因为这决定了您网站的外观。 如果这是在页脚中，您会在看到样式之前看到一系列布局更改。

虽然 JavaScript 可以帮助我们生成、查看现代网站并与之交互，但它不是必需的组件（在技术意义上）。因此，页脚中的 JavaScript 在许多情况下会给你带来更好的性能，如果你有的话选项，你应该去。

事实上，还有更多用例，我们将在 WPKube 博客上的另一篇文章中更详细地介绍它们。 但是，在典型的 WordPress 情况下，您无权访问网站的页眉和页脚元素。 为此，您需要亲自动手，或寻求外部帮助。

如何在 WordPress 中添加页眉和页脚代码（2 种方式）

在本文的其余部分，我们将介绍在 WordPress 中添加页眉和页脚代码的两种方法。 两者都很简单，但我们更喜欢其中一个：

1. 您可以使用插件来帮助您将代码添加到站点的正确区域。
2. 您可以将代码添加到您的functions.php文件中，并且您需要具备有关如何访问站点文件的额外知识。

我们将首先查看插件选项，原因我们稍后会解释。

1.使用插件将代码添加到您的页眉和页脚

如果您想在 WordPress 中实现某些功能，插件应该为您完成这项工作。 在大多数情况下，我们会将插件视为 WordPress 网站的默认插件。 因此，如果您想在 WordPress 中添加页眉和页脚代码，嵌入代码插件将是理想的：

这是我们的姊妹网站 DesignBombs 开发的解决方案，它为您提供了一种快速、轻松的方式来将代码添加到您的整个网站、特定页面或帖子，甚至自定义帖子类型。

要使用它，您将以典型的 WordPress 方式安装和激活插件。 此过程完成后，您将在仪表板上看到一个新的设置 > 嵌入代码选项：

在此屏幕上，您会发现两个文本区域：一个用于头部，一个用于页脚。 您甚至会得到关于您输入的代码在 HTML 中的位置的提示：

使用这个工具非常简单。 输入代码后，保存更改。 这将在全局（即站点范围）级别上添加任何代码。 但是，您可能只想将代码添加到单个帖子或页面。 您可以通过块编辑器执行此操作 - 您需要的元框和选项位于屏幕底部：

虽然嵌入代码是我们的首选方法，并且您应该尽量避免大惊小怪，但还有另一种方法可以让您获得所需的结果。 我们接下来看看这个。

2. 将代码片段添加到您的functions.php文件中

每个 WordPress 安装都可以访问其顶级或特定主题目录中的专用functions.php文件。 这使您能够添加代码片段以帮助 WordPress 使用更多功能。 但是，在开始之前，您需要了解并具备一些先决条件：

• 您使用安全文件传输协议 (SFTP) 访问您的 WordPress 核心文件 - 以及扩展的functions.php文件。因此，您需要了解它是如何工作的，以便找到您的站点文件并使用它们。
• 我们还建议您使用子主题，以便在相关主题收到更新时保留您的更改。
• 您至少需要 WordPress 钩子、操作和过滤器的工作知识。 更重要的是，您需要了解 WordPress 如何通过这些钩子访问您的页眉和页脚。

在使用 SFTP 时，WPKube 提供了一些您可以考虑阅读的文章：

• 安全文件传输协议 (SFTP) 初学者指南
• 如何使用 FileZilla：分步指南
• WordPress 文件权限初学者指南

您可能还想查看 WordPress Developer hook 库，尤其是wp_head和wp_footer的条目，尽管这是可选的，因为您不会以严厉的方式使用它们。

从这里开始，该过程需要几个步骤。 首先，在您的 SFTP 客户端中打开您网站的服务器，然后导航到wp-content/themes 。 在这里，打开您当前主题的目录，并查找相关的functions.php文件：

您需要在您喜欢的文本或代码编辑器中打开此文件。 在其中，您可以放置​​以下代码段模板：

 add_action( 'wp_head', '<SNIPPET_NAME>' ); function <SNIPPET_NAME>() { ?> <!-- Place your HTML code or other script here. --> <?php }

简而言之，这将使用您称之为<SNIPPET_NAME>的任何内容为 WordPress 添加一个操作挂钩。 在函数本身中，您将在注释行（即以<!--开头的行）下方替换或键入。如果您想将代码添加到页脚，您需要将'wp_head'替换为'wp_footer'并继续正常。

保存更改后，这应该适用于您的站点。 根据您添加的代码，前端页面本身、WordPress 仪表板甚至第三方仪表板中都应该有一些可见的内容。

包起来

虽然 WordPress 不需要典型的编码知识即可完全使用，但在某些情况下，您可能需要在 WordPress 中添加页眉和页脚代码。 例如，您可能想要使用分析，这是破解网站文件的常见原因。

这篇文章介绍了两种将代码添加到页眉和页脚的不同方法：

• 诸如嵌入代码之类的插件可让您使用仪表板向 WordPress 添加页眉和页脚代码。 因此，您只需复制和粘贴，无需担心访问您的服务器。
• 但是，如果您有相关知识，您可以将代码片段添加到您的functions.php文件中。 您需要 SFTP 知识，以及对 WordPress 文件的一点经验，但这种方法与插件选项一样好。

您将使用什么方法在 WordPress 中添加页眉和页脚代码？ 在下面的评论部分让我们知道！