Tạo sticky hiển thị thông báo ngẫu nhiên trong WordPress

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.

sticky message random

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:

<?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:

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:

/*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="http://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="http://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="http://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:

.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!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. MInh muốn làm như trang này thì làm sao ta?http://dafabet24h.com/DAFABET

  2. Dùng cái Boom Bar đẹp lắm, Web mình đang dùng nè :D.

  3. Sao mình làm nó không hiện như hình của bạn vậy,nó hiện nền màu trắng trên cùng,bạn hướng dẫn làm giống trang bạn với.Mình xài genessi

  4. {c26} code Message lỗi rồi bạn ơi chỉnh sửa lại dùm mình được không đưa vào trắng trang báo lỗi code đó

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!