Cách thêm JavaScripts và CSS Styles trong WordPress Theme
Bạn muốn tìm hiểu làm thế nào để thêm JavaScript và CSS stylesheets đúng cách trong WordPress chứ? Nhiều người dùng DIY thường mắc lỗi khi gọi trực tiếp các tập lệnh (Scripts) và Stylesheets trong plugin và theme. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách làm thế nào để thêm JavaScript và stylesheet chính xác trong WordPress. Điều này sẽ đặc biệt hữu ích cho những người mới bắt đầu học về lĩnh vực phát triển theme và plugin WordPress.
Contents
Sai lầm thường gặp khi thêm các Scripts và Stylesheets trong WordPress
Nhiều plugin WordPress mới và nhiều nhà phát triển theme đã mắc lỗi khi thêm trực tiếp Scripts hoặc CSS nội tuyến vào các plugin và theme của họ.
Một số nhầm lẫn thường xảy ra trong việc sử dụng wp_head function để tải scripts và stylesheets:
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Mặc dù đoạn code trên trông có vẻ đơn giản, nhưng đó là cách thêm Scripts sai trong WordPress, và nó sẽ dẫn đến nhiều xung đột trong tương lai.
Ví dụ: nếu bạn tải jQuery theo cách thủ công và plugin khác nạp jQuery thông qua phương pháp thích hợp, vậy là jQuery đang được nạp hai lần. Nếu nó được tải trên tất cả các trang thì điều này sẽ ảnh hưởng không tốt đến tốc độ và hiệu suất WordPress.
Cũng có thể là hai phiên bản khác nhau gây ra xung đột.
Như chúng tôi đề cập ở trên, bài viết này chúng ta sẽ tìm hiểu về cách thêm Scripts và Stylesheets đúng cách.
Xem thêm:
Cách vô hiệu hóa Scripts và Styles của plugin trong WordPress
Tại sao Enqueue Scripts và Styles trong WordPress?
WordPress có một cộng đồng phát triển rất mạnh. Hàng ngàn người từ khắp nơi trên thế giới phát triển các theme và plugin cho WordPress.
Để đảm bảo rằng mọi thứ hoạt động bình thường và không ai bước nhầm vào lối đi của người khác, WordPress có một hệ thống enqueue. Hệ thống này cung cấp cách lập trình để tải các trang JavaScript và CSS stylesheet.
Bằng cách sử dụng wp_enqueue_script và wp_enqueue_style function, bạn cho WordPress biết khi nào tải tệp tin, nơi để tải và tệp tin phụ thuộc vào những thứ nào khác.
Hệ thống này cũng cho phép các nhà phát triển tận dụng các thư viện JavaScript tích hợp đi kèm với WordPress hơn là tải nhiều lần cùng một script của bên thứ ba. Điều này làm giảm thời gian tải trang và tránh xung đột với các theme và plugin khác.
Làm thế nào để Enqueue Scripts đúng trong WordPress?
Tải các script đúng cách trong WordPress rất dễ dàng. Dưới đây là một mã code ví dụ mà bạn có thể dán vào tệp plugin hoặc trong tệp tin functions.php của theme để tải các script đúng trong WordPress.
<php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Giải thích:
Chúng tôi bắt đầu bằng cách đăng ký script của chúng tôi thông qua các wp_register_script () function. Function này chấp nhận 5 tham số:
- $ handle – Handle là tên duy nhất của script. Giả sử chúng ta gọi là “my_amazing_script”
- $ src – src là vị trí của script của bạn. Chúng tôi đang sử dụng plugins_url function để nhận URL chuẩn xác của thư mục plugin của chúng tôi. Một khi WordPress tìm thấy, nó sẽ tìm kiếm tên tệp tin của chúng tôi là amazing_script.js trong thư mục đó.
- $ deps – deps là yếu tố phụ thuộc. Vì script của chúng tôi sử dụng jQuery, chúng tôi đã thêm jQuery trong khu vực phụ thuộc. WordPress sẽ tự động tải jQuery nếu nó không được tải trên trang web.
- $ ver – Đây là phiên bản số của script của chúng tôi. Tham số này là không bắt buộc.
- $ in_footer – Chúng tôi muốn tải script của chúng tôi vào footer, vì vậy chúng tôi đã đặt giá trị là true. Nếu bạn muốn tải script trong header thì bạn sửa thành false.
Sau khi cung cấp tất cả các thông số trong wp_register_script, chúng ta chỉ có thể gọi script trong wp_enqueue_script ().
Bước cuối cùng là sử dụng action hook wp_enqueue_scripts để thực sự tải script (Action Hook là một điểm neo để chúng ta thực hiện một hành động gì đó tại một chu kỳ nhất định). Vì đây là một mã code ví dụ nên chúng tôi đã thêm action vào dưới.
Nếu bạn muốn thêm code này vào theme hoặc plugin của mình thì bạn hãy thay đổi action hook- nơi script thật sự được yêu cầu. Điều này cho phép bạn giảm footprint bộ nhớ của plugin.
Bây giờ một số bạn có thể thắc mắc là tại sao chúng ta lại bổ sung nhiều bước để đăng ký script đầu tiên và sau enqueue nó? Vâng, điều này cho phép chủ sở hữu trang web khác hủy đăng ký script của bạn mà không sửa đổi mã cốt quan trọng trong plugin của bạn.
Xem thêm:
32 thủ thuật hữu ích cho tập tin functions trong chủ đề WordPress (phần 1)
File xmlrpc.php là gì? Làm sao để Tắt XMLRPC.php trong WordPress
Enqueue Styles đúng trong WordPress
Cũng giống như các script, bạn cũng có thể enqueue stylesheet mình. Xem ví dụ dưới đây:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Thayvì sử dụng wp_enqueue_script, chúng tôi sử dụng wp_enqueue_style để thêm stylesheet.
Lưu ý rằng chúng tôi đã sử dụng hook action wp_enqueue_scripts cho cả styles và scripts. Mặc dù tên, function này hoạt động cho cả hai.
Trong các ví dụ trên, chúng tôi đã sử dụng plugins_url function để chỉ đến vị trí của script hoặc style mà chúng tôi muốn enqueue.
Tuy nhiên, nếu bạn đang sử dụng các enqueue scripts function trong theme thì chỉ cần sử dụng get_template_directory_uri () thay thế. Nếu bạn đang làm việc với theme con thì sử dụng get_stylesheet_directory_uri ().
Dưới đây là một mẫu code ví dụ.
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm jacvascript và style đúng cách trong WordPress.
