Làm cách nào để sử dụng jQuery trong WordPress?

jQuery là một thư viện Javascript rất phổ biến, nếu không muốn nói là phổ biến nhất. Đó là một thư viện rõ ràng, súc tích và quan trọng hơn là nó rất nhanh. Có kích thước tương đối nhỏ, trong hầu hết các trường hợp, nó hoạt động tốt mà không làm chậm thời gian tải. Nó đơn giản hóa rất nhiều thứ phức tạp từ JavaScript, như lệnh gọi AJAX và thao tác DOM, xử lý sự kiện và hoạt ảnh. Nó cho phép bạn thêm tính tương tác này vào trang web của mình một cách nhanh chóng mà không cần phải viết vanilla JavaScript

• Nó nhẹ so với hầu hết các khung JavaScript khác
• Nó có một loạt các plugin có sẵn cho các nhu cầu khác nhau
• Thật dễ dàng để các nhà thiết kế và nhà phát triển học hỏi
• Nó được bao gồm trong WordPress

jQuery phổ biến đến mức WordPress tự động tải nó đi kèm. (Điều này bắt đầu trong WordPress 3. 8. 1. ) Tuy nhiên, chỉ vì WordPress đi kèm với jQuery, không có nghĩa là nó đã sẵn sàng để sử dụng ngay lập tức. Nếu bạn đang sử dụng hoặc tạo một chủ đề mà jQuery chưa được gọi, bạn sẽ phải thực hiện một số việc trước khi có thể bắt đầu sử dụng nó

Mặc dù WordPress đi kèm với jQuery, nhưng bạn vẫn phải đảm bảo rằng bạn đang thực sự thêm nó vào chủ đề của mình để có thể sử dụng nó. Điều này được thực hiện bằng cách liệt kê tập lệnh, sau đó chỉ định và thêm vào tệp bằng các đoạn mã jQuery. Điều này có thể được thực hiện trong hai bước đơn giản

Đầu tiên, tạo tệp script của bạn và đặt nó vào thư mục chủ đề

Tạo một tệp JavaScript mới và đặt nó vào thư mục chủ đề mong muốn. Thông thường, các nhà thiết kế tạo một thư mục js để sắp xếp mọi thứ. Đối với ví dụ này, tôi sẽ thêm một tệp có tên là custom_scripts.js, tệp này được đặt trong thư mục con của thư mục chủ đề. Con đường sẽ trông như thế này. ________số 8. Với jQuery, phần mở rộng tệp sẽ có .js ở cuối, giống như chúng ta làm với các tệp JavaScript thông thường, vì vậy không có gì mới ở đó

Dưới đây là một ví dụ về tập lệnh jQuery đơn giản có thể đi vào tệp

<div id=”test-script”>

</div>

0. Đây là một cách tốt để kiểm tra mọi thứ
jQuery(document).ready(function(){
 jQuery("#test-script").html("jQuery says Hello World");
});

Trong nội dung trang của bạn, hãy tạo một div có id là 
<div id=”test-script”>

</div>

1 và bạn sẽ có thể kiểm tra xem jQuery có đang tải đúng cách không
<div id=”test-script”>

</div>

Nếu bạn đã từng làm việc với jQuery trước đây, bạn có thể thấy rất nhiều dấu hiệu 
<div id=”test-script”>

</div>

2. Điều này trở nên khá phổ biến vì nó đóng vai trò là một hàm hoặc tên biến. Nếu bạn đang xem ví dụ trên và tự hỏi ký hiệu đô la ở đâu, thì có lý do tại sao nó không được hiển thị. WordPress sử dụng jQuery ở chế độ không xung đột. Thay vì ký hiệu đô la, bạn sẽ thấy “jQuery. ”
Nhận miễn phí các chủ đề Genesis Framework & StudioPress



Khi bạn lưu trữ trang web của mình trên Flywheel, bạn sẽ có quyền truy cập vào hơn 30 chủ đề WordPress cao cấp (bao gồm cả Genesis. ) ngay từ bảng điều khiển thú vị của chúng tôi. Đó là giá trị hơn 2.000 đô la mà bạn có thể bắt đầu với chỉ 15 đô la/tháng. Tim hiểu thêm ở đây
Thứ hai, tìm hoặc tạo một chức năng. tập tin php
Nếu bạn đang tạo chủ đề từ đầu, bạn có thể cần thêm tệp 
<div id=”test-script”>

</div>

0. Nếu đó là một chủ đề hiện có, thì rất có thể đã có một chủ đề, vì vậy bạn chỉ cần thêm vào chủ đề đó. Sao chép và dán mã bên dưới vào tệp 
<div id=”test-script”>

</div>

0
Nếu bạn đang tạo một chủ đề con, hãy nhớ rằng bạn nên kiểm tra chủ đề gốc để xem jQuery đã được thêm chưa. Trong trường hợp này, bạn không cần thêm bất cứ thứ gì vào tệp 
<div id=”test-script”>

</div>

0
<?php

function add_custom_script() {
    wp_register_script('custom_script', home_url() . '/wp-content/themes/mytheme/js/custom_script.js', array( 'jquery' ));
    wp_enqueue_script('custom_script');
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );

?>

Bây giờ, thư viện jQuery và 
<div id=”test-script”>

</div>

0 sẽ được tải vào tiêu đề của mọi trang, ngoại trừ các trang quản trị. Nếu bạn muốn jQuery được tải ở chân trang, nó yêu cầu một số đăng ký và hủy đăng ký bổ sung. Bạn có thể đọc về cách làm điều đó trong Codex
Khắc phục sự cố nếu cần thiết
Ngay cả khi jQuery dường như vẫn hoạt động tốt, bạn nên làm quen với các công cụ dành cho nhà phát triển để giúp khắc phục sự cố. Công cụ dành cho nhà phát triển Chrome rất tuyệt và có thể tiết kiệm rất nhiều công sức. Nếu bạn thấy mọi thứ không hoạt động với jQuery, xác định chính xác lỗi luôn là bước đầu tiên



Dễ dàng truy cập các công cụ dành cho Nhà phát triển Chrome. Để xem điều này, nhấp chuột phải vào bất kỳ đâu trên trang và chọn 'Kiểm tra phần tử. ’ Khi thanh công cụ Nhà phát triển mở ra, nhấp vào tab ‘Bảng điều khiển’. Bạn sẽ thấy bất kỳ lỗi JavaScript nào ở đó. Ví dụ: nếu jQuery không tải, sẽ có một thông báo cho biết đại loại như “(Uncaught ReferenceError. jQuery không được xác định). ” Thỉnh thoảng, tin nhắn có thể gây nhầm lẫn. Sao chép, dán và Google một chút để tìm hiểu thêm về sự cố. Rất có thể, ai đó cũng gặp vấn đề tương tự và có thể đã tìm ra giải pháp
Chỉ với một vài bổ sung cho trang web WordPress của bạn, bạn sẽ sử dụng thư viện jQuery. Với khả năng viết các tập lệnh tùy chỉnh nhanh hơn JavaScript truyền thống, bạn sẽ thích hiệu quả mà nó mang lại. Để tìm hiểu thêm về jQuery và các plugin hữu ích khác, hãy truy cập trang web chính thức của jQuery
Cái gì tiếp theo?
Đừng thử điều này trên trang web trực tiếp của bạn. Thay vào đó, hãy sử dụng Local, một ứng dụng phát triển WordPress miễn phí. Tim hiểu thêm ở đây
 

			
jQuery có sẵn trong WordPress không?
			
WordPress đi kèm với jQuery và một số thư viện jQuery cần thiết . Các nhà phát triển plugin và chủ đề WordPress có thể dễ dàng gọi jQuery trong các plugin và chủ đề của riêng họ để thêm các tập lệnh jQuery của riêng họ. Để gọi jQuery trong chủ đề hoặc plugin WordPress, người dùng cần thêm các tập lệnh jQuery của riêng họ và đưa chúng vào hàng đợi trong WordPress. 
		
			
Tại sao jQuery không hoạt động trong WordPress?
			
jQuery không được xác định” là một lỗi WordPress phổ biến xảy ra khi một trang web yêu cầu một hàm jQuery trước khi thư viện tải đúng cách. Các nguyên nhân có thể bao gồm  các plugin xung đột, tệp jQuery bị hỏng, CDN bị chặn hoặc mã JavaScript của bạn tải không chính xác . ”
		
			
Làm cách nào để tải jQuery CDN trong WordPress?
			
//Làm cho jQuery tải từ Thư viện Google function replace_jquery() { if (. is_admin()) { // ghi chú hai dòng tiếp theo để tải bản sao cục bộ của jQuery wp_deregister_script('jquery'); . // ajax. googleapis. com/ajax/libs/jquery/3. 6. 0/jquery. tối thiểu. js', sai, '3. 6
		
			
Làm cách nào để có phiên bản jQuery trong WordPress?
			
Trước tiên, bạn cần phải  truy cập trang web của mình rồi mở bảng điều khiển JavaScript . Nếu bạn đang sử dụng Google Chrome, thì bạn có thể thực hiện việc này bằng cách chọn Chế độ xem » Nhà phát triển » Bảng điều khiển JavaScript từ menu. Lệnh này sẽ hiển thị phiên bản jQuery mà trang web của bạn đang chạy. Bạn hy vọng sẽ thấy phiên bản 3. 5.