Làm thế nào để thêm JavaScripts và CSS trong WordPress [NEW]

Gần đây, chúng tôi đã nhận xét về mã cho một plugin được viết bởi một trong những người dùng của chúng tôi. Plugin hoạt động tốt, nhưng nhà phát triển đã không chuẩn hóa JavaScript bên ngoài. WordPress có một hệ thống xếp hàng để thêm javascrip và kiểu để giúp ngăn xung đột plugin. Vì hầu hết mọi người sử dụng nhiều hơn một plugin trên trang web của họ, nên các lập trình viên luôn tuân theo các phương pháp hay nhất. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm JavaScripts và các kiểu vào WordPress. Điều này sẽ đặc biệt hữu ích cho những người mới bắt đầu tìm hiểu về các chủ đề WordPress và lập trình plugin.

javascripts

Lỗi

WordPress có chức năng wp_head cho phép bạn tải bất kỳ thứ gì vào tiêu đề trang web của mình. Đối với những người không biết nhiều, họ chỉ cần thêm các tập lệnh của họ bằng cách sử dụng mã như sau:

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

Mặc dù mã khá đơn giản, nhưng đó là một cách sai để thêm tập lệnh trong WordPress. Ví dụ: nếu bạn tải thủ công jQuery theo cách trên và một plugin khác tải jQuery theo quy trình chuẩn của nó, bạn đã vô tình khiến jQuery tải hai lần. Trong trường hợp xấu nhất, hai phiên bản khác nhau có thể gây ra xung đột.

Hãy xem cách phù hợp để làm điều này.

Tại sao Enqueue Scripts trong WordPress?

WordPress có một cộng đồng nhà phát triển lớn. Có hàng ngàn người trên khắp thế giới thiết kế chủ đề và viết plugin cho WordPress. Để đảm bảo rằng mọi thứ hoạt động tốt và không ai làm những gì người khác làm, WordPress có tính năng xếp hàng tập lệnh. Tính năng này cung cấp một cách có hệ thống để tải các kiểu và kiểu JavaScrip. Bằng cách sử dụng hàm wp_enqueue_script, bạn cho WordPress biết khi nào tải một tập lệnh, tải nó ở đâu và nó phụ thuộc vào cái gì.

Điều này cho phép mọi người tận dụng các thư viện Javascript tích hợp sẵn của WordPress thay vì tải đi tải lại cùng một tập lệnh của bên thứ ba. Nó cũng giúp giảm thời gian tải trang và tránh xung đột với các chủ đề và plugin khác.

Làm thế nào để Enqueue Script trong WordPress đúng cách

Tải tập lệnh đúng cách trong WordPress rất dễ dàng. Đây là một mã ví dụ mà bạn sẽ dán vào tệp plugin của mình hoặc dán vào tệp functions.php của chủ đề để tải tập lệnh đúng cách 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ý tập lệnh của mình thông qua tính năng wp_register_script (). Tính năng 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. Tập lệnh 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 tính năng plugins_url để lấy URL chính xác của thư mục plugin của chúng tôi. Khi WordPress tìm thấy nó, nó sẽ tìm thấy tên tệp của chúng tôi là Amazing_script.js trong thư mục đó.
  • $ THIẾT BỊ – DEPS là sự 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ó không được tải trước trên trang web.
  • $ Ver – Đây là số phiên bản của kịch bản 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 JavaScripts và kiểu của mình vào footer, vì vậy chúng tôi đặt nó thành true.

Sau khi cung cấp tất cả các tham số trong wp_register_script, chúng ta chỉ cần gọi tập lệnh trong

wp_enqueue_script () và mọi thứ sẽ hoạt động.

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 một bước là đăng ký script trước và xếp nó? Có, điều này cho phép các chủ sở hữu trang web khác hủy đăng ký các tập lệnh của bạn nếu họ muốn mà không cần sửa đổi mã lõi của plugin của bạn.

Thêm JavaScripts và kiểu cách để Enqueue Styles

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. Xem ví dụ bên dưới:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

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

Trong các ví dụ trên, chúng tôi đã sử dụng plugins_url để chỉ định 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 tính năng enqueue script trong chủ đề của mình thì chỉ cần sử dụng get_template_directory_uri () để thay thế. Nếu bạn đang làm việc với một chủ đề con, hãy sử dụng get_stylesheet_directory_uri (). Đâ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 hiểu cách thêm đúng cách và kiểu JavaScrip vào các chủ đề và plugin WordPress của bạn. Mọi thắc mắc và ý kiến ​​đóng góp, hãy để lại bình luận bên dưới.

Tài nguyên bổ sung

  • wp_enqueue_script
  • § wp_register_script
  • wp_enqueue_scripts

Bạn có thể tham khảo hướng dẫn của chúng tôi về cách chuyển javascrip xuống footer trong wordpress.