Thêm Javascript vào chủ đề WordPress đúng cách

Có một cách cụ thể để thêm Javascript vào chủ đề WordPress của bạn để ngăn chặn mọi xung đột với plugin hoặc chủ đề WordPress gốc. Vấn đề là nhiều nhà phát triển của Wikipedia đã gọi các tệp javascript của họ trực tiếp trong tệp header.php hoặc footer.php, đó là cách làm không chính xác.


Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách gọi chính xác các tệp javascript của bạn bằng cách sử dụng tệp tin.php của bạn để chúng tải ngay vào đầu trang hoặc thẻ chân trang của bạn. Bằng cách này, nếu bạn đang phát triển một chủ đề để phân phối và người dùng cuối của bạn muốn sửa đổi các tập lệnh thông qua một chủ đề con mà họ có thể hoặc nếu họ đang sử dụng minifying / cache hoặc các plugin tối ưu hóa khác, họ sẽ hoạt động chính xác. Và nếu bạn đang làm việc với một chủ đề con, các tập lệnh của bạn được thêm đúng cách, mà không cần sao chép các tệp header.php hoặc footer.php vào chủ đề con của bạn, điều cần thiết là bao giờ (khi làm việc với một chủ đề được mã hóa tốt)

Cách sai để thêm Javascript vào chủ đề WordPress

Gọi javascript trong tệp header.php hoặc tệp footer.php của bạn như hiển thị bên dưới, KHÔNG phải là cách chính xác và tôi khuyên bạn nên chống lại nó, thường thì nó gây ra xung đột với các plugin khác và thực hiện mọi thứ theo cách thủ công khi làm việc với CMS một ý kiến ​​hay.

Cách đúng để thêm Javascript vào chủ đề WordPress

Cách tốt hơn để thêm javascript vào chủ đề WordPress của bạn là làm như vậy thông qua tệp tin.php. wp_enqueue_script. Sử dụng hành động wp_enqueue_scripts để tải javascript của bạn sẽ giúp chủ đề của bạn không gặp rắc rối.

Thí dụ

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', mảng (), true);

Đoạn mã trên sẽ tải tệp my-script.js trên trang web của bạn. Như bạn có thể thấy tôi chỉ bao gồm $ xử lý nhưng bạn cũng có thể thêm các phụ thuộc cho tập lệnh, số phiên bản của mình và liệu có tải nó trong tiêu đề hoặc chân trang (mặc định là tiêu đề).

Hàm wp_enqueue_script () về mặt kỹ thuật có thể được sử dụng trong bất kỳ tệp mẫu chủ đề hoặc plugin nào, nhưng nếu bạn đang tải tập lệnh toàn cầu, bạn sẽ muốn đặt nó trong tệp function.php của chủ đề hoặc trong một tệp riêng biệt để tải tập lệnh trên Địa điểm. Nhưng nếu bạn chỉ muốn tải tập lệnh trên một tệp mẫu cụ thể (ví dụ: trên các bài đăng của thư viện), bạn có thể đặt chức năng ngay trong tệp mẫu, tuy nhiên, cá nhân tôi khuyên bạn nên giữ tất cả các tập lệnh ở một nơi và sử dụng các điều kiện để tải kịch bản khi cần thiết.

Các tập lệnh được lưu trữ trên WordPress

Một điều thú vị về WordPress là đã có một loạt các tập lệnh được lưu trữ và đăng ký mà bạn có thể sử dụng để phát triển chủ đề của mình. Ví dụ: jQuery được sử dụng trong hầu hết mọi dự án LUÔN LUÔN được tải từ WordPress và không bao giờ được lưu trữ trên trang web của bên thứ 3 như Google. Vì vậy, trước khi bạn thêm một tập lệnh tùy chỉnh vào dự án của bạn, hãy kiểm tra danh sách tập lệnh đã đăng ký để chắc chắn rằng nó chưa bao gồm trong WordPress và nếu có thì bạn nên tải cái đó thay vì đăng ký của riêng bạn.

Sử dụng WordPress Enqueue Hook

Trước đây chúng tôi đã đề cập đến chức năng cần thiết để tải tập lệnh trên trang web của bạn, tuy nhiên, khi làm việc với các tệp không phải là mẫu như tệp tin.php của bạn, bạn nên thêm chức năng này vào một chức năng khác được nối vào các móc nối WordPress thích hợp, theo cách này, tập lệnh của bạn có được đã đăng ký với tất cả các tập lệnh khác được đăng ký bởi WordPress, plugin của bên thứ 3 và chủ đề gốc của bạn khi sử dụng chủ đề con.

WordPress có hai móc hành động khác nhau mà bạn có thể sử dụng để gọi tập lệnh của mình.

  1. wp_enqueue_scripts – hành động được sử dụng để tải tập lệnh ở mặt trước
  2. admin_enqueue_scripts – hành động được sử dụng để tải tập lệnh trong quản trị viên WP

Dưới đây là một ví dụ (sẽ được thêm vào tệp tin.php của bạn) về cách tạo một hàm và sau đó sử dụng hook WordPress để gọi các tập lệnh của bạn.

/ **
* Enqueue một kịch bản
* /
hàm myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', mảng (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Ghi chú: Xem cách chúng tôi đang sử dụng hàm get getememem_directory_uri của người dùng khi xác định vị trí tập lệnh của bạn? Chức năng này tạo một URL đến thư mục chủ đề của bạn. Nếu bạn đang làm việc với một chủ đề con, bạn sẽ muốn sử dụng Thay get_stylesheet_directory_uri Thay để nó trỏ đến chủ đề con của bạn chứ không phải chủ đề gốc.

Thêm mã Javascript nội tuyến

Mặc dù bạn có thể dễ dàng dán javascript nội tuyến vào bất kỳ tệp mẫu nào thông qua thẻ script, nhưng cũng nên sử dụng các móc nối WordPress để thêm mã nội tuyến của bạn, đặc biệt là khi nó có một plugin lõi hoặc mã chủ đề. Dưới đây là một ví dụ về việc thêm tập lệnh nội tuyến vào trang web của bạn:

hàm myprefix_add_inline_script () {
wp_add_inline_script ('tập lệnh của tôi', 'cảnh báo ("xin chào thế giới");', 'sau');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Những gì nó sẽ làm là thêm javascript nội tuyến của bạn sau khi tập lệnh My my script script đã đăng ký trước đó. Khi sử dụng wp_add_inline_script, bạn chỉ có thể thêm mã nội tuyến trước hoặc sau một tập lệnh đã được đăng ký, vì vậy nếu bạn đang cố gắng sửa đổi mã của một tập lệnh cụ thể, hãy đảm bảo rằng nó được tải sau nó hoặc nếu bạn chỉ cần thêm một số mã tùy chỉnh, bạn có thể móc tập lệnh jquery thường được tải bởi hầu hết các chủ đề WordPress và nếu không, bạn có thể sử dụng wp_enqueue_script để tải phiên bản jQuery được lưu trữ của jQuery.

Bằng cách sử dụng phương pháp này, mọi người có thể dễ dàng loại bỏ các tập lệnh nội tuyến của bạn thông qua một chủ đề con hoặc bổ trợ plugin, nó giữ cho tất cả các javascript tùy chỉnh của bạn được sắp xếp gọn gàng và được phân tích cú pháp bởi WordPress có thể an toàn hơn. Và nếu bạn đang sử dụng một chủ đề con, bạn có thể tải các tập lệnh của mình thông qua tệp tin.php. Thay vì sao chép qua các tệp header.php hoặc footer.php sang chủ đề con của bạn.

Điều đó nói rằng, nếu bạn đang làm việc trong một chủ đề con mà bạn không cần phải làm điều này, bạn có thể chỉ cần đổ mã vào tiêu đề của mình bằng cách sử dụng các móc wp_head hoặc wp_footer như ví dụ dưới đây:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map