Sử dụng wp_enqueue_script()
trong chủ đề của bạn
Câu trả lời cơ bản là sử dụng wp_enqueue_script()
trong wp_enqueue_scripts
hook cho front end admin_enqueue_scripts
cho admin. Nó có thể trông giống như thế này (giả sử bạn đang gọi từ functions.php
tệp của chủ đề ; lưu ý cách tôi tham chiếu thư mục biểu định kiểu):
<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}
Đó là những điều cơ bản.
Các tập lệnh phụ thuộc được xác định trước và nhiều phụ thuộc
Nhưng giả sử bạn muốn bao gồm cả jQuery và jQuery UI Sắp xếp từ danh sách các tập lệnh mặc định có trong WordPress và bạn muốn tập lệnh của mình phụ thuộc vào chúng? Thật dễ dàng, chỉ cần bao gồm hai tập lệnh đầu tiên sử dụng các thẻ điều khiển được xác định trước được xác định trong WordPress và cho tập lệnh của bạn cung cấp tham số thứ 3 wp_enqueue_script()
, đó là một mảng các tập lệnh xử lý được sử dụng bởi mỗi tập lệnh, như vậy:
<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}
Các tập lệnh trong một Plugin
Điều gì nếu bạn muốn làm điều đó trong một plugin thay thế? Sử dụng plugins_url()
chức năng để chỉ định URL của tệp Javascript của bạn:
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );
function my_plugin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}
Phiên bản tập lệnh của bạn
Cũng lưu ý rằng ở trên, chúng tôi đã cung cấp cho plugin của chúng tôi một số phiên bản và chuyển nó dưới dạng tham số thứ 4 wp_enqueue_script()
. Số phiên bản là đầu ra trong nguồn dưới dạng đối số truy vấn trong URL thành tập lệnh và phục vụ để buộc trình duyệt tải xuống lại tệp có thể được lưu trong bộ nhớ cache nếu phiên bản thay đổi.
Chỉ tải tập lệnh trên các trang cần thiết
Nguyên tắc đầu tiên của Hiệu suất Web nói là Giảm thiểu các Yêu cầu HTTP để bất cứ khi nào có thể, bạn nên giới hạn các tập lệnh chỉ tải khi cần thiết. Ví dụ: nếu bạn chỉ cần tập lệnh của mình trong quản trị viên thì giới hạn nó ở các trang quản trị bằng cách sử dụng admin_enqueue_scripts
hook thay thế:
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}
Tải tập lệnh của bạn trong phần chân trang
Nếu tập lệnh của bạn là một trong những tập lệnh cần được tải vào phần chân trang, thì có một tham số thứ 5 wp_enqueue_script()
yêu cầu WordPress trì hoãn nó và đặt nó vào phần chân trang (giả sử chủ đề của bạn không bị lỗi và nó thực sự gọi hook wp_footer như tất cả chủ đề WordPress tốt nên ):
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}
Kiểm soát hạt mịn hơn
Nếu bạn cần kiểm soát chi tiết hơn thì Ozh có một bài viết tuyệt vời có tên Cách: Tải Javascript bằng Plugin WordPress của bạn , chi tiết hơn.
Vô hiệu hóa tập lệnh để giành quyền kiểm soát
Justin Tadlock có một bài viết hay có tên Cách vô hiệu hóa tập lệnh và kiểu trong trường hợp bạn muốn:
- Kết hợp nhiều tệp thành một tệp (số dặm có thể thay đổi theo JavaScript tại đây).
- Chỉ tải các tệp trên các trang chúng tôi đang sử dụng tập lệnh hoặc kiểu.
- Dừng phải sử dụng! Quan trọng trong tệp style.css của chúng tôi để thực hiện các điều chỉnh CSS đơn giản.
Truyền các giá trị từ PHP sang JS với wp_localize_script()
Trên blog của mình, Vladimir Prelovac có một bài viết tuyệt vời có tên Cách thực hành tốt nhất để thêm mã JavaScript vào các plugin WordPress nơi anh ấy thảo luận về việc sử dụng wp_localize_script()
để cho phép bạn đặt giá trị của các biến trong PHP phía máy chủ của bạn sau này sẽ được sử dụng trong Javascript phía máy khách của bạn.
Kiểm soát hạt thực sự tốt với wp_print_scripts()
Và cuối cùng, nếu bạn cần kiểm soát chi tiết thực sự, bạn có thể xem xét wp_print_scripts()
như đã thảo luận trên Bia Planet trong một bài đăng có tên Cách bao gồm CSS và JavaScript một cách có điều kiện và chỉ khi cần bởi bài viết .
Epiloque
Đó là về cách thực hành tốt nhất bao gồm các tệp Javascript với WordPress. Nếu tôi bỏ lỡ điều gì đó (mà tôi có thể có), hãy chắc chắn cho tôi biết trong các nhận xét để tôi có thể thêm một bản cập nhật cho khách du lịch trong tương lai.