Bạn có thấy bên dưới blog của mình có một thông báo nhỏ có thể thay đổi nội dung sau khi bạn load lại trang hoặc chuyển sang trang mới. Để tạo một sticky message dạng này có khá nhiều plugin có thể làm được và mình đã từng có bài viết hướng dẫn sử dụng plugin GC Message Bar để tạo thông báo trong WordPress. Tuy nhiên plugin này có một nhược điểm là chỉ hiển thị được một thông báo duy nhất. Trong bài viết này mình sẽ hướng dẫn các bạn một thủ thuật nhỏ để tạo một sticky hiển thị thông báo ngẫu nhiên trong WordPress mà không cần dùng plugin.
Thủ thuật này rất đơn giản, bạn chỉ cần sử dụng đoạn code dưới đây thêm vào file footer.php:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php echo '<div class="float-message">'; $message = array( 'Thông báo 1', 'Thông báo 2', 'Thông báo 3' ); $i = array_rand($message, 1); echo $message[$i]; echo '</div>'; ?> |
Nếu bạn sử dụng Genesis thì hãy sử dụng đoạn code dưới đây thêm vào file functions.php:
|
1 2 3 4 5 6 7 8 9 10 |
add_action('genesis_before','rayno_float_message'); function rayno_float_message(){ $message = array( 'Thông báo 1', 'Thông báo 2', 'Thông báo 3' ); $i = array_rand($message, 1); echo '<div class="float-message">'.$message[$i].'</div>'; } |
Trong đoạn code trên, bạn có thể thêm bớt các dòng thông báo tùy thích. Bạn cũng có thể chèn link vào các thông báo trên. Chẳng hạn như trên blog của mình là như thế này:
|
1 2 3 4 5 6 7 8 9 10 11 |
/*Message*/ add_action('genesis_before','rayno_float_message'); function rayno_float_message(){ $message = array( 'Dùng thử một tháng ASmallOrange chỉ với 1$! <a href="https://raynoblog.com/hosting-coupons/asmallorange-coupon/dung-thu-1-thang-vps-asmallorange-chi-1.html" target="_blank">xem ngay</a> ', 'Đăng ký hosting chỉ 1$/tháng - miễn phí 1 tên miền! <a href="https://raynoblog.com/domain-coupons/godaddy-coupon-code/coupon-hosting-godaddy-chi-1thang-mien-phi-1-domain.html" target="_blank">xem ngay</a> ', 'Các nhà cung cấp VPS tốt nhất nên dùng! <a href="https://raynoblog.com/hosting-and-domain/cac-nha-cung-cap-vps-gia-re-nen-su-dung.html" target="_blank">xem ngay</a> ' ); $i = array_rand($message, 1); echo '<div class="float-message">'.$message[$i].'</div>'; } |
Cuối cùng bạn mở file style.css trong theme đang sử dụng, thêm vào một số lớp dưới đây để thông báo hiển thị đẹp mắt hơn:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.float-message { background: #272727; background:rgba(0,0,0,0.9); width: 100%; overflow: hidden; z-index: 999999; position: fixed; bottom: 0; text-align: center; padding: 10px; font-size: 24px; color: #FFFFFF; } .float-message a{ font-size: 24px; color: #fff; background: #FF2B2B; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 5px; margin: 0 0 0 10px; } .float-message a:hover { font-size: 24px; color: #CCCCCC; } |
Như vậy là hoàn tất thủ thuật. Bạn hãy xóa cache và reload lại trang vài lần để xem thông báo của bạn hiển thị và thay đổi như thế nào nhé.
Thủ thuật này có hữu ích cho bạn không? Hãy để lại comment bên dưới bài viết nhé! Chúc bạn thành công!
