Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Cải tiến kỹ thuật Ajax cho WordPress: Lập trình thủ tục

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Một vài năm trước, tôi đã viết một loạt các bài viết thảo luận về cách sử dụng Ajax trong WordPress Frontend. Mục đích của loạt bài này rất đơn giản:

Chúng ta sẽ đưa ra một cái nhìn tổng quan ngắn gọn về Ajax là gì, cách nó hoạt động, cách thiết lập nó ở mặt trước và hiểu các móc mà WordPress cung cấp. Chúng tôi cũng sẽ thực sự xây dựng một dự án nhỏ đưa lý thuyết vào thực tế. Chúng tôi sẽ đi qua mã nguồn và chúng tôi cũng sẽ đảm bảo nó có sẵn trên GitHub, là tốt.

Nói chung, loạt bài này vẫn hoạt động tốt nhưng, như với tất cả các phần mềm theo phát triển liên tục, các kỹ thuật, các API và các phương pháp tiếp cận thay đổi. Hơn nữa, nhiều năm trôi qua và chúng tôi tiếp tục tinh chỉnh kỹ năng của mình, chúng tôi phát triển tốt hơn và chúng tôi sử dụng API mới tốt hơn.

Vì tất cả những điều trên, tôi muốn xem lại khái niệm về Ajax trong WordPress để bạn thấy một số API mới và cách sử dụng chúng trong công việc hàng ngày hoặc cách cấu trúc lại một số mã bạn có thể đang làm việc với ngay bây giờ.

Một lời cảnh cáo trước khi bạn đi quá xa trong hướng dẫn này: Tôi giả sử rằng bạn đã đọc qua chuỗi liên kết trong phần giới thiệu của bài viết này và bạn có một số kinh nghiệm về xây dựng các plugin WordPress.

Xác định Plugin

Như với bất kỳ plugin WordPress nào, điều quan trọng là phải đảm bảo bạn xác định tiêu đề để WordPress có thể đọc tệp để giới thiệu chức năng mới vào ứng dụng cốt lõi.

Tôi đang gọi biến thể này của plugin Simple Ajax Demo, và nó nằm trong wp-content / plugin / wp-simple-ajax. Tập tin đầu tiên tôi đang tạo nằm trong thư mục gốc của wp-simple-ajax và được gọi là wp-simple-ajax.php.

Nó trông như thế này:

Mã nên được tự giải thích, đặc biệt là nếu bạn đang sử dụng để làm việc với WordPress Plugins; tuy nhiên, điều quan trọng nhất cần hiểu là tất cả thông tin trên là điều sẽ thúc đẩy những gì người dùng nhìn thấy trong bảng điều khiển WordPress.

Đó là, người dùng sẽ thấy tên, mô tả và phiên bản của plugin cũng như tên của tác giả (sẽ được liên kết với URL được chỉ định) khi chúng được trình bày với tùy chọn kích hoạt plugin.

Thêm tệp Ajax của WordPress

Tại thời điểm này, các plugin sẽ xuất hiện trong bảng điều khiển WordPress Plugin nhưng nó sẽ không thực sự làm bất cứ điều gì bởi vì chúng tôi đã không viết bất kỳ mã nào. Để thực hiện điều đó, chúng tôi sẽ tiếp cận plugin cụ thể này bằng cách sử dụng phương pháp lập trình thủ tục thay vì cách tiếp cận hướng đối tượng mà tôi đã sử dụng trong hầu hết các hướng dẫn của mình.

Chúng tôi hỗ trợ Ajax như thế nào

Lý do để tránh lập trình hướng đối tượng ngay bây giờ là gấp đôi:

  1. Điều này là do plugin sẽ rất đơn giản. Tôi quan tâm nhiều hơn đến việc tập trung vào các API được chỉ định do WordPress cung cấp để bạn có thể tập trung vào những điều quan trọng nhất cần tập trung vào công việc của mình.
  2. Phần thứ hai của loạt bài này sẽ tập trung vào việc tái cấu trúc mã này thành một hệ thống hướng đối tượng để bạn có thể thấy tất cả điều này có thể trông như thế nào trong ngữ cảnh của một hệ thống lớn hơn sử dụng các lớp.

Cuối cùng, loạt bài này sẽ bao gồm cả hai loại lập trình được hỗ trợ bởi PHP và WordPress.

Rất có thể, nếu bạn đã từng làm việc với Ajax trong quá khứ, thì bạn đã làm một cái gì đó như thế này để cung cấp cho plugin của bạn sự hỗ trợ để thực hiện các cuộc gọi không đồng bộ:

Phương pháp đặc biệt này vốn không sai, nhưng nó bỏ qua một số API mới hơn mà tôi sẽ đề cập đến trong giây lát. Nó cũng trộn tất cả PHP, HTML và JavaScript trong một hàm duy nhất.

Nó không tuyệt vời như nó được công việc làm, nhưng có một cách sạch hơn để làm điều này.

Cách chúng tôi thêm hỗ trợ Ajax

Trước tiên, để đảm bảo rằng plugin không thể được truy cập trực tiếp bởi bất kỳ ai, hãy thêm điều kiện sau ngay dưới tiêu đề của plugin:

Lưu ý rằng thẻ PHP mở sẽ không cần thiết vì mã này sẽ đến sau trong một tệp PHP đã có từ trước (cần thiết cho việc đánh dấu cú pháp ngay bây giờ).

Tiếp theo, chúng ta hãy thiết lập một hàm để bao gồm hỗ trợ WordPress cho Ajax thông qua việc sử dụng một số API hiện có không liên quan đến việc trộn các ngôn ngữ.

Đây là những gì chúng ta cần làm:

  1. Chúng ta sẽ tạo một hàm chịu trách nhiệm cho việc thêm hỗ trợ Ajax.
  2. Chúng ta sẽ móc hàm vào hành động wp_enqueue_script.
  3. Chúng ta sẽ tận dụng cuộc gọi API wp_localize_script để enqueue hỗ trợ của WordPress cho Ajax (mà đến từ admin-ajax.php).

Nó có vẻ đơn giản, phải không? Lưu ý nếu bạn có bất kỳ câu hỏi nào, bạn luôn có thể thêm chúng trong các nhận xét. Kiểm tra mã sau đây để xem bạn có thể theo dõi hay không:

Một lần nữa, lưu ý rằng thẻ PHP mở sẽ không được yêu cầu trong phiên bản cuối cùng của plugin, vì nó chỉ ở đây để tận dụng chức năng tô sáng cú pháp.

Với điều đó đã nói, hãy xem wp_localize_script. Trước khi kiểm tra từng tham số, hãy xem lại mục đích của hàm này. Từ Codex, phiên bản ngắn như sau:

Bản địa hóa tập lệnh đã đăng ký với dữ liệu cho biến JavaScript.

Mô tả dài hơn là quan trọng, mặc dù:

Điều này cho phép bạn cung cấp bản dịch được bản địa hóa đúng đắn của bất kỳ chuỗi nào được sử dụng trong tập lệnh của bạn. Điều này là cần thiết vì WordPress hiện chỉ cung cấp một API bản địa hóa trong PHP, không trực tiếp trong JavaScript.
Mặc dù nội địa hóa là việc sử dụng chính, nó có thể được sử dụng để làm cho bất kỳ dữ liệu nào có sẵn cho tập lệnh của bạn mà bạn thường có thể chỉ nhận được từ phía máy chủ của WordPress.

Bây giờ hãy xem lại các tham số mà nó chấp nhận:

  1. Tham số đầu tiên được gọi là xử lý và được sử dụng để nhận dạng duy nhất tập lệnh đang được thêm vào trang.
  2. Tham số thứ hai là tên và điều này quan trọng vì đó là cách bạn sẽ nhận dạng tập lệnh trong suốt mã của bạn. Bạn sẽ thấy điều này chi tiết hơn sau này trong hướng dẫn.
  3. Tham số thứ ba là tham số dữ liệu. Nó đề cập đến một mảng sẽ được gửi đến trình duyệt như một đối tượng JavaScript. Vì chúng tôi đang chuyển URL của đường dẫn đến tệp, hỗ trợ Ajax sẽ được cung cấp.

Lưu ý tham số đầu tiên là ajax-script. Hãy ghi nhớ điều này khi chúng ta chuyển sự chú ý của chúng ta sang viết và enqueuing JavaScript của chúng ta, vì chúng ta sẽ cần sử dụng điều này một lần nữa.

Ngoài ra hãy nhớ ghi chú tên bạn đã chọn cho lệnh gọi API của bạn, vì chúng tôi sẽ sử dụng tên này khi làm việc với mã phía máy khách sau trong hướng dẫn này.

Một lưu ý quan trọng về hỗ trợ Ajax

Lưu ý rằng chúng ta chỉ sử dụng hook wp_enqueue_script và chúng ta không sử dụng admin_enqueue_script. Điều này là do ajaxurl đã được xác định trong bảng điều khiển.

Điều này có nghĩa là nếu bạn đang tìm kiếm để thực hiện các yêu cầu Ajax trong khu vực quản trị của WordPress, thì bạn không cần phải enqueue bất cứ điều gì. Tất cả mọi thứ chúng tôi đang làm trong bối cảnh của hướng dẫn này là đặc biệt cho front-end của trang web.

Thiết lập mã phía máy chủ của bạn

Bây giờ là lúc để viết một hàm JavaScript của bạn sẽ gọi qua Ajax. Điều này có thể là bất cứ điều gì bạn muốn nó được, nhưng với mục đích của plugin này, chúng tôi sẽ thiết lập một chức năng mà sẽ trả về thông tin về người dùng đăng nhập vào trang web.

Plugin sẽ thực hiện các thao tác sau:

  • Yêu cầu máy chủ yêu cầu thông tin về người dùng hiện tại.
  • Nếu người dùng đăng nhập vào trang web, nó sẽ trả về phản hồi JSON về thông tin của người dùng.
  • Nếu người dùng không đăng nhập, nó sẽ trả về một mã lỗi.

Chúng tôi sẽ sử dụng đối tượng bảng điều khiển có sẵn trong hầu hết các trình duyệt hiện đại, vì vậy hãy đảm bảo bạn đang sử dụng Chrome, Safari hoặc Firefox khi làm việc với nguồn JavaScript bạn sẽ viết.

Yêu cầu

Bây giờ chúng tôi đã vạch ra chính xác cách mã sẽ hoạt động bất cứ khi nào người dùng thực hiện một yêu cầu Ajax đến máy chủ, hãy bắt đầu viết một hàm để thực hiện chính xác điều đó. Chúng tôi sẽ gọi nó là sa_get_user_information.

Triển khai của hàm sẽ đến sau trong hướng dẫn này, nhưng takeaway chính từ đoạn mã trên là chúng ta đã nối vào cả wp_ajax_get_current_user_info và wp_ajax_nopriv_get_current_user_info.

Hai hook này được ghi lại trong Codex, nhưng hook đầu tiên sẽ cho phép những người đăng nhập vào site để truy cập chức năng này. Móc thứ hai sẽ cho phép những người không đăng nhập vào trang này để truy cập chức năng này.

Cũng lưu ý tất cả mọi thứ sau khi wp_ajax_ và wp_ajax_nopriv_ là tùy thuộc vào bạn, như là nhà phát triển, để xác định. Đây sẽ là tên của hàm bạn gọi từ phía máy khách như bạn sẽ thấy sau trong hướng dẫn này.

Xử lý các yêu cầu không đúng

Trước khi triển khai hàm, tệp nguồn JavaScript (chưa được viết) đã được gọi và chúng tôi cần đảm bảo rằng chúng tôi có thể xử lý bất kỳ lỗi nào có thể xảy ra.

Trong trường hợp của chúng tôi, các lỗi tiềm ẩn có thể là:

  1. Không ai đăng nhập.
  2. ID người dùng không tồn tại trong hệ thống.

Rất khó xảy ra trường hợp thứ hai, nhưng nó sẽ giúp chúng ta tìm hiểu thêm về một vài API WordPress và cách chúng ta có thể tận dụng chúng để xử lý các yêu cầu sai.

Điều đầu tiên cần hiểu là WP_Error. Như với nhiều API, điều này có sẵn trong Codex:

Các trường hợp mã lỗi và thông báo lỗi lưu trữ WP_Error đại diện cho một hoặc nhiều lỗi và có hay không một biến là một thể hiện của WP_Error có thể được xác định bằng hàm is_wp_error ().

Hàm khởi tạo sẽ chấp nhận tối đa ba tham số (mặc dù chúng tôi sẽ chỉ sử dụng hai tham số đầu tiên):

  1. Đối số đầu tiên là mã lỗi. Đây là những gì chúng tôi có thể sử dụng ở phía máy khách để phân tích cú pháp và xác định điều gì đã xảy ra. Nó cũng cho phép chúng ta viết thông tin vào một tệp nhật ký và cứ như vậy.
  2. Đối số thứ hai là một thông báo có thể đi kèm với mã lỗi. Điều này rất hữu ích nếu chúng ta muốn hiển thị một tin nhắn cho người dùng.
  3. Đối số cuối cùng là một mảng thông tin, thường là mã lỗi và thông báo. Bất kể, chúng tôi sẽ không sử dụng điều này trong mã của chúng tôi.

Tiếp theo, chúng tôi sẽ gửi kết quả của các lỗi trở lại cho khách hàng bằng cách sử dụng một hàm gọi là wp_send_json_error. Điều này thực sự dễ sử dụng:

Gửi phản hồi JSON trở lại yêu cầu Ajax, cho biết lỗi. Đối tượng phản hồi sẽ luôn có khóa thành công với giá trị false. Nếu bất cứ điều gì được truyền cho hàm trong tham số $ data, nó sẽ được mã hóa dưới dạng giá trị cho khóa dữ liệu.

Bằng cách kết hợp cả WP_Error lẫn wp_send_json_error, chúng ta có thể tạo các hàm sẽ giúp chúng ta cung cấp các mã lỗi cho JavaScript đang gọi phía máy chủ.

Ví dụ: giả sử chúng tôi có chức năng cung cấp lỗi nếu người dùng không đăng nhập vào trang web. Điều này có thể đạt được bằng cách sử dụng chức năng sau:

Lưu ý rằng hàm được đánh dấu là riêng tư mặc dù nó nằm trong không gian tên chung. Nó được đặt trước bằng dấu gạch dưới để biểu thị hàm này nên được coi là riêng tư.

Chúng tôi sẽ xem xét lại điều này trong bài viết tiếp theo.

Thứ hai, chúng ta cần xử lý trường hợp nếu người dùng không tồn tại. Để thực hiện điều này, chúng ta có thể tạo một hàm thực hiện như sau:

Bây giờ chúng ta có hai chức năng, mỗi chức năng sẽ gửi thông tin lại cho máy khách nếu có điều gì đó không thành công, nhưng chúng ta phải làm gì nếu cả hai chức năng này đều được truyền?

Xử lý các yêu cầu thành công

Nếu các chức năng trên không mang lại bất kỳ lỗi nào, thì chúng tôi cần phải có cách gửi yêu cầu lại cho khách hàng bằng một thông điệp thành công và thông tin mà nó yêu cầu.

Cụ thể, chúng tôi cần gửi thông tin trở lại cho khách hàng bao gồm thông tin của người dùng hiện tại ở định dạng JSON.

Để làm điều này, chúng ta có thể tận dụng thông điệp wp_send_json_success. Nó thực hiện chính xác những gì bạn nghĩ rằng nó sẽ làm, quá:

Gửi phản hồi JSON trở lại yêu cầu Ajax, cho biết thành công. Đối tượng phản hồi sẽ luôn có khóa thành công với giá trị đúng. Nếu bất cứ điều gì được truyền cho hàm, nó sẽ được mã hóa làm giá trị cho khóa dữ liệu.

Hãy kết hợp công việc mà chúng ta đã làm từ trước đến nay để viết một hàm JavaScript cuối cùng sẽ gọi và tận dụng hai hàm nhỏ hơn mà chúng ta đã đặt ở trên. Trong thực tế, đây sẽ là việc thực hiện hàm mà chúng ta đã bỏ ra trước đó trong hướng dẫn này:

Nếu người dùng đăng nhập và người dùng tồn tại, thì chúng tôi sẽ gửi một thông báo thành công cho khách hàng có chứa biểu diễn JSON của người dùng. Tại thời điểm này, đã đến lúc viết một số JavaScript.

Yêu cầu phía ứng dụng khách

Đầu tiên, thêm một tệp có tên frontend.js vào thư mục gốc của thư mục plugin của bạn. Ban đầu, mã phải bao gồm mã sau:

Việc triển khai chức năng sẽ được đề cập trong giây lát, nhưng chúng tôi cũng cần đảm bảo rằng chúng tôi cũng đang enqueuing tệp JavaScript này trong plugin. Quay lại hàm sa_add_ajax_support và thêm phần sau đây vào cuộc gọi đến wp_localize_script:

Hãy nhớ rằng tập lệnh này phải có cùng một xử lý như được định nghĩa trong wp_localize_script. Bây giờ chúng ta có thể xem lại tệp JavaScript của chúng ta và thực hiện cuộc gọi đến mã phía máy chủ mà chúng tôi đã làm việc trong toàn bộ bài viết này.

Trong frontend.js, thêm mã sau:

Với số lượng nhận xét trong mã và giả sử bạn quen thuộc với việc viết các plugin WordPress và có một số kinh nghiệm với Ajax, nên tương đối dễ dàng để làm theo.

Tóm lại, đoạn mã trên thực hiện cuộc gọi đến phía máy chủ khi trang được tải và sau đó ghi thông tin vào bảng điều khiển của trình duyệt về người dùng hiện tại.

Nếu người dùng đăng nhập, thì thông tin được ghi ra bàn điều khiển dưới dạng đối tượng JavaScript vì nó được phân tích cú pháp từ JSON.

Mặt khác, nếu người dùng không đăng nhập, thì một đối tượng khác sẽ được viết ra hiển thị mã lỗi cùng với thông báo, tất cả những gì bạn có thể thấy trong bảng điều khiển.

Tổng kết

Bây giờ, bạn cần phải có một sự hiểu biết rõ ràng về các API WordPress có sẵn để làm việc với các yêu cầu Ajax cho những người dùng đã đăng nhập vào trang web và cho những người không có.

Cuối cùng, mục tiêu của chúng tôi là viết mã sạch, dễ bảo trì nhất có thể để chúng tôi có khả năng tiếp tục làm việc với mã này khi chúng tôi chuyển sang tương lai. Ngoài ra, chúng ta nên viết mã như thế này để những người khác có thể chạm vào codebase của chúng tôi có một sự hiểu biết rõ ràng về những gì chúng tôi đang cố gắng làm và cũng đang sử dụng các phương pháp hay nhất cho môi trường của chúng tôi.

Trong hướng dẫn này, tôi đã sử dụng một dạng lập trình thủ tục cho tất cả các mã được chia sẻ, trình diễn và cung cấp qua GitHub. Như đã đề cập trước đây, không có gì sai với điều này, nhưng tôi nghĩ rằng nó đáng xem cái này trông như thế nào từ quan điểm hướng đối tượng.

Trong hướng dẫn tiếp theo, chúng ta sẽ xem xét việc tái cấu trúc mã này thành một mô hình hướng đối tượng cũng sử dụng các tiêu chuẩn mã hóa WordPress để có thêm tài liệu về công việc của chúng ta.

Hãy nhớ rằng, bạn có thể nắm bắt tất cả các khóa học và hướng dẫn trên trang tiểu sử của tôi và bạn có thể theo dõi tôi trên blog và / hoặc Twitter của tôi tại @tommcfarlin nơi tôi nói về phát triển phần mềm trong ngữ cảnh của WordPress và trò chuyện với những người khác về cùng chủ đề (cũng như những thứ khác nữa).

Trong thời gian chờ đợi, vui lòng để lại bất kỳ câu hỏi hoặc nhận xét nào trong nguồn cấp dữ liệu bên dưới và tôi sẽ cố gắng trả lời từng câu hỏi hoặc nhận xét.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.