Tạo thanh thông báo trên đầu trang cho WordPress

Hello-bar

Trang web của bạn đang diễn ra một chương trình khuyến mại hay giveaway và bạn muốn giới thiệu nó tới bạn đọc, hay đơn giản bạn muốn người đọc chú ý tới mọi người một thông báo nào đó. Ý tưởng đầu tiên lóe lên trong đầu chắc hẳn là sử dụng Hello Bar. Đúng vậy. Hello Bar là một thanh thông báo trên đầu trang, cố định khi người dùng cuộn xuống. Hello Bar là một hình thức tuyệt vời thu hút ngay từ cái nhìn đầu tiên của khách truy cập, và bạn có sử dụng các plugin hoặc tự code để tạo Hello Bar cho blog của mình.

Hello-bar

Hello-bar

Như mình đã nói bên trên, để tạo Hello bar cho WordPress bạn có 2 cách. Hôm nay mình sẽ hướng dẫn các bạn tự tạo cho mình Hello Bar thật ưng ý.

Đối với các Child Theme của Genesis

Các bạn có thể thêm đoạn code sau vào cuối file functions.php của theme mà bạn đang sử dụng:

function cswp_add_genesis_bar() {
	?>
	<div id="genesisbar-pusher"></div>
	<div id="genesisbar-wrapper">
	   <div id="genesisbar-container">
		  Đây là nội dung của Hello bar. Các bạn có thể dùng HTML.
	   </div>
	</div>
	<?php
}
add_action( 'genesis_before', 'cswp_add_genesis_

Sau đó, bạn cần tạo stylesheet cho Hello Bar. Mở file style.css và thêm đoạn code sau.

/*
Hellobar Genesis
----------------------------------- */
 
#genesisbar-pusher {
   height: 33px;
}
 
#genesisbar-wrapper {
   position:fixed;
   width: 100%;
   top: 0px;
   left: 0px;
   background-color: #eb593c;
   color: white;
   text-align: center;
   line-height: 30px;
   font-size: 16px;
   font-family: Georgia;
   border-bottom: 3px solid #fff;
   -webkit-box-shadow: 0 8px 6px -6px #999;
   -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
   padding: 10px;
 
}
 
#genesisbar-container a {
   background-color: #888;
   color: #fff;
   text-decoration: none;
   line-height: 30px;
   padding: 8px;
   border-radius: 3px;
   margin-left: 7px;
   font-size: 14px;
}
 
#genesisbar-container a:hover {
   background-color: #1e8cbe;
}
 
.admin-bar #genesisbar-wrapper {
        top: 32px;
}

Ok. Bạn đã có Hello Bar rồi đó. Giờ bạn có thể tùy chỉnh lại nội dùng và màu sắc sao cho phù hợp với trang web là được

Còn đối với các theme khác, các bạn có thể sử dụng một trong các plugin sau để tạo Hello Bar.

WordPress Notification Bar – Miễn phí

WordPress Easy Sticky Notification Bar  – Miễn phí

WPFront Notification Bar  – Miễn phí

WP Notification Bar Pro – Trả phí – Download v1.1.7 

Chúc các bạn thành công!

Bài viết này tự động lấy từ nguồn chiasewp.com, nếu các bạn muốn xem bài viết gốc, hãy truy cập vào chiasewp.com để được hỗ trợ từ tác giả bài viết nhé

Trân trọng!

Leave a Reply

avatar
  Subscribe  
Notify of