Cách tạo UI thông báo tin nhắn …

Trường hợp khẩn cấp có thể ảnh hưởng đến tất cả các tổ chức. Cho dù đó là tắt máy liên quan đến thời tiết, thay đổi đột ngột về giờ mở cửa hoặc đường ống bị rò rỉ dưới tầng hầm, mọi thứ đều xảy ra. Một trong những cách tốt nhất để truyền đạt những vấn đề như vậy là xuất bản chúng trên trang web của bạn.

Thông tin này rất quan trọng và phải nổi bật so với phần còn lại của nội dung trên trang web. Thêm cũng nên mất ít nỗ lực nhất có thể. Điều này đặc biệt là trường hợp khi khách hàng của bạn cập nhật trang web. Tốt nhất, bạn 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. Thời điểm cũng rất quan trọng.

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

Tạo một tin nhắn khẩn cấp cá nhân.
Chọn một biểu tượng phông chữ xuất hiện bên cạnh nó.
Kích hoạt hoặc vô hiệu hóa 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? Chúng tôi làm điều đó!

Những gì bạn cần

Điều này là khá dễ dàng để đặt lại với nhau. Nhưng bạn cần một số thành phần:

Cả hai plugin miễn phí phải được cài đặt và kích hoạt. Bạn cũng cần truy cập vào chủ đề WordPress của bạn.

Nếu bạn sử dụng một trong những chủ đề tiêu chuẩn đi kèm với WordPress hoặc chủ đề thương mại, bạn sẽ tạo một chủ đề con. Điều này ngăn bất kỳ thay đổi nào bạn thực hiện khỏi bị ghi đè trong bản cập nhật sau này.

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. Đầu tiên, đi đến Trường tùy chỉnh> Thêm mới vào 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. Dưới đây là ví dụ của chúng tôi:

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

Sau khi 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 trường tùy chỉnh vào trang web của mình.

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

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

Lưu ý rằng bạn có thể muốn thay đổi một số cài đặt ở đây. Đặc biệt tập trung vào các quy tắc trang web cho nhóm lĩnh vực. Đảm bảo các trường xuất hiện trên (các) trang bạn muốn. Trong trường hợp của chúng tôi, chúng tôi hiển thị các trường trên Website Website.

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

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

Bây giờ là lúc để điều hướng đến trang web 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 khác nhau. Nếu bạn sử dụng trình chỉnh sửa khối Gutenberg, bộ trường được ẩn ở dưới cùng của trình chỉnh sửa và bên dưới tất cả nội dung hiện có.

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

Trong mọi trường hợp, thật dễ dàng để thêm tin nhắn vào trang web của chúng tôi. Trong hộp Hiển thị thông báo khẩn cấp, bấm Có. Sau đó chọn một biểu tượng (xem danh sách các biểu tượng có sẵn cho phông chữ). Nhập tin nhắn của bạn từ đó vào trường WYSIWYG.

Trường thông báo khẩn cấp trong WordPress Content Editor.

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

Thêm thông điệp của bạn vào mặt trước và thiết kế

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

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

Bạn có rất nhiều sự linh hoạt khi nói đến phong cách. Ở đây chúng tôi sử dụng một nền đỏ với văn bản lớn màu trắng. Phông chữ của chúng tôi Biểu tượng tuyệt vời được tô màu vàng.

Kết quả cuối cùng thật khó để mất!

Tin nhắn khẩn cấp trước trang web.

Giữ khách truy cập của bạn cập nhật

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. Nó cũng quan trọng để xuất bản 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 rất nhiều nội dung.

Giải pháp này cung cấp một cách dễ dàng để 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.

Hầu như tất cả các trang web có thể sử dụng các tính năng này. Đặt nó ngay bây giờ để bạn không phải chiến đấu sau này.