Làm quen với jQuery và JavaScript trong WordPress cho người mới bắt đầu

Bài viết này cung cấp cái nhìn tổng quan về JavaScript và jQuery dành cho người mới bắt đầu, giúp bạn hiểu rõ vai trò của từng công nghệ trong WordPress. Bạn sẽ nắm được sự khác biệt giữa JavaScript thuần và jQuery, cách sử dụng chúng trong WordPress, cũng như khi nào nên chọn JavaScript thay vì jQuery để tối ưu hiệu suất và khả năng phát triển lâu dài.

1. Vai trò của JavaScript trong web

JavaScript là một trong những ngôn ngữ lập trình quan trọng nhất trên web. Nó giúp tạo ra các hiệu ứng động, cải thiện trải nghiệm người dùng và cung cấp các tính năng tương tác như:

• Xác thực biểu mẫu: Kiểm tra dữ liệu trước khi gửi lên server.
• Thay đổi nội dung động: Hiển thị hoặc ẩn các phần tử mà không cần tải lại trang.
• Xử lý dữ liệu bất đồng bộ (AJAX): Gửi và nhận dữ liệu từ server mà không cần reload trang.
• Tạo hiệu ứng và hoạt ảnh: Cải thiện giao diện bằng hiệu ứng mượt mà.

Ví dụ JavaScript thay đổi nội dung động:

// Ẩn phần tử khi nhấn nút 
function wpshare247_hide_element() { 
    document.getElementById("demo").style.display = "none"; 
}

Nhiệm vụ chính của JavaScript là xử lý những vấn đề mà CSS chưa làm được hoặc giúp giải quyết tốt hơn, nhằm cải thiện trải nghiệm của người dùng trên web

📝 Tài liệu học JavaScript

2. Giới thiệu jQuery – Thư viện được sinh ra từ JavaScript

jQuery là một thư viện JavaScript phổ biến, giúp đơn giản hóa việc thao tác với DOM, xử lý sự kiện, tạo hiệu ứng và giao tiếp với máy chủ qua AJAX.

Ví dụ thay đổi nội dung với JavaScript thuần và jQuery

JavaScript thuần:

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("change-text").addEventListener("click", function() {
        document.getElementById("demo").innerHTML = "Nội dung đã thay đổi bằng JavaScript!";
    });
});

jQuery:

jQuery(document).ready(function($) {
    $("#change-text").click(function() {
        $("#demo").html("Nội dung đã thay đổi bằng jQuery!");
    });
});

HTML mẫu sử dụng chung cho cả hai đoạn code trên:

<p id="demo">Đây là nội dung ban đầu.</p> 
<button id="change-text">Thay đổi nội dung</button>

📝 Tài liệu học jQuery

Hướng dẫn cách thêm css và javascript vào theme wordpress

3. So sánh jQuery và JavaScript

Tiêu chí	JavaScript	jQuery
Cấu trúc mã	Phức tạp hơn do cần viết chi tiết	Ngắn gọn, dễ đọc hơn
Hiệu suất	Nhanh hơn vì không cần tải thư viện ngoài	Chậm hơn một chút do cần tải thư viện
Khả năng mở rộng	Không giới hạn, có thể sử dụng mọi tính năng của trình duyệt	Giới hạn trong các tính năng mà jQuery hỗ trợ
Hỗ trợ trình duyệt	Cần xử lý thủ công các vấn đề về tương thích	Hỗ trợ tốt trên hầu hết các trình duyệt

4. Lý do vì sao nên dùng JavaScript thay vì jQuery

• Hiệu suất tốt hơn: jQuery là một thư viện ngoài, làm tăng kích thước tải trang.
• Học JavaScript giúp phát triển xa hơn: Hỗ trợ các framework như React, Vue, Angular.
• jQuery đang dần ít được sử dụng: Các dự án hiện đại ưa chuộng JavaScript thuần hơn.

5. Cách thêm JavaScript và jQuery vào WordPress

a) Thêm jQuery vào WordPress

WordPress đã tích hợp sẵn jQuery:

function wpshare247_custom_enqueue_scripts() { 
    wp_enqueue_script('jquery'); 
} 
add_action('wp_enqueue_scripts', 'wpshare247_custom_enqueue_scripts');

b) Thêm JavaScript tùy chỉnh vào WordPress

function wpshare247_enqueue_custom_script() { 
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true); 
} 
add_action('wp_enqueue_scripts', 'wpshare247_enqueue_custom_script');

Một website WordPress không nhất thiết phải sử dụng jQuery mà có thể hoàn toàn dùng JavaScript thuần để đảm bảo hiệu suất tốt hơn và tối ưu tài nguyên.

Lý do không cần jQuery trong WordPress:

• Hiệu suất tốt hơn: Loại bỏ jQuery giúp giảm dung lượng tải trang.
• Tương thích hiện đại: JavaScript thuần hoạt động tốt trên mọi trình duyệt mà không cần thư viện hỗ trợ.
• Tận dụng các API mới: Như Fetch API, ES6+, giúp viết mã hiệu quả hơn.

Việc sử dụng JavaScript thuần giúp website WordPress nhẹ hơn và chuẩn bị tốt hơn cho các công nghệ hiện đại như React, Vue, hay các framework frontend khác.

6. Tính năng nâng cao: AJAX trong WordPress

AJAX giúp trang web gửi và nhận dữ liệu mà không cần tải lại trang.

a) Tạo file JavaScript (js/ajax-script.js)

jQuery(document).ready(function($) {
    $("#my-button").click(function() { 
        $.ajax({ 
            url: ajax_object.ajax_url, 
            type: "POST", 
            data: { action: "my_ajax_action", message: "Hello, AJAX!" }, 
            success: function(response) { 
                alert(response); 
            } 
        }); 
    }); 
});

b) Nạp script và truyền biến AJAX trong functions.php

function wpshare247_enqueue_ajax_script() { 
    wp_enqueue_script('ajax-script', get_template_directory_uri() . '/js/ajax-script.js', array('jquery'), null, true); wp_localize_script('ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'))); 
} 
add_action('wp_enqueue_scripts', 'wpshare247_enqueue_ajax_script');

c) Xử lý request trong functions.php

function wpshare247_handle_ajax_request() { 
    if(isset($_POST['message'])) { 
        echo "Server response: " . sanitize_text_field($_POST['message']); 
    } 
    wp_die(); 
} 
add_action('wp_ajax_my_ajax_action', 'wpshare247_handle_ajax_request'); 
add_action('wp_ajax_nopriv_my_ajax_action', 'wpshare247_handle_ajax_request');

Hướng dẫn cách sử dụng Ajax trong WordPress dễ hiểu

7. Một số lỗi jQuery hay gặp trong WordPress

Khi sử dụng jQuery trong WordPress, bạn có thể gặp một số lỗi phổ biến sau:

1. $ is not defined không được nhận diện

Nguyên nhân:

• WordPress sử dụng chế độ noConflict(), nên ký hiệu $ không được nhận diện.

Cách khắc phục:

• Thay $ bằng jQuery, hoặc sử dụng IIFE (Immediately Invoked Function Expression):

jQuery(document).ready(function($) {
    // Code jQuery ở đây có thể sử dụng `$`
    console.log("jQuery đã hoạt động!");
});

2. Chưa tải jQuery hoặc jQuery bị tải nhiều lần

Nguyên nhân:

• Một số theme hoặc plugin tải lại jQuery từ CDN mà không dùng jQuery có sẵn của WordPress.
• Không enqueue (nạp) jQuery đúng cách.

Cách khắc phục:

• Luôn enqueue jQuery bằng functions.php:

function custom_enqueue_scripts() {
    wp_enqueue_script('jquery'); // Nạp jQuery mặc định của WordPress
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

3. Lỗi xung đột với các thư viện JavaScript khác

Nguyên nhân:

• Một số plugin hoặc theme tải các thư viện khác đè lên jQuery.

Cách khắc phục:

• Kiểm tra trong Console của trình duyệt (F12 > Console) xem lỗi đến từ đâu.
• Kiểm tra thứ tự nạp script bằng cách xóa hoặc điều chỉnh wp_enqueue_script.
• Nếu cần dùng $ mà không ảnh hưởng đến các thư viện khác:

(function($) {
    // Code jQuery trong đây không bị ảnh hưởng bởi các thư viện khác
    console.log("Chạy an toàn với jQuery!");
})(jQuery);

4. jQuery không chạy trong AJAX hoặc Customizer

Nguyên nhân:

• Chưa đợi tài liệu tải xong hoặc chưa xử lý sự kiện đúng cách.

Cách khắc phục:

• Với AJAX:

jQuery(document).on('click', '.my-button', function() {
    alert("Nút được click!");
});

Với Customizer:

wp.customize('my_setting', function(value) {
    value.bind(function(newValue) {
        console.log("Giá trị thay đổi: " + newValue);
    });
});

Mẹo: Nếu bạn cần thêm code JavaScript vào WordPress mà không có thông tin quản trị Hosting , bài viết dưới đây là giải pháp dành cho bạn.

Hướng dẫn cách chèn thẻ meta, script vào header Website WordPress

Nếu bạn mới bắt đầu với WordPress, jQuery là một lựa chọn tuyệt vời để làm quen với lập trình web vì cú pháp dễ hiểu và hỗ trợ tốt từ cộng đồng. Tuy nhiên, nếu bạn muốn tiến xa hơn và phát triển các ứng dụng web hiện đại, học JavaScript thuần là điều cần thiết. JavaScript cung cấp nhiều tính năng mạnh mẽ hơn và giúp bạn làm chủ các framework mới mà jQuery không thể đáp ứng.

💡 Gợi ý: Nếu bạn đang bắt đầu với WordPress, hãy sử dụng jQuery để làm quen với các tính năng cơ bản. Khi đã có nền tảng vững chắc, hãy đầu tư thời gian vào JavaScript thuần để mở rộng kỹ năng lập trình của mình.