Các nhà phát triển WordPress thường liệt kê các tập lệnh không chính xác và đôi khi nó được thực hiện vì một lý do vì WordPress đã có một cách đơn giản để thêm các thuộc tính mới asyncdefer.

Kể từ Phiên bản 4.1, một bộ lọc mới được giới thiệu cuối cùng cung cấp một cách đơn giản để thêm các thuộc tính async / defer mà không làm hỏng quá trình chạy script.

apply_filters('script_loader_tag', string $tag, string $handle, string $src);

Sử dụng

function 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', 'add_async_attribute', 10, 2);

Nếu bạn có ý định sử dụng tính năng này, chỉ cần thay thế async=”async” bằng defer=”defer”.

Thêm phần này vào “functions.php“ hoặc file tương đương, chẳng hạn như custom.php

Bạn sẽ cần thay đổi handle sẽ là tham số đầu tiên của phương thức enqueue.

wp_register_script('my-js-handle', $src, $deps, $ver, $in_footer);

Cách bạn chọn thẻ nào sẽ sử dụng phụ thuộc hoàn toàn vào bản chất của tập lệnh và có ba lựa chọn.

  • Standard – Đây không có thuộc tính async   hoặc defer   và là hành vi tiêu chuẩn cho trình duyệt của bạn.
  • Deferred   – Việc này sẽ trì hoãn việc thực thi tập lệnh cho đến khi trình phân tích cú pháp HTML kết thúc.
  • Asynchronous   – Điều này thực thi khi tập lệnh đã sẵn sàng và không phá vỡ phân tích cú pháp HTML.

Như mọi khi bạn nên kiểm tra bất kỳ thay đổi bạn thực hiện. Nếu bạn thấy rằng bạn có lỗi liên quan đến một trong hai thuộc tính thì chỉ cần don sử dụng chúng cho tập lệnh cụ thể đó.

Điều gì nếu bạn muốn thêm thẻ async hoặc defer vào nhiều tập lệnh?

Để bao gồm thẻ async/defer cho nhiều script, chúng ta cần tạo một lựa chọn và sau lỗ hổng đó thông qua mảng đó cũng như thêm thẻ async/defer vào mỗi script.

Thêm các đoạn mã sau vào tệp themefunctions.php”

Defer

function add_defer_attribute($tag, $handle) {
   // add script handles to the array below
   $scripts_to_defer = array('my-js-handle', 'another-handle');
   
   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);

Async

function add_async_attribute($tag, $handle) {
   // add script handles to the array below
   $scripts_to_async = array('my-js-handle', 'another-handle');
   
   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);

Hãy cho mình biết nếu bạn có bất kỳ câu hỏi dưới đây.

 

Last modified: Tháng Bảy 31, 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.