Hướng Dẫn Nhúng File CSS Và JS Vào WordPress Đúng Cách

Khi làm việc và phát triển với WordPress, sẽ có đôi lúc bạn muốn chèn vào dự án của mình một thư viện nào đó (ví dụ như khi cần dùng tới Bootstrap bạn sẽ phải tìm cách nhúng CSS và JS của Bootstrap vào theme của mình). Trong chuyên mục Hướng Dẫn WordPress cơ bản này, mình sẽ hướng dẫn các bạn đúng cách để nhúng được các file CSS và JS vào dự án WP của bạn. 

Hướng dẫn chèn file CSS và JS trong WordPress đúng cách

Khi làm việc với các dự án thông thường, để nhúng 1 file CSS hoặc file JS, bạn cần đặt file đó trong folder chứa dự án của mình và sau đó tuỳ thuộc vào loại file mà bạn sẽ gọi chúng thông qua cặp thẻ của HTML ( <link> đối với CSS, <script> đối với JS ), ví dụ như : 

Tuy nhiên, khi làm việc với WordPress, chúng ta sẽ không thể nào tìm tới từng file header.php và footer.php trong thư mục theme của chúng ta và thêm vào như vậy được. Đây là một cách rất tốn thời gian và không hiệu quả, cũng như không được khuyến khích đối với các dự án WordPress. Thay vào đó, chúng ta hãy sử dụng như hàm có sẵn của WordPress. 

Giả sử, mình có một cấu trúc dự án Theme như sau : 

Thư mục chứa theme của mình
Thư mục chứa theme của mình\

Mình sẽ chứa toàn bộ các file CSS và JS của mình bên trong folder assets : 

Nơi chứa file CSS, JS của mình ( bên trong folder assets )
Nơi chứa file CSS, JS của mình ( bên trong folder assets )

Và khi bạn vào 2 folder css cũng như folder js, bạn sẽ thấy mình lưu file CSS, JS của mình và Bootstrap trong này : 

Các file CSS của mình
Các file CSS của mình
Các file JS của mình
Các file JS của mình

Giờ mình muốn gọi toàn bộ các file này vào bên trong dự án của mình, mình sẽ phải làm thế nào ? Rất đơn giản, chúng ta sẽ sử dụng 2 hàm : wp_enqueue_style() , wp_enqueue_script() và 1 Action Hook là : wp_enqueue_scripts . 

***LƯU Ý : Một lưu ý nhỏ dành cho các bạn, hãy nhớ rằng toàn bộ các file này đều phải được viết vào bên trong file functions.php nhé 

Nhúng file CSS với wp_enqueue_style() 

Hàm wp_enqueue_style là một hàm có sẵn của WordPress. Đây là hàm dùng trong trường hợp bạn cần nhúng 1 file CSS bất kỳ ( thậm chí trong trường hợp bạn nhúng nó thông qua CDN Link ). Cấu trúc hàm này như sau : 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Trong đó, chúng ta có :

  • $handle : là tên chúng ta muốn đặt cho file của chúng ta, tên này nên để đặt biệt để phân loại ( VD: cuongteam-style hay my-style ). 
  • $src : là vị trí nơi chúng ta chứa file này 
  • $deps : đây là một mảng (array ), thể hiện cho việc liệu file này của bạn có phụ thuộc vào một file nào khác không. Nếu có, WordPress sẽ không load file này nếu như file kia chưa được load trước. Mình sẽ ví dụ rõ hơn ở phần sau.
  • $ver : phiên bản của file này. Nếu bạn không đặt gì ở đây, WordPress sẽ tự động thay thế bằng phiên bản hiện tại của WordPress. 
  • $media : sẽ quy định cho WP biết rằng nó chỉ load file này đối với 1 loại media nhất định. Ví dụ, bạn để mặc định là ‘all’ thì file này sẽ được load trên tất cả thiết bị. Nếu bạn để ‘handheld’, WordPress chỉ load file này trên thiết bị cầm tay. 

***Những tham số được mình in đậm là những tham số bắt buộc phải khai báo bạn nhé !

Như vậy, với hàm này, WordPress đã hỗ trợ cho chúng ta trong việc nhúng file CSS. Giờ hãy quay lại với ví dụ của mình nhé ! Vậy thì để load file CSS của mình và file CSS của Boostrap, mình sẽ viết như sau : 

Dựa theo đoạn code của mình, bạn sẽ thấy được mình đã định nghĩa chỉ 2 tham số bắt buộc là $handle và $src . Đặc biệt, tại tham số $src để gọi nơi chứa file, mình sử dụng một hàm là hàm get_stylesheet_directory_uri(), đây là một hàm có sẵn của WordPress mà mình sẽ giải thích thêm trong tương lai, hiện tại bạn có thể đọc để biết thêm về nó tại documentation của WordPress  bạn nhé !

Nhúng file JS với wp_enqueue_script() 

Hàm wp_enqueue_script() cũng là một hàm có sẵn do WordPress cung cấp cho developer. Chức năng của hàm này gần như tương tự với hàm wp_enqueue_style(), chỉ khác một chút là bạn sẽ dùng nó để nhúng file JS mà thôi. Cấu trúc của hàm khá tương tự nhau : 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

Trong đó, chúng ta có 5 tham số : 

  • $handle : tương tự như trên, đây là tên của file bạn muốn định nghĩa, hãy đặt cho file bạn một cái tên đặc biệt để tránh lỗi nhé !
  • $src : tham số giúp bạn gọi nơi lưu file.
  • $deps : tương tự như trên, mình sẽ đưa ra ví dụ ngay bên dưới .
  • $ver : tương tự như trên .
  • $in_footer : tham số này là một giá trị boolean ( true hay false ), giúp WordPress biết được liệu bạn muốn đặt script của mình ở footer hay không. Nếu bạn cho tham số này là true, WordPress sẽ hiểu và đặt file bạn nhúng ở footer và ngược lại.

Ví dụ như tham số $deps : Khi bạn dùng những thư viện như Boostrap, đối với các file JS thì để dùng được chúng, dự án của bạn buộc phải có jQuery. Nếu bạn không có jQuery, file này sẽ không chạy được. Vì thế, ở đây bạn sẽ định nghĩa tham số này bằng một mảng chứa jQuery như sau :

Vậy thì quay lại với ví dụ của mình, mình sẽ gọi file JS của mình và file JS của Bootstrap như sau : 

Dựa trên đoạn code của mình, bạn sẽ thấy có một chút khác biệt, mình định nghĩa đủ cả 5 tham số mặc định thay vì chỉ 2 tham số bắt buộc, và nó có nghĩa là mình muốn gọi 2 file JS trên, tại folder js bên trong folder assets, và chỉ chạy 2 file này sau jQuery, đồng thời đặt 2 files này ở footer. 

Sử dụng Action Hook 

Sau khi đã tìm hiểu qua 2 hàm trên của WordPress, chắc bạn cũng đã phần nào hình dung được cách để chúng ta có thể nhúng file CSS và JS rồi. Giờ thì chúng ta sẽ thực sự nhúng 2 file này vào dự án của bạn thông qua 1 Action Hook của WordPress là wp_enqueue_scrips. 

***LƯU Ý : Đây là một lưu ý RẤT QUAN TRỌNG. Bạn hãy cẩn thận khi code, như bạn thấy, hàm để nhúng file JS và Action Hook của chúng ta gần như tương tự nhau, chỉ khác ở chữ s ở cuối ( hàm nhúng JS là wp_enqueue_script – KHÔNG có s, action hook là wp_enqueue_scripts – CÓ s ). Hãy lưu ý thật kỹ bạn nhé ! 

Vậy thì, chúng ta sẽ bắt đầu viết thôi. Bạn có thể copy đoạn code của mình và sửa lại, mình sẽ giải thích đoạn code ở bên dưới : 

Như đoạn code, bạn thấy mình tạo 1 hàm là cuongteam_scripts(), bên trong hàm đó mình sử dụng 2 hàm nhúng file CSS và JS để nhúng các file của mình và sau đó, mình gán hàm của mình vào hook wp_enqueue_scripts. Như vậy là đã xong, sau khi save lại file functions.php, bạn hãy reload lại trang của bạn thì sẽ nhận được kết quả. 

Như vậy là trong phạm vi bài viết này của series WordPress Cho Người Mới thuộc chuyên mục Hướng Dẫn WordPress Cơ Bản, mình đã giúp các bạn có thể nhúng file CSS và JS vào dự án WordPress của bạn. Nếu bạn gặp bất kỳ khó khăn hoặc có bất kỳ góp ý gì, hãy để lại cho mình một comment bên dưới để chúng ta cùng thảo luận nhé !

(Visited 27 times, 1 visits today)
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x