Làm thế nào để WordPress giới thiệu JavaScript đúng cách?Tải tùy chỉnh các tệp JS và CSS

Sử dụngTrang web WordPresslập trình viên, phát triểnPlugin WordPressHoặc khi tùy chỉnh chủ đề WordPress, một số tài nguyên tập lệnh JavaScript và CSS được tham chiếu.

• Thông thường, mọi người sử dụng các thẻ liên kết, tập lệnh trực tiếp cho HTML.
• Trên thực tế, WordPress đã tích hợp sẵn các chức năng và phương pháp phức tạp để tham chiếu các tập lệnh.
• Vì vậy, việc sử dụng các tham chiếu phương thức tích hợp sẵn của WordPress sẽ chuyên nghiệp hơn và có thể mở rộng hơn.

Phương pháp trích dẫn thiếu sót

Có hai phương pháp trích dẫn phổ biến, nó ổn, chỉ là nó không hoàn hảo hoặc hợp lý.

Loại 1:các thẻ liên kết đề cập đến các tệp CSS

• Thẻ tập lệnh áp dụng tệp JS.Không chi tiết ở đây.

Loại 2:Sử dụng hàm wp_head

• Hàm wp_head được sử dụng để xuất một số nội dung tùy chỉnh hoặc do hệ thống xác định.
• Đôi khi chúng tôi sử dụng mã sau để tham chiếu tệp này:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Sao chép đoạn mã trên vào tệp functions.php để tham chiếu đến các tệp tương ứng.

Cơ chế tài nguyên của WordPress Enqueue Scripts

Như chúng ta đã biết, WordPress có rất nhiều plugin:

• Hầu hết mọi plugin đều tham chiếu đến một số tệp tài nguyên.
• Chắc chắn sẽ có xung đột giữa các tài nguyên được tham chiếu bởi hai plugin, điều này sẽ trở nên không ổn định và có thể ảnh hưởng đến hiệu quả.

Sử dụng hàm wp_enqueue_script

• Để tham khảo một tài nguyên trong WordPress, bạn nên sử dụngwp_enqueue_scriptMột hàm có từ xếp hàng trong tên của hàm đã xếp hoặc đã sắp xếp.
• Với cách xếp hàng tài nguyên (Enqueue Scripts) của WordPress này, các tham chiếu được tách ra khỏi các tệp và mã lõi tương ứng.
• Nếu người dùng muốn vô hiệu hóa tài nguyên, anh ta có thể xóa, sửa đổi và nhận xét nó mà không cần sửa đổi nó từ mã lõi.

Ngoài ra, một số thư viện thường được sử dụng như jQuery, jQuery UI, v.v. được tích hợp sẵn trong WordPress.

Chúng ta có thể sử dụng hàm wp_enqueue_script để gọi trực tiếp thư viện tích hợp sẵn, giúp tiết kiệm mã và thông số kỹ thuật rõ ràng hơn.

Nếu bạn sử dụng chức năng này để tham chiếu các tệp JS và CSS của riêng mình, bạn cần sử dụngwp_register_scriptHàm đăng ký một định danh (xử lý) và sau đó sử dụngwp_enqueue_scriptHàm gọi tài nguyên tương ứng với cờ này.

Làm thế nào để nhập đúng cách các tệp JS và CSS trong WordPress?

WordPress cung cấp các phương thức nhập hợp lý cho các phương thức JS và CSS.

Bạn có thể sử dụng mã sau để nhập tệp plugin.css vào plugin ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Ở trên sử dụng hàm wp_register_script để tạo tài nguyên với mã định danh plugin_stylesheet.

Sau đó, thêm các yêu cầu đã được xếp hàng đợi của nó vàowp_enqueue_scriptscác hành động đang hoạt động.

Mặc dù tên hàm là một tập lệnh, nhưng nó không liên quan gì đến loại tệp tài nguyên và có giá trị cho cả CSS và JS.

Hàm wp_register_script thực sự không đơn giản, nó có thể có năm tham số:

1) $ xử lý:Định danh tài nguyên.

• Bởiwp_enqueue_scriptchuyển khoản.

2) $ src:Vị trí của tài nguyên.

• Địa chỉ tương đối hoặc tuyệt đối sử dụng các chức năng tích hợp sẵn của WordPress để lấy địa chỉ, v.v.
• ChungĐịnh vịchức năng cóplugins_url,get_template_directory_uriChờ đợi.

3) $ deps:phụ thuộc.

• Nếu bạn đang đề cập đến plugin jQuery và cần dựa vào bản dựng jQuery, bạn cần điền vào jQuery.
• Lưu ý rằng nó được truyền dưới dạng một mảng.

4) $ ver:Phiên bản tài nguyên, tùy chọn.

5) $ in_footer:Bạn có đặt nó ở dưới cùng không?

• Thông thường, các tập tin JS nên được đặt ở cuối trang, bạn có thể đặt thông số này thành True, để trống hoặc False để xuất lên đầu trang.

Hãy xem ví dụ tham chiếu tệp JavaScript đầy đủ hơn ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Các chủ đề WordPress sử dụng wp_enqueue_script để nhập tài nguyên

Lập trình viên phát triển chủ đề WordPress, sử dụngwp_enqueue_scriptNhập tài nguyên.

• Các ví dụ trên là ví dụ về các tài nguyên được tham khảo để phát triển plugin WordPress.
• Phương pháp được tham khảo trong chủ đề cũng tương tự như vậy.

Sự khác biệt chính là sử dụng chức năng tương ứng để lấy thư mục chủ đề để lấy địa chỉ tệp tài nguyên theo chủ đề.

bạn có thể dùngget_template_directory_urichức năng lấy thư mục chủ đề hiện tại.

Nếu bạn đang sử dụng chủ đề con, bạn sẽ cần sử dụngget_stylesheet_directory_uriHàm lấy thư mục của chủ đề mẹ để lấy các tài nguyên tương ứng.