Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Những thông báo admin liên tục của WordPress: Phần 4

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Persisted WordPress Admin Notices.
Persisted WordPress Admin Notices: Part 3

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

Cho đến nay trong loạt bài này, chúng tôi đã giới thiệu hai cách riêng biệt để loại bỏ thông báo admin liên tục của WordPress . Chúng tôi sẽ xây dựng tiếp phần thứ tư này và là cuối cùng của loạt bài hướng dẫn bằng cách xem xét hai phương pháp cụ thể hơn để loại bỏ hẳn luôn những thông báo admin của bạn. Chúng tôi sẽ hoàn thành nhiệm vụ này bằng việc chỉ ra cách tạo các loại thông báo admin của riêng bạn và bổ sung phần trang trí, chẳng hạn như các icon (biểu tượng).

Thông báo admin cố định

Chúng tôi đã biết làm thế nào để hiển thị một thông báo admin có thể loại bỏ được. Tất cả những gì chúng ta phải làm là thêm class CSS is-dismissible vào thành phần div đang chứa thông báo đó. Tuy nhiên, đây chỉ là tạm thời và sẽ chỉ loại bỏ thông báo cho trang hiện tại. Ngay sau khi trang tải lại, nó sẽ xuất hiện trở lại.

Để thực hiện việc loại bỏ hẳn thông báo sẽ tác động đến code nhiều hơn chúng ta đã từng thấy trước đó, nhưng không quá khó thực hiện. Chúng ta hãy cùng xem xét những gì có liên quan, bắt đầu với một cái nhìn tổng quát.

Chúng tôi sẽ sử dụng tùy chọn riêng để lưu trạng thái hiển thị của thông báo admin của chúng tôi. Khi kích hoạt plugin, tùy chọn này sẽ được created/update (tạo mới/cập nhật) và được xét thành true. Thông báo admin sẽ chỉ hiển thị nếu lựa chọn này hiện thời xét là true.

Chìa khóa cho phương pháp này là sử dụng Ajax để cho phép chúng ta xét chọn lựa này thành false khi nhấn nút Dismiss (loại bỏ). Sau khi xét thành false, đoạn code điều kiện để kiểm tra trạng thái tùy chọn sẽ không thành công và thông báo admin sẽ không còn được hiển thị nữa.

Hãy bắt đầu bằng cách bổ sung thông báo admin của chính nó, mà sẽ là một thông báo đơn giản để bắt đầu. Trong Gwyer_Dismissible_Admin_Notices::init(), bổ sung gọi hàm add_action mới:

Sau đó thêm hàm callback dismiss_admin_notice() cho cùng một class:

Nó bổ sung một thông báo admin, nó hiển thị không chỉ trên trang admin của plugin và tương tự với điều mà chúng ta đã nhìn thấy ở những bài hướng dẫn trước. Sự khác biệt duy nhất ở đây là chúng tôi cũng đã thêm một ID CSS vào thành phần div chứa thông báo admin. Điều này sẽ được sử dụng để nhắm mục tiêu cụ thể thông báo admin mà chúng tôi quan tâm.

Standard admin notice with custom CSS ID

Chúng ta cần phải thêm mã JavaScript để gọi Ajax, do đó, thêm một thư mục js trong thư mục gốc admin-notices và bên trong đó tạo thêm một file có tên admin-notices.js. Thêm đoạn code vào file mới để kiểm tra xem nó có đang tải đúng không, bằng cách xuất ra một thông điệp trên console.

Trong hàm Gwyer_Plugin_Options::init(), gọi thêm một hàm add_action để enqueue (tham chiếu lần lượt) những file script của chúng ta:

Chúng tôi chỉ muốn file JavaScript này được tải lên trang tùy chọn của plugin, vì vậy chúng tôi cần một cách để tham chiếu đến nó theo điều kiện. Chúng tôi có thể thực hiện việc này bằng cách kiểm tra xem liệu chúng ta có phải là trang quản trị của plugin của chúng ta.

Chúng ta có thể xử lý một trang tuỳ chọn plugin của chúng ta bằng cách lưu trữ giá trị được trả về của hàm add_options_page() trong một thuộc tính của class. Trước đây, chúng tôi không cần giá trị này, vì vậy chúng tôi chỉ gọi hàm add_options_page () mà không phải lưu giá trị trả về.

Thêm một thuộc tính của class Gwyer_Plugin_Options:

Sau đó, ở hàm create_admin_menu_page(), sử dụng thuộc tính mới này để lưu phần xử lý của trang tuỳ chọn của plugin của chúng ta:

Cuối cùng chúng ta có thể enqueue file JavaScript của chúng ta để nó chỉ tải khi ở trang tuỳ chọn của plugin:

Nếu tất cả ổn thì bạn sẽ thấy một thông điệp là admin-notices.js loaded! được xuất ra trên console của trình duyệt.

Admin notice JavaScript loaded

Cập nhật JavaScript code cho file admin-notices.php như sau:

Ở đây, chúng ta lắng nghe sự kiện click của CSS ID an1 chúng ta đã bổ sung vào thông báo admin trước đó. Ngay khi nó được click, một yêu cầu Ajax được gửi đi. Tiếp đến, hãy xử lý yêu cầu đó.

Trong Gwyer_Dismissible_Admin_Notices::init(), gọi thêm hàm add_action:

Nó sẽ chạy hàm callback khi yêu cầu Ajax của display_dismissible_admin_notice được gửi đi. Hãy nhớ rằng ban đầu nó được định nghĩa trong thuộc tính data.action trong yêu cầu Ajax của chúng ta.

Giờ bổ sung hàm callback display_dismissible_admin_notice vào class Gwyer_Dismissible_Admin_Notices:

Lưu thay đổi của bạn lại, tải lại trang tuỳ chọn của plugin. và click vào button dismiss (loại bỏ) của thông báo admin để xem yêu cầu Ajax hoạt động!

The Ajax request in action

Nếu yêu cầu thành công thì bạn sẽ thấy một thông điệp Processing Ajax request...DONE! được hiển thị trên console của trình duyệt.

Mảnh ghép cuối cùng của câu đó là tạo một tuỳ chọn mới để xét giá trị ban đầu thành true nhưng sau đó nó được đổi thành false khi button dismiss được nhấn vào. Sau đó, khi trang tuỳ chọn của plugin được tải, thông báo admin chỉ xuất hiện nếu giá trị tuỳ chọn mới là true.

Trong hàm Gwyer_Dismissible_Admin_Notices::init(), gọi thêm một hàm register_activation_hook():

Sau đó bổ sung thêm hàm callback create_custom_option vào class:

Bây giờ, khi plugin được kích hoạt, một tuỳ chọn mới gọi là gwyer-dismiss được tạo ra và xét là true.

Cập nhật display_dismissible_admin_notice() để thay đổi giá trị tuỳ chọn mới của chúng ta khi yêu cầu Ajax gửi đi:

Bây giờ điều còn lại phải làm là cập nhật hàm dismiss_admin_notice() để kiểm tra giá trị của tuỳ chọn mới và chỉ hiển thị thông báo admin nếu nó được xét là true.

Vô hiệu và kích hoạt plugin để kiểm tra đoạn code chúng ta vừa thêm vào. Vào trang tuỳ chọn plugin, loại bỏ thông báo admin, và tải lại trang. Thông báo không còn được nhìn thấy nữa. Tuyệt!

Bởi vì chọn lựa mới được xét là true mỗi khi plugin được kích hoạt, bạn có thể lặp lại những bước trên để thực hiện kiểm tra những thông báo có thể bị loại bỏ bao nhiều lần tuỳ thích.

Để cho mọi thứ trở nên đơn giản, đây là ví dụ sử dụng một yêu cầu Ajax để xét tùy chọn thông báo admin tự tạo. Trong thực tế, bạn sẽ muốn sử dụng một giá trị nonce (số đã dùng một lần) để xác thực yêu cầu Ajax như là một biện pháp bảo mật tối thiểu.

Đã cần nhiều công sức chỉ để loại bỏ vĩnh viễn một thông báo admin, nhưng hiệu quả cuối cùng tốt và là điều gì đó bạn có thể dùng có kết quả tốt cho các plugin của bạn.

Sự vô hiệu những thông báo admin tự tạo.

Đây là thời điểm để nhìn vào một phương pháp có chút khác biệt để loại bỏ thông báo admin. Đây là một loại thông báo admin hiển thị trên tất cả màn hình admin và không thể bị vô hiệu cho đến khi một vài hành động được thực hiện.

Lưu ý: Sử dụng phương pháp này cẩn thận hoặc bạn sẽ có nguy cơ làm cho người dùng xa lánh plugin của bạn.

Hành động cụ thể mà chúng tôi sẽ tập trung vào trong ví dụ của chúng tôi là hiển thị thông báo admin cho đến khi plugin hoặc danh sách plugin được cài đặt và kích hoạt.

Không giống như phương pháp trước đây, nơi chúng tôi phải nhảy qua nhiều vòng để nhận được thông báo admin để bị hủy bỏ vĩnh viễn, giải pháp cho phương pháp này khá đơn giản thôi!

Đầu tiên, hãy comment tất cả hàm trong class Gwyer_Dismissible_Admin_Notices::init(). Sau đó, bổ sung hàm add_action() :

Và đĩnh nghĩa hàm callbacks như sau:

Đó là tất cả có để làm!Tôi đã nói bạn, nó thật đơn giản, phải không?

Điều khác biệt duy nhất chúng ta thực hiện lần này là dùng file php, sử dụng is_plugin_activate(), hàm của WordPress để kiêm tra xem liệu plugin Hello Dolly được cài đặt và nếu không phải thì hàm plugin is_plugin_active() sẽ trả về false, và một thông báo otice của chúng ta sẽ được hiển thị.

Example of a nag admin notice

Thử kích hoạt plugin Hello Dolly để xác thực thông báo admin biến mất.

Điều này hiệu quả với các plugin đơn lẻ, nhưng nếu bạn muốn nhắc nhở người dùng kích hoạt nhiều plugin? Thay vì hard-coding trong thông tin plugin Hello Dolly, chúng tôi có thể tạo một mảng để đưa vào danh sách trắng plugin yêu cầu của chúng tôi.

Thay thế install_plugin_to_dismiss_admin_notice() bằng:

Các plugin được yêu cầu hiện được lưu trữ trong một mảng được lặp lại để kiểm tra xem liệu mỗi plugin đã được kích hoạt. Đối với bất kỳ plugin hiện không hoạt động, tên sẽ được thêm vào mảng $require_activating được xuất ra thông qua thông báo admin, dưới dạng danh sách tách biệt comma-sparated của name của các plugin được yêu cầu.

List of required plugins

Những thông báo admin tự xây dựng

Trước khi chúng ta hoàn thành, hãy vui vẻ một chút bằng việc tạo ra loại thông báo admin mới của chúng ta. Hãy xem cách bổ sung một kiểu thông báo admin do chính chúng ta tạo ra. Bây giờ bạn sẽ hoàn toàn quen thuộc với 4 thông báo admin sẵn có mặc định của WordPress, nhưng nó không khó để thực hiện một cái của riêng chúng ta.

Dù vậym đầu tiên hãy comment lại những hàm gọi trong Gwyer_Dismissible_Admin_Notices:init() để chúng ta bắt đầu từ đầu.

Bạn sẽ cần thêm CSS cho loại thông báo admin mới, vì thế trong thư mục gốc plugin bổ sung một thư mục css, và bên trong đó tạo một file mới admin-notices.css. Để đợi chờ hiển thị trên tất cả trang admin, bổ sung một hàm mới add_action() trong Gwyer_Plugin_Options::init().

Sau đó, cho hàm callback enqueue_styles(), bổ sung phương thức này vào cùng class:

Giờ hãy thiết lập một phương thức mới để xuất thông báo admin tự tạo. Trong hàm Gwyer_Admin_Notices::init(), bổ sung:

Sau đó bổ sung hàm callback để hiển thị một loạt những thông báo admin tự tạo:

Sau cùng, bổ sung CSS vào admin-notices.css để trang trí cho các thông báo admin tự tạo của chúng ta:

Sau khi lưu thay đổi, hãy tải lên trang admin bất kỳ để xem thông báo admin tự tạo của chúng tôi.

Some examples of custom admin notices

Xét về kết quả, có thể là một ý tưởng hay khi bạn hạn chế sử dụng thông báo admin tự tạo, nếu không bạn sẽ gặp rủi ro vì họ trông khá sặc sỡ.

Chúng tôi đã sử dụng biểu tượng phông chữ dashicons cho thông báo quản trị tùy chỉnh của chúng tôi để thuận tiện vì chúng có sẵn trong quản trị viên WordPress theo mặc định. Nhưng bạn có thể nhập và sử dụng bất kỳ biểu tượng nào bạn thích để trang trí thêm.

Chúng tôi đã sử dụng bộ icons font tên là dashicons cho thông báo admin mới để thuận tiện vì chúng cũng mặc định hỗ trợ cho phần admin của WordPress. Nhưng bạn có thể nhập và sử dụng bất kỳ icon nào bạn thích để trang trí thêm.

Hãy thử tự mình code xem.

Tất cả các code từ loạt bài hướng dẫn này đã được gói trong một plugin WordPress để bạn tải xuống. Hãy xem xem code, mở rộng nó, và triển khai những cách mới để hiển thị (hoặc loại bỏ) thông báo admin. Hãy chắc chắn để cho tôi biết tạo tạo ra được một điều thú vị gì đó ở phần bình luận nhé! Tôi sẽ rất thích xem điều bạn sẽ làm được với nó.

Tổng kết

Cảm ơn bạn đã tham gia cùng tôi trong loạt bài hướng dẫn bốn phần này. Hy vọng rằng bây giờ bạn sẽ có nhiều tự tin hơn trong cách triển khai thông báo admin trong các dự án của riêng bạn.

Chúng tôi đã đề cập đến nhiều khía cạnh khác nhau của thông báo admin của WordPress, bao gồm nhiều cách loại bỏ hẳn chúng, việc này bắt buộc phải có sự can thiệp của code.

Việc tạo thông báo admin mới cho riêng bạn cũng khá dễ dàng, nhưng trên thực tế bạn sẽ ít khi muốn sử dụng chúng trong các dự án của riêng bạn. Hầu hết tốt nhất là giữ nguyên phong cách WordPress mặc định để người dùng có trải nghiệm nhất quán.

WordPress có một hệ sinh thái cực kỳ hoạt động. Có các theme, plugin, thư viện và nhiều sản phẩm khác giúp bạn xây dựng trang web và dự án của mình. Bản chất mã nguồn mở của nền tảng này cũng làm cho nó trở thành một lựa chọn tuyệt vời để bạn có thể lập trình tốt hơn. Dù trường hợp nào, bạn có thể thấy những gì chúng tôi có sẵn trong Envato Market.

Và đừng quên tải plugin và vọc thử phần code của nó. Đó là một cách tuyệt vời để làm quen với việc làm thế nào mọi thứ có thể hoạt động tương hợp với nhau. Và vui lòng cho tôi biết suy nghĩ của bạn về bài hướng dẫn thông qua các bình luận bên dưới.

Advertisement
Advertisement
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.