Tin tức và phân tích của tất cả các thiết bị di động

Cách tạo UI tin nhắn khẩn cấp trong WordPress

Tình huống khẩn cấp có thể ảnh hưởng đến bất kỳ tổ chức. Cho dù đó là tắt máy liên quan đến thời tiết, thay đổi đột ngột trong giờ làm việc hoặc đường ống bị rò rỉ dưới tầng hầm, mọi thứ đều xảy ra. Và một trong những cách tốt nhất để truyền đạt các loại vấn đề này là đăng nó trên trang web của bạn.

Thông tin này rất quan trọng và nên nổi bật so với phần còn lại của nội dung trên trang web. Ngoài ra, nó cần ít nỗ lực nhất có thể để thêm. Điều này đặc biệt là trường hợp nếu khách hàng của bạn là người cập nhật trang web. Lý tưởng nhất là họ không nên đưa ra quyết định thiết kế khi cố gắng chia sẻ một thông điệp quan trọng. Ngoài ra, thời gian là điều cốt yếu.

Hôm nay, chúng tôi sẽ giới thiệu cho bạn một giải pháp thực tế sử dụng các trường WordPress tùy chỉnh. Nó sẽ cho phép bạn:

  • Tạo một thông điệp khẩn cấp cá nhân;
  • Chọn một biểu tượng Font Awesome để hiển thị bên cạnh nó;
  • Kích hoạt hoặc hủy kích hoạt tin nhắn chỉ bằng một cú nhấp chuột;
  • Thêm một thiết kế bắt mắt cho chủ đề WordPress của bạn;

Sẵn sàng để bắt đầu? Hãy làm đi!

Những gì bạn sẽ cần

Điều này là khá đơn giản để đặt cùng nhau. Tuy nhiên, bạn sẽ cần một số thành phần:

Hai plugin miễn phí sẽ cần phải được cài đặt và kích hoạt. Ngoài ra, bạn cũng sẽ cần quyền truy cập vào chủ đề WordPress của bạn.

Nếu bạn đang sử dụng một trong những chủ đề mặc định đi kèm với WordPress hoặc chủ đề thương mại, hãy chắc chắn thiết lập một chủ đề phụ. Điều này sẽ ngăn mọi thay đổi bạn thực hiện khỏi bị ghi đè bằng bản cập nhật sau.

Thêm và cấu hình các trường tùy chỉnh

Nhiệm vụ đầu tiên là tạo một nhóm các trường tùy chỉnh trong WordPress. Để bắt đầu, hãy đi tới Trường tùy chỉnh> Thêm mới trong bảng điều khiển WordPress.

Bạn có thể tạo bất kỳ lĩnh vực nào bạn muốn sử dụng. Đây là những gì ví dụ của chúng tôi trông giống như:

Thông báo khẩn cấp Nhóm trường tùy chỉnh.

Ngoài ra, bạn có thể sao chép chính xác ví dụ này bằng cách lấy tệp JSON sau đây:

Khi bạn đã tải xuống tệp, đi đến Trường tùy chỉnh> Công cụ. Sau đó, bạn có thể nhập nhóm các trường tùy chỉnh vào trang web của bạn.

Màn hình nhập nhóm trường.

Sau khi nhập, đi đến Trường tùy chỉnh> Nhóm trường. Nhấp vào mục "Thông báo khẩn cấp" để mở màn hình chỉnh sửa.

Xin lưu ý rằng bạn có thể muốn sửa đổi một số cài đặt ở đây. Tập trung đặc biệt vào các quy tắc Vị trí cho nhóm trường. Đảm bảo các trường được đặt để hiển thị trên trang hoặc các trang bạn muốn. Trong trường hợp của chúng tôi, chúng tôi đang hiển thị các trường trên trang "Trang chủ".

Quy tắc vị trí trường tùy chỉnh

Tạo tin nhắn khẩn cấp

Bây giờ là thời gian để điều hướng đến trang "Trang chủ", nơi các trường thông báo khẩn cấp được chỉ định.

Sự xuất hiện của các trường trong trình chỉnh sửa nội dung sẽ khác nhau. Nếu bạn đang sử dụng trình chỉnh sửa khối Gutenberg, bộ trường sẽ được ẩn ở dưới cùng của trình chỉnh sửa và bên dưới bất kỳ nội dung hiện có nào.

Nếu bạn đang sử dụng Trình chỉnh sửa cổ điển, các trường trong tệp JSON mà chúng tôi cung cấp được định cấu hình để xuất hiện ngay bên dưới tiêu đề trang và bên trên bất kỳ nội dung hiện có nào.

Dù bằng cách nào, việc thêm tin nhắn vào trang của chúng tôi khá đơn giản. Đối với trường "Hiển thị thông báo khẩn cấp", nhấp vào "Có". Sau đó chọn một biểu tượng (xem danh sách các biểu tượng Font Awesome có sẵn). Từ đó, nhập tin nhắn của bạn vào trường WYSIWYG.

Các trường cảnh báo khẩn cấp trong Trình chỉnh sửa nội dung WordPress.

Lưu trang và thì đấy! Chà, gần như …

Thêm và thiết kế tin nhắn của bạn ở mặt trước

Cuối cùng, hãy đặt thông điệp khẩn cấp của chúng tôi trong chủ đề WordPress của chúng tôi và thêm một số kiểu CSS.

Trong ví dụ này, chúng tôi sẽ đặt thông điệp trên tiêu đề trang web. Tại đây, nó sẽ trải rộng chiều rộng của màn hình và hiển thị ở đầu trang. Tất nhiên, bạn có thể thêm đoạn mã này vào bất kỳ khu vực nào bạn cho là tốt nhất.

Đối với phong cách, bạn có rất nhiều linh hoạt. Ở đây, chúng tôi sẽ sử dụng một nền đỏ với văn bản lớn màu trắng. Biểu tượng Font Awesome của chúng tôi sẽ được tô sáng bằng màu vàng.

Kết quả cuối cùng sẽ khó mất!

Tin nhắn khẩn cấp ở mặt trước của trang web.

Thông báo cho du khách

Trang web của một tổ chức là một trong những nơi đầu tiên mà mọi người tìm kiếm thông tin quan trọng. Mặc dù cũng rất quan trọng để đăng loại tin nhắn này trên phương tiện truyền thông xã hội, nhưng nó có thể dễ dàng bị mất trong một lượng lớn nội dung.

Giải pháp này cung cấp một cách đơn giản để thêm một tin nhắn khẩn cấp bất cứ lúc nào. Khi không còn cần thiết, nó có thể được gỡ bỏ chỉ bằng một vài cú nhấp chuột.

Cũng có những cách để cải thiện chức năng bằng cách thêm các trường tùy chỉnh có liên quan khác. ACF có nhiều tùy chọn tích hợp và có một số bổ sung có thể làm được nhiều hơn thế.

Hầu như tất cả các trang web có thể tận dụng các loại tính năng này. Thiết lập nó ngay bây giờ để bạn không phải vật lộn để làm điều đó sau.