Cập nhật phiên bản jQuery WordPress

Phiên bản WordPress jQuery tiêu chuẩn là 1.12.4 (trong WordPress 5.5). Nếu bạn chạy Google Lighthouse trên một trang WordPress 5 khá chuẩn, bạn sẽ thấy lỗi trong Các phương pháp hay nhất cho biết rằng trang, “Bao gồm các thư viện JavaScript giao diện người dùng với các lỗ hổng bảo mật đã biết”. Sau đó, nó tiếp tục tham chiếu jQuery 1.12.4 và nói rằng có các lỗ hổng liên quan đến nó.

Điều này là do WordPress 5.5 đi kèm với jQuery 1.12.4 (tại thời điểm viết bài - tháng 10 năm 2020). Thông thường, khá an toàn để nâng cấp lên phiên bản jQuery mới hơn trên trang web WordPress, vì vậy…

Hãy viết mã

Thay vì chỉ đổ một loạt mã vào tệp functions.php của chúng tôi, chúng tôi sẽ thêm một chút cấu trúc. Điều này giả định rằng bạn đã tạo một chủ đề con tùy chỉnh, có tệp functions.php của riêng nó.

Trong thư mục của chủ đề con tùy chỉnh của bạn, hãy tạo một tệp có tên là functions-jquery.php và dán đoạn mã sau vào đó.

// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
/**
 * Adjust the jQuery version.
 *
 * To use the stock WordPress jQuery do this fairly early in your theme's
 * functions.php:
 *
 *   define('HW_USE_STOCK_JQUERY', true);
 *
 * If you want to pull jQuery from the CDN, even though you've got the local
 * self-hosted file available, you can do this:
 *
 *   define('HW_USE_JQUERY_FROM_CDN', true);
 *
 * If you want to specify your own CDN, just define it in HW_JQUERY_CDN_SRC
 * and specify the version in HW_JQUERY_CDN_VERSION, like this:
 *
 *   define('HW_JQUERY_CDN_VERSION', '3.5.1');
 *   define('HW_JQUERY_CDN_SRC', 'https://code.jquery.com/jquery-3.5.1.min.js');
 *
 */
function hw_enqueue_scripts_update_jquery() {
   if (is_admin()) {
      return;
   }
   global $wp_scripts;
   if (array_key_exists('jquery-core', $wp_scripts->registered) && !defined('HW_USE_STOCK_JQUERY')) {
      $jquery_version = '3.5.1';
      $jquery_file_name = sprintf('jq/jquery-%s.min.js', $jquery_version);
      $url_base = get_stylesheet_directory_uri();
      $jquery_full_path = trailingslashit(dirname(__FILE__)) . $jquery_file_name;
      $jquery_src = null;
      if (is_readable($jquery_full_path) && !defined('HW_USE_JQUERY_FROM_CDN')) {
         $jquery_src = $url_base . '/' . $jquery_file_name;
      } elseif (defined('HW_JQUERY_CDN_SRC') && defined('HW_JQUERY_CDN_VERSION')) {
         $jquery_version = HW_JQUERY_CDN_VERSION;
         $jquery_src = sprintf(HW_JQUERY_CDN_SRC, $jquery_version);
      } else {
         $jquery_src = sprintf('https://code.jquery.com/jquery-%s.min.js', $jquery_version);
      }
      if (!empty($jquery_src)) {
         $wp_scripts->registered['jquery-core']->src = $jquery_src;
         $wp_scripts->registered['jquery-core']->ver = $jquery_version;
         $wp_scripts->registered['jquery']->deps = ['jquery-core'];
         $wp_scripts->registered['jquery']->ver = $jquery_version;
      }
   }
}
add_action('wp_enqueue_scripts', 'hw_enqueue_scripts_update_jquery', 50);

Xem qua mã và bạn sẽ thấy rằng chúng tôi kiểm tra xem liệu có điều gì đó đã cố gắng xếp hàng một tập lệnh phụ thuộc vào jquery-core (một tập lệnh chuẩn đi kèm với WordPress) hay không. Nếu tập lệnh được xếp hàng đợi thì chúng tôi sẽ xem liệu chúng tôi có tệp jquery-3.5.1.min.js trong thư mục con “jq” trong chủ đề con tùy chỉnh của chúng tôi hay không. Cuối cùng, nếu chúng tôi không có tệp này cục bộ thì chúng tôi lấy nó từ CDN.

Để tham chiếu đoạn mã này, bạn sẽ cần thêm một cái gì đó như thế này gần đầu functions.php của chủ đề con tùy chỉnh của bạn.

// Update the stock jQuery to something more up-to-date.
require_once 'functions-jquery.php';

Lỗi JavaScript trong Bảng điều khiển Trình duyệt

Sau khi áp dụng phiên bản jQuery mới, bạn có thể tìm thấy một số lỗi trong bảng điều khiển của trình duyệt. Đặc biệt nếu bạn đã sử dụng Trình soạn thảo văn bản sẵn plugin của WordPress để tạo plugin. Bạn có thể thấy một cái gì đó như “Uncaught TypeError: e.indexOf không phải là một hàm”…

Điều này là do mã khởi tạo đã lỗi thời. Trong trường hợp này, tệp nằm trong post-type-filter-public.js, tại đây:

     *
     * Ideally, it is not considered best practise to attach more than a
     * single DOM-ready or window-load handler for a particular page.
     * Although scripts in the WordPress core, Plugins and Themes may be
     * practising this, we should strive to set a better example in our own work.
     */
    $(window).load(function() {
        // ...
        // ...

Tất cả những gì chúng ta phải làm là thay đổi trình xử lý để nó giống như sau:

     *
     * Ideally, it is not considered best practise to attach more than a
     * single DOM-ready or window-load handler for a particular page.
     * Although scripts in the WordPress core, Plugins and Themes may be
     * practising this, we should strive to set a better example in our own work.
     */
    $(window).on( 'load', function() {
        // ...
        // ...

Tiếp tục thử nghiệm cho đến khi bảng điều khiển JavaScript của bạn không có lỗi!

Kiểm tra và triển khai phiên bản jQuery WordPress của bạn

Bây giờ tất cả những gì chúng ta cần làm là chạy một vài bài kiểm tra. Đảm bảo rằng bạn đang xem một trang trên trang web WordPress của mình có tham chiếu đến jQuery và sau đó xem qua nguồn HTML của trang cho “jquery-core”. Sẽ rõ ràng nếu mã mới đang hoạt động vì bạn sẽ thấy phiên bản là 3.5.1, thay vì phiên bản cũ hơn.

Khi bạn hài lòng vì nó hoạt động, hãy chơi với Lighthouse và kiểm tra xem Các phương pháp hay nhất của bạn có tốt hơn trước đây hay không, vì bạn đã đóng các lỗ hổng do jQuery cũ hơn gây ra.

Điều cuối cùng bạn cần làm là chọn…

  • Tự lưu trữ jQuery bằng cách đặt jquery-3.5.1.min.js vào một thư mục con có tên “jq” trong chủ đề con tùy chỉnh của bạn.
  • Kéo jQuery từ CDN
Bạn chọn tùy chọn nào trong số này là tùy thuộc vào bạn và tùy thuộc vào loại lưu lượng truy cập trang web bạn đang mong đợi. Hướng dẫn thiết lập URL CDN và phiên bản jQuery có trong phần nhận xét ở đầu functions-jquery.php.

Hãy đảm bảo kiểm tra trang web của bạn một cách kỹ lưỡng, vì một số trình cắm có thể khá ngạc nhiên khi tìm thấy phiên bản jQuery mới hơn họ mong đợi. Nói chung, mặc dù vậy, bạn sẽ ổn…

… Và nó làm cho báo cáo Lighthouse PageSpeed ​​Insights của bạn trông gọn gàng hơn.

Không quá tồi và vì chúng tôi đã giữ mã này trong tệp riêng của nó, bạn có thể sử dụng lại functions-jquery.php trong các dự án khác khá dễ dàng.