Chèn CSS và JavaScript trong WordPress

Thêm CSS và JavaScript trong WordPress tưởng chừng như công việc rất đơn giản nhưng không phải mọi người ai cũng làm đúng. Thậm chí ngay cả khi WordPress đã có bài hướng dẫn khá chi tiết trên trang Codex của họ nhưng các bạn gặp phải vấn đề khó khăn hơn đó là đọc và hiểu được Tiếng Anh.

Thêm CSS và JavaScript trong WordPress

Bài viết này mình sẽ thảo luận thêm với các bạn một chút về cách chèn CSS và JavaScript trong WordPress. Đây là những kinh nghiệm và cũng như sự hiểu biết của mình trong khi nghiên cứu lập trình WordPress.

Vế cách hoạt động giữa các hàm load CSS và JavaScript thì hơi hơi giống nhau, do vậy trong bài này mình chỉ nói tới cách chèn JavaScript mà thôi, còn đối với chèn CSS trong WordPress thì các bạn làm tương tự.

Danh sách các hàm phục vụ cho việc chèn CSS trong WordPress:

Danh sách các hàm phục vụ cho việc chèn JavaScript trong WordPress:

Các action hook phục vụ cho việc chèn CSS và JavaScript trong WordPress:

Trong danh sách các hàm bên trên, các bạn sẽ chia thành các nhóm công việc như sau: nhóm đăng ký (register) và nhóm đưa vào hàng đợi để xuất (enqueue).

Khi gọi các hàm này thì bạn phải đặt trong đúng action hook do WordPress đưa ra. Thông thường, bạn sẽ đặt các hàm của bạn trong action wp_enqueue_scripts đối với ngoài front-end, dùng action admin_enqueue_scripts cho trang bên trong admin, dùng action login_enqueue_scripts đối với các trang thuộc về login (bao gồm đăng nhập, đăng ký, khôi phục mật khẩu).

function hocwp_load_theme_style_and_script() {
    wp_enqueue_script('hocwp', get_template_directory_uri() . '/js/hocwp-front-end.js');
}
add_action('wp_enqueue_scripts', 'hocwp_load_theme_style_and_script');

Bên trên là ví dụ sơ khai nhất trong khâu load JavaScript. Bạn sử dụng hàm wp_enqueue_script để load JavaScript, và phải đặt nó bên trong action wp_enqueue_scripts hoặc một trong số các action hook như bên trên mình có giới thiệu, tùy thuộc vào nhu cầu và vị trí bạn muốn load JavaScript.

Đối với các hàm enqueue, cụ thể hơn là hàm wp_enqueue_script, WordPress sẽ tự động đăng ký handle (tên duy nhất của script hoặc style) trước khi đưa nó vào hàng đợi và xuất nó ra ngoài cho trang web sử dụng. Bạn không cần thiết phải đăng ký (register) trước mới có thể dùng được.

Xem thêm hàm: wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

function hocwp_load_theme_style_and_script() {
    wp_enqueue_script('hocwp', get_template_directory_uri() . '/js/hocwp-front-end.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'hocwp_load_theme_style_and_script');

Nếu style hoặc script của bạn phụ thuộc vào một handle khác thì bạn phải khai báo theo kiểu phụ thuộc để trước khi WordPress load đối tượng hiện tại thì hệ thống sẽ load đối tượng được phụ thuộc trước. Trong ví dụ bên trên, script của mình có phụ thuộc vào jQuery, do vậy mình sẽ khai báo dependenciesarray(‘jquery’). Sở dĩ ở đây mình dùng được handle jquery là vì nó là đối tượng đã được đăng ký sẵn trong WordPress, đối với các đối tượng chưa được đăng ký thì bạn phải đăng ký trước khi sử dụng dependencies.

function hocwp_load_theme_style_and_script() {
    wp_register_script('hocwp', get_template_directory_uri() . '/js/hocwp-front-end.js', array('jquery'));
    wp_register_script('hocwp-custom', get_template_directory_uri() . '/js/hocwp-custom-front-end.js', array('hocwp'));
    wp_enqueue_script('hocwp-custom');
}
add_action('wp_enqueue_scripts', 'hocwp_load_theme_style_and_script');

Trong ví dụ bên trên, nếu bạn muốn sử dụng theo kiểu phụ thuộc (ở đây là hocwp-custom sẽ phụ thuộc vào hocwp và hocwp sẽ phụ thuộc vào jquery) thì bạn sẽ dùng hàm wp_register_script để đăng ký đối tượng trước. Nếu như script của bạn phụ thuộc vào nhiều handle khác nhau thì bạn cứ bỏ chúng vào trong mảng của biến $deps là được.

function hocwp_load_theme_style_and_script() {
    wp_register_script('hocwp', get_template_directory_uri() . '/js/hocwp-front-end.js');
    wp_register_script('hocwp-custom', get_template_directory_uri() . '/js/hocwp-custom-front-end.js', array('jquery', 'hocwp'));
    wp_enqueue_script('hocwp-custom');
}
add_action('wp_enqueue_scripts', 'hocwp_load_theme_style_and_script');

Bây giờ thì bạn đã hiểu được cách load JavaScript trong WordPress rồi, đối với chèn CSS thì cũng tương tự, bạn thay các hàm đăng ký và enqueue đi là được. Tuy nhiên, tất cả các JavaScript đều được khuyến nghị đưa xuống footer, load trước khi kết thúc thẻ body.

function hocwp_load_theme_style_and_script() {
    wp_register_script('hocwp', get_template_directory_uri() . '/js/hocwp-front-end.js', array(), false, true);
    wp_enqueue_script('hocwp');
}
add_action('wp_enqueue_scripts', 'hocwp_load_theme_style_and_script');

Trong ví dụ bên trên, mình sẽ load JavaScript với handle là hocwp, có đường dẫn là thư mục js/hocwp-front-end.js trong giao diện, không có phụ thuộc nên mình sẽ để $deps là array rỗng, không vó $ver (phiên bản) nên mình để là false, cuối cùng là tham số true cho $in_footer.

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

Đối với các style và script đã được đăng ký trước đó thì bạn chỉ cần gọi hàm enqueue để load nó ra là được. Bây giờ, nếu bạn muốn chỉnh sửa một đối tượng nào đó đã được đăng ký trước đó thì bạn sẽ làm như ví dụ bên dưới, mình chỉnh sửa url của jQuery thành url trên CDN của Google.

function hocwp_load_theme_style_and_script() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'hocwp_load_theme_style_and_script');

Bạn dùng hàm wp_deregister_script để hủy đăng ký một handle bất kỳ, sau đó dùng các hàm register và enqueue như các ví dụ bên trên mình đã đề cập tới.

Mình thấy có nhiều bạn ở Việt Nam mình hướng dẫn đăng ký và load CSS cũng như JavaScript trong action init, WordPress Codex không khuyến khích bạn dùng action này để thao tác chèn style và script. Bạn được khuyến nghị nên dùng action wp_enqueue_scripts, wp_print_scripts hoặc wp_print_styles cho ngoài front-end; dùng action admin_enqueue_scripts, admin_print_scripts hoặc admin_print_styles cho dashboard; dùng action login_enqueue_scripts cho trang đăng nhập.

Để kiểm tra code bạn viết và sử dụng có đúng hay không, bạn nên lập trình WordPress ở chế độ debug, nếu bạn dùng hàm sai hoặc dùng sai vị trí thì WordPress sẽ xuất thông báo warning cho bạn biết.

Xem thêm: Cách bật debug kiểm tra lỗi trong WordPress

Bài viết hướng dẫn chèn CSS và JavaScript trong WordPress trên hocwp.net chưa phải là tất cả, bạn cần phải học và nghiên cứu thêm trên trang Codex của WordPress. Hy vọng rằng qua bài viết này bạn sẽ có cách viết đúng hơn trong khâu load CSS và JavaScript trong plugin hay giao diện của WordPress. Chúc bạn thành công.

Gửi bình luận của bạn

Gửi bình luận

Địa chỉ email của bạn sẽ được giữ bí mật. Những mục bắt buộc được đánh dấu *