WordPress延迟脚本插件不加载网站

Question

我想加快我的wordpress网站的加载速度。我编写了一个简单的插件，它将 defer 属性添加到我安装的自定义主题使用的一些脚本中。我面临的问题是该站点已锁定到预加载器屏幕，并且chrome开发控制台中不存在错误，也没有显示xdebug错误。也许我做错了什么，我不知道，如果处理以添加 defer 属性的脚本数组中不存在，则负责加载主题的主 javascript 文件是否也未加载？ 所有脚本都是主题的依赖项，并且正在使用不属于列表的 jQuery。 任何帮助将不胜感激。

class WP_scriptDefer {
private $scripts = [
'bootstrap.min.js',
'lazyload.min.js',
'viewportchecker.min.js',
'universal-parallax.min.js',
];
public function __construct()
{
$this->init();
}
public function init()
{
add_filter( 'script_loader_tag', [$this, 'deferScripts'], 10 );
}
public function deferScripts()
{
foreach( $this->scripts as $script ){
if( true == strpos($tag, $script) ){
return str_replace('src', 'defer="defer" src', $tag);
}
}
}
}
new WP_scriptDefer;

Answer 1

我编辑你的类，请检查一下：

class WP_scriptDefer
{
private $scripts = [
'bootstrap.min.js',
'lazyload.min.js',
'viewportchecker.min.js',
'universal-parallax.min.js',
];
public function __construct()
{
$this->init();
}
public function init()
{
add_filter('script_loader_tag', [ $this, 'deferScripts'], 10, 3);
}
public function deferScripts( $tag, $handle, $src  )
{
foreach( $this->scripts as $script ){
if( true === strpos($tag, $script) ){
return str_replace('src', 'defer="defer" src', $tag);
}
}
return $tag;
}
}
new WP_scriptDefer;

Answer 2

一天后，也感谢德米特里的建议，我找到了让插件工作的正确方法。数组脚本需要包含在每个脚本wp_enqueue_script()内分配的名称，而不是文件名。这在网络上不是很清楚，因为通常此过滤器直接应用于主题的function.php内。 这是完整的工作代码：

<?php 
class WP_deferScripts {
private $defer_scripts = [
'bootstrap',
'lazyload',
'swiper',
];
public function __construct()
{
add_filter( 'script_loader_tag', [$this, 'deferScripts'], 10, 2);
}
public function deferScripts( string $tag, string $handle ) : string
{
#var_dump($handle, $tag);
foreach( $this->defet_scripts as $script ){
if( $script === $handle ){
return str_replace('src', 'defer="defer" src', $tag);
}
}
return $tag;
}
}
?>