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

Cách tạo một Hệ thống thông báo trong WordPress, Phần 3

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 2
Creating a Custom WordPress Messaging System, Part 4

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

Đến lúc này của loạt bài, chúng ta đã thiết lập một nền tảng cho plugin của chúng ta, định nghĩa một hook tuỳ biến, và gắn lên đó một thông báo cố định để chỉ ra cách mà chúng ta có thể tận dụng hook đã nói.

Mặc dù vậy những gì mà chúng ta chưa làm xong, là cài đặt các kiểu thông báo khác nhau, cho phép người dùng nhập vào và hiển thị thông báo dựa trên kết quả của đầu vào mà người dùng cung cấp.

Nhưng trước khi chúng ta làm điều đó, chúng ta cần thêm trợ giúp đối với các kiểu thông báo, một lớp Interface sẽ hỗ trợ mỗi kiểu thông báo, và cấu trúc dữ liệu cần thiết để lưu trữ nhữ thông báo như vậy.

Bạn đã sẵn sàng để bắt đầu rồi chứ?

Tôi đang háo hức để tiếp tục bài hướng dẫn này, nhưng có một số thứ mà chúng ta cần xem lại trước khi trở lại với mã nguồn. Hãy đảm bảo là hệ thống của bạn được cài đặt những phần mềm sau:

  • PHP 5.6.25 và MySQL 5.6.2
  • Apache hoặc Nginx
  • WordPress 4.6.1
  • Trình soạn thảo hay IDE mà bạn thích

Và nếu bạn đang tìm kiếm một giải pháp tất cả trong một thì đừng quên thử MAMP:

Con đường còn dài

Như đã đề cập từ trước, chúng ta đang ở ngay giữa của loạt bài này. Nếu bạn đã bỏ lỡ bất kỳ hướng dẫn trước đó, thì dưới đây là những gì mà chúng tôi đã khái quát cho đến lúc này:

  1. Trong hướng dẫn đầu tiên, chúng ta tập trung vào nền tảng tối thiểu cho plugin của chúng ta và những gì mà chúng ta cần để bắt đầu.
  2. Trong bài thứ hai, chúng ta nâng plugin lên cao hơn một chút bằng cách thêm một trang quản trị WordPress rất đơn giản. Chúng ta cũng gọi hook tuỳ biến mà chúng ta sử dụng, và chúng ta gắn nó lên trên server. Chúng ta cũng bắt đầu đặt nền móng cho Settings Messenger của chúng ta.

Và dưới đây là những gì mà chúng ta sẽ xem xét trong hướng dẫn cúng cùng:

  1. Chúng ta sẽ kết thúc bằng cách gom mọi thứ lại với nhau, xem chúng hoạt động, và hoàn chỉnh plugin để có thể xuất bản và có thể được tải về.

Tuy nhiên, bây giờ chúng ta có công việc khác để tập trung vào.

Trở lại công việc

Khi chúng ta trở lại công việc (và như chúng ta đã xem xét trong các hướng dẫn trước), chúng ta sẽ tìm hiểu các cài đặt sau trong phần này của loạt bài.

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.

Trong bài viết gần nhất, chúng ta đã bắt đầu làm việc trên Settings Messenger, nhưng cho đến lúc này chỉ là thiết lập một hàm mà sẽ hiển thị cố định một thông báo thành công một khi trang tuỳ biến của chúng ta được nạp.

The permanent success message we displayed in the last tutorial

Trong hướng dẫn này, chúng ta sẽ thêm hỗ trợ cho các thông báo lỗi, cảnh báo và thành công. Chúng ta cũng sẽ hiển thị chúng trên màn hình để chúng ta có thể có được một cảm nhận về cách messenger sẽ hoạt động như thế nào.

Ngoài ra, chúng ta sẽ tạo ra một thay đổi để hỗ trợ cho việc bỏ qua các thông báo theo ý của người dùng.

Với điều này cũng như kế hoạch của chúng ta cho công việc mà chúng ta cần làm trong hướng dẫn này, chúng ta hãy bắt đầu thôi!

Mở rộng Settings Messenger

Hãy nhớ rằng toàn bộ mục đích của Settings Messenger là xác định một cách để cho chúng ta làm việc với các thông báo tuỳ biến, hook tuỳ biến, và WordPress API gốc cho việc hiển thị các thông báo trong ngữ cảnh của khu vực quản trị trong WordPress.

Để làm điều này, chúng ta sẽ mở rộng công việc mà chúng ta đã làm trong hướng dẫn trước và tiếp tục phát triển công việc của chúng ta từ đây.

Các thông báo thành công

Vì chúng ta đã bắt đầu với thông báo thành công trong bài hướng dẫn trước, nễn hãy đến và bắt đầu từ đó. Ngay bây giờ, chúng ta có một phương thức bằng tay để hiển thị một thông báo:

Về mặt ý tưởng, tôi muốn giới thiệu một cấu trúc dữ liệu mà sẽ hỗ trợ nhiều thông báo, một hàm sẽ cho chúng ta khả năng thêm bao nhiêu thông báo tuỳ thích, và một hàm sẽ cho phép chúng ta kết xuất tất cả các thông báo thành công.

Đầu tiên, chúng ta sẽ bắt đầu với một mảng: Đây sẽ là một thuộc tính riêng tư (private) của lớp, và nó sẽ được khởi tạo trong hàm xây dựng (thi công). Phần khởi tạo của Settings_Messenger bây giờ sẽ trông giống thế này:

Và như bạn có thể thấy, chúng ta đã định nghĩa một cách chính xác những gì chúng ta đã nói, ngoại trừ rằng chúng ta vẫn chưa định nghĩa một phương thức cho việc thêm các thông báo của riêng chúng ta, và chúng ta vẫn chưa định nghĩa một phương thức để kết xuất các thông báo của chúng ta.

Vì vậy hãy làm điều đó ngay bây giờ. Đầu tiên, hãy thêm một phương thức sẽ cho phép chúng ta thêm các thông báo của chính chúng ta.

Lưu ý ở đây rằng chúng ta đang sử dụng hàm sanitize_text_field để lọc dữ liệu đưa vào trong mảng. Bạn có thể lọc dữ liệu một cách nghiêm ngặc hay dễ dãi tuỳ theo ý thích của bạn. Tôi đã chọn phương thức đặc biệt này vì nó giúp đạt được mục tiêu lọc dữ liệu mà không làm chệch hướng khỏi mục tiêu  chính của bài hướng dẫn này.

Bây giờ hãy định nghĩa một phương thức sẽ giúp chúng ta kết xuất các thông báo lên phần front-end:

Phải thừa nhận rằng, phương thức này có thể được cấu trúc lại, và tôi sẽ đề cập đến điều này trong phần kết luận của bài viết này.

Tuy nhiên bây giờ, hãy kiểm thử cái này. Hãy thử code sau đây trong tập tin tutsplus-custom-message.php và sau đó nạp lại màn hình quản trị mà chúng ta đã sử dụng trong suốt loạt bài hướng dẫn này.

Cứ cho là tất cả mọi thứ đã được thực hiện một cách chính xác, bạn sẽ thấy một thứ gì đó trông như thế này:

Multiple success messages

May mắn thay, thêm hai kiểu thông báo tiếp theo là rất giống những gì chúng ta đã thực hiện trong phần này.

Các thông báo mang tính cảnh báo

Hỗ trợ thêm các thông báo cảnh báo sẽ giống hoàn toàn với những gì mà chúng ta đã thực hiện trước đó; tuy nhiên, thay vì đặt tên mảng và các hàm liên quan của chúng ta bằng tên đại loại như thành công, thì chúng ta sẽ đặt tên chúng liên quan đến cảnh báo. 

Vì vậy đầu tiên hãy thêm mảng chứa các thông báo của chúng ta:

Sau đó hãy thêm các hàm sẽ cho phép chúng ta thêm các cảnh báo đến messenger:

Và cuối cùng, hãy thêm một hàm để hiển thị thông báo khi cần thiết (lưu ý rằng chúng ta đang sử dụng tên lớp notice-warning khi tạo phần tử div):

Lưu ý rằng việc bạn chọn để hiển thị các thông báo cụ thể là tuỳ thuộc vào bạn. Bạn có thể chọn để hiển thị điều này bằng sự kết hợp với các thông báo thành công, hoặc bạn có thể chọn để hiển thị điều này hoàn toàn riêng biệt.

Đối với hướng dẫn này, tôi sẽ giữ nó đơn giản và chỉ hiển thị thông báo cảnh báo tại một thời điểm. Vì vậy, tôi sẽ thêm dòng code sau vào tập tin chính của plugin:

Tôi sẽ cập nhật hook trong phương thức init của Settings_Messenger:

Và sau đó tôi sẽ làm mới lại trang. Giả sử bạn đã làm giống hoàn toàn với code ở trên thì bạn sẽ thấy một kết quả gần giống như thế này:

A demonstration of a warning message

Nếu không, hãy kiểm tra lại code của bạn hoặc tải về tập tin dự án đính kèm cho hướng dẫn này, và chúng ta sẽ bắt đầu từ đó.

Các thông báo lỗi

Cuối cùng, chúng ta hãy làm điều tương tự cho các thông báo lỗi. Chúng ta sẽ lặp lại giống hoàn toàn với những gì mà chúng ta đã thực hiện ở phần trên, do đó, lần này nó trở nên khá dễ dàng.

Trước tiên, chúng ta cần phải thêm một thuộc tính sẽ nắm giữ mảng nơi chúng ta sẽ lưu trữ các thông báo lỗi của chúng ta:

Thứ hai, chúng ta cần phải thêm một hàm cho phép chúng ta thêm vào danh sách lỗi:

Và sau đó chúng ta cần khả năng hiển thị chúng:

Để thêm các thông báo của riêng bạn, hãy quay trở lại tập tin chính của plugin và thêm code sau đây:

Tiếp theo, cập nhật hàm init trong Settings_Messenger, và bạn sẽ thấy thứ gì đó giống thế này khi bạn làm mới lại trang web:

A list of error messages

đó là cách bạn thêm các thông báo tuỳ biến vào trang quản trị của bạn bằng cách sử dụng hook tuỳ biến. Nhưng chúng ta vẫn còn một điều nữa để giới thiệu trước khi kết thúc bài viết này.

Bỏ qua thông báo

Trước khi chúng ta đi đến kết luận, tôi muốn cho bạn thấy cách chúng ta có thể làm cho các thông báo của chúng ta có thể được bỏ qua, hay đơn giản hơn, là có thể được huỷ bỏ bởi người dùng. Để làm điều này, chúng ta có thể tận dụng lợi thế của tính năng đã được xây dựng sẵn trong WordPress.

Vì chúng ta vừa mới làm việc trên các thông báo lỗi, nên tôi sẽ sử dụng các thông báo lỗi như là một ví dụ. Khi xây dựng mã HTML cho các thông báo lỗi, hãy thêm một tên lớp vào phần tử div có chứa thông báo.

Có nghĩa là, thêm is-dismissible:

Thật đơn giản, phải không? Bạn có được một biểu tượng cho phép người dùng nhấp chuột vào đó, và khi họ làm điều đó, thông báo sẽ biến mất.

Đó là tính năng tuyệt vời phù hợp với trải nghiệm người dùng WordPress mà không cần tốn nhiều công sức để cài đặt.

Kết luận

Bây giờ chúng ta có một Settings_Messenger có thể vận hành khá tốt. Chúng ta có thể thêm các thông báo thành công, lỗi và cảnh báo. Chúng ta có thể bỏ qua các thông báo. Chúng ta có thể quản lý điều này hoàn toàn không phụ thuộc vào bất cứ thứ gì mà WordPress có thể đang làm.

Nếu nếu bạn đã đọc các bài hướng dẫn trước, bạn sẽ biết rằng tôi không phải là một người hâm mộ việc lặp lại code. Hoặc tôi không phải là một người hâm mộ việc có một lớp mà thực hiện nhiều thứ. Và, không may đó chính xác là những gì mà chúng ta đang làm ở đây.

Đối với mục đích của bài hướng dẫn này, tôi không có ý định cấu trúc lại code ở trong ví dụ này. Chúng ta đã đi qua kiểu cài đặt này trước đây. Hơn nữa, mục đích của những gì mà chúng ta đang làm là chỉ ra cách làm việc với các thông báo lỗi, chứ không phải là cách áp dụng các kỹ thuật tiên tiến nhất của lập trình hướng đối tượng, tất nhiên chúng ta có thể làm vậy (điều đó rất tuyệt, chẳng phải vậy sao?).

Tùy thuộc vào phản hồi mà tôi nhận được cho loạt bài này, có thể chúng tôi sẽ xem xét và cấu trúc lại nó, vì vậy, chúng ta có thể thấy bao nhiêu công việc có thể được thực hiện và bao nhiêu cách có thể được áp dụng.

Trong khi bạn chờ đợi cho bài hướng dẫn tiếp theo được xuất bản, hãy lưu ý rằng tôi cũng luôn luôn rất vui được trả lời câu hỏi qua phần bình luận, và bạn cũng có thể xem blog của tôi và theo dõi tôi trên Twitter. Tôi thường nói về việc phát triển phần mềm trong WordPress cũng như các chủ đề liên quan.

Từ đây cho đến lúc đó, hãy tải về mã nguồn sẵn có, so sánh nó với những gì mà chúng ta có ở đây, và hãy chắc chắn chạy nó trên máy tính cục bộ của bạn từ đó để bạn quen với những thứ còn lại khi chúng ta chuyển đến phần cuối cùng của loạt bài này.

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.