Bỏ qua đến nội dung chính

Làm thế nào để thêm đúng mã jQuery trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Mặc dù thực tế là WordPress đã có sẵn trong một thời gian và việc bổ sung các tập lệnh và plugin chủ đề cũng đã xuất hiện được một thời gian, vẫn còn một số nhầm lẫn về việc sử dụng phương pháp nào. sử dụng để thêm tập lệnh trên WordPress.

Vì vậy, chúng tôi sẽ cố gắng làm rõ mọi thứ.

Vì jQuery là khung JavaScript được sử dụng nhiều nhất, chúng tôi sẽ chỉ cho bạn cách thêm nó vào một chủ đề hoặc plugin WordPress.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn

Sau đó trở lại lý do tại sao chúng ta ở đây.

Chế độ tương thích JQuery

Trước khi chúng tôi bắt đầu thêm tập lệnh trên WordPress, hãy khám phá chế độ tương thích của jQuery. WordPress đi kèm với một bản sao của jQuery, mà bạn có thể sử dụng với mã của mình. Khi WordPress jQuery được tải, nó sử dụng chế độ tương thích, đây là cơ chế để tránh xung đột với các thư viện khác.

Tìm hiểu xem Nên xóa jQuery khỏi các chủ đề và plugin của bạn WordPress ?

Điều này có nghĩa là bạn không thể sử dụng ký hiệu đô la trực tiếp như trong các dự án khác. Khi viết jQuery trên WordPress, bạn phải sử dụng jQuery thay thế.

Hãy xem đoạn mã dưới đây để biết ý tôi là gì:

/ * Chế độ bình thường * / $ ('. Hidable'). On ('click', function () {$ (this). Suede ();}) / * Chế độ tương thích * / jQuery ('. Hidizable'). ('click', function () {jQuery (this). leather ();})

Những gì bạn cần biết là với một vài sửa đổi, bạn có thể sử dụng lại ký hiệu đô la. Sử dụng mỗi lần "jQuery" trên tất cả mã của bạn sẽ làm phức tạp nhiều cách viết.

Kiểm tra biên tập viên mã 10 cho các nhà phát triển WordPress

Chỉ cần tóm tắt lại, nếu bạn biết jQuery, dấu $ chỉ là bí danh cho jQuery (), sau đó là bí danh cho một hàm. Cú pháp cơ bản là: $ (Selector) .action () :

  • Một ký hiệu đô la để xác định jQuery
  • Một (bộ chọn) để "tìm" các phần tử HTML
  • Một hành động jQuery () để thực hiện trên các phần tử này

Nếu bạn tải tập lệnh của mình trên chân trang, bạn có thể bọc mã của mình trong một hàm ẩn danh. Đây là cách thực hiện:

(Function ($) {$ () nó (nghe tiếng 'click', function () {$ () .hide () này 'hideable ..';})}) (JQuery);

Nếu bạn muốn thêm tập lệnh của mình vào tiêu đề (những gì bạn nên tránh nếu có thểBạn có thể gói nó trong một chức năng chạy khi tài liệu đã sẵn sàng.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Nhân tiện khám phá Cách thêm Tiện nghi mã trên WordPress mà không phá vỡ trang web của bạn

jQuery (document) .ready (function ($) {$ () nó (nghe tiếng 'click', function () {$ (this) .hide () 'hideable ..';})});

Cách liên kết tập lệnh của bạn với jQuery

Bây giờ bạn có thể viết mã jQuery hợp lệ trên WordPress, chúng tôi sẽ liên kết công việc của chúng tôi với trang web của chúng tôi. Trong WordPress, quá trình này được gọi là ' enqueueing '(hệ thống đuôi). Đối với một trang web HTML bình thường, chúng ta nên sử dụng thẻ <kịch bản> để thêm tập lệnh.

WordPress có thể làm điều tương tự, nhưng chúng tôi sẽ sử dụng các tính năng đặc biệt của WordPress để đạt được điều này. Theo cách này, WordPress quản lý tất cả các phụ thuộc của chúng tôi cho chúng tôi.

Nếu bạn đang làm việc trên một chủ đề, bạn có thể sử dụng chức năng wp_enqueue_script () trong tập tin của bạn functions.php nộp. Đây là cách bạn có thể làm điều đó:

chức năng my_theme_scripts () {wp_enqueue_script ( 'my-lớn-kịch bản', get_template_directory_uri () '/js/my-great-script.js', array (' jquery '), 1.0.0', true.); } Add_action ( 'wp_enqueue_scripts', 'my_theme_scripts');

Hàm này có năm đối số. Đầu tiên, bạn có thể sử dụng nó để chỉ định tập lệnh, thứ hai là vị trí của tập lệnh, tham số thứ ba là một mảng các phụ thuộc.

Tôi đã thêm jQuery như một phần phụ thuộc vì tập lệnh sử dụng nó. Nếu bạn tạo một tập lệnh phụ thuộc vào "my-lớn-script Bạn phải thêm nó vào danh sách phụ thuộc để WordPress biết nên tải tệp nào trước.

Khám phá quá Làm thế nào để nạp JavaScript trên WordPress

Tham số thứ tư là số phiên bản và tham số thứ năm cho phép WordPress biết nơi đặt tập lệnh. Theo mặc định, các tập lệnh sẽ được tải vào tiêu đề, đây là thông lệ xấu, vì nó làm chậm quá trình tải trang web của bạn (trình duyệt dừng tải trang mỗi khi gặp khối <script>). Bạn phải tải tất cả các tập lệnh của mình vào chân trang, nếu có thể bằng cách tạo tham số thứ năm " đúng '.

Làm thế nào để thêm một kịch bản vào bảng điều khiển

Bạn cũng có thể thêm tập lệnh trên tableau de bord. Các chức năng được sử dụng hoàn toàn giống nhau, chỉ cần sử dụng một " móc Khác nhau. Hãy xem ví dụ dưới đây:

fchú thích my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', mảng ('jquery'), '1.0.0' } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Thay vì sử dụng Wp_enqueue_scripts chúng ta phải sử dụng Admin_enqueue_scriptsVà đó là nó!

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Việc sử dụng thẻ có điều kiện

Sử dụng thẻ có điều kiện để tải tập lệnh của bạn chỉ khi cần thiết. Điều này thường được sử dụng trên bảng điều khiển, nơi bạn chỉ muốn sử dụng tập lệnh trên một trang cụ thể. Điều này giúp tiết kiệm băng thông và thời gian xử lý, có nghĩa là thời gian tải nhanh hơn cho trang web của bạn.

Khám phá cũng của chúng tôi Các plugin 10 WordPress để cải thiện tốc độ tải blog của bạn

Hãy nhìn vào tài liệu admin_enqueue_scripts trong Codex WordPress để biết thêm thông tin.

Khám phá thêm một số plugin WordPress cao cấp

Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Bản đồ thế giới tương tác

Interactive World Maps là một plugin WordPress giúp bạn tạo ra nhiều bản đồ như bạn muốn, với các điểm đánh dấu tương tác và đầy màu sắc, lục địa, quốc gia hoặc khu vực.

Bản đồ thế giới tương tác

Nó hoàn toàn tương thích với phiên bản mới của WordPress et de Trực quan Composer. Nhờ plugin này, bạn có thể hiển thị một số loại khu vực như: bản đồ toàn thế giới, lục địa hoặc tiểu lục địa (Châu Phi, Châu Âu, Châu Mỹ, Châu Á, Châu Đại Dương và tất cả các lục địa của họ), một quốc gia, một quốc gia chia cho các khu vực của nó, một tiểu bang của Hoa Kỳ, Hoa Kỳ chia cho các khu vực đô thị, một tiểu bang của Hoa Kỳ chia cho các khu vực đô thị.

Tải về | Bản demo | Web hosting

2. Biểu mẫu liên hệ AJAX có theo dõi

Plugin WordPress này cho phép bạn dễ dàng thêm các hình thức liên hệ hoặc bình luận vào blog WordPress của bạn. Nó đi kèm với trình quản lý cài đặt có thể được truy cập trực tiếp qua bảng điều khiển WordPress.wp-ajax-contact-form-theo dõi-plugin wordpress-to-an toàn

Các tính năng chính của nó là trong số những người khác: một fcho email, sự hỗ trợ của Toán học CAPTCHA về hình thức, tùy chỉnh và cấu hình thông qua bảng điều khiển WordPress, khả năng của dxác định trả lời tự động tùy chỉnh, hỗ trợ CSS tùy chỉnh và hơn thế nữa

Tải về | Bản demo | Web hosting

3. Cổng thanh toán chuẩn của PayPal cho biểu mẫu Ninja

Cổng tiêu chuẩn PayPal cho Ninja Forms cho phép bạn tạo các biểu mẫu tích hợp hoàn hảo với cổng thanh toán PayPal.

Paypal standard payment gateway for ninja forms

Bạn sẽ có thể tạo các mẫu đơn đặt hàng được cá nhân hóa và nhận thanh toán bằng tài khoản Paypal tiêu chuẩn. Các tính năng chính của nó là: tích hợp dễ dàng và nhanh chóng, tích hợp IPN, khả năng bật / tắt cổng PayPal trên các biểu mẫu riêng lẻ, hỗ trợ thanh toán thường xuyên, v.v.

Tải về | Bản demo |Web hosting

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.

Kết luận

Thế thôi! Đó là nó cho hướng dẫn này. Tôi hy vọng bây giờ bạn sẽ biết cách thêm một tập lệnh trên WordPress. Đừng ngần ngại chia sẻ mẹo với bạn bè trên mạng xã hội của bạn.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Nhưng trong lúc này, hãy cho chúng tôi biết về bạn ý kiến và đề xuất trong phần dành riêng.

...

Bài viết này chứa 1 bình luận

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

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer