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 701.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ị]

Bạn có muốn nắm vững cách thêm mã jQuery trên WordPress đúng cách không? Vì vậy, hãy tiếp tục đọc để tìm hiểu thêm.

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 anh ta 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 * / $ ('. Có thể ẩn'). Bật ('nhấp chuột', hàm () {$ (this) .hide ();}) / * Chế độ tương thích * / jQuery ('. Có thể ẩn'). Bật ('click', function () {jQuery (this) .hide ();})

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
  • A (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 ở chân trang, bạn sẽ có thể bọc mã của mình trong một hàm ẩn danh. Đây là cách thực hiện:

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í]

(function ($) {$ ('. hidden'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Nếu bạn muốn thêm tập lệnh của mình trên 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.

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 ($) {$ ('. hidden'). on ('click', function () {$ (this) .hide ();})});

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 thông 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 tập tin. Đây là cách bạn có thể làm điều đó:

function my_theme_scripts () {wp_enqueue_script ('my-great-script', 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 có năm đối số. Tham số đầu tiên bạn có thể sử dụng để biểu thị tập lệnh, tham số thứ hai là vị trí của tệp tập lệnh, tham số thứ ba là một mảng phụ thuộc.

Tôi đã thêm jQuery làm 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 cần thêm nó vào danh sách phụ thuộc để WordPress biết những tệp nào nó cần tải 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 trong tiêu đề, điều này là không tốt, vì nó làm chậm quá trình tải trang web của bạn (trình duyệt dừng tất cả tải trang, bất cứ khi nào khối est rencontré). 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

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

fUnction my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } 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_scripts, và đó là tất cả !

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

Sử dụng các thẻ có điều kiện để bạn chỉ tải các tập lệnh của mình khi cần thiết. Điều này thường được sử dụng nhất trên trang tổng quan, nơi bạn chỉ muốn 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ý, đồng nghĩa với thời gian tải trang web của bạn nhanh hơ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]

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 bao nhiêu bản đồ tùy thích, với các điểm đánh dấu, lục địa, quốc gia hoặc khu vực tương tác và đầy màu sắ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 biểu mẫu liên hệ hoặc nhận xét vào blog WordPress của mình. Nó đi kèm với một trình quản lý cài đặt có thể được truy cập trực tiếp thông 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 tính năng khác: a 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 demoWeb hosting 

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

PayPal Standard Gateway cho Ninja Forms cho phép bạn tạo các biểu mẫu tích hợp liền mạch với cổng thanh toán PayPal. 

Cổng thanh toán chuẩn Paypal cho các biểu mẫu ninja

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 kích hoạt / hủy kích hoạt cổng PayPal trên các biểu mẫu riêng lẻ, hỗ trợ thanh toán thông thường, 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

Đây ! Đó là nó cho hướng dẫn này. Hy vọng bây giờ bạn đã biết cách thêm script vào WordPress. thoải má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.

Tuy nhiên, trong thời gian chờ đợi, hãy cho chúng tôi biết về ý 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

  1. Cảm ơn bạn rất nhiều. Tôi đang cố gắng thực hiện việc này với ký hiệu $ trong một giờ. Sử dụng jquery không phải là một vấ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