Добавление атрибутов 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"
.
Где взять идентификатор обработчика my-js-handle
? Его вы можете подсмотреть в коде подключения скриптов внутри темы или плагина при помощи функции wp_register_script()
и wp_enqueue_script()
(первый аргумент):
wp_register_script( 'my-js-handle', $src, $deps, $ver, $in_footer );
Добавления к нескольким скриптам сразу
Что делать, если надо добавить атрибут 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 );
Для атрибута async
код будет выглядеть аналогично, за исключением девятой строки, где надо просто заменить defer="defer"
на async="async
.