Bạn có muốn tìm hiểu làm thế nào để thêm JavaScript và CSS stylesheets đúng trong WordPress? Nhiều người dùng DIY thường mắc lỗi khi gọi thẳng các tập lệnh và bảng định dạng của họ trong các plugin và các chủ đề. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách làm thế nào để thêm JavaScript và stylesheet đúng trong WordPress. Điều này sẽ đặc biệt hữu ích cho những người mới bắt đầu học về WordPress chủ đề và phát triển plugin.
Sai lầm thường gặp khi thêm các Scripts và Stylesheets trong WordPress
Nhiều plugin WordPress mới và các nhà phát triển chủ đề đã mắc lỗi khi thêm trực tiếp kịch bản hoặc CSS nội tuyến vào các plugin và chủ đề của họ.
Một số nhầm lẫn sử dụng wp_head chức năng để tải kịch bản và bảng định kiểu của họ.
Mặc dù đoạn code trên có thể dễ dàng hơn, nhưng đó là sai cách thêm các tập lệnh trong WordPress, và nó sẽ dẫn đến nhiều xung đột hơn trong tương lai.
Ví dụ: nếu bạn tải jQuery theo cách thủ công và plugin khác nạp jQuery thông qua phương pháp thích hợp, sau đó bạn có jQuery đang được nạp hai lần. Nếu nó được tải trên mỗi trang, sau đó điều này sẽ tiêu cực ảnh hưởng đến tốc độ WordPress và hiệu suất.
Cũng có thể là hai phiên bản này khác nhau cũng có thể gây ra mâu thuẫn.
Điều đó đã được nói, chúng ta hãy xem đúng cách thêm các tập lệnh và bảng định kiểu.
Tại sao các Enkeue Scripts và Styles trong WordPress?
WordPress có một cộng đồng phát triển mạnh. Hàng ngàn người từ khắp nơi trên thế giới phát triển các chủ đề và plugin cho WordPress.
Để đảm bảo rằng mọi thứ hoạt động bình thường, và không ai bước vào ngón chân người khác, WordPress có một hệ thống enqueuing. Hệ thống này cung cấp cách lập trình để tải các trang JavaScript và CSS stylesheet.
Bằng cách sử dụng các hàm wp_enqueue_script và wp_enqueue_style, bạn sẽ nói với WordPress khi nào tải một tệp tin, nơi để tải nó và những sự phụ thuộc của nó.
Hệ thống này cũng cho phép các nhà phát triển sử dụng các thư viện JavaScript tích hợp đi kèm với WordPress hơn là tải cùng một kịch bản của bên thứ ba nhiều lần. Điều này làm giảm thời gian tải trang và tránh xung đột với các chủ đề và plugin khác.
Làm thế nào để đúng Enqueue Scripts trong WordPress?
Tải các kịch bản đúng trong WordPress rất dễ dàng. Dưới đây là một ví dụ mã mà bạn sẽ dán vào tệp plugin hoặc trong tệp tin functions.php của chủ đề để tải các tập lệnh đúng trong WordPress.
? php
chức năng wpb_adding_scripts () {
wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), mảng ('jquery'), '1.1', đúng);
wp_enqueue_script ('my_amazing_script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
?>
Giải trình:
Chúng tôi bắt đầu bằng cách đăng ký kịch bản của chúng tôi thông qua wp_register_script () chức năng. Chức năng này chấp nhận 5 tham số:
- $ handle – Xử lý là tên duy nhất của kịch bản của bạn. Chúng ta được gọi là “my_amazing_script”
- $ src – src là vị trí của tập lệnh của bạn. Chúng tôi đang sử dụng chức năng plugins_url để nhận đúng URL của thư mục plugin của chúng tôi. Một khi WordPress tìm thấy, thì nó sẽ tìm kiếm tên tệp tin của chúng tôi là amazing_script.js trong thư mục đó.
- $ deps – deps là phụ thuộc. Kể từ kịch bản của chúng tôi sử dụng jQuery, chúng tôi đã thêm jQuery trong khu vực phụ thuộc. WordPress sẽ tự động tải jQuery nếu nó không được nạp đã có trên trang web.
- $ ver – Đây là số phiên bản của kịch bản. Tham số này không bắt buộc.
- $ in_footer – Chúng tôi muốn tải kịch bản của chúng tôi vào phần cuối, vì vậy chúng tôi đã đặt giá trị là đúng. Nếu bạn muốn tải kịch bản trong tiêu đề, sau đó bạn sẽ làm cho nó sai.
Sau khi cung cấp tất cả các tham số trong wp_register_script , chúng ta chỉ có thể gọi kịch bản trong wp_enqueue_script () mà làm cho mọi thứ xảy ra.
Bước cuối cùng là sử dụng móc action wp_enqueue_scripts để thực sự tải kịch bản. Vì đây là một ví dụ mã, chúng tôi đã thêm rằng ngay dưới mọi thứ khác.
Nếu bạn đã thêm điều này vào chủ đề hoặc plugin của mình, thì bạn có thể đặt móc hoạt động này nơi mà tập lệnh thực sự là bắt buộc. Điều này cho phép bạn giảm dấu chân bộ nhớ của plugin.
Bây giờ một số người có thể tự hỏi tại sao chúng ta lại đi bước bổ sung để đăng ký tập lệnh đầu tiên và sau đó bao gồm nó? Vâng, điều này cho phép chủ sở hữu trang web khác hủy đăng ký kịch bản của bạn mà không sửa đổi mã cốt lõi của plugin của bạn.
Đúng kiểu Enqueue trong WordPress
Cũng giống như các kịch bản, bạn cũng có thể ghi lại các bảng định kiểu của mình. Xem ví dụ dưới đây:
Thay vì sử dụng wp_enqueue_script , chúng ta đang sử dụng wp_enqueue_style để thêm biểu định kiểu của chúng tôi.
Lưu ý rằng chúng tôi đã sử dụng wp_enqueue_scripts action hook cho cả phong cách và kịch bản. Mặc dù tên, chức năng này hoạt động cho cả hai.
Trong các ví dụ trên, chúng tôi đã sử dụng plugins_url chức năng để chỉ đến vị trí của kịch bản hoặc phong cách chúng tôi muốn enqueue.
Tuy nhiên, nếu bạn đang sử dụng các kịch bản enqueue chức năng trong chủ đề của bạn, sau đó 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 chủ đề trẻ em, sau đó sử dụng get_stylesheet_directory_uri () .
Dưới đây là một mã ví dụ: