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:

  • $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:

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:

  • $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:

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ụ:

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ụ:

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: 2    Average: 5/5]

Leave a Comment.