Thay thế jQuery mặc định bằng Google CDN WordPress

7 ngày ago, WordPress Themes, 1 Views

Thay Thế jQuery Mặc Định Bằng Google CDN trong WordPress: Hướng Dẫn Chi Tiết

jQuery là một thư viện JavaScript mạnh mẽ, được sử dụng rộng rãi để đơn giản hóa việc thao tác DOM (Document Object Model), xử lý sự kiện và thực hiện các hiệu ứng trên trang web. WordPress, hệ thống quản lý nội dung phổ biến, cũng sử dụng jQuery làm thư viện JavaScript mặc định. Tuy nhiên, việc sử dụng phiên bản jQuery mặc định của WordPress đôi khi có thể gây ra các vấn đề về hiệu suất. Một giải pháp hiệu quả để tối ưu hóa hiệu suất là thay thế jQuery mặc định bằng phiên bản được lưu trữ trên Google Content Delivery Network (CDN).

Tại Sao Nên Sử Dụng Google CDN cho jQuery?

Việc sử dụng Google CDN cho jQuery mang lại nhiều lợi ích quan trọng:

Tăng Tốc Độ Tải Trang: CDN là một mạng lưới máy chủ phân tán trên toàn cầu. Khi người dùng truy cập trang web của bạn, jQuery sẽ được tải từ máy chủ CDN gần nhất với vị trí của họ, giảm thiểu độ trễ và tăng tốc độ tải trang.
Tận Dụng Bộ Nhớ Cache của Trình Duyệt: Nhiều trang web khác cũng sử dụng jQuery từ Google CDN. Nếu người dùng đã tải jQuery từ Google CDN khi truy cập một trang web khác, trình duyệt của họ có thể đã lưu trữ jQuery trong bộ nhớ cache. Do đó, khi họ truy cập trang web của bạn, jQuery có thể không cần phải tải lại, giúp trang web tải nhanh hơn.
Giảm Tải Cho Máy Chủ: Việc lưu trữ jQuery trên Google CDN giúp giảm tải cho máy chủ của bạn. Máy chủ của bạn có thể tập trung vào việc xử lý các yêu cầu khác, cải thiện hiệu suất tổng thể.
Luôn Sử Dụng Phiên Bản Mới Nhất: Google CDN thường cung cấp phiên bản jQuery mới nhất. Việc sử dụng phiên bản mới nhất giúp bạn tận dụng các bản sửa lỗi, cải thiện hiệu suất và tính bảo mật.

Các Bước Thay Thế jQuery Mặc Định Bằng Google CDN

Việc thay thế jQuery mặc định bằng Google CDN có thể được thực hiện thông qua nhiều phương pháp. Dưới đây là một số phương pháp phổ biến:

Phương Pháp 1: Sử Dụng Function.php (Phương Pháp Khuyến Nghị)

Phương pháp này là phương pháp được khuyến nghị vì nó đảm bảo tính ổn định và dễ dàng quản lý.

Sao Lưu File function.php: Trước khi thực hiện bất kỳ thay đổi nào, hãy sao lưu file function.php của theme bạn đang sử dụng. Điều này giúp bạn khôi phục lại trang web nếu có sự cố xảy ra. File function.php thường nằm trong thư mục theme của bạn (ví dụ: /wp-content/themes/tentheme/function.php).
Thêm Đoạn Code Sau Vào function.php: Mở file function.php bằng trình soạn thảo văn bản và thêm đoạn code sau vào cuối file (trước thẻ đóng ?> nếu có):


function replace_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), null, false);
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'replace_jquery');

Giải thích đoạn code:

wp_deregister_script('jquery'): Hủy đăng ký phiên bản jQuery mặc định của WordPress.
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), null, false): Đăng ký một script jQuery mới với URL là phiên bản jQuery từ Google CDN. 3.6.0 là phiên bản jQuery. Bạn có thể thay đổi phiên bản này nếu muốn sử dụng phiên bản khác. Hãy truy cập trang web của Google Developers để tìm phiên bản jQuery mới nhất.
wp_enqueue_script('jquery'): Thêm script jQuery đã đăng ký vào hàng đợi để tải trên trang web.
if (!is_admin()): Đảm bảo rằng script chỉ được thay thế ở phần frontend của trang web, không ảnh hưởng đến backend (khu vực quản trị).
add_action('init', 'replace_jquery'): Chạy hàm replace_jquery khi WordPress khởi tạo.

Kiểm Tra Trang Web: Sau khi thêm đoạn code, hãy kiểm tra trang web của bạn để đảm bảo rằng mọi thứ vẫn hoạt động bình thường. Nếu có bất kỳ lỗi nào, hãy khôi phục file function.php từ bản sao lưu.

Phương Pháp 2: Sử Dụng Plugin

Nếu bạn không muốn chỉnh sửa trực tiếp file function.php, bạn có thể sử dụng một plugin để thay thế jQuery.

Cài Đặt và Kích Hoạt Plugin: Tìm kiếm và cài đặt một plugin có chức năng thay thế jQuery bằng Google CDN. Một số plugin phổ biến bao gồm: “Use Google Libraries”, “CAOS”.
Cấu Hình Plugin: Sau khi cài đặt và kích hoạt plugin, hãy truy cập trang cài đặt của plugin và cấu hình để sử dụng jQuery từ Google CDN. Thường thì bạn chỉ cần chọn “jQuery” và plugin sẽ tự động thay thế phiên bản mặc định.
Kiểm Tra Trang Web: Tương tự như phương pháp trên, hãy kiểm tra trang web của bạn sau khi cấu hình plugin để đảm bảo rằng mọi thứ vẫn hoạt động bình thường.

Phương Pháp 3: Chỉnh Sửa File Header.php (Không Khuyến Nghị)

Phương pháp này không được khuyến nghị vì nó có thể gây khó khăn trong việc quản lý và cập nhật.

Sao Lưu File header.php: Tương tự như function.php, hãy sao lưu file header.php trước khi thực hiện thay đổi.
Xóa Dòng Chứa jQuery Mặc Định: Mở file header.php và tìm dòng code tải jQuery mặc định. Dòng code này thường có dạng:
```
<script type='text/javascript' src=''></script>
```
Xóa dòng code này.
Thêm Đoạn Code Tải jQuery Từ Google CDN: Thay thế dòng code đã xóa bằng đoạn code sau:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```
Kiểm Tra Trang Web: Kiểm tra trang web để đảm bảo mọi thứ hoạt động chính xác.

Kiểm Tra Việc Thay Thế jQuery Đã Thành Công

Sau khi thực hiện một trong các phương pháp trên, bạn cần kiểm tra xem việc thay thế jQuery đã thành công hay chưa. Có một số cách để kiểm tra:

Sử Dụng Công Cụ Developer Tools của Trình Duyệt: Mở công cụ Developer Tools của trình duyệt (thường bằng cách nhấn F12). Chuyển đến tab “Network” và tải lại trang web. Tìm kiếm “jquery.min.js” trong danh sách các tài nguyên đã tải. Nếu URL của jQuery là https://ajax.googleapis.com/ajax/libs/jquery/... thì việc thay thế đã thành công.
Kiểm Tra Mã Nguồn Trang Web: Nhấn chuột phải vào trang web và chọn “Xem mã nguồn trang” (View Page Source). Tìm kiếm jquery.min.js trong mã nguồn. Nếu URL của jQuery là https://ajax.googleapis.com/ajax/libs/jquery/... thì việc thay thế đã thành công.
Sử Dụng Plugin Kiểm Tra Hiệu Suất Trang Web: Sử dụng các plugin như GTmetrix hoặc Pingdom để kiểm tra hiệu suất trang web. Các công cụ này sẽ cho bạn biết liệu jQuery có đang được tải từ Google CDN hay không.

Lưu Ý Quan Trọng

Khi thay thế jQuery mặc định bằng Google CDN, hãy lưu ý những điều sau:

Kiểm Tra Tính Tương Thích: Đảm bảo rằng phiên bản jQuery bạn sử dụng từ Google CDN tương thích với các plugin và theme bạn đang sử dụng. Một số plugin và theme có thể yêu cầu phiên bản jQuery cụ thể.
Cập Nhật Phiên Bản jQuery: Thường xuyên kiểm tra và cập nhật phiên bản jQuery từ Google CDN để tận dụng các bản sửa lỗi và cải thiện hiệu suất.
Kiểm Tra Sau Khi Cập Nhật WordPress: Sau khi cập nhật phiên bản WordPress, hãy kiểm tra lại xem việc thay thế jQuery vẫn hoạt động bình thường hay không. Đôi khi việc cập nhật WordPress có thể gây ra các xung đột.
Javascript không tương thích: Một số Javascript có thể không tương thích với việc gọi jQuery từ CDN. Hãy đảm bảo kiểm tra kỹ và sửa lỗi nếu có.

Kết Luận

Thay thế jQuery mặc định bằng Google CDN là một cách đơn giản và hiệu quả để cải thiện hiệu suất trang web WordPress của bạn. Bằng cách giảm tải cho máy chủ, tận dụng bộ nhớ cache của trình duyệt và sử dụng phiên bản jQuery mới nhất, bạn có thể tăng tốc độ tải trang và mang lại trải nghiệm tốt hơn cho người dùng.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa