javascript - function.php 中的 wordpress script_loader_tag

Question

我正在尝试将 defer 和 async 添加到我的脚本标签中以提高它的性能

这是我使用的代码

function add_defer_attribute($tag, $handle) {
    print('hi');
    echo('hi');

   // add script handles to the array below
   $scripts_to_defer = array('jquery-core-js','fortuna.lib-js');
   
   foreach($scripts_to_defer as $defer_script) {
       
      if ($defer_script === $handle) {
         return str_replace(' src', ' defer="defer" src', $tag);
      }
   }
   return $tag;
}

add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

function add_async_attribute($tag, $handle) {
    print('hello');
    echo('hello');
   // add script handles to the array below
   $scripts_to_async = array('jquery-core-js', 'fortuna.lib-js');
   
   foreach($scripts_to_async as $async_script) {
      if ($async_script === $handle) {
         return str_replace(' src', ' async="async" src', $tag);
      }
   }
   return $tag;
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

我在我正在使用的主题中找到的 function.php 底部添加了这段代码

但它不起作用，我已经添加了我需要延迟和异步的脚本的 id

没有任何反应，谁能告诉我该怎么做

这是我网站上的脚本标签

<script type='text/javascript' src='https://mydomain/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
<script type='text/javascript' src='https://mydomain/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/awesome-support/assets/admin/js/vendor/jquery.magnific-popup.min.js?ver=6.0.11' id='wpas-magnific-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/awesome-support/assets/admin/js/admin-popup.js?ver=6.0.11' id='wpas-admin-popup-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/allow-webp-image/public/js/allow-webp-image-public.js?ver=1.0.0' id='allow-webp-image-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/hide-admin-bar-based-on-user-roles/public/js/hide-admin-bar-based-on-user-roles-public.js?ver=1.7.0' id='hide-admin-bar-based-on-user-roles-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.0' id='tp-tools-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.2.2' id='revmin-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/wp-user-avatar/assets/flatpickr/flatpickr.min.js?ver=5.8.3' id='ppress-flatpickr-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/wp-user-avatar/assets/select2/select2.min.js?ver=5.8.3' id='ppress-select2-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/themes/fortuna/js/libs.min.js?ver=5.8.3' id='fortuna.lib-js'></script>
<script type='text/javascript' id='fortuna.common-js-extra'>

Answer 1

替换

$scripts_to_defer = array('jquery-core-js','fortuna.lib-js');

有了这个

$scripts_to_defer = array( 'jquery-core', 'fortuna.lib' );

您不需要添加 -js 来处理，因为 WordPress 会在排队脚本时自动添加尝试下面的代码。

function add_defer_attribute( $tag, $handle ) {
    // add script handles to the array below
    $scripts_to_defer = array( 'jquery-core','fortuna.lib' );
    foreach( $scripts_to_defer as $defer_script ) {
        if ($defer_script === $handle) {
            return str_replace( ' src', ' defer="defer" src', $tag );
        }
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );

function add_async_attribute( $tag, $handle ) {
    // add script handles to the array below
    $scripts_to_async = array( 'jquery-core', 'fortuna.lib' );
    foreach( $scripts_to_async as $async_script ) {
        if ($async_script === $handle) {
            return str_replace( ' src', ' async="async" src', $tag );
        }
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_async_attribute', 10, 2 );

经过测试并且工作正常。