Cách thêm JavaScripts và Styles đúng cách trong WordPress

Bạn có muốn tìm hiểu cách thêm JavaScripts và CSS stylesheets đúng cách trong WordPress không? Nhiều người dùng DIY thường mắc sai lầm khi gọi trực tiếp các tập lệnh và bảng định kiểu của họ trong các plugin và chủ đề. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm JavaScripts và biểu định kiểu đúng cách 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 phát triển chủ đề và plugin WordPress.

Other :

Properly adding JavaScripts and styles in WordPress

Sai lầm phổ biến khi thêm tập lệnh và biểu định kiểu trong WordPress

Nhiều nhà phát triển chủ đề và plugin WordPress mới mắc sai lầm khi thêm trực tiếp tập lệnh hoặc CSS nội tuyến vào plugin và chủ đề của họ.

Một số nhầm lẫn sử dụng wp_head để tải các tập lệnh và bảng định kiểu của họ.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

Mặc dù đoạn mã trên có vẻ dễ dàng hơn, nhưng đó là cách thêm tập lệnh sai trong WordPress và nó dẫn đến nhiều xung đột hơn trong tương lai.

Ví dụ: nếu bạn tải jQuery theo cách thủ công và một plugin khác tải jQuery thông qua phương pháp thích hợp, thì bạn có jQuery được tải hai lần. Nếu nó được tải trên mọi trang, thì điều này sẽ ảnh hưởng tiêu cực đến tốc độ và hiệu suất của WordPress.

Cũng có thể cả hai là phiên bản khác nhau cũng có thể gây ra xung đột.

Điều đó đang được nói, chúng ta hãy xem xét cách thích hợp để thêm tập lệnh và bảng định kiểu.

Tại sao Enqueue Scripts và Styles trong WordPress?

WordPress có một cộng đồng nhà phát triển mạnh mẽ. Hàng nghìn người từ khắp nơi trên thế giới phát triển các chủ đề và plugin cho WordPress.

Để đảm bảo rằng mọi thứ hoạt động bình thường và không ai dẫm chân lên người khác, WordPress có một hệ thống xếp hạng. Hệ thống này cung cấp một cách có thể lập trình để tải JavaScripts và CSS stylesheet.

Bằng cách sử dụng các hàm wp_enqueue_script và wp_enqueue_style, bạn sẽ cho WordPress biết khi nào tải một tệp, tải nó ở đâu và phụ thuộc của nó là gì.

Hệ thống này cũng cho phép các nhà phát triển sử dụng các thư viện JavaScript tích hợp đi kèm với WordPress thay vì tải nhiều lần cùng một tập lệnh của bên thứ ba. Điều này làm giảm thời gian tải trang và giúp tránh xung đột với các chủ đề và plugin khác.

Làm thế nào để sắp xếp đúng các tập lệnh trong WordPress?

Tải tập lệnh đúng cách trong WordPress rất dễ dàng. Dưới đây là một mã ví dụ mà bạn sẽ dán vào tệp plugin của mình hoặc trong tệp functions.php của chủ đề để tải đúng các tập lệnh 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 trình:

Chúng tôi bắt đầu bằng cách đăng ký tập lệnh của mình thông qua hàm wp_register_script() . Hàm này chấp nhận 5 tham số:

  • $ xử lý – Xử lý là tên duy nhất của tập lệnh của bạn. Của chúng tôi được gọi là “my_amazing_script”
  • $ src – src là vị trí của tập lệnh của bạn. Chúng tôi đang sử dụng hàm plugins_url để lấy URL thích hợp của thư mục plugin của chúng tôi. Khi WordPress tìm thấy điều đó, sau đó nó sẽ tìm kiếm tên tệp của chúng tôi là Amazing_script.js trong thư mục đó.
  • $ deps – deps là để phụ thuộc. Vì tập lệnh của chúng tôi sử dụng jQuery, chúng tôi đã thêm jQuery vào vùng phụ thuộc. WordPress sẽ tự động tải jQuery nếu nó chưa được tải trên trang web.
  • $ ver – Đây là số phiên bản của tập lệnh của chúng tôi. Tham số này không bắt buộc.
  • $ in_footer – Chúng tôi muốn tải tập lệnh của mình ở footer, vì vậy chúng tôi đã đặt giá trị là true. Nếu bạn muốn tải tập lệnh trong tiêu đề, thì bạn sẽ làm cho nó sai.

Sau khi cung cấp tất cả các tham số trong wp_register_script , chúng ta chỉ có thể gọi script trong wp_enqueue_script() để làm cho mọi thứ diễn ra.

Bước cuối cùng là sử dụng móc hành động wp_enqueue_scripts để thực sự tải tập lệnh. Vì đây là mã ví dụ, chúng tôi đã thêm mã đó ngay bên dưới mọi thứ khác.

Nếu bạn đang thêm cái này vào chủ đề hoặc plugin của mình, thì bạn có thể đặt móc hành động này ở nơi mà tập lệnh thực sự được yêu cầu. Điều này cho phép bạn giảm dung lượng bộ nhớ của plugin.

Bây giờ, một số người có thể thắc mắc tại sao chúng ta lại thực hiện thêm bước đăng ký tập lệnh đầu tiên và sau đó sắp xếp nó? Điều này cho phép các chủ sở hữu trang web khác hủy đăng ký tập lệnh của bạn mà không cần sửa đổi mã lõi của plugin của bạn.

Các kiểu xếp hàng trong WordPress đúng cách

Cũng giống như script, bạn cũng có thể sắp xếp các bảng định kiểu của mình. Hãy 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' );  
?>

Thay vì sử dụng wp_enqueue_script , chúng tôi hiện đang sử dụng wp_enqueue_style để thêm biểu định kiểu của chúng tôi.

Lưu ý rằng chúng tôi đã sử dụng wp_enqueue_scripts cho cả kiểu và tập lệnh. Mặc dù tên, chức năng này hoạt động cho cả hai.

Trong các ví dụ trên, chúng tôi đã sử dụng plugins_url để trỏ đến vị trí của tập lệnh hoặc kiểu mà chúng tôi muốn xếp hàng.

Tuy nhiên, nếu bạn đang sử dụng hàm enqueue scripts trong chủ đề của mình, thì thay vào get_template_directory_uri() Nếu bạn đang làm việc với một chủ đề con, hãy sử dụng get_stylesheet_directory_uri() .

Dưới đây là một mã 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à kiểu đúng cách trong WordPress. Bạn cũng có thể muốn nghiên cứu mã nguồn của các plugin WordPress hàng đầu để biết một số ví dụ về mã trong cuộc sống thực.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Free Download Cách thêm JavaScripts và Styles đúng cách trong WordPress :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress