Bạn muốn tìm hiểu cách thêm JavaScripts và CSS stylesheet trong WordPress? Nhiều người dùng tự “mày mò” thường phạm sai lầm khi thêm trực tiếp scripts và stylesheets trong plugin và theme. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn làm thế nào để thêm JavaScripts và stylesheet trong WordPress một cách hợp lý.
Đây sẽ là hướng dẫn đặc biệt hữu ích dành cho những ai vừa mới bắt đầu tìm hiểu về cách phát triển theme và plugin WordPress.
Sai lầm phổ biến khi thêm Scripts và Stylesheets trong WordPress
Nhiều nhà phát triển theme và plugin WordPress mới thường gặp lỗi khi thêm trực tiếp scripts hay inline CSS vào plugin và theme của họ. Một số người sử dụng nhầm hàm wp_head để tải (load) các script và stylesheet.
|
1
2
3
4
5
6
|
<?phpadd_action('wp_head', 'wpb_bad_script');function wpb_bad_script() {echo 'jQuery goes here';}?> |
Dù đoạn code trên có vẻ giúp công việc của bạn dễ dàng hơn. Thế nhưng, đây là phương pháp sai lầm để thêm script trong WordPress, và nó gây ra nhiều xáo trộn hơn trong tương lai.
Một ví dụ như, nếu bạn load jQuery thủ công và một plugin khác load jQuery thông qua một cách thức khác, lúc này jQuery đang được tải tới 2 lần. Nếu tất cả các page đều load như vậy, tốc độ và hiệu năng trang WordPress của bạn sẽ bị ảnh hưởng nặng nề.
Một khả năng khác có thể xảy ra là bạn sẽ load 2 phiên bản jQuery khác nhau và điều này có thể dẫn tới sự xung đột.
Bởi vậy, chúng tôi sẽ giúp bạn tìm hiểu về phương pháp đúng để thêm script và stylesheet.
Vì sao phải thêm Script và Styles trong WordPress?
WordPress có một cộng đồng mạnh mẽ các nhà phát triển. Hàng ngàn người trên khắp thế giới phát triển theme và plugin cho WordPress.
Để đảm bảo mọi thứ hoạt động theo đúng cách và không ai bị dẫm chân nhau, WordPress có một hệ thống xếp hàng chờ đợi (enqueuing). Hệ thống này cung cấp một phương pháp lập trình được để tải JavaScripts và CSS stylesheets.
Bằng cách sử dụng các hàm wp_enqueue_script và wp_enqueue_style, bạn có thể cho WordPress biết khi nào load file, load ở đâu, và các phần phụ thuộc (dependencies) của nó là gì.
Hệ thống này cũng cho phép các nhà phát triển sử dụng thư viện JavaScript tích hợp đi kèm với WordPress, thay vì load cùng JavaScript đó nhưng của bên thứ ba, gây ra sự trùng lặp. Điều này sẽ làm giảm thời gian load trang và tránh các sự xung đột với các theme và plugin khác.
Hướng dẫn thêm Scripts trong WordPress
Thêm script theo cách thích hợp vào WordPress là công việc khá đơn giản. Bên dưới là một đoạn code mẫu mà bạn có thể lấy rồi dán vào file plugin hoặc file functions.php của theme để load script trong WordPress.
|
1
2
3
4
5
6
7
8
9
10
|
?phpfunction wpb_adding_scripts() {wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);wp_enqueue_script('my_amazing_script');} add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> |
Giải thích:
Chúng tôi bắt đầu bằng việc đăng ký script qua hàm wp_register_script() . Hàm này chấp nhận 5 tham số (parameter):
- $handle – Handle là tên độc nhất của script. Chúng tôi gọi nó là “my_amazing_script”
- $src – src là vị trí của script. Chúng tôi dùng hàm plugins_url để lấy URL thích hợp của thư mục plugin. Khi tìm thấy thư mục, WordPress sẽ tìm tới tên file amazing_script.js trong thư mục đó.
- $deps – là viết tắt của dependency (phần phụ thuộc). Do script của chúng tôi sử dụng jQuery, chúng tôi thêm jQuery vào phần dependency. WordPress sẽ tự động load jQuery nếu như nó chưa được load trên trang.
- $ver – Đây là số phiên bản của script. Đây là tham số không bắt buộc phải có.
- $in_footer – Vì muốn load script ở footer, chúng tôi thiết lập giá trị này là true. Nếu muốn load script ở header, bạn phải thiết lập nó sang false.
Sau khi cung cấp toàn bộ tham số trong wp_register_script, chúng ta có thể thêm script trong hàm wp_enqueue_script().
Bước cuối cùng là sử dụng action hook wp_enqueue_scripts để thực sự load script.
Nếu bạn đang muốn thêm script vào theme hay plugin của mình, bạn có thể đặt action hook này nơi mà bạn cần cript ở đó. Điều này giúp bạn giảm thiểu mức chiếm dụng bộ nhớ của plugin.
Một số bạn có thể sẽ thắc mắc vì sao chúng tôi lại đăng ký script trước rồi đưa nó vào danh sách chờ (enqueuing). Lý do là bởi, điều này cho phép các chủ site khác xóa đăng ký (deregister) script của bạn mà không chỉnh sửa code lõi (core code) của plugin.
Cách Enqueue các Style trong WordPress
Tương tự script, bạn có thể đưa stylesheet của mình vào danh sách chờ. Hãy nhìn vào ví dụ bên dưới:
|
1
2
3
4
5
6
7
|
<?phpfunction wpb_adding_styles() {wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));wp_enqueue_style('my_stylesheet');}add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); ?> |
Thay vì dùng hàm wp_enqueue_script, chúng tôi sử dụng hàm wp_enqueue_style để thêm stylesheet.
Hãy lưu ý rằng, chúng tôi dùng action hook wp_enqueue_scripts cho cả stylesheet và scripts.
Ở vị dụ bên, chúng tôi đã sử dụng hàm plugins_url để trỏ tới vị trí của script hay style mà chúng tôi muốn đưa vào danh sách chờ.
Tuy nhiên, nếu bạn dùng hàm enqueue scripts trong theme của mình, hãy sử dụng get_template_directory_uri() . Nếu bạn đang làm việc với theme con, hãy dùng hàm get_stylesheet_directory_uri().
Dưới đây là một đoạn code ví dụ:
|
1
2
3
4
5
6
7
8
9
|
<?php function wpb_adding_scripts() {wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);wp_enqueue_script('my_amazing_script');} add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> |
Chúng tôi hy vọng rằng, bài viết trên sẽ giúp bạn biết cách thêm jacvascript và style trong WordPress. Có thể bạn cũng sẽ muốn tìm hiểu về mã nguồn của các plugin WordPress hàng đầu để tìm hiểu thêm việc sử dụng trong thực tế.
Nếu thích bài viết, vui lòng theo dõi kênh YouTube của chúng tôi để tìm hiểu thêm các video khác về WordPress. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook.