Bạn có muốn nắm vững cách thêm mã jQuery trên WordPress 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à JavaScript Framework được sử dụng rộng rãi nhất, chúng tôi sẽ chỉ cho bạn cách thêm nó vào một chủ đề hoặc một 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 blog WordPress trong 7 bước 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:

(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 để tham chiếu đến 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 các 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

Bạ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.

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ái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý 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

Bản đồ thế giới tương tác 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 màu, lục địa, quốc gia hoặc khu vực tương tác và có màu sắ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

Ce Plugin WordPress 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. 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.

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 demo | Web 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. 

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

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.

• Làm thế nào để sử dụng loại thẻ và có hiệu quả trên WordPress
• Làm thế nào để tạo ra một thực đơn đáp ứng cho WordPress di động
• Làm thế nào để tạo một Intranet WordPress cho Tổ chức của bạn
• Làm thế nào để cài đặt một plugin trong WordPress

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.

...