Bạn có muốn thêm alert bar (thanh cảnh báo) vào trang web WordPress của mình không?
Thanh cảnh báo hoặc thanh thông báo là một cách tuyệt vời để cung cấp thông tin cho khách truy cập biết về các bản cập nhật quan trọng, ưu đãi đặc biệt, ra mắt sản phẩm mới, vv…
Trong bài viết này, CunghocWP sẽ hướng dẫn bạn 3 cách tạo thanh cảnh báo trong WordPress đơn giản nhất.
Tại sao phải tạo thanh cảnh báo trong WordPress?
Bạn có thể sử dụng thanh cảnh báo để thông báo về bất kỳ điều gì quan trọng cho khách truy cập. Đó có thể là một sự kiện bán hàng đang diễn ra, thông tin cập nhật về thời gian mở cửa hoặc những các thay đổi về dịch vụ.
Bạn cũng có thể sử dụng thanh cảnh báo để khách truy cập biết về một giao dịch đặc biệt, chẳng hạn như ưu đãi mua một tặng một. Đây là một lựa chọn tuyệt vời nếu bạn đang điều hành một cửa hàng online.
Sử dụng thanh cảnh báo tốt hơn là chỉ đặt thông báo trên trang chủ của bạn. Thanh cảnh báo có thể xuất hiện nổi bật ngay ở đầu mỗi trang trên toàn bộ trang web của bạn.
Tạo một thanh cảnh báo trong WordPress rất đơn giản. CunghocWP sẽ đề cập đến 2 plugin thanh thông báo tốt nhất cùng với phương pháp thủ công sử dụng mã HTML và CSS. Chỉ cần click vào các liên kết bên dưới để đi đến phương pháp mà bạn muốn tìm hiểu:
- Phương pháp 1: OptinMonster
- Phương pháp 2: SeedProd
- Phương pháp 3: HTML và CSS tùy chỉnh
Phương pháp 1: Tạo thanh cảnh báo bằng OptinMonster
OptinMonster là phần mềm tối ưu hóa chuyển đổi tốt nhất trên thị trường giúp bạn chuyển đổi khách truy cập trang web thành người đăng ký và khách hàng.
Phần mềm này có các lightbox popupn đẹp mắt, màn hình chào mừng, đồng hồ đếm ngược và các dynamic overlays khác giúp tăng người đăng ký và bán hàng cho trang web của bạn.
Bạn cũng có thể sử dụng OptinMonster để tạo thanh cảnh báo cho trang web của mình. Đây là cái mà CunghocWP sẽ tạo:
OptinMonster có rất nhiều template dựng sẵn giúp bạn dễ dàng tạo một thanh cảnh báo trông đẹp mắt chỉ trong vòng vài phút.
Đầu tiên, bạn cần truy cập trang web OptinMonster và đăng ký tài khoản.
Tiếp theo, hãy cài đặt và kích hoạt plugin OptinMonster WordPress. Để biết thêm chi tiết, hãy tham khảo bài viết của CunghocWP về cách cài đặt plugin WordPress.
Plugin này kết nối trang web WordPress của bạn với ứng dụng OptinMonster.
Khi kích hoạt, bạn cần nhập khóa license. Bạn có thể tìm khóa này trong khu vực tài khoản của mình trên trang web OptinMonster.
Trong bảng điều khiển WordPress, đi tới menu OptinMonster và nhấp vào nút ‘Connect Your Account’. Bạn hãy làm theo chỉ dẫn trên màn hình để kết nối trang web WordPress với tài khoản OptinMonster của mình.
Sau khi kết nối với OptinMonster, bạn cần truy cập vào OptinMonster » Campaigns trong bảng điều khiển WordPress và nhấp vào nút ‘Create New Campaign’:
Thao tác này sẽ đưa bạn đến công cụ tạo chiến dịch OptinMonster. Tại đây, bạn cần chọn ‘Floating Bar’ làm Campaign Type (loại Chiến dịch) của mình.
Tiếp theo, bạn sẽ thấy các template cho chiến dịch. Chọn một template mà bạn muốn, đưa chuột lên đó và nhấp vào nút ‘Use Template’ để chọn.
CunghocWP sẽ sử dụng template ‘Promo’ cho thanh cảnh báo của mình:
Tiếp theo, bạn cần đặt tên cho template và chọn trang web bạn sẽ sử dụng template đó. OptinMonster sẽ điền tên và URL của trang web của bạn tại đây.
Sau khi đặt tên cho chiến dịch, click vào ‘Start Building’.
Thao tác này sẽ mở ra trình chỉnh sửa chiến dịch. Đây là nơi bạn thiết kế chiến dịch của mình.
Bạn sẽ thấy thanh cảnh báo xuất hiện ở cuối màn hình theo mặc định. Để di chuyển thanh này lên đầu màn hình, click vào ‘Floating Settings’ ở phía bên trái.
Tiếp theo, nhấp vào slider để di chuyển floating bar lên đầu trang:
Để chỉnh sửa văn bản trên floating bar, chỉ cần click vào khu vực bạn muốn thay đổi. Thao tác này sẽ mở ra một trình chỉnh sửa ở phía bên tay trái, bạn cần gõ văn bản mình muốn ở đây.
Bạn cũng có thể thay đổi phông chữ, kích thước và màu sắc của văn bản, vv…
Để thay đổi đồng hồ đếm ngược, bạn chỉ cần nhấp vào vào tab Countdown. Sau đó, nhập ngày giờ kết thúc bạn muốn.
Bạn cũng có thể đặt bộ đếm thời gian hoạt động như một bộ đếm ngược evergreen thay vì bộ đếm ngược static. Bộ đếm ngược evergreen được đặt riêng cho từng khách truy cập vào trang web của bạn.
Hãy tiếp tục và thực hiện các thay đổi khác cho thanh cảnh báo của bạn. Sau khi đã hài lòng, đừng quên nhấp vào nút Save ở đầu màn hình.
Tiếp theo, bạn cần truy cập vào tab ‘Display Rules’ để chọn thời điểm và vị trí hiển thị thanh cảnh báo trên trang web. Quy tắc mặc định là hiển thị thanh cảnh báo sau khi khách truy cập vào trang được 5 giây.
CunghocWP sẽ thay đổi điều này thành 0 giây, vì vậy thanh cảnh báo sẽ xuất hiện ngay lập tức. Chỉ cần thay đổi bộ đếm ngược ‘sec’ thành 0:
Sau đó, click vào ‘Next Step’ và để hành động ‘show the campaign view: Optin’ trên màn hình tiếp theo. Cilck vào ‘Next Step’ một lần nữa và bạn sẽ thấy một bản tóm tắt.
Sau khi bạn hài lòng, click vào ‘Save’ ở đầu màn hình, sau đó nhấp vào tab ‘Publish’. Nhấp vào slider ‘Status’ để đặt thành Active.
Bước cuối cùng là kích hoạt chiến dịch trên trang web của bạn. Nhấp vào tab OptinMonster trong dashboard WordPress và click vào ‘Refresh Campaigns’.
Sau đó, bạn sẽ thấy chiến dịch của mình được liệt kê ở đây.
Chỉ cần truy cập vào bất kỳ trang nào trên trang web của bạn và bạn sẽ thấy chiến dịch của mình đang hoạt động:
Phương pháp 2: Tạo thanh cảnh báo bằng SeedProd
Một cách khác để tạo thanh cảnh báo là sử dụng plugin SeedProd WordPress. SeedProd được biết đến nhiều nhất với các trang ‘coming soon’ và các trang đang ở chế độ bảo trì cho WordPress.
SeedProd cũng có một plugin Notification Bar mà bạn có thể nhận được khi đăng ký bất kỳ gói trả phí nào.
Đầu tiên, bạn cần truy cập trang web SeedProd và đăng ký tài khoản. Tiếp theo, đi tới trang ‘Downloads’ trong tài khoản của bạn và download plugin Notification Bar Pro:
Sau đó, bạn cần cài đặt và kích hoạt plugin Notification Bar Pro trên trang web của mình. Để biết thêm chi tiết, hãy xem hướng dẫn của CunghocWP về cách cài đặt plugin WordPress .
Sau khi cài đặt, bạn sẽ thấy một trang mà bạn cần nhập khóa license. Bạn có thể tìm thấy khóa này trong tài khoản SeedProd của mình.
Tiếp theo, đi tới Settings » Notification Bar Pro bắt đầu tạo thanh thông báo của bạn. Chỉ cần nhập tên và click vào ‘Create Bar’.
Thao tác này sẽ mở ra trình chỉnh sửa thanh thông báo SeedProd. Notification bar hiển thị dưới dạng dải màu cam ở đầu màn hình:
Để thêm văn bản vào thanh thông báo, hãy nhấp vào tab ‘Call to Action Message and Button’ ở phía bên trái và nhập văn bản bạn muốn sử dụng. Nếu bạn muốn thêm nút CTA thì có thể nhập văn bản và liên kết cho nút:
Theo mặc định, văn bản sẽ có cùng phông chữ và kích thước với văn bản chính trong theme WordPress. Để làm văn bản lớn hơn, hãy nhấp vào tab ‘Typography’.
Tại đây, bạn có thể đặt bất kỳ phông chữ và kích thước nào bạn muốn cho cả văn bản của chính thanh đó và văn bản nút.
Bạn có thể thay đổi màu của thanh và nút trong tab ‘Colors’ nếu muốn.
Bạn còn có thể thêm các yếu tố khác vào thanh thông báo của mình, chẳng hạn như optin email, đồng hồ đếm ngược, nút click to call và liên kết đến hồ sơ xã hội của bạn.
Khi bạn đã hài lòng với thanh thông báo của mình, hãy nhấp vào tab ‘Enable/Disable Bar’ rồi chuyển sang tùy chọn ‘Enable Bar’. Sau đó, click vào nút ‘Save’ ở đầu màn hình.
Thanh thông báo sẽ xuất hiện trên trang web của bạn:
Phương pháp 3: Tạo Thanh cảnh báo theo cách thủ công bằng HTML/CSS tùy chỉnh
Nếu bạn không muốn sử dụng OptinMonster hoặc Notification Bar Pro thì có thể tạo thanh thông báo bằng code HTML và CSS.
Lưu ý: CunghocWP không đề xuất phương pháp này cho những người dùng mới. Nếu bạn mới sử dụng WordPress hoặc không tự tin khi thêm code vào trang web của mình thì bạn nên sử dụng một trong các phương pháp plugin ở trên.
Đầu tiên, bạn cần sao chép và dán một số code CSS tùy chỉnh cho thanh cảnh báo. Trong dashboard của bạn, truy cập trang Appearance » Customizer và nhấp vào tab ‘Additional CSS’ ở dưới cùng.
Sao chép và dán đoạn code CSS này vào box:
- .alertbar {
background-color: #ff0000;color: #FFFFFF;display: block;line-height: 45px;height: 50px;position: relative;text-align: center;text-decoration: none;top: 0px;width: 100%;z-index: 100;- }
Sau khi bạn sao chép, đoạn code đó trông như hình dưới. Nhấp vào nút Publish ở đầu trang để lưu code CSS của bạn.
Tiếp theo, bạn cần thêm code HTML cho văn bản thanh cảnh báo vào trang web của mình.
Cách tốt nhất để làm điều này là cài đặt và kích hoạt plugin Insert Headers and Footers miễn phí.
Lưu ý: Insert Headers and Footers là một trong những plugin riêng của WPBeginner. Họ đã tạo ra plugin này để giúp bạn thêm các tập lệnh, code HTML, vv… vào các trang web của mình một cách dễ dàng.
Sau khi kích hoạt plugin, đi tới Settings » Insert Headers and Footers trong WordPress admin. Sao chép và dán dòng code HTML sau vào box ‘Scripts in Body’:
- <div class=”alertbar”>We are currently closed due to Covid-19.</div>
Dòng code hiển thị trong hộp ‘Scripts in Body’ của Insert Headers and Footers như hình dưới đây:
Tất nhiên, bạn có thể thay đổi văn bản cảnh báo thành bất kỳ thứ gì khác mà bạn thích. Đừng quên nhấp vào nút ‘Save’ ở cuối trang sau khi hoàn tất.
Bây giờ, bạn có thể truy cập trang web của mình để xem thanh cảnh báo. Thanh cảnh báo sẽ xuất hiện ở đầu mỗi trang như sau:
Mẹo: Trong một số theme WordPress, thanh cảnh báo có thể chồng lên menu. Bạn có thể thay đổi chiều cao của thanh thành 40px hoặc 30px để tránh điều này. Bạn cũng cần giảm chiều cao dòng cho phù hợp để văn bản được căn giữa theo chiều dọc trong thanh.
CunghocWP hi vọng bài viết này sẽ giúp bạn tìm hiểu cách tạo thanh cảnh báo trong WordPress. Bạn cũng có thể thích bài so sánh của CunghocWP về các trình tạo trang kéo & thả WordPress tốt nhất để tùy chỉnh trang web mà không cần viết bất kỳ dòng code nào và danh sách các plugin WooCommerce tốt nhất của CunghocWP để tăng doanh số bán hàng tại cửa hàng của bạn.
Nếu thích bài viết này, hãy theo dõi YouTube Channel để xem thêm các video hướng dẫn về WordPress. Bạn cũng có thể tìm kiếm CunghocWP trên Twitter hoặc Facebook.