Nhúng CSS, JS vào Theme WordPress

Nhúng CSS, JS vào Theme WordPress

Nhúng CSS, JS vào Theme WordPress là một trong những bước rất quan trọng để bắt đầu lập trình Theme WordPress.

Bước này tưởng chừng rất đơn giản nhưng rất nhiều mắc phải khi bắt đầu làm quen với lập trình Theme WordPress.

Nhiều bạn thường chọn cách gọi trực tiếp file .css.js vào file header.php, footer.php thông qua thẻ link và script. Nhưng với WordPress, làm cách đó không tối ưu và dễ xảy ra các lỗi không đang có.

Hôm nay tôi xin hướng dẫn bạn cách gọi file CSS, JS vào Theme WordPress thông qua hàm wp_enqueue_style() và wp_enqueue_script() chèn vào file functions.php của Theme

Nhúng CSS vào Theme WordPress

Cú pháp:

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all');
  • $handle: Tên của style (Tên này phải đặt duy nhất)
  • $src: Đường dẫn đến file CSS
  • $deps: Mảng chứa tên style phụ thuộc (Tên style phụ tuộc phải được đăng ký trước. Khi load WordPress sẽ load đối tượng được phụ thuộc trước)
  • $ver: Phiên bản của style (Nếu để giá trị false, hệ thống sẽ tự lấy theo phiên bản của WordPress)
  • $media: Media của style (Ví dụ: ‘all’, ‘aural’, ‘braille’, ‘handheld’, ‘projection’, ‘print’)

Cách sử dụng:

<?php
function wp_include_css()
{
wp_enqueue_style('bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', array(), false, 'all');
wp_enqueue_style('main-style', get_template_directory_uri().'/style.css', array(), false, 'all');
}

add_action('wp_enqueue_scripts', 'wp_include_css');
?>

Trong đó:

  • wp_include_css: Tên hàm tự đặt tên
  • wp_enqueue_scripts: Tên hook có sẵn trong WordPress
  • get_template_directory_uri(): Hàm gọi đường dẫn theme đang kích hoạt

Nhúng JS vào Theme WordPress

Cú pháp:

wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false )
  • $handle: Tên của script (Tên này phải đặt tên duy nhất)
  • $src: Đường dẫn tới file js
  • $deps: Mảng chứa tên script phụ thuộc (Tên script phụ tuộc phải được đăng ký trước. Khi load WordPress sẽ load đối tượng được phụ thuộc trước)
  • $ver: Phiên bản của script (Nếu để giá trị false, hệ thống sẽ tự lấy theo phiên bản của WordPress)
  • $in_footer: Chuyển script xuống footer nếu giá trị là true

Cách sử dụng:

<?php
function wp_include_js()
{
wp_enqueue_script('bootstrap-js', get_template_directory_uri().'/js/bootstrap.min.js', array(), false, true);
}

add_action('wp_enqueue_scripts', 'wp_include_js');
?>

Nhúng CSS, JS vào WP Admin

Để nhúng CSS, JS vào WP Admin để custom trang quản trị bạn vẫn sử dụng cách gọi trên nhưng dùng hook: admin_enqueue_scripts

Ví dụ:

<?php
function wp_include_admin_css()
{
wp_enqueue_style('custom-admin', get_template_directory_uri().'/css/custom-admin.css', array(), false, 'all');
}

add_action('admin_enqueue_scripts', 'wp_include_admin_css');
?>

Nhúng CSS, JS vào trang đăng nhập

Để nhúng CSS, JS vào trang đăng nhập, đăng ký, quên mật khẩu bạn sử dụng hook login_enqueue_scripts

Ví dụ:

<?php
function wp_include_login_css()
{
wp_enqueue_style('custom-login', get_template_directory_uri().'/css/custom-login.css', array(), false, 'all');
}

add_action('login_enqueue_scripts', 'wp_include_login_css');
?>

Kết luận

Trên đây là chút kiến thức của tôi về việc nhúng CSS, JS vào Theme WordPress đúng cách. Hy vọng những kiến thức này giúp ích cho bạn.

[Total: 10   Average: 4.4/5]

Hoàng An

Tôi không phải là 1 chuyên gia lập trình, cũng không phải là 1 chuyên gia SEO. Với niềm đam mê với CNTT, tôi có thể biến ý tưởng thành sản phẩm và thích chia sẻ kiến thức cho người khác. Nếu có duyên, mời bạn đến với khoá học của tôi

4 bình luận trong “Nhúng CSS, JS vào Theme WordPress

  1. ủa nhưng mà nếu trong function đã làm vậy rồi thì ngoài header có cần gọi ra nửa không ? hay là header tự nhận css và js của functions luôn vậy anh

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *