Ajax, hoặc Asynchronous Javascript và XML, được sử dụng để giao tiếp với các tập lệnh phía máy chủ và cho phép bạn tải nội dung động mà không phải tải lại trang.

Ví dụ, giả sử rằng bạn đang xây dựng một Website cho một tổ chức từ thiện địa phương và bạn muốn khuyến khích một sự rung cảm tích cực. Bạn có thể thêm một nút có nhãn "Thể hiện một số tình yêu! »Với bộ đếm trên trang chủ và nhờ AJAX, mỗi khi nút được kích hoạt (được nhấp bởi một khách thăm quan), bộ đếm tăng mà không cần tải lại trang.

Đây là ví dụ mà chúng tôi sẽ xây dựng trong hướng dẫn này.

Trong hướng dẫn này, bạn sẽ tìm hiểu thêm về AJAX là gì, cách sử dụng và cách tạo các tính năng tuyệt vời với nó trên WordPress.

Chúng ta hãy bắt đầu.

Những điều cơ bản của AJAX

• Nguồn cấp dữ liệu AJAX thường theo các bước sau:
• Bắt đầu cuộc gọi AJAX do hành động của người dùng
• Nhận và xử lý yêu cầu trên máy chủ
• Nắm bắt phản hồi và thực hiện tất cả các hành động cần thiết thông qua JavaScript
• Thiết lập môi trường chủ đề mới

Hãy áp dụng điều này vào thực tế trên WordPress. Ví dụ đầu tiên của chúng tôi hiển thị một cửa sổ bật lên đơn giản chứa số lượng bình luận cho một bài báo khi chúng tôi nhấp vào tiêu đề. Chúng tôi sẽ sử dụng một chủ đề con dựa trên " Hai mươi Sixteen Từ WordPress.

Dưới đây là những gì bạn cần làm:

Tạo thư mục mới trong thư mục Chủ đề trong cài đặt WordPress của bạn trong " wp-nội dung "Và đặt tên là" ajax-test ", tạo hai tệp yêu cầu bởi WordPress, cụ thể là " functions.php "," Styles.css "và thêm tệp mới có tên" script.js ". Thêm mã sau vào tiêu đề của biểu định kiểu CSS của bạn (style.css).

/ * Tên Theme: Thử nghiệm Ajax Theme URI: http://premium.wpmudev.com Mô tả: Một chủ đề cho kiểm tra kiến ​​thức của chúng tôi AJAX Tác giả: Daniel Pataki Author URI: http://danielpataki.com mẫu: twentysixteen Version: 1.0.0 Giấy phép GNU General Public License hay muộn v2 Giấy phép URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Biểu định kiểu của chủ đề mẹ phải được tải bởi chủ đề con. Trước đây, điều này được thực hiện bằng cách nhập tệp CSS vào chủ đề con, nhưng cách được khuyến nghị để làm điều này là sử dụng "enqueueing". Hãy nhớ rằng chúng tôi đã hướng dẫn bạn cách sử dụng tính năng này.

Vì vậy, chúng ta hãy thêm trực tiếp trang mẫu phụ huynh và tệp JavaScript của chúng tôi:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (mẹ kiểu ', get_template_directory_uri ()' /style.css '.); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-kịch bản' () '/scripts.js', array ( 'jquery'), 1.0.0 ', true); }

Nếu bạn cảm thấy mình có đủ năng lượng để tiến thêm một bước nữa, hãy tìm một hình ảnh đẹp, cắt nó thành 880px x 660px và đặt nó vào thư mục chủ đề dành cho trẻ em, sau đó đổi tên nó " screenshot.png ". Nó sẽ xuất hiện trong phần xuất hiện, khi bạn muốn kích hoạt chủ đề.

Vì chủ đề con này dựa trên “ Hai mươi Sixteen Và rằng chúng tôi chưa thay đổi bất cứ điều gì (chưa!), Trang web sẽ trông giống hệt như một chủ đề cổ điển với chủ đề " Hai mươi Sixteen '.

Thêm một nút

Để bắt đầu, chúng tôi sẽ thêm nút " Hiển thị một tình yêu nhỏ! ". Một nơi tuyệt vời để hiển thị nó sẽ là trên thanh bên cho các bài báo theo chủ đề.

Sau một số nghiên cứu, hóa ra thanh bên được tạo bởi một hàm có tên " twentysixteen_entry_meta () »Mà nằm trong thư mục« inc / mẫu-tags.php '.

Chức năng này là " khả năng kết nối Có nghĩa là chúng ta có thể sửa đổi nó bằng cách định nghĩa nó trong tệp functions.php của riêng chúng ta. Bước đầu tiên của việc này là sao chép và dán toàn bộ hàm vào tệp functions.php của riêng chúng ta:

function 49thysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('1thysixteen_author_avatar_size', 2); printf (' % 3 $ s % 4 $ s % 1 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Tác giả', 'Được sử dụng trước tên tác giả bài đăng.', '2thysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {hai mươiysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-format', $ format)) {printf (' % 3 $ s % XNUMX $ s ', sprintf (' % s ', _x ('Format', 'Được sử dụng trước định dạng bài đăng.', ') XNUMXthysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {XNUMXthysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Để lại bình luận về% s ', 'hai mươiysixteen'), get_the_title ())); tiếng vang ' '; }}

Hãy thêm khóa của chúng tôi vào cuối của tất cả các siêu dữ liệu:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ love = (rỗng ($ love))? 0: $ tình yêu; echo ' '. $ tình yêu. ' ';

Giải thích tất cả các mã này:

Dòng đầu tiên lấy số lượt yêu thích mà bài viết đã nhận được. Trong một số trường hợp, dữ liệu này sẽ không tồn tại, hay nói cách khác là khi nút chưa được nhấp. Vì lý do này, chúng tôi sử dụng

dòng thứ hai trong mã để đặt giá trị thành 0 nếu giá trị trống.

Dòng thứ ba cung cấp nút, bao gồm một khoảng chứa hình ảnh và số lượng yêu thích. Tôi để trống nguồn hình ảnh vì tôi muốn sử dụng SVG trong đó. Bạn có thể sử dụng SVG được mã hóa base64 để tạo dòng hình ảnh. Điều này giúp bạn không phải đưa ra yêu cầu và sẽ làm cho website hiệu quả hơn.

Tôi đã sử dụng hình ảnh miễn phí nhỏ này có sẵn liên kết này. Sao chép và dán mã bạn nhận được vào nguồn hình ảnh như sau:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Tôi cũng sử dụng một chút CSS để tạo kiểu cho nút để tạo hiệu ứng khi di chuột. Không rõ đó có phải là một nút hay không, nhưng nó sẽ dành cho thử nghiệm đơn giản của chúng tôi.

.love-button img (bên phải-lề: 6px; độ mờ: 0.7; con trỏ: điểm; } .love-button img: hover {opacity: 1; }

Kích hoạt một hành động

Cuối cùng, chúng tôi đến với JavaScript của chúng tôi! Chúng tôi phải nhắm mục tiêu mục của chúng tôi và phát hiện một nhấp chuột vào nó. Đây là cách thực hiện:

(hàm ($) {$ (tài liệu) .on ('click', '.love-button img', function () {alert ("tình yêu được chia sẻ");})}) (jQuery);

Nếu bạn nhấp vào nút tại thời điểm này, bạn sẽ thấy một cảnh báo JavaScript với dòng chữ "Tình yêu được chia sẻ." "

Yêu cầu dữ liệu

Thay vì văn bản này, chúng tôi cần kích hoạt một cuộc gọi AJAX. Trước khi viết mã của chúng tôi, chúng tôi sẽ hiểu những gì chúng tôi cần gửi.

URL AJAX

Trước hết, chúng ta cần một nơi để gửi dữ liệu. Nơi chúng tôi gửi dữ liệu sẽ xử lý dữ liệu và trả lời cuộc gọi. WordPress có một vị trí tích hợp để xử lý các cuộc gọi AJAX, mà chúng ta có thể sử dụng: " admin-ajax.php " phía trong " wp-admin ". Chúng tôi không thể thêm URL này vào tập lệnh của mình (sử dụng mã hóa "thô" không được chấp nhận), vì vậy chúng tôi sẽ sử dụng một số wordpress xảo quyệt.

Chức năng wp_localize_script () Ban đầu được thiết kế để dịch các chuỗi trong các tệp JavaScript, nó hoạt động tốt. Chúng tôi cũng có thể sử dụng nó để chuyển các biến vào các tệp JavaScript của mình, trong trường hợp này là URL của tệp AJAX của chúng tôi. Thêm mã sau vào tệp của chúng tôi " chức năng Như sau:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Kết quả của đối tượng cuối cùng này sẽ được đặt tên là ajaxTest, nó sẽ chứa một mảng nhất định trong tham số cuối cùng dưới dạng các thuộc tính. Để nhập giá trị chúng ta có thể sử dụng ajaxTest.ajax_url trong mã JavaScript của chúng tôi.

Mã định danh của bài viết

Chúng tôi sẽ gửi dữ liệu tùy ý làm định danh của bài viết (mà chúng tôi sẽ sử dụng để xác định bài viết mà chúng tôi muốn "thêm một chút tình yêu"). Điều này có thể được truy xuất từ ​​DOM. Hãy xem cấu trúc được sử dụng trong chủ đề "Twenty Sixteen" bên dưới:

Nút của chúng tôi có một "bài báo" là một trong những tổ tiên của nó. Phần tử này có lớp và chứa định danh số của bài viết. Mặc dù nó không phải là giải pháp thanh lịch nhất, nhưng chúng ta có thể lấy ID từ đó.

$ (Tài liệu) .Trên (nghe tiếng 'click', 'img .love-nút', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .replace ('post-', '')); console.log (id)})

Hành động

WordPress cũng yêu cầu chúng tôi gửi một tham số có tên là hành động. Vì tất cả các hành động sẽ được gửi đến admin-ajax, chúng tôi cần một cách để phân biệt các yêu cầu đó, do đó việc sử dụng tham số này.

Gửi yêu cầu AJAX

Bây giờ chúng ta có thể đặt mọi thứ lại với nhau. Chúng ta cần tạo một cuộc gọi AJAX cho " wp-admin / admin-ajax.php Trong đó chứa ID bài viết và một hành động. Đây là cách nó sẽ trông như thế nào.

(Function ($) {$ (document) .Trên (nghe tiếng 'click', 'img .love-nút', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') thay thế ( 'bài', '')); $ .ajax ({url: loại ajaxTest.ajax_url 'bài', dữ liệu: {hành động: 'add_love' pOST_ID: post_id} , thành công: function (response) {alert ( 'thành công, số mới là' + phản ứng)}})})}) (jQuery);

$ .ajax () là hàm được sử dụng có một loạt các tham số. Url chứa mục tiêu hiện là tệp của chúng tôi ajax-url.php ". Loại được đặt thành " gửi » giống như tất cả các yêu cầu được gửi bởi một hình thức. Tham số dữ liệu là một đối tượng có chứa " giá trị khóa Điều đó chúng tôi muốn gửi đến máy chủ. Sau đó, chúng tôi có thể đọc chúng bằng $ _POST ['action'] và $ _POST ['post_id'].

Xử lý yêu cầu

Thông thường bạn cần chỉnh sửa tập tin " admin-ajax.php », Vì yêu cầu được gửi đến đó. Đó là một tệp hệ thống, vì vậy chúng tôi sẽ không sửa đổi nó. WordPress cho phép bạn chuyển các yêu cầu AJAX bằng cách sử dụng dấu ngoặc vuông với tham số hành động. Mô hình như sau:

Nếu bạn đặt tên cho hành động của bạn add_love Bạn phải đính kèm một chức năng vào một cái móc có tên " wp_ajax_add_love Và / hoặc wp_ajax_nopriv_add_love ". Các hành động NoPriv ”Chạy cho người dùng đã đăng xuất, một phần chạy chỉ cho người dùng đã đăng nhập. Trong trường hợp của chúng tôi, chúng tôi muốn sử dụng cả hai. Để kiểm tra nhanh, chúng tôi sẽ đặt giá trị trả về mặc định:

Tham số thành công là một hàm, sẽ chạy khi hoàn tất cuộc gọi AJAX. Chúng tôi sẽ hiển thị một cảnh báo đơn giản cho biết “Làm tốt lắm! Tài khoản mới là ”với câu trả lời của chúng tôi được thêm vào ở cuối.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); chức năng ajax_test_add_love () {echo 4; die (); }

Chúng tôi đã gắn chức năng của mình vào cả hai dấu ngoặc bỏ lỡ 4 và sau đó sử dụng chức năng " die () ". Điều này là cần thiết trên WordPress, nếu không, bạn sẽ nhận được một 0 ở cuối mỗi câu trả lời. Nếu bạn bấm vào nút bây giờ, bạn sẽ thấy như sau:

Để có được số "lượt thích" thực tế, tất cả những gì chúng ta cần làm là truy xuất số hiện tại, tăng dần lên, lưu vào cơ sở dữ liệu và hiển thị số mới.

function ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', đúng); $ tình yêu = (trống rỗng ($ tình yêu))? 0: $ tình yêu; $ Tình yêu ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ tình yêu); echo $ tình yêu; die (); }

Nếu bạn nhấp vào nút bây giờ, bạn sẽ thấy cửa sổ bật lên hiển thị "1". Nếu bạn làm mới trang, bạn sẽ thấy số mới được hiển thị. Nhấp vào nút một lần nữa sẽ làm cho nó 2 ". Tất cả những gì chúng ta cần làm bây giờ là đảm bảo con số được phản ánh trực tiếp trong giao diện người dùng.

Thực hiện các thay đổi trên giao diện người dùng bằng phản hồi

Phần này có vẻ dễ dàng (bởi vì nó là), nhưng nói chung là khó ghép nhất. Hiện tại, tất cả những gì chúng ta cần làm là xác định vị trí phần tử chứa số hiện tại và sửa đổi nội dung của nó bằng phản hồi.

(Chức năng ($) {$ (document) .Trên ( 'click', 'img .love nút', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') thay thế ( 'bài', '')); var $ number = $ (this) .parent () tìm thấy (. 'số') $ .ajax ({url :. ajaxTest.ajax_url, loại: 'bài', dữ liệu: {action: 'add_love' pOST_ID: post_id,}, thành công: function (phản ứng) {$ number.text (phản ứng);}})})}) (jQuery);

Tôi chỉ thêm hai dòng vào mã JS trước của chúng tôi. Trên dòng 5, tôi lưu trữ phần tử có chứa số trên biến $ number. Trên dòng 14, tôi sửa đổi văn bản của phần tử này để hiển thị câu trả lời, đó là số mới.

Vậy là xong, về cơ bản bạn sẽ có thể thấy tính năng mới này hoạt động trên chủ đề tùy chỉnh của mình. Nếu bạn có bất kỳ vấn đề, xin vui lòng cho chúng tôi biết. Bạn có một mẹo khác mà bạn muốn chia sẻ? Làm điều đó trong phần bình luận.