Question

我想加快我的wordpress网站的加载速度。我编写了一个简单的插件，该插件将把defer属性添加到已安装的自定义主题所使用的某些脚本中。我面临的问题是该站点已锁定到预加载器屏幕，并且chrome开发人员控制台中没有错误，也没有显示xdebug错误。也许我做错了，我不知道，如果负责处理添加延迟的脚本数组中不存在负责加载主题的主要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

经过一天的努力，也感谢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;
  }

}

?>

WordPress延迟脚本插件无法加载网站

2 个答案: