如何将JavaScript移动到WordPress底部或页脚

02/19/2024

将JavaScript移动到底部的好处

JavaScript是一种客户端编程语言。它由用户的浏览器执行,而不是由您的网络服务器执行。当您将JavaScript放置在顶部时,浏览器可能会在加载页面的其余部分之前执行或处理JavaScript。当JavaScript移动到底部时,您的网络服务器将快速渲染页面,然后用户的浏览器将执行JavaScript。由于所有服务器端渲染已经完成,JavaScript将在后台加载,从而整体加载速度更快。

这将在使用Google页面速度或Yslow测试时提高您的速度评分。Google和其他搜索引擎现在将页面速度视为显示搜索结果时的性能指标之一。这意味着加载速度更快的网站将在搜索结果中更突出。

在WordPress中正确添加脚本的方法

WordPress有一个强大的排队系统,允许主题和插件开发者将他们的脚本按需排队和加载。正确地排队脚本和样式可以显著提高您的页面加载速度。

为了向您展示一个基本示例,我们将一个小的JavaScript添加到WordPress主题中。将您的JavaScript保存在一个.js文件中,并将该.js文件放在主题的js目录中。如果您的主题没有JavaScript目录,请创建一个。放置脚本文件后,编辑主题的functions.php文件并添加此代码:

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

在此代码中,我们使用了wp_register_script()函数。此函数具有以下参数:

<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

要将脚本添加到WordPress页面的页脚或底部,您只需要将$in_footer参数设置为true。

我们还使用了另一个函数get_template_directory_uri(),该函数返回模板目录的URL。此函数应在WordPress主题中用于排队和注册脚本和样式。对于插件,我们将使用plugins_url()函数。

问题:

问题是有时WordPress插件会将其自己的JavaScript添加到或页面正文中。为了将这些脚本移动到底部,您需要编辑插件文件并正确地将脚本移动到底部。

查找JavaScript源

在Web浏览器中打开您的网站并查看页面源代码。您将看到指示文件位置和来源的JavaScript文件链接。例如,下面的截图告诉我们,我们的脚本属于一个名为‘test-plugin101’的插件。脚本文件位于js目录中。

有时您会看到直接添加到页面中的JavaScript,而不是通过单独的.js文件链接的。在这种情况下,您需要逐一停用所有插件。在每次停用插件后刷新页面,直到找到将脚本添加到页面的插件。如果停用所有插件后JavaScript仍然存在,那么尝试切换到另一个主题,看看JavaScript是否是由您的主题添加的。

注册和排队脚本

一旦找到在头部部分添加JavaScript的插件或主题,下一步是找到插件调用文件的地方。在您的主题或插件的PHP文件中,您将看到对特定.js文件的调用。

如果插件或主题已经使用排队方法添加JavaScript文件,那么所有您需要做的就是在插件或主题中更改wp_register_script函数,为$in_footer参数添加true。像这样:

wp_register_script('script-handle', plugins_url('js/script.js', __FILE__), '', '1.0', true);

假设您的插件或主题在头部或内容之间添加了原始JavaScript。在插件或主题文件中找到原始的JavaScript代码,复制JavaScript并将其保存在.js文件中。然后,使用wp_register_script()函数将JavaScript移动到底部。

编辑者注:重要的是要了解,当您对核心文件进行更改并更新插件时,您的更改不会被覆盖。更好的做法是取消注册脚本并从主题的functions.php文件中重新注册。请参阅本教程。

除了将脚本移动到页脚外,您还应考虑使用更快的社交媒体插件和延迟加载图像。除此之外,您还应使用W3 Total Cache和MaxCDN来提高网站速度。

我们希望这篇文章帮助您在WordPress中移动JavaScript到底部并提高页面速度。如有问题和反馈,请在下方留言。



Related Posts

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>