如何在WordPress 的页眉和页脚部分插入代码?

WordPress 组装多个PHP 模板文件,以在浏览器中向用户呈现可读的内容。WordPress 主题包含header.php、footer.php、single.php(用于帖子)、page.php(用于页面)和sidebar.php 文件,最新的主题使用额外的模板部分来生成主要内容。

当您在浏览器中查看WordPress 页面时,所有这些模板都被整齐地组装和显示。通常,您不需要修改这些文件,并且有插件可用于插入自定义功能。但是,在某些情况下,您需要在WordPress 的页眉和页脚部分中插入代码。

在本文中,我们将解释如何在没有插件和使用插件的情况下做到这一点。

为什么要在页眉或页脚中插入代码?

页眉和页脚部分可以方便地进行各种代码集成以及为您的站点添加额外的功能。以下是一些要求您在WordPress 网站的页眉和页脚中插入代码的最佳示例。

  • 插入来自Google AdSense 的自动广告代码或来自任何其他广告程序的标头出价广告代码。
  • 安装Google Analytics 和Facebook Pixel 跟踪代码。
  • 插入来自Bing Webmaster Tools、Google Search Console、百度、Yandex 和任何其他平台(如Pinterest)的验证码。
  • 在页眉中添加自定义CSS,例如在页脚中添加Google 字体样式表和JavaScript。
  • 使用Yoast SEO 等插件时,在标题中插入自定义组件,如面包屑。

如您所见,根据您的需要,列表会更长。

在WordPress 的页眉和页脚部分添加代码

默认情况下,WordPress 不提供在页眉和页脚部分插入代码的任何选项。简单的选择是直接编辑文件并插入您的代码。但是,也有可用于此目的的插件。在本文中,我们将解释在任何WordPress 网站的页眉和页脚部分添加代码的两种方法。

  • 手动编辑WordPress 主题的header.php 和footer.php 文件。
  • 使用插入页眉和页脚插件无需文件编辑即可添加代码。
相关问题  3 种简单的方法来打败你的Facebook 成瘾

此外,我们还将解释使用一些主题在页眉和页脚中使用wp_head 和wp_footer 钩子插入代码。

手动插入WordPress 页眉和页脚代码

此选项需要在您的WordPress 站点主题中编辑header.php 或footer.php 文件,并且可能对初学者不友好。

  • 首先,从准备代码片段或从第三方站点复制开始。准备好页眉和页脚代码后,将鼠标悬停在站点仪表板中的“外观”菜单上,然后单击“主题编辑器”选项卡。
  • 忽略您收到的任何警告消息,并从“选择要编辑的主题:”下拉列表中选择您的活动主题。
  • 选择当前视图右侧的“header.php”或“footer.php”文件。
  • 对于页眉,确保将代码粘贴在结束“”标记下方,然后页脚的代码应在““ 标签。有时,您可能还需要在结束标记之前插入代码。
  • 最后,单击“更新文件”按钮以使用添加的代码段将更改保存到您的站点。

确保测试您的站点并检查您插入的功能是否按预期工作。

使用插件插入WordPress 页眉和页脚代码

默认情况下,WordPress 允许您在“外观> 自定义> 附加CSS”部分下将自定义CSS 添加到您的网站。但是,您不能在该部分中插入JavaScript。有许多免费插件和插件可用于插入代码,在这里我们将使用“WPBeginner 插入页眉和页脚”进行解释。该插件具有超级简单的界面,初学者可以轻松使用。

  • 首先,安装并激活“插入页眉和页脚”插件。通过您的WordPress 网站仪表板,将鼠标悬停在“插件”菜单上,然后单击“添加新”。
  • 使用搜索插件功能查找“插入页眉和页脚”,然后单击“立即安装”按钮。安装过程结束后,“激活”插件。
安装插件
安装插件
  • 转到“设置”菜单,找到并单击“插入页眉和页脚”子菜单。
  • 该插件提供了三个框,用于在页眉、正文和页脚中放置脚本以插入代码。在此之前,像Google Analytics 这样的第三方提供商会指导你在哪个盒子上放置他们的代码片段。否则,请确保了解要插入代码的确切位置。
  • 将这些代码粘贴到相应的代码中,然后单击“保存”以完成您的站点更改。
  • 代码脚本现在会自动加载到站点运行的特定位置。
相关问题  如何从Windows 10 上的文件资源管理器中删除OneDrive

您可以随时进一步编辑代码并保持插件处于活动状态,因为它的停用将导致无法添加自定义功能并禁用所有先前添加到您网站的脚本。

使用插件插入代码
使用插件插入代码

请注意,如果偶然“插入页眉和页脚”插件被错误地停用或卸载,您的代码将保留在您的站点数据库中。只需重新安装或重新激活插件即可使早期代码开始工作。此外,建议您在为插件中的页眉和页脚代码片段添加和保存更改时清除WordPress 站点的缓存。

使用主题编辑页眉和页脚

无论您是手动编辑主题文件还是使用插件,您插入的代码都会影响整个网站。您需要使用插入HTML 片段之类的插件或尝试在古腾堡编辑器中使用自定义HTML 块,以便仅在特定帖子或页面中插入自定义代码。但是,您可以使用GeneratePress Premium 和Astra Pro 等最新主题在页眉和页脚中插入代码。这些主题使用标准的wp_head 和wp_footer 挂钩并允许应用自定义限制。例如,您可以仅在单个帖子中插入面包屑而不影响页面。

在这里,我们将使用Astra Pro 主题进行说明,您可以在GeneratePress Premium 主题中使用“元素”选项执行类似的步骤。

  • 安装Astra Pro 附加插件后,转到“外观> Astra 选项”。
  • 激活“自定义布局”选项,然后单击该选项的“设置”链接。
  • 单击“添加新”按钮,然后将要插入的代码粘贴到框中。
  • 在“自定义布局设置”部分下,单击“布局”下拉菜单并选择“挂钩”选项。
在Astra 主题中插入标题代码
在Astra 主题中插入标题代码
  • 在“操作”下拉列表中,选择wp_head 作为页眉部分,选择wp_footer 作为页脚部分。
  • 如果您只使用一个代码片段,请将“优先级”留空。但是,当您在同一个钩子位置插入多个代码时,请确保设置优先顺序以插入代码。您可以使用10、20、30 等作为优先级,最低的将优先于其他。
  • 如果需要,提供以像素为单位的顶部和底部间距详细信息。
  • 在“Display On”下拉菜单中选择要显示代码的位置。您可以选择特定的帖子、页面、分类或插入整个网站或插入特定的帖子类型,如帖子、页面或您网站中使用的任何自定义帖子类型。
  • 在“用户角色”下拉列表中选择您希望代码处于活动状态的用户角色。
相关问题  如何将密码从Google Chrome 导入iCloud 钥匙圈

完成所有设置后,单击“发布”按钮以使您的更改生效。

使用插入页眉和页脚插件的原因

编辑主题文件或使用自定义主题有很多缺点,你会坚持使用插件方法。以下是使用该插件可以获得的一些好处,除了您可能不是技术人员或者您可能是初学者。

  • 由于插件商店在单独的位置添加了脚本,因此您无需担心升级、更新或更改主题期间的代码擦除。您也不需要子主题,因为插件独立于您网站的主题工作。
  • 它可以轻松快速地在页眉和页脚中添加自定义代码。此外,这有助于在单个位置维护代码片段的组织。
  • 在选择编辑您的WordPress 主题时可能会遇到错误,因此使用插件有助于挥手、防止和避免此类错误。

最后的想法

在许多情况下,您需要更改外观、改变方式或向WordPress 网站添加其他功能。无论是哪种情况,当您不具备技术倾向时,请记住使用插件方法插入页眉和页脚代码。虽然Astra 和GeneratePress 等主题可以帮助您解决此问题,但您需要购买高级版本。此外,它会使更改主题变得困难,此时您需要寻找使用插件。

分享这篇文章

发表评论