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

Tạo một Hệ thống thông báo tuỳ biến trong WordPress, phần 2

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Custom WordPress Messaging System.
Creating a Custom WordPress Messaging System, Part 1
Creating a Custom WordPress Messaging System, Part 3

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

Nếu bây giờ bạn đã theo kịp loạt bài viết này, thì chúng ta đang ở trong quá trình xây dụng hệ thống thông báo tuỳ biến của chính chúng ta gắn vào trong WordPress, cho phép chúng ta tận dụng một số API sẵn có, nhưng đồng thời cũng cho phép chúng ta có một chút kiểm soát.

Từ bài hướng dẫn trước:

Nhưng như chúng ta vừa đã tìm hiểu về cách tạo các trang quản trị tuỳ biến, chúng ta còn có thể cài đặt một hệ thống cho phép chúng ta lập trình các thông báo tuỳ biến của chính mình, kiểu của chúng, khi nào và nơi nào để hiển thị chúng trên trang quản trị.

Cho dù không bắt buộc bạn đọc loạt bài trước đó, nhưng tôi thành thật khuyên bạn nên đọc bài hướng dẫn trước của bài này. Mỗi bài này xây dựng dựa trên nền tảng của bài trước đó (và chúng ta sẽ tiếp tục thực hiện điều đó đối với những bài còn lại).

Như đã nói ở trên, toàn bộ mục đích của loạt bài này là một sự giới thiệu về cách chúng ta có thể tận dụng WordPress API và lập trình hướng đối tượng để tạo một hệ thống thông báo tuỳ biến để chúng ta có thể sử dụng trong công việc mà chúng ta có thể làm cho một khách hàng.

Nhưng trước khi chúng ta bắt đầu, có một số yêu cầu mà bạn nên biết trước.

Trước khi bạn bắt đầu

  • Đọc bài hướng dẫn trước.
  • Cài đặt PHP 5.6.25 và MySQL 5.6.28.
  • Cài đặt Apache hoặc Nginx.
  • Thiết lập WordPress 4.6.1.
  • Cài sẵn trình soạn thảo hay IDE yêu thích của bạn.

Nếu bạn đang tìm kiếm một giải pháp tất cả trong một, hãy kiểm tra MAMP, và nếu bạn đang quan tâm đến việc làm thế nào tất cả điều này kết hợp với nhau, thì hãy xem những bài viết này.

Lộ trình của chúng ta

Trong trường hợp bạn chưa đọc bài hướng dẫn trước đó, thì lộ trình mà chúng ta đã thiết lập cho bài học này như sau:

  1. Trong hướng dẫn này, chúng ta sẽ đặt nền móng cơ bản cho plugin của chúng ta và những gì chúng ta cần để bắt đầu.
  2. Trong phần thứ hai, chúng ta sẽ nâng cấp plugin của chúng ta lên một mức độ cao hơn một chút bằng cách thêm một trang quản trị cơ bản của WordPress. Chúng ta cũng sẽ gọi một hook tuỳ biến mà chúng ta sẽ sử dụng, và chúng ta sẽ gắn nó lên server. Chúng ta cũng sẽ đặt nền móng cho Settings Messenger của chúng ta.
  3. Trong hướng dẫn này, chúng ta sẽ bắt đầu cài đặt Settings Messenger của chúng ta bằng cách thêm hỗ trợ cho các thông báo lỗi và thành công cũng như khái quát một số điểm về bảo mật.
  4. Chúng ta sẽ gom tất cả mọi thứ lại với nhau, xem chúng hoạt động, và tạo plugin hoàn chỉnh để có thể tải về.

Rõ ràng, chúng ta đã xong phần số một. Vì vậy trong hướng dẫn này, chúng ta sẽ tập trung cụ thể vào việc thêm một trang quản trị cơ bản và thiết lập một hook tuỳ biến mà sẽ cho phép chúng ta tận dụng trình thông báo tuỳ biến của chúng ta.

Quay trở lại công việc

Với tất cả những khái quát đó, hãy quay trở lại việc phát triển. Hãy nhớ lại rằng, tại thời điểm này, chúng ta đã thiết lập nền tảng cho plugin vì thế chúng ta có thể kích hoạt nó và điều hướng đến Settings và sau đó là Tuts+ Custom Message Example để xem một trang quản trị thông thường.

Nếu bạn đã theo dõi, thì đến lúc này code cho trang này là cực kỳ đơn giản (và chúng ta sẽ thấy một ảnh chụp màn hình của nó ở phần sau của bài viết này):

Tôi đang lặp lại điều này bởi vì đây là nơi chúng ta sẽ bắt đầu cài đặt trình thông báo tuỳ biến của chính chúng ta.

Để làm điều này, chúng ta cần phải giới thiệu những thứ sau đây:

  1. một hook mà chúng ta định nghĩa
  2. một hàm được đăng ký với hook
  3. hiển thị một cái gì đó khi hàm đó được thực thi

Định nghĩa một hook tuỳ biến

Định nghĩa một hook tuỳ biến nghe có vẻ đáng sợ. Hầu hết tất cả chúng ta đều quen với việc gọi add_actionadd_filter, nhưng bằng cách nào chúng ta có thể sử dụng những hàm này để tạo một lời gọi tới các hook của chính chúng ta?

Đơn giản: Chúng ta sử dụng do_action và định nghĩa action của chúng ta mà chúng ta sẽ đăng ký với WordPress. Lấy ví dụ code ở trên, và ngay bên dưới thẻ h1, chúng ta hãy làm như sau:

Không tệ, phải không? Bây giờ, chúng ta cần phải đăng ký một hàm mà sẽ chạy bất cứ khi nào mà hook được gọi. Tuy nhiên, trước khi chúng ta làm điều đó, tôi muốn đảm bảo rằng chúng ta đang ở trên cùng một trang như những gì do_action thực hiện.

Dưới đây là những gì mà tài liệu hướng dẫn nói về do_action:

Hàm này gọi tất cả các hàm được gắn với action hook $tag. Có thể tạo mới các action hook bằng cách gọi hàm này, chỉ định tên của hook mới sử dụng tham số $tag.

Nếu định nghĩa vẫn chưa rõ, có lẽ việc cài đặ sẽ giúp bạn dễ hiểu hơn. Vì vậy chúng ta hãy xem xét nó ngay bây giờ.

2. Đăng ký một hàm

Cũng như chúng ta thực hiện với bất kỳ kiểu hàm nào khác, chúng ta cần đăng ký một hàm mà sẽ chạy khi nào hook tutsplus_settings_messages của chúng ta được thực thi. Nhưng vì chúng ta đang làm việc với lập trình hướng đối tượng, chúng ta sẽ cần thiết kế một lớp định nghĩa hàm này.

Và đây là nơi thiết lập trình thông báo tuỳ chỉnh bắt đầu phát huy tác dụng. Cứ cho là vậy, chúng ta sẽ không làm nhiều việc theo quan điểm của việc thêm các thông báo tuỳ biến, nhưng chúng ta sẽ sử dụng hook tuỳ biến của chúng ta, và chúng ta sẽ kết xuất thứ gì đó trên trang.

Hơn nữa, chúng ta sẽ đặt nền móng của lớp mà chúng ta sẽ cải tiến trong các bài học sắp tới. Từ đây, thêm tập tin class-settings-messenger.php vào thư mục admin trong plugin của bạn (và đừng lo lắng, tất cả điều này sẽ có sẵn để tải về).

Hãy nhớ rằng chúng ta không sử dụng namespace (không gian tên) hoặc autoloader (nạp tự động) trong hướng dẫn này (mặc dù chúng ta đã khái quát chúng trước đó). Lưu ý rằng tôi sẽ đưa ra code cho phương thức init trong giây lát nữa.

Bây giờ, quay trở lại tập tin khởi động của plugin, tutsplus-custom-message.php, và thêm code sau vào hàm chính:

Bây giờ chúng ta hãy xem xét lại hàm init trong Settings_Messenger và hook nó đến action tùy biến của chúng ta.

Lưu ý đoạn code ở trên, đối số đầu tiên mà chúng ta truyền vào add_action là tên hook tùy biến của chúng ta. Thứ hai sẽ là một phương thức mà sẽ kết xuất một thông báo trên trang quản trị. Chúng ta vẫn chưa viết nó (vì vậy, nếu bạn cố gắng chạy đoạn code này, bạn sẽ nhận được một lỗi).

Nhưng chúng ta hãy thay đổi nó.

3. Hiển thị một thông báo tùy biến

Đầu tiên, tạo ra một hàm trong lớp Settings_Messenger được gọi là display_message, và chúng ta hãy chỉ đơn giản là hiển thị một câu để xem nó có hiển thị trong trang tuỳ biến mà chúng ta đã tạo ra hay không:

Và khi bạn thực thi code, bạn sẽ thấy một cái gì đó như thế này. Xem kỹ bên dưới thẻ h1 và bạn sẽ thấy câu mà chúng ta đã bao gồm ở trên.

An example of the message we want to display

Tuy nhiên đây là vấn đề: Thông báo mà chúng ta hiển thị không hợp với bất kỳ đánh dấu nào mà WordPress sử dụng để hiển thị các thông báo thành công, cảnh báo hoặc lỗi.

Chúng ta sẽ khái quát điều này chi tiết trong phần sau của loạt bài này, còn bây giờ hãy hiện thị một thông báo thành công. Sau tất cả, chúng ta đã đi khá xa, đúng không? Chúng ta đang hiển thị thông báo riêng của chúng ta thông qua một hook tùy biến bằng cách sử dụng một lớp messenger mà chúng ta đã tạo.

Có một số cách trong đó chúng ta có thể làm điều này: Chúng ta có thể sử dụng một tập tin template, chúng ta có thể sử dụng mã đánh dấu trong hàm và lọc dữ liệu ở đó, hoặc chúng ta có thể bao gồm tập tin trong hàm. Đối với mục đích của bài viết này, tôi sẽ tạo mã đánh dấu ở trong hàm và sử dụng wp_kses để lọc code.

Tôi không khuyên bạn làm theo cách này, nhưng đây một cách mà nó có thể được thực hiện, và nó cũng trình bày cho chúng ta wp_kses, nó là một hàm mà chúng ta nên sử dụng khi kết xuất các thông tin trên trình duyệt.

Sử dụng code này:

Và điều này sẽ cho chúng ta kết quả như ảnh minh hoạ sau đây:

An example of the success message

Lưu ý ở đây rằng thông báo là cố định. Không có nút save, không có cách nào để ẩn thông báo này, và không có cách nào để thay đổi thông báo này ngoài code. Nhưng không sao, bởi vì nó không phải là mục tiêu của bài tập này.

Tuy nhiên một số thứ mà tôi muốn đề cập:

  • Các thuộc tính của lớp trên phần tử div mà bạn thấy được mượn trực tiếp từ WordPress. Điều này có nghĩa là chúng ta có thể thừa kế những phong cách đó.
  • Một số thông báo có thể được bỏ qua. Chúng ta sẽ khái quát điều này trong bài hướng dẫn sau này.
  • Mảng $allowed_html được truyền vào wp_kses là những thứ cần được đảm bảo là không có gì khác ngoài các phần tử và thuộc tính cụ thể được kết xuất: Nó là một cách tốt, manh mẽ và gọ gàng để lọc dữ liệu.

Và đó là tất cả những gì mà hướng dẫn này muốn bao quát; tuy nhiên, chúng ta chỉ mới bắt đầu.

Kết luận

Khi chúng ta tiến hành xuyên suốt loạt bài này, chúng ta sẽ có một cái nhìn về cách xử lý các thống báo thành công, lỗi và cảnh báo, và cách huỷ thông báo.

Xa hơn, chúng ta sẽ có thể thấy cách sử dụng trường nhập liệu từ người dùng để điều khiển kiểu của thông báo được hiển thị.

Lưu ý rằng tôi cũng luôn sẵn lòng trả lời những câu hỏi thông qua phần bình luận, và bạn cũng có thể xem qua blog của tôi và theo dõi tôi trên Twitter. Tôi thường nói về phát triển phần mềm bên trong WordPress cũng như những chủ đề có liên quan.

Từ đây cho đến bài hướng dẫn tiếp tiếp theo, hãy nghiên cứu về code, tải về các tập tin, và xem cách nó chạy trên máy chủ cục bộ của bạn. Trong phần tiếp theo, tôi sẽ tiếp tục từ nơi mà chúng ta còn đang dang dở.

Các nguồn tài nguyên

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.