WordPress -在wp_enqueue_style CSS文件中添加同步延迟标记

Question

我需要在样式表CSS文件中添加、sync、或延迟属性，这些属性都是通过使用wp_enqueue_style来包含的。

我的密码在下面。

function my_scripts() {
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
  wp_enqueue_style('my-style', get_stylesheet_uri());
  wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
  wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
  wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
  wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
  wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
  wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
  wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}

add_action('wp_enqueue_scripts', 'my_scripts');

现在，我想在不同的CSS样式表中添加同步或延迟属性。所以请帮助我，如何添加同步或延迟属性。我只想在CSS文件中添加属性，而不是在JavaScript文件中。

任何帮助都将不胜感激。

谢谢。

Answer 1

试试这段代码

function add_custom_attr( $tag, $handle, $src ) {
    $scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');

    if (in_array($handle, $scriptArr)) {
    $tag = str_replace( 'src=', 'sync="false" src=', $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attr', 10, 3 );

Answer 2

另一个使用不同筛选器的解决方案，可用于针对特定的脚本句柄：

 function frontend_scripts(){
    wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
 }
 add_action( 'wp_enqueue_scripts', 'frontend_script' );

 function make_script_async( $tag, $handle, $src ){
    if ( 'my-unique-script-handle' != $handle ) {
        return $tag;
    }
   return str_replace( '<script', '<script async', $tag );
 }
 add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );

我希望这能帮助你解决问题。

谢谢

Answer 3

这是我用来控制样式和脚本属性的脚本：队列脚本

这允许您有选择地向样式表和脚本添加延迟、异步和延迟加载。一个完美的方式，使谷歌PageSpeed快乐LOL。

应用适当的小型化、缓存和延迟加载图像，以及使用此脚本管理样式和脚本，我们的PageSpeed评分从60移动/ 88桌面更改为74移动和96桌面。