Gần đây chúng tôi đã nhận xét về một code cho một plugin được một trong những người sử dụng của chúng tôi viết. Plugin làm việc tốt, nhưng lập trình viên đã không làm chuẩn external JavaScript. WordPress có một hệ thống enqueue để thêm các javascripts và styles giúp ngăn ngừa các xung đột plugin. Vì hầu hết mọi người dùng nhiều hơn một plugin trên trang web của họ, nó luôn luôn là tốt cho các lập trình viên khi làm theo cách làm tốt nhất. Trong bài viết này, chúng tôi sẽ chỉ cho bạn biết làm thế nào để thêm các JavaScripts và styles vào WordPress. Điều này sẽ đặc biệt hữu ích cho những người mới bắt đầu tìm hiểu về theme WordPress và lập trình plugin.

Các lỗi

WordPress có một chức năng wp_head cho phép bạn tải bất cứ thứ gì vào trong phần đầu của trang web. Đối với những người không biết nhiều cách, họ chỉ thêm các script của họ bằng cách sử dụng một code như sau:

Trong khi các code khá đơn giản nhưng đó lại là một cách sai lầm của việc thêm các script trong WordPress. Ví dụ, nếu bạn tải jQuery bằng tay theo cách trên và một plugin khác cũng tải jQuery theo đúng quy trình chuẩn của nó thì bạn đã vô tình khiến jQuery được tải đến hai lần. Trong trường hợp xấu hai phiên bản khác nhau đó còn có thể gây ra xung đột.
Hãy xem cách đúng để làm điều này.
Tại sao Enqueue Scripts trong WordPress?
WordPress có một cộng đồng lập trình viên lớn. Có tới hàng ngàn người trên thế giới thiết kế các theme và viết plugin cho WordPress. Để chắc chắn rằng tất cả mọi thứ hoạt động tốt và không ai làm lại việc của người khác làm, WordPress có một tính năng enqueue script. Tính năng này cung cấp một cách có hệ thống của việc tải các JavaScript và các style. Bằng cách sử dụng chức năng wp_enqueue_script, bạn cho WordPress biết khi nào tải một script, nơi để tải nó, và những gì nó phụ thuộc.
Điều này cho phép tất cả mọi người tận dụng các thư viện Javascript có sẵn của WordPress hơn là tải cùng một script của bên thứ ba nhiều lần. Nó cũng giúp giảm thời gian tải trang và tránh các xung đột với các chủ đề và các plugin khác.
Làm thế nào để Enqueue Script trong WordPress một cách hợp lí
Tải các script đúng cách trong WordPress rất là dễ dàng. Dưới đây là một code ví dụ mà bạn sẽ dán vào file plugins của bạn hoặc dán vào file functions.php của theme của bạn để tải script đúng trong WordPress.

Giải thích:
Chúng tôi bắt đầu bằng cách đăng ký script của chúng tôi thông qua tính năng wp_register_script (). Tính năng này chấp nhận 5 thông số:

$ Handle – Handle là tên duy nhất của script của bạn. Script của chúng tôi được gọi là “my_amazing_script”
$ Src – src là vị trí của script của bạn. Chúng tôi đang sử dụng tính năng plugins_url để có được chính xác URL của thư mục plugins của chúng tôi. Một khi WordPress tìm thấy nó thì nó sẽ tìm filename amazing_script.js của chúng tôi trong thư mục đó.
$ DEPS – DEPS là dependence. Kể từ khi script của chúng tôi sử dụng jQuery, chúng tôi đã thêm jQuery vào khu vực dependence. WordPress sẽ tự động tải jQuery nếu nó không được tải sẵn trên trang web.
$ Ver – Đây là số phiên bản của script của chúng tôi. Tham số này là không cần thiết.
$ In_footer – Chúng tôi muốn tải JavaScripts và styles của chúng tôi vào footer, vì vậy chúng tôi đã thiết lập cho giá trị đúng.

Sau khi cung cấp tất cả các thông số trong wp_register_script, chúng ta chỉ cần gọi script trong
wp_enqueue_script () và mọi thứ sẽ hoạt động.
Bây giờ một số người có thể thắc mắc tại sao chúng tôi làm thêm một bước đăng ký script trước tiên và enqueuing nó? Vâng, điều này cho phép những người chủ sở hữu trang web khác xoá đăng ký script của bạn nếu họ muốn mà không sửa đổi các core code của plugin của bạn.
Thêm JavaScripts và styles làm thế nào để Enqueue Styles
Cũng giống như các script, bạn cũng có thể enqueue stylesheets của bạn. Hãy xem ví dụ dưới đây:


Chú ý rằng chúng ta đã sử dụng wp_enqueue_scripts hành động cho cả các style và các script. Mặc dù cái tên như vậy, nhưng tính năng này vẫn vẫn hoạt động cho cả hai.
Trong các ví dụ ở trên chúng ta đã sử dụng plugins_url để chỉ ra vị trí của script hay style mà chúng ta muốn enqueue. Tuy nhiên, nếu mà bạn đang sử dụng tính nằng enqueue script trong theme của bạn thì chỉ cần sử dụng get_template_directory_uri () để thay thế. Nếu bạn đang làm việc với một child theme thì hãy sử dụng get_stylesheet_directory_uri (). Dưới đây là một code ví dụ:

Chúng tôi hy vọng bài viết này giúp bạn hiểu làm thế nào để thêm đúng các JavaScripts và styles vào các theme và các plugin WordPress của bạn. Về các câu hỏi và các bình luận, hãy để lại một bình luận ở phía dưới.
Những nguồn bổ sung thêm

§ wp_enqueue_script
§ wp_register_script
§ wp_enqueue_scripts

Bạn có thể tham khảo thêm hướng dẫn của chúng tôi vềlàm thế nào để chuyển javascripts xuống footer trong wordpress.