Cách chèn file js/script và css/stylesheet trong wordpress.

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Cách chèn file js/script và css/stylesheet trong wordpress.

Để chèn file script .js và styles .css vào trang web trong phần head, thường thì bạn chèn trực diện thẻ script và link như sau:

   

Giải pháp này đích thực không tốt, vì mọi thứ 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 đề mắc phải

WordPress có hàm wp_head cấp phép bạn nạp mọi phần tử html lên cặp thẻ head, và bạn cũng đều 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 khống chế được những file .js được thêm vào. Ví dụ: bạn sử dụng phương pháp 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ông trùng lặp nên không kiểm soát được 2 jquery được nạp lên 1 site gây xích míc 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 1 cách có kiểm soát, bằng cách 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 được nạp trước (gọi là: dependencies)
Điều này sẽ giảm nhiều nhất 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 thấy 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 đó triển khai đưa script vào trong thẻ head. Khi chạy hàm wp_enqueue_script script sẽ dẫn vào hàng đợi và đã được gọi bởi hàm wp_head() trong your-theme/header.php vì thế 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 lúc 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ô trước thẻ body, điều đó 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 phù hợp với hook wp_enqueue_scripts .

Cách chèn styles

Cũng tựa như 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ũng có thể có thể sử dụng hook init,admin_init thay do wp_enqueue_scripts.
Trong thí 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 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à chẳ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 phương pháp này chưa đượ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 làm 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

Bài viết Cách chèn file js/script và css/stylesheet trong wordpress. được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang