Làm thế nào để thêm đúng JavaScript và CSS Style vào WordPress đúng nhất?
Làm sao để thêm JavaScript và CSS stylesheets vào WordPress một cách đúng nhất? Nhiều người tự lập trình cho website WordPress của mình thường mắc lỗi khi gõ thẳng câu lệnh của họ vào trong các plugin và các theme. 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ề theme WordPress và phát triển plugin.
Mục Lục
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 theme đã mắc lỗi khi thêm trực tiếp kịch bản hoặc CSS vào các plugin và chủ đề của họ.
Một số nhầm lẫn khi sử dụng các wp_head để tải kịch bản của họ và stylesheets.
|
1
2
3
4
5
6
|
<?phpadd_action('wp_head', 'wpb_bad_script');function wpb_bad_script() {echo 'jQuery goes here';}?> |
Mặc dù cách code trên có thể dễ dàng hơn, nhưng nó không đúng trong việc thêm các tập lệnh cho 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ông thường và plugin khác nạp jQuery thông qua phương pháp khác, thì như vậy jQuery của bạn đã được tải đến 2 lần. Nếu nó được tải trên mỗi trang, điều này sẽ ảnh hưởng không nhỏ đến tốc độ load trang cũng như hiệu suất sử dụng .
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..
Tại sao lại phải có EnQueue Scripts và Styles trong WordPress?
WordPress là một mã nguồn mở với một cộng đồng phát triển vô cùng lớn mạnh. Hàng ngàn người từ khắp nơi trên thế giới đang phát triển các theme và plugin cho WordPress.
Để đảm bảo rằng mọi thứ hoạt động bình thường, không ai có thể phá hoại được sản phẩm của 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 theme và plugin khác.
Làm thế nào để sử dụng đúng Enqueue Scripts trong WordPress?
Đưa các đoạn scripts vào 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ủ đề để load các scripts trong WordPress.
|
1
2
3
4
5
6
7
số 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 trình:
Bắt đầu bằng cách đăng ký script của chúng tôi thông qua hàm function wp_register_script(). Function này chấp nhận 5 tham số:
- $ handle – Tên của đoạn script muốn thêm, không nên đặt trùng lặp với các script khác. Chúng ta được gọi là “my_amazing_script”
- $ src – URL đầy đủ của script, hoặc đường dẫn của script liên quan đến thư mục gốc WordPress. 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 – Một mảng mà script sẽ đăng ký phụ thuộc vào. WordPress sẽ tự động tải jQuery nếu nó không được nạp trên trang web.
- $ ver – Đây là số phiên bản của script. nếu có, được thêm vào URL như là một chuỗi truy vấn cho mục đích ngăn chặn bộ nhớ cache. Nếu phiên bản được đặt thành false, số phiên bản sẽ tự động được thêm vào bằng với phiên bản WordPress hiện hành đã cài đặt. Tham số này không bắt buộc.
- $ in_footer – Cho phép cài đặt script trước </ body> thay vì trong <head>.
Sau khi cung cấp tất cả các tham số wp_register_script, người dùng có thể gọi các script trong wp_enqueue_script() nơi mà xảy ra mọi thứ.
Bước cuối cùng là sử dụng action hook wp_enqueue_scripts để tải script.
Bây giờ một số người có thể tự hỏi tại sao chúng ta lại không thêm bước đăng ký script đầu tiên và sau đó đưa nó vào hàng đợi? 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 cần phải sửa đổi phần core của plugin của bạn.
Enqueue đúng trong WordPress
Cũng giống như các script, bạn cũng có thể ghi lại stylesheets. Xem ví dụ dưới đây:
|
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ì sử dụng wp_enqueue_script, chúng tôi đang sử dụng wp_enqueue_style để thêm vào stylesheets.
Lưu ý rằng chúng tôi đã sử dụng wp_enqueue_scripts action hook cho cả kiểu và tập lệnh. 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_urlchứ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 function script enqueue trong theme 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 theme nhỏ có thể sử dụng get_stylesheet_directory_uri().
Dưới đây là một mã ví dụ:
|
1
2
3
4
5
6
7
số 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 bài viết này đã giúp bạn tìm hiểu cách thêm đúng jacvascript và các phong cách trong WordPress. Bạn cũng có thể muốn nghiên cứu mã nguồn của các plugin WordPress hàng đầu cho một số ví dụ mã thực.