Có nhiều anh/chị bắt đầu học và bắt đầu phát triển plugin (trình cắm) trên mã nguồn wordpress mà vẫn chưa biết cách thêm các file như css và javascript, jquery vào thư mục gốc của plugin.
Trong bài hướng dẫn này, em sẽ tiết lộ cách thức đơn giản nhất để làm được chuyện đó.
// Đăng ký khởi tạo
add_action('init', 'register_script');
function register_script() {
wp_register_script( 'custom_jquery_1', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_style( 'new_style_1', plugins_url('/css/main.css?ver=1.1.0', __FILE__), false, '1.0.0', 'all');
}
// Tạo hàm thực hiện
function enqueue_style(){
wp_enqueue_script('custom_jquery_1');
wp_enqueue_style( 'new_style_1');
}
add_action('wp_enqueue_scripts', 'enqueue_style');Giải thích
- wp_register là câu lệnh khai báo hay đăng ký khởi tạo mới.
- wp_enqueue là câu lệnh chờ đợi thực thi.
Cách làm như sau.
wp_register_script( 'custom_jquery_1', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_style( 'new_style_1', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');Điền tên file của anh/chị vào vị trí /ten-thu-muc/ten-file.css và /ten-thu-muc/ten-file.js
Muốn đăng ký bao nhiêu file thì chỉ cần copy đoạn code ở trên ra thành bấy nhiêu câu.
Ví dụ cho css file:
wp_register_style( 'new_style_1', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');
wp_register_style( 'new_style_2', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');
wp_register_style( 'new_style_3', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');Ví dụ cho js file:
wp_register_script( 'custom_jquery_1', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_script( 'custom_jquery_2', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_script( 'custom_jquery_3', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );Lưu ý là mỗi dòng đăng ký phải đặt tên khác nhau ví dụ new_style_1, new_style_2, new_style_3…. Tương tự với file js cũng như vậy. Lý do sẽ được giải thích ở phần cuối.
Triển khai enqueue
Trong phần khai báo, anh/chị đã đưa các đường dẫn của file vào đúng vị trí.
Ở phần này chúng ta sẽ chạy mã wp_enqueue để thực thi đoạn code đã đăng ký.
wp_enqueue_script('custom_jquery_1');
wp_enqueue_script('custom_jquery_2');
wp_enqueue_script('custom_jquery_3');
wp_enqueue_style( 'new_style_1');
wp_enqueue_style( 'new_style_2');
wp_enqueue_style( 'new_style_3');Ở phần đầu phải đặt tên để lúc enqueue nó sẽ chạy đúng với câu lệnh mà anh/chị mong muốn.
Kết quả
Tổng hợp lại kết quả như sau, anh/chị chỉ cần thay giá trị đường dẫn kèm đặt tên như hướng dẫn bên trên và cuối cùng là tận hưởng thành quả.
// Đăng ký khởi tạo
add_action('init', 'register_script');
function register_script() {
wp_register_style( 'new_style_1', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');
wp_register_style( 'new_style_2', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');
wp_register_style( 'new_style_3', plugins_url('/ten-thu-muc/ten-file.css', __FILE__), false, '1.0.0', 'all');
wp_register_script( 'custom_jquery_1', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_script( 'custom_jquery_2', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );
wp_register_script( 'custom_jquery_3', plugins_url('/ten-thu-muc/ten-file.js', __FILE__), array('jquery'), '2.5.1' );
}
// Tạo hàm thực hiện
function enqueue_style(){
wp_enqueue_script('custom_jquery_1');
wp_enqueue_script('custom_jquery_2');
wp_enqueue_script('custom_jquery_3');
wp_enqueue_style( 'new_style_1');
wp_enqueue_style( 'new_style_2');
wp_enqueue_style( 'new_style_3');
}
add_action('wp_enqueue_scripts', 'enqueue_style');Chúc anh chị thành công và sức khỏe.
