- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
Để chèn file script .js và styles .css vào trang web trong phần head, thông thường bạn chèn trực tiếp thẻ script và link như sau:
<head><link rel="stylesheet" href="styles.css"></head>
Giải pháp này thực sự không tốt, vì tất cả mọi page đều sử dụng chúng. Đôi khi bạn chỉ sử dụng 2 file này ở một số page. Bạn đừng lo lắng, wordpress cung cấp phương thức để thêm file .js và .css trong cặp thẻ head.
Vấn đề gặp phải
WordPress có hàm wp_head cho phép bạn nạp mọi thành phần html lên cặp thẻ head, và bạn có thể thêm thẻ script trực tiếp bằng cách này.
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '';
}
Cách này không kiểm soát được các file .js được thêm vào. Ví dụ: bạn sử dụng cách này để thêm thư viện jQuery và một plugin khác cũng nạp jQuery vì chúng sử dụng 2 cách khác nhau nên không kiểm soát được 2 jquery được nạp lên 1 site gây mâu thuẫn và lỗi jquery.
Vậy cách nào là đúng?
Cách chèn script vào web
WordPress cung cấp một hệ thống thứ tự để thêm file script và styles một cách có kiểm soát, bằng cách sử dụng hàm wp_enqueue_script và cung cấp URL tới file .js, những thư viện cần đi load trước để hoạt động được. Ví dụ thư viện khác sử dụng jquery thì jquery cần phải được nạp trước (gọi là: dependencies)
Điều này sẽ giảm tối đa thời gian load trang và không gây xung đột với các thư viện khác của các plugin có sử dụng trong web của bạn.
Đoạn code sau thêm file amazing_script.js ở plugin của bạn, cho biết cần nạp jquery trước. Copy đoạn code sau vào file plugin của bạn hoặc trong file functions.php.
wp_enqueue_script('js', plugins_url('amazing_script.js', __FILE__), array('jquery'));
[/pph]
Giải thích: đầu tiên đăng ký script bằng hàm wp_register_script, sau đó tiến hành đưa script vào trong thẻ head. Khi chạy hàm wp_enqueue_script script sẽ đưa vào hàng đợi và được gọi bởi hàm wp_head() trong your-theme/header.php vì vậy chúng ta không được quên hàm này.
Hàm wp_register_script có cấu trúc như sau:
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Trong đó:
- $handle (string): tên script chú ý viết thường. Tham số này để dùng cho hàm wp_enqueue_script.
- $src (string): đường dẫn đến file script .js , không nên dùng absolute path để lấy path của plugin nên dùng hàm plugins_url và theme thì dùng get_template_directory_uri() Ngoại trừ external script.
- $deps (array): liệt kê những tên script khác ($handle) được yêu cầu nạp trước khi nạp script này. $deps=false nếu không có.
- $ver: phiên bản của script. =false hoặc trống wordpress sẽ tự động thêm phiên bản của script = phiên bản của wordpress bạn đang dùng. Nếu =null không có phiên bản.
- $in_footer: Nếu =true script được thêm vào trước thẻ body, điều này yêu cầu gọi wp_footer() ở file footer.php
Sau khi cung cấp đầy đủ thông tin về file cần chèn, và bạn chỉ việc gọi hàm wp_enqueue_script() kết hợp với hook wp_enqueue_scripts.
Cách chèn styles
Cũng tương tự như chèn script, đoạn code sau chèn styles.
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('my-css', plugins_url('my-style.css', __FILE__));
});
Chú ý: Hook ‘wp_enqueue_scripts’ có thể chèn được cả script và style. Bạn có thể sử dụng hook init,admin_init thay do wp_enqueue_scripts.
Trong ví dụ trên, chúng ta dùng plugins_url để trỏ tới vị trí của file script hoặc style , hàm này chỉ được sử dụng trong plugin của bạn, ngoài ra nếu bạn chèn code vào theme functions.php, thì sử dụng hàm để trỏ tới thư mục theme của bạn như: get_template_directory_uri(), dưới đây là ví dụ mẫu:
wp_enqueue_style('my-css', get_template_directory_uri().'/css/style.css');
Lưu ý: Bạn có thể sử dụng hàm wp_enqueue_script mà không cần đăng ký trước với hàm wp_register_script. Thay vì cung cấp thông tin cho script cho wp_register_script, bạn chỉ cung cấp cho wp_enqueue_script là đủ. Tuy nhiên cách này không được khuyến khích.
wp_enqueue_script('script-name',plugins_url('my-js.js', __FILE__));
Chèn script/styles ở trang wordpress admin
Ví dụ trên dùng để chèn script/style vào trang front-end. Nếu như bạn chèn trong trang admin thì thay vì sử dụng hook wp_enqueue_scripts, bạn sử dụng hook admin_enqueue_scripts.
//Load CSS File on All Admin Pages
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
function load_custom_wp_admin_style($page){
wp_register_style( ..);
wp_enqueue_style( ..);
}
Như vậy là đã xong, hi vọng bài viết này sẽ giúp bạn giải quyết được vấn đề chèn script và style vào hệ thống wordpress.
Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
các theme bây gờ tích hợp được bộ font google vào web rồi hầu như dùng font đó đủ sài nhưng nếu cần font riêng độc lại thì bài viết này nên xem lắm
cảm ơn bạn
Mình làm theo các bước trên rồi mà cứ bị lỗi nhỉ
Mình không biết bạn gặp lỗi gì, vui lòng chat trên hoangweb nhé.