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

已发表: 2020-10-30

使用代码自定义您的 WordPress 网站可能很可怕。 通常,您需要深入研究核心文件来修改配置或添加新参数,如果您以错误的方式进行操作,可能会破坏您的站点。

但是,添加页眉和页脚代码往往要简单得多。 通常,您只需要复制和粘贴特定的代码片段。 这意味着如果您知道如何访问您的页眉和页脚文件,那么您已经过了最可怕的部分。

在本文中,我们将教您如何手动和使用插件在 WordPress 中添加页眉和页脚代码。 这两种方法都非常简单,所以让我们开始吧!

为什么您可能需要在 WordPress 中添加页眉和页脚代码

如果您经营一个网站,您可能至少熟悉一项需要您嵌入代码才能连接到它的第三方服务。

一些最受欢迎的示例包括 Google Analytics、Search Console、Facebook Pixel 和许多其他涉及网站跟踪的工具。

所有这些服务都要求您在网站的头部标签之间添加特定的脚本。 您网站的标题是一个重要的组成部分,包括脚本、标题、样式文件等元素。

头文件的示例。

页脚标签的工作方式与标签类似。 从技术上讲,如果您将代码片段添加到网站的页脚,它们的运行方式应该与您将它们包含在您的页眉中一样。

但是,重要的是要了解您的网站将按照包含它们的顺序执行脚本。 另外,标题代码将  在页面加载之前运行,而页脚代码将在它之后运行。

如果您可以选择并且关心网站优化,那么将 JavaScript 移动到您网站的页脚可以帮助加快加载时间。 但是,某些服务会明确要求您将其代码添加到您的标头中以避免任何执行问题。

根据经验,如果某项服务要求您这样做,我们建议您遵循其建议。 对于其他 JavaScript 代码片段,请将它们放在您的 WordPress 网站的页脚中。 CSS 代码总是进入标题。

如何在 WordPress 中添加页眉和页脚代码(2 种方法)

与 WordPress 的情况一样,您可以通过手动修改文件或使用插件来实现相同的目标。

让我们从讨论插件方法开始。

1. 使用头、页脚和后期注入等插件

使用插件将代码添加到 WordPress 中的页眉和页脚文件是最安全的方法。 使用插件,您无需手动修改主题文件或确保在正确的位置添加脚本。

虽然有很多不错的插件可供选择,但我们对这项工作的推荐是 Head、Footer 和 Post Injections 插件。

Head、Footer 和 Post Injections 插件

这个插件让您可以很好地控制要在代码中添加代码片段的位置。 它还提供了为您的网站的移动和桌面渲染添加不同脚本的选项。

要添加插件,请转到仪表板中的插件 > 添加新插件,然后使用搜索功能查找插件。 点击安装,然后激活插件。

插件激活后,您可以直接跳转到Settings > Header and Footer 。 您会看到多个字段,您可以在其中添加代码片段。

检查插件的标头代码放置选项

如果您深入研究插件的选项,您会发现它为您的代码片段提供了许多额外的展示位置。 但是,在大多数情况下,您可以坚持使用页眉和页脚选项卡。

对于全局代码,请确保将这些片段放置在On Every Page字段中。 但是,如果您只需要在主页上运行代码,请使用Only On The Home Page选项。

完成向您的网站添加代码后,保存对插件的更改,您就可以开始了!

2.通过你的functions.php文件添加代码片段

在 WordPress 中手动添加页眉和页脚代码并不复杂,但它确实需要比插件方法更多的考虑。

您可以将代码直接添加到活动主题的header.phpfooter.php文件中。 您可以在/public_html/wp-content/themes/目录中找到这些文件,方法是打开活动主题的文件夹并查看内部:

通过 FTP 访问您的页眉和页脚文件

您可以通过文件传输协议 (FTP) 访问这些文件,并使用您喜欢的代码编辑器对其进行编辑。 但是,直接编辑页眉和页脚文件可能会很麻烦。 考虑到这一点,如果您打算使用手动方法,我们有两个建议:

  1. 为您的主题创建一个子主题。 这样,您在更新父主题时不会丢失任何自定义。
  2. 使用钩子通过您的functions.php文件添加代码。 这为手动编辑页眉和页脚文件提供了一种更简洁的方法。

理想情况下,如果您计划进行任何类型的主题定制,您应该始终使用子主题。 您可以在/wp-content/themes目录的文件夹中访问您的子主题的functions.php文件。

在代码编辑器中打开functions.php文件。 要添加您想要的代码,您需要使用wp_head  wp_footer   钩。

以下代码段将您的自定义代码添加到您网站的标题中:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

如果要将代码放入页脚,可以使用wp_footer挂钩而不是wp_head 。 如果需要,您还可以更改函数的名称(test_script)

完成对functions.php文件的调整后,请记住保存更改,仅此而已。 您添加的任何代码现在都应该可以工作了!

结论

许多第三方服务(例如 Google Analytics 或 Facebook Pixel)要求您将代码片段添加到您的网站,以便它们可以连接到它。 但是,这只是您需要在 WordPress 中向页眉和页脚添加代码的众多情况之一,因此知道如何去做是值得的。

有两种方法可以将代码片段添加到页眉和页脚。 您可以使用诸如“Head, Footer and Post Injections”之类的插件,或者通过您的functions.php文件添加代码片段。

您对如何在 WordPress 中添加页眉和页脚代码有任何疑问吗? 让我们在下面的评论部分中讨论它们!