Nội dung bài viết
Cách gọi file JS và CSS trong wordpress – Thường thì các bạn sẽ thấy các file style.css và js đều được chèn vào phần header của trang web. Trong wordpress CSS, Javascript là một trong những thứ cực kỳ quan trọng cho bất kỳ website nào. Để tạo lên một website đẹp thì không thể thiếu các thành phần quan trọng đó để làm vẻ đẹp bên ngoài khi người dùng truy cập tới website.
Bạn đang sử dụng mã nguồn mở Wordpres vào một ngày đẹp trời bạn muốn tìm hiểu kỹ hơn về cách chèn các thư viện này ngoài cách chèn file css, js thông thường như bao mã nguồn khác. Hôm nay PhonuiIT.com sẽ hướng dẫn bạn cách gọi file css và js bằng cách dùng file functions.php để gọi nhé.
Cách gọi file JS và CSS thông thường theo chuẩn
<script type="text/javascript" src="custom.js"></script> <link rel='stylesheet' href='theme.css' type='text/css' media='all' />
Nhưng với WordPress thì hệ thống mặc định sẽ có các mã lệnh đó và việc chúng ta là chỉ cần khai báo đúng cấu trúc của wordpress thì nó sẽ ra dạng html như trên. Tuy nhiên wordpress đã định hình trong php và việc của lập trình viên là khai báo nó trong functions.php là được. Vì điều này giúp chúng ta tránh được vấn đề quên khai báo các mã lệnh đi kèm trong thẻ script và link.
Cách gọi file JS và CSS theo chuẩn WordPress
Đối với wordpress thì bạn khai báo một function sau đó thì chuyển nó thông qua action wp_enqueue_scripts là nó đã hiển thị ngoài site cho bạn được rồi và cụ thể như sau:
function phonuiit_style(){
// custom css
wp_register_style( 'bootstrap-style' , get_template_directory_uri() . "/css/bootstrap.min.css", 'all');
wp_enqueue_style('bootstrap-style');
//custom script
wp_register_script('custom-script', get_template_directory_uri() . "/js/custom.js", array('jquery')); wp_enqueue_script('custom-script'); */
}
add_action('wp_enqueue_scripts', 'phonuiit_style');Khi đó bạn khai báo một function tên phonuiit_style và gán nó ngay cho action wp_enqueue_scripts và hệ thống nó sẽ tự nhận ra việc bạn khai báo js và css cho theme.
Trong đó
- wp_register_style, wp_enqueue_style: gọi đến file css
- wp_register_script, wp_enqueue_script: gọi đến file js
Ngoài ra trong trường hợp bạn muốn sử dụng file css bất kỳ cho một vị trí nhất định như: home, category, single,… thì bạn cần tiến hành kiểm tra điều kiện tồn tại để nó chỉ được hiển thị ra ở đúng khu vực bạn muốn.
Ví dụ bạn chỉ muốn hiển thị file css ở trang home, hay js thì trong function trên bạn if điều kiện như sau
if( is_home() )
{
// khai bao duong dan file css và js nhu tren o day
}Cách xử lý hết sức đơn giản phải không nào. Mọi quy định của wordpress đưa ra đều có ý riêng của họ với một quy chuẩn riêng giúp cho việc chúng ta sử dụng file css, js hiệu quả từng vị trí tránh load hết nhằm giảm tải dung lượng trang và đó là điều tốt dành cho seo web.
Chúc các bạn thực hiện thành công!
