Hướng dẫn cách gọi file js và file css trong wordpress

HTML, 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.

Nếu như bạn đang sử dụng mã nguồn mở Wordpres và đặc biệt là lần đầu mò mẫm tới nó thì chắc hẳn bạn sẽ không hiểu ra cách gọi file css, js thông thường như bao mã nguồn khác.

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.

Đố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 thinhweb_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', 'thinhweb_style');

Khi đó bạn khai báo một function là thinhweb_style và gán nó ngay cho action wp_enqueue_scripts và hệ thống nó sẽ tự hiểu bạn khai báo js và css cho theme hay plugins.

Trong đó

• wp_register_style, wp_enqueue_style: gọi file css
• wp_register_script, wp_enqueue_script: gọi 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ý như vậy, 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.