Bài viết này chia sẻ đến bạn đoạn code tạo thanh thông báo ở đầu trang khi dùng theme GeneratePress, tên là GeneratePress Top Bar. Tác dụng của thanh này thì chắc nhiều ae làm web, blog chắc cũng biết rồi. Rất tiện để điều hướng khách truy cập đến một nội dung nào đó, ví dụ: Chương trình khuyến mãi, thông báo quan trọng,…
Thanh thông báo này trước đây mình dùng plugin nhưng nhìn chung cũng khá cồng kềnh về mặt code, nhiều món không cần thiết. Với lại không tối ưu nên mình không sử dụng nữa mà chuyển qua tạo code như bên dưới để dùng. Bạn nào thích kiểu đơn giản như này thì tham khảo nhé !
Để sử dụng thì bạn chỉ cần copy code và chèn vào phía dưới cùng trong file functions.php của child theme/ hoặc theme mẹ cũng được. Nhưng nếu chèn vào theme mẹ thì khi cập nhật theme sẽ mất, bạn có thể vào bài viết này để copy code dán vào lại cũng được.
// GeneratePress Top Bar by Hocban.vn
add_action( 'generate_before_header', 'insert_hb_ads_announcement_bar' );
function insert_hb_ads_announcement_bar() {
?>
<style>
.hb-ads {
color: #ffffff;
text-align: center;
padding: 10px 20px;
font-size: 17px;
font-weight: 500;
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 9999;
}
.hb-ads a {
color: #ffffff;
text-decoration: underline;
}
.hb-ads a:hover {
color: #3498db;
}
@media (max-width: 720px) {
.hb-ads {
background-color: #1d2327;
font-size: 17px;
padding: 10px;
}
}
</style>
<div class="hb-ads">
Mời bạn tham khảo ưu đãi Hosting & VPS từ 25% - 85% và quà tặng trị giá hơn 1.000$ (<a href="https://hocban.vn/web-hosting/khuyen-mai-hosting-vps/">xem chi tiết</a>).
</div>
<?php
}
// GeneratePress Top Bar by Hocban.vnSau khi thực hiện xong thì bạn kiểm tra thử code có hoạt động không hay có làm lỗi web không. Nếu oke hết rồi thì bạn tiến hành sửa lại nội dung thông báo và link là được. Cái đó thuần chỉnh sửa văn bản và HTML nhẹ nhẹ nên cũng không có gì để hướng dẫn. Hoặc bạn copy đưa cho AI nó sửa lại theo ý bạn sẽ nhanh hơn là tự làm từ đầu.
