2 cách thêm JavaScript vào trang WordPress

7 giờ ago, Hướng dẫn WordPress, Views

Giới thiệu về việc thêm JavaScript vào WordPress

Trong thế giới phát triển web, JavaScript đóng vai trò vô cùng quan trọng. Nó cho phép bạn tạo ra các trang web động, tương tác và mang đến trải nghiệm người dùng mượt mà hơn. Đối với WordPress, việc thêm JavaScript có thể giúp bạn tùy chỉnh giao diện, thêm các tính năng mới và cải thiện hiệu suất trang web của mình. Bài viết này sẽ hướng dẫn bạn hai cách phổ biến để thêm JavaScript vào trang WordPress một cách an toàn và hiệu quả.

Cách 1: Sử dụng Theme’s functions.php

Một trong những cách phổ biến nhất để thêm JavaScript vào WordPress là thông qua file functions.php của theme. File này chứa các hàm tùy chỉnh cho theme của bạn và cho phép bạn hook vào các hành động và bộ lọc của WordPress. Việc sử dụng functions.php giúp bạn quản lý mã JavaScript một cách tập trung và dễ dàng.

Bước 1: Truy cập File functions.php

Bạn có thể truy cập file functions.php thông qua:

Dashboard WordPress: Đi tới Appearance -> Theme Editor. Trong danh sách các file theme ở bên phải, tìm và chọn functions.php.
FTP/SFTP: Sử dụng một trình FTP client (ví dụ: FileZilla) để kết nối với hosting của bạn. Điều hướng đến thư mục wp-content/themes/your-theme-name/ và tìm file functions.php.

Lưu ý quan trọng: Luôn tạo một bản sao lưu của file functions.php trước khi thực hiện bất kỳ thay đổi nào. Điều này giúp bạn khôi phục lại trạng thái ban đầu nếu có sự cố xảy ra.

Bước 2: Thêm mã JavaScript thông qua wp_enqueue_scripts

WordPress cung cấp một hàm mạnh mẽ để quản lý việc thêm các script và stylesheet, đó là wp_enqueue_scripts. Hàm này đảm bảo rằng các script của bạn được tải đúng thứ tự và chỉ tải một lần trên trang. Để sử dụng nó, bạn cần thêm một hàm tùy chỉnh vào functions.php và hook nó vào action wp_enqueue_scripts.

Dưới đây là một ví dụ về cách thêm một file JavaScript có tên custom.js:


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

Giải thích:

wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );: Hàm này đăng ký và thêm script.
'custom-script': Handle (tên) duy nhất cho script này.
get_template_directory_uri() . '/js/custom.js': Đường dẫn đến file JavaScript của bạn. get_template_directory_uri() trả về URL của thư mục theme hiện tại. Giả sử file custom.js nằm trong thư mục js trong thư mục theme.
array( 'jquery' ): Mảng các dependency (các script cần thiết để script này hoạt động). Trong trường hợp này, custom.js phụ thuộc vào jQuery.
'1.0': Số phiên bản của script. Điều này giúp trình duyệt tải lại script nếu có thay đổi.
true: Xác định xem script sẽ được tải ở footer (true) hay header (false). Tải script ở footer thường được khuyến nghị để cải thiện tốc độ tải trang.

add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );: Hàm này gắn hàm enqueue_custom_scripts vào action wp_enqueue_scripts. Điều này có nghĩa là hàm enqueue_custom_scripts sẽ được gọi khi WordPress chuẩn bị tải các script và stylesheet.

Bước 3: Tạo File JavaScript

Nếu bạn chưa có, hãy tạo file custom.js trong thư mục js của theme của bạn. Bạn có thể sử dụng trình soạn thảo văn bản bất kỳ để tạo file này. Ví dụ, bạn có thể thêm một đoạn code đơn giản để kiểm tra:


(function($) {
    $(document).ready(function() {
        alert('JavaScript đã được tải thành công!');
    });
})(jQuery);

Đoạn code này sẽ hiển thị một thông báo khi trang web được tải xong, cho biết rằng JavaScript đã hoạt động.

Bước 4: Lưu File và Kiểm Tra

Lưu file functions.php và file custom.js. Sau đó, tải lại trang web của bạn. Nếu bạn thấy thông báo “JavaScript đã được tải thành công!”, thì bạn đã thêm JavaScript thành công vào trang WordPress của mình.

Cách 2: Sử dụng Plugin

Một cách khác để thêm JavaScript vào WordPress là sử dụng plugin. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn quản lý và thêm JavaScript một cách dễ dàng. Việc sử dụng plugin có thể đơn giản hóa quá trình, đặc biệt nếu bạn không quen thuộc với việc chỉnh sửa code.

Bước 1: Cài đặt và Kích hoạt Plugin

Tìm kiếm và cài đặt một plugin cho phép bạn thêm JavaScript. Một số plugin phổ biến bao gồm:

Insert Headers and Footers: Plugin này cho phép bạn thêm code (bao gồm JavaScript) vào header và footer của trang web.
Header and Footer Scripts: Tương tự như Insert Headers and Footers, plugin này cung cấp giao diện đơn giản để thêm script vào header và footer.
Advanced Scripts: Plugin này cung cấp nhiều tính năng nâng cao hơn, cho phép bạn điều chỉnh nơi và khi script được tải.

Sau khi cài đặt plugin, hãy kích hoạt nó.

Bước 2: Thêm JavaScript Code

Mỗi plugin có giao diện khác nhau, nhưng thường bạn sẽ tìm thấy một khu vực để nhập code JavaScript. Ví dụ, với plugin “Insert Headers and Footers”, bạn có thể truy cập Settings -> Insert Headers and Footers và nhập code JavaScript vào hộp văn bản “Scripts in Footer” hoặc “Scripts in Header”.

Ví dụ:


<script>
  (function($) {
    $(document).ready(function() {
      console.log('JavaScript added via plugin!');
    });
  })(jQuery);
</script>

Lưu ý: Khi sử dụng plugin, bạn thường cần bọc code JavaScript của mình trong thẻ <script> và </script>.

Bước 3: Lưu Thay Đổi và Kiểm Tra

Lưu các thay đổi của bạn trong plugin. Sau đó, tải lại trang web của bạn. Kiểm tra console của trình duyệt (nhấn F12) để xem nếu bạn thấy thông báo “JavaScript added via plugin!”. Điều này cho biết rằng JavaScript đã được thêm thành công thông qua plugin.

Lời khuyên và Cảnh báo

Dưới đây là một số lời khuyên và cảnh báo khi thêm JavaScript vào WordPress:

Sử dụng Child Theme: Nếu bạn chỉnh sửa file functions.php, hãy sử dụng child theme. Khi theme chính được cập nhật, các thay đổi của bạn trong file functions.php của theme chính sẽ bị mất. Child theme cho phép bạn kế thừa tất cả các tính năng của theme chính, đồng thời cho phép bạn tùy chỉnh mà không ảnh hưởng đến theme chính.
Kiểm tra Syntax: Luôn kiểm tra syntax của code JavaScript của bạn trước khi thêm nó vào trang web. Lỗi syntax có thể gây ra sự cố cho trang web của bạn. Bạn có thể sử dụng các công cụ online như JSHint hoặc ESLint để kiểm tra syntax.
Tối ưu hóa hiệu suất: Tránh thêm quá nhiều JavaScript vào trang web của bạn, vì nó có thể làm chậm tốc độ tải trang. Chỉ thêm những script cần thiết và tối ưu hóa chúng để có hiệu suất tốt nhất. Bạn có thể sử dụng các công cụ như Google PageSpeed Insights để đánh giá hiệu suất trang web của bạn.
Cẩn trọng với plugin: Chọn plugin từ các nhà phát triển uy tín và có nhiều đánh giá tốt. Các plugin không an toàn hoặc không được bảo trì có thể gây ra các vấn đề về bảo mật hoặc hiệu suất.

Kết luận

Việc thêm JavaScript vào WordPress là một cách tuyệt vời để tùy chỉnh và cải thiện trang web của bạn. Bằng cách sử dụng functions.php hoặc plugin, bạn có thể dễ dàng thêm các script và tạo ra các trang web động và tương tác. Hãy nhớ luôn tuân thủ các lời khuyên và cảnh báo để đảm bảo rằng bạn đang thêm JavaScript một cách an toàn và hiệu quả.

admin

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