Добавление атрибутов defer и async к WordPress скриптам

Разработчики WordPress очень часто неправильно ставили в очередь свои скрипты, это, зачастую, было связано с тем, что у WordPress раньше не было простого способа добавлять атрибуты async и defer.

Начиная с версии 4.1, был представлен новый фильтр script_loader_tag, который, предоставляет простой способ добавить атрибуты async/defer без ковыряний в заднем проходе.

Как использовать

Добавьте предложеный код в functions.php:

function mihdan_add_async_attribute( $tag, $handle ) {
    if ( 'my-js-handle' !== $handle ) {
        return $tag;
    }
 
    return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'mihdan_add_async_attribute', 10, 2 );

Если вы хотите использовать атрибут defer, то просто замените в сниппете async=»async на defer=»defer».

Добавления к нескольким скриптам сразу

Что делать, если надо добавить атрибут defer сразу к нескольким скриптам? Собрать все идентификаторы обработчиков в массив и пройтись по ним циклом в том же хуке:

function mihdan_add_defer_attribute( $tag, $handle ) {
    
  $handles = array(
    'my-js-handle',
    'another-handle',
  );
    
   foreach( $handles as $defer_script) {
      if ( $defer_script === $handle ) {
         return str_replace( ' src', ' defer="defer" src', $tag );
      }
   }
 
   return $tag;
}
add_filter( 'script_loader_tag', 'mihdan_add_defer_attribute', 10, 2 );

Ещё пример:

add_filter(
    'script_loader_tag',
    function( $tag, $handle ) {
        // Check for the handle we used when enqueuing the script.
        if ( 'recaptcha' !== $handle ) {
            return $tag;
        }
        // Add async and defer at the end of the opening script tag.
        return str_replace( '></', '  async="async" defer="defer"></', $tag );
    },
    20,
    2
);