Cách đúng đắn để đưa JavaScript và CSS vào WordPress

Thủ thuật WordPress
1

Có nhiều cách khác nhau để đưa JavaScript và CSS vào WordPress. Chúng ta có thể đưa script hoặc CSS vào header hoặc footer của theme, có thể nhúng script qua functions.php bằng cách tạo action hook hoặc nhiều cách khác.

Nếu bạn không chọn đúng cách, để đưa vào các script thì đó sẽ là một cơn ác mộng trong quá trình bảo trì. Nó sẽ gây ra các bản sao nếu bạn không biết mã hiện có. Trong hướng dẫn này, chúng ta sẽ thấy cách phù hợp để đưa JavaScript và CSS vào một trang web WordPress.

WordPress cung cấp phương pháp xếp hàng để bao gồm JavaScript hoặc CSS trong WordPress. Các wp_enqueue_style () được sử dụng để enqueue JavaScript và CSS, tương ứng.

Các hàm này chấp nhận các tham số để chỉ định tên và vị trí thực của tệp, các thành phần phụ thuộc, phiên bản và đích nơi tập lệnh phải được tải.

Yêu cầu JavaScript trong WordPress

Trong phần này, tôi đã thêm mã để xếp hàng một tệp JavaScript trong WordPress. Tôi đã thêm mã này vào functions.php của chủ đề của mình để bao gồm một JavaScript để xử lý xác thực biểu mẫu.

Trong Javascript này, tôi đã sử dụng mã jQuery để xác thực. Vì vậy, tôi đã thêm jQuery trong mảng phụ thuộc làm một trong các đối số.


function include_javascript () {
 
wp_register_script ('validation_script', plugins_url ('validate.js', __FILE__), array ('jquery'), '3.3.1', true);
 
wp_enqueue_script ('validation_script');
}
  
add_action ('wp_enqueue_scripts', 'include_javascript');

Đoạn mã dưới đây hiển thị danh sách đối số đầy đủ của hàm wp_enqueue_script ().

wp_enqueue_script (string $ handle, string $ src = '', array $ deps = array (), string | bool | null $ ver = false, bool $ in_footer = false)
  • $ xử lý - Tên của tập lệnh.
  • $ src - Vị trí của tệp (tùy chọn).
  • $ deps - Mảng phụ thuộc để thực thi tập lệnh được xếp hàng (tùy chọn).
  • $ ver - Chuỗi chỉ định số phiên bản của tập lệnh (tùy chọn).
  • $ in_footer - Nếu đúng, tập lệnh sẽ được xếp hàng trong chân trang. false là mặc định. Vì vậy, tất cả các tập lệnh được xếp hàng trong tiêu đề theo mặc định (tùy chọn).

Xếp hàng CSS bằng cách sử dụng hàm wp_enqueue_style ()

Hàm wp_enqueue_style () được gọi với tên tập lệnh CSS đã đăng ký bằng cách sử dụng phương thức wp_register_script ().

Việc đăng ký tập lệnh WordPress diễn ra khi xếp hàng tất cả các kiểu như được chỉ định với móc tác vụ WordPress được tạo trong mã bên dưới.


function include_style () {
wp_register_style ('styles', plugins_url ('styles.css', __FILE__));
wp_enqueue_style ('phong cách');
}
add_action ('wp_enqueue_scripts', 'include_style');

Hãy xem đoạn mã dưới đây để xem danh sách đầy đủ các đối số của hàm wp_enqueue_style () trong WordPress

wp_enqueue_style (string $ handle, string $ src = '', array $ deps = array (), string | bool | null $ ver = false, string $ media = 'all')