function.php中的wordpressscript_loader_tag

我正在嘗試將延遲和異步添加到我的腳本標簽以提高它的性能

這是我正在使用的代碼

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'>

uj5u.com熱心網友回復：

代替

$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 );

測驗和作業正常。

標籤：

上一篇：嘗試比較大檔案時Java代碼掛起

下一篇：如何提高MongoDB查找查詢性能？