Cách thêm JavaScript và CSS đúng chuẩn trong WordPress

Tại Sao Cần Thêm JavaScript và CSS Đúng Chuẩn trong WordPress?

Việc thêm JavaScript (JS) và CSS (Cascading Style Sheets) đúng chuẩn trong WordPress không chỉ giúp website của bạn hoạt động trơn tru, mà còn ảnh hưởng trực tiếp đến hiệu suất, khả năng bảo trì và khả năng tương thích với các plugin và theme khác.

Thêm JS và CSS một cách tùy tiện có thể dẫn đến:

• Xung đột giữa các đoạn mã, gây ra lỗi hiển thị hoặc chức năng không hoạt động.
• Làm chậm tốc độ tải trang, ảnh hưởng đến trải nghiệm người dùng và SEO.
• Khó khăn trong việc cập nhật và bảo trì website sau này.

Do đó, việc tuân thủ các phương pháp chuẩn khi thêm JS và CSS là vô cùng quan trọng.

Sử Dụng wp_enqueue_scripts Hook

WordPress cung cấp một hook mạnh mẽ là wp_enqueue_scripts, cho phép bạn đăng ký và thêm các file JS và CSS một cách an toàn và có hệ thống. Đây là cách được khuyến nghị và được sử dụng rộng rãi bởi các nhà phát triển WordPress.

Để sử dụng hook này, bạn cần thêm code vào file functions.php của theme (hoặc child theme) của bạn. Child theme là một theme con kế thừa các tính năng của theme cha, giúp bạn tùy chỉnh mà không làm ảnh hưởng đến các file gốc của theme cha, đảm bảo các thay đổi của bạn không bị mất khi theme cha được cập nhật.

Ví dụ:

    
function my_custom_scripts() {
  // Đăng ký file CSS
  wp_register_style( 'my-style', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all' );

  // Thêm file CSS
  wp_enqueue_style( 'my-style' );

  // Đăng ký file JavaScript
  wp_register_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );

  // Thêm file JavaScript
  wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
    
  

Giải thích:

• my_custom_scripts(): Đây là tên hàm tùy chỉnh của bạn. Bạn có thể đặt tên khác, miễn là nó có ý nghĩa và dễ nhớ.
• wp_register_style(): Hàm này đăng ký một file CSS. Các tham số bao gồm:
  • 'my-style': Tên định danh (handle) của file CSS.
  • get_template_directory_uri() . '/css/style.css': Đường dẫn đến file CSS. Hàm get_template_directory_uri() trả về đường dẫn URL đến thư mục của theme hiện tại.
  • array(): Một mảng các tên định danh của các file CSS khác mà file này phụ thuộc vào. Nếu không có sự phụ thuộc nào, bạn có thể để trống.
  • '1.0': Số phiên bản của file CSS. Điều này giúp trình duyệt làm mới cache khi file được cập nhật.
  • 'all': Media type, chỉ định loại thiết bị mà CSS này áp dụng. ‘all’ có nghĩa là áp dụng cho tất cả các thiết bị.
• wp_enqueue_style(): Hàm này thêm file CSS đã đăng ký vào trang.
• wp_register_script(): Hàm này đăng ký một file JavaScript. Các tham số tương tự như wp_register_style(), nhưng có thêm một tham số quan trọng:
  • array( 'jquery' ): Một mảng các tên định danh của các file JavaScript khác mà file này phụ thuộc vào. Ở đây, chúng ta khai báo rằng file my-script.js phụ thuộc vào jQuery, đảm bảo jQuery được tải trước.
  • true: Tham số này chỉ định xem file JavaScript nên được tải ở footer (cuối trang) hay không. Giá trị true có nghĩa là tải ở footer, giúp cải thiện tốc độ tải trang.
• wp_enqueue_script(): Hàm này thêm file JavaScript đã đăng ký vào trang.
• add_action( 'wp_enqueue_scripts', 'my_custom_scripts' ): Hàm này đăng ký hàm my_custom_scripts() để chạy khi hook wp_enqueue_scripts được kích hoạt.

Các Tham Số Quan Trọng Của wp_register_script và wp_register_style

Hiểu rõ các tham số của wp_register_script và wp_register_style là rất quan trọng để đảm bảo JS và CSS của bạn được tải đúng cách.

• Handle (Tên Định Danh): Đây là một chuỗi duy nhất để xác định file JS hoặc CSS. Nó được sử dụng để tham chiếu đến file này sau này (ví dụ: để khai báo sự phụ thuộc).
• Src (Nguồn): Đường dẫn URL đến file JS hoặc CSS. Hãy sử dụng các hàm như get_template_directory_uri() hoặc get_stylesheet_directory_uri() để đảm bảo đường dẫn chính xác, đặc biệt khi sử dụng child theme.
• Deps (Sự Phụ Thuộc): Một mảng các handle của các file JS hoặc CSS khác mà file này phụ thuộc vào. WordPress sẽ đảm bảo các file phụ thuộc được tải trước file này.
• Ver (Phiên Bản): Số phiên bản của file. Sử dụng số phiên bản giúp trình duyệt làm mới cache khi file được cập nhật. Nếu bạn không muốn sử dụng số phiên bản, bạn có thể đặt giá trị này là null.
• Media (Chỉ dành cho CSS): Chỉ định loại thiết bị mà CSS này áp dụng. Các giá trị phổ biến bao gồm 'all' (tất cả các thiết bị), 'screen' (màn hình), 'print' (in ấn).
• In_footer (Chỉ dành cho JavaScript): Chỉ định xem file JavaScript nên được tải ở footer hay không. Đặt giá trị là true để tải ở footer, giúp cải thiện tốc độ tải trang.

Sự Khác Biệt Giữa wp_register_script/style và wp_enqueue_script/style

Điều quan trọng là phải hiểu sự khác biệt giữa hai hàm này:

• wp_register_script() và wp_register_style(): Đăng ký một file JS hoặc CSS, nhưng không thêm nó vào trang. Bạn chỉ cần đăng ký một lần cho mỗi file.
• wp_enqueue_script() và wp_enqueue_style(): Thêm file JS hoặc CSS đã đăng ký vào trang. Bạn có thể thêm một file nhiều lần, nhưng nó chỉ được tải một lần.

Thông thường, bạn sẽ đăng ký file một lần trong hàm my_custom_scripts() và sau đó thêm nó vào trang bằng wp_enqueue_script() hoặc wp_enqueue_style().

Thêm CSS và JavaScript Có Điều Kiện

Trong một số trường hợp, bạn chỉ muốn thêm JS hoặc CSS vào một số trang cụ thể, ví dụ:

• Chỉ thêm một đoạn JavaScript vào trang chủ.
• Chỉ thêm CSS vào trang liên hệ.

Bạn có thể sử dụng các hàm điều kiện của WordPress để kiểm tra trang hiện tại và chỉ thêm JS hoặc CSS nếu điều kiện được đáp ứng.

Ví dụ:

    
function my_conditional_scripts() {
  if ( is_front_page() ) {
    wp_enqueue_script( 'my-homepage-script', get_template_directory_uri() . '/js/homepage.js', array(), '1.0', true );
  }

  if ( is_page( 'contact' ) ) {
    wp_enqueue_style( 'my-contact-style', get_template_directory_uri() . '/css/contact.css', array(), '1.0', 'all' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_conditional_scripts' );
    
  

Trong ví dụ này:

• is_front_page(): Kiểm tra xem trang hiện tại có phải là trang chủ hay không.
• is_page( 'contact' ): Kiểm tra xem trang hiện tại có phải là trang có slug là ‘contact’ hay không. Bạn có thể thay ‘contact’ bằng ID của trang.

WordPress cung cấp nhiều hàm điều kiện khác để bạn có thể kiểm tra các loại trang khác nhau, ví dụ:

• is_single(): Kiểm tra xem trang hiện tại có phải là một bài viết đơn hay không.
• is_category(): Kiểm tra xem trang hiện tại có phải là trang lưu trữ danh mục hay không.
• is_search(): Kiểm tra xem trang hiện tại có phải là trang kết quả tìm kiếm hay không.

Tối Ưu Hóa Hiệu Suất

Sau khi bạn đã thêm JS và CSS của mình, điều quan trọng là phải tối ưu hóa chúng để cải thiện hiệu suất website.

• Minify JS và CSS: Loại bỏ các ký tự không cần thiết (khoảng trắng, chú thích) khỏi các file JS và CSS để giảm kích thước file. Bạn có thể sử dụng các plugin như Autoptimize, WP Rocket hoặc W3 Total Cache để thực hiện việc này.
• Combine JS và CSS: Gộp nhiều file JS và CSS thành một hoặc một vài file duy nhất để giảm số lượng HTTP requests. Các plugin đã đề cập ở trên cũng có thể giúp bạn thực hiện việc này.
• Sử dụng CDN: Sử dụng Content Delivery Network (CDN) để phân phối các file JS và CSS của bạn từ các server trên toàn thế giới, giúp giảm độ trễ và cải thiện tốc độ tải trang cho người dùng ở các vị trí khác nhau.
• Load JavaScript Asynchronously or Defer: Sử dụng thuộc tính async hoặc defer để tải JavaScript mà không chặn quá trình phân tích cú pháp HTML. Thuộc tính async tải file song song và thực thi khi nó sẵn sàng. Thuộc tính defer tải file song song nhưng thực thi nó sau khi tài liệu HTML đã được phân tích cú pháp.

Ví dụ về defer:

    
wp_register_script( 'my-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', array( 'strategy' => 'defer' ) );
    
  

Kết Luận

Việc thêm JavaScript và CSS đúng chuẩn trong WordPress là một phần quan trọng của việc phát triển website. Bằng cách sử dụng wp_enqueue_scripts hook, đăng ký và thêm các file một cách có hệ thống, bạn có thể đảm bảo website của mình hoạt động trơn tru, nhanh chóng và dễ bảo trì. Hãy luôn tuân thủ các phương pháp tốt nhất và tối ưu hóa hiệu suất để mang lại trải nghiệm tốt nhất cho người dùng.