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

【问题标题】：WordPress defer script plugin not load websiteWordPress延迟脚本插件不加载网站
【发布时间】：2019-11-27 17:19:11
【问题描述】：

我想加快我的 wordpress 网站的加载速度。我编写了一个简单的插件，它将 defer 属性添加到我安装的自定义主题使用的一些脚本中。我面临的问题是该站点被锁定到预加载器屏幕，并且 chrome 开发控制台中没有错误，也没有显示 xdebug 错误。我不知道，也许我做错了什么属性？所有脚本都是主题的依赖项，并且使用不属于列表的 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;

【问题讨论】：

$tag 可能有问题
@Dmitry 你能给我解释一下吗？我已经举了一个例子，在function.php 文件中添加了一个使用这个的网站的属性，并且我已经针对我的插件的 OOP 对其进行了调整，所以我不知道如何从 wordpress 中获取 tag 变量并且在插件中可用
把define( 'WP_DEBUG', TRUE);添加到你的wp-config.php，看看有没有错误。
我试过了，但没有记录错误并且插件被正确激活。也许我还需要加载主 js 文件作为延迟脚本？

标签： php wordpress

【解决方案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;

【讨论】：

好的，我会测试你的修复建议。我省略了 $tag $handle 和 $src vars 作为我班级第二种方法的参数，因为我不知道它们是必需的，但这是我的错误，因为我并不总是工作使用wordpress，所以我不知道如何管理类内函数的参数。我会告诉你的。
没什么，async 或 defer 属性不会添加到脚本中。我认为还需要一个 foreach 来迭代数组并用新标签替换旧标签。

【解决方案2】：

一天后，也感谢 Dmitry 的建议，我找到了让插件工作的正确方法。数组脚本需要包含在每个脚本的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;
  }

}

?>

【讨论】：