本文将指导你如何在使用WP Rocket的“延迟JavaScript执行”功能时，针对特定页面排除某些JS脚本，以避免页面错乱。这通常发生在某些JS脚本必须立即加载才能保证页面正常渲染的情况下，例如轮播图或依赖特定JS库的功能。我们将以修改WP Rocket提供的helper插件为例，详细讲解如何配置，并提供一些排查问题的思路。
修改Helper插件以排除特定URL的JS脚本延迟加载
WP Rocket提供了一个名为“WP Rocket | Exclude JS scripts from Delay JS only at some URLs”的helper插件，允许用户在特定URL下排除指定的JS脚本。然而，有时按照插件说明配置后，仍然无法生效。以下是详细的配置步骤和可能的解决方案：
-
理解插件原理：
该插件通过rocket_delay_js_exclusions过滤器，修改WP Rocket的JS延迟加载排除列表。它首先判断当前页面是否在指定的URL列表中，如果是，则将指定的JS脚本添加到排除列表中，使其不被延迟加载。
-
配置wp-rocket-exclude-delay-js-per-url.php文件：
打开wp-rocket-exclude-delay-js-per-url.php文件，找到以下代码段：
$excluded_slugs = array( 'tablets', //'another-slug', //'another-one', );将需要排除延迟加载的页面slug添加到$excluded_slugs数组中。Slug通常是URL中页面名称的部分。例如，如果你的平板电脑页面URL是example.com/tablets/，那么slug就是tablets。
接下来，找到以下代码段：
if ( ( function_exists( 'is_page' ) && is_page( $excluded_slugs ) ) || ( function_exists( 'is_single' ) && is_single( $excluded_slugs ) ) || (is_front_page()) // || (is_page_template('home-v4.php')) // || (is_page_template('tablet.php')) /* IF YOU NEEED TO EXCLUDE BASED ON DIFFERENT RULES you can replace lines 41 and 42 with different conditionals, or add more conditions, for example: || ( is_front_page() ) || ( is_category() ) ... etc */ ) {这段代码定义了在哪些页面上应用排除规则。is_page()函数用于判断当前页面是否为指定的页面。is_front_page()函数用于判断当前页面是否为首页。你可以根据需要添加更多的条件，例如is_category()用于判断当前页面是否为分类页面。
最后，找到以下代码段：
$exclusions[] = 'jquery.min.js'; $exclusions[] = 'slick.min.js'; //$exclusions[] = 'script2.js'; //$exclusions[] = 'anotherInline';
将需要排除延迟加载的JS脚本文件名添加到$exclusions数组中。确保文件名与实际的文件名完全一致。
-
检查条件判断：
确保is_page()函数能够正确识别你的页面。如果你的页面使用了自定义页面模板，可以尝试使用is_page_template()函数，例如：
|| (is_page_template('home-v4.php')) || (is_page_template('tablet.php'))注意替换home-v4.php和tablet.php为你的实际模板文件名。
-
插件加载优先级：
如果你的代码是通过代码片段插件添加的，需要设置较高的优先级，确保在WP Rocket加载之前执行。将以下代码添加到你的代码片段中：
add_filter( 'rocket_delay_js_exclusions', __NAMESPACE__ . '\exclude_from_delay', 999 );
999是一个较高的优先级，可以确保该过滤器在其他过滤器之前执行。
-
联系官方支持：
如果以上步骤都无法解决问题，建议联系WP Rocket官方支持，寻求专业帮助。他们可能能够诊断出更深层次的问题。
注意事项和总结
- 确保文件名正确：JS脚本文件名必须与实际文件名完全一致，包括大小写。
- 清除缓存：修改插件后，务必清除WP Rocket缓存和浏览器缓存，以确保新的配置生效。
- 测试：在修改插件后，务必在不同设备和浏览器上进行测试，确保页面功能正常。
- 代码片段插件优先级：如果使用代码片段插件，请设置较高的优先级。
通过以上步骤，你应该能够解决WP Rocket延迟加载JS导致特定页面错乱的问题。如果问题仍然存在，请仔细检查配置，并考虑联系WP Rocket官方支持。记住，仔细的配置和充分的测试是解决问题的关键。
