Hướng dẫn tạo một Sticky Floating Footer Bar trong WordPress

Hướng dẫn tạo một Sticky Floating Footer Bar trong WordPress

Hôm nay tôi sẽ hướng dẫn các bạn tạo một thanh Stick Floating Footer Bar cho website WordPress của các bạn. Thanh Sticky Floating Footer bar này sẽ giúp bạn cải thiện tỷ lệ thoát trang cũng như tăng trang được xem bởi người dùng. Trong bài viết này, tôi sẽ giới thiệu cho các bạn cách tạo một thanh Footer nổi trên WordPress.

Floating Footer Bar là gì?

Floating Footer Bar là thanh chân nổi trên website, hiển thị dưới footer và stick tại vị trí này. Nằm ngang phần footer website giúp hiển thị những nội dung nổi bật giúp thu hút người dùng trên website của bạn. Bạn có thể sử dụng Floating Footer Bar – thanh chân nổi để:

  • Tăng thêm nhấp chuột lên các bài đăng trên blog, các chuyên mục khác trên website của bạn
  • Tạo khu vực đăng ký theo dõi, đăng ký mail nhận quà, bài viết,… nổi bật trên website
  • Chú ý đến các ưu đãi / bán hàng đặc biệt

Trong bài này, chúng tôi sẽ hướng cho bạn phương pháp để thêm một thanh chân nổi trên trang web WordPress bằng những đoạn code.

Tạo thanh chân trang nổi tự động trong WordPress

Trước tiên, bạn cần phải kết nối với trang web WordPress của bạn ( kết nối dịch vụ lưu trữ web) bằng cách sử dụng FTP hoặc trình quản lý tập tin trong cPanel.

Trên các phần mềm hỗ trợ kết nối FTP, bạn cần tìm đến file footer.php của theme WordPress đang sử dụng và tải xuống máy tính của bạn. File đó sẽ được đặt tại một con đường như thế này:

/wp-content/themes/your-theme-folder/

Tiếp theo, bạn cần mở tệp footer.php và thêm và đoạn code sau ngay trước thẻ </body>.

<div class="fixedBar">
<div class="boxfloat">

<ul id="tips">
<li><a href="http://j3.ripplenewsvietnam.com/">J3TeaM Link is the First Item</a></li>
<li><a href="https://www.wordpress.org/">WordPress.org is the Second Item</a></li>
</ul>

</div>
</div>

Bước tiếp theo là thêm CSS . Bạn có thể thêm CSS vào tệp của theme WordPress đang sử dụng – style.css hoặc sử dụng plugin Simple Custom CSS .

/*J3TeaM Footer Bar*/

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}

#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

Sau khi thêm CSS, bạn sẽ không thể thấy các thay đổi trên trang web của mình. Lý do là chúng tôi đã display chúng đi rồi bạn sẽ làm thêm vài bước để hiển thị nó lên trên website của mình. Tiếp theo, chúng tôi sẽ sử dụng jQuery để hiển thị ngẫu nhiên một mục từ danh sách trang của chúng tôi.

Tiếp theo bạn mở Notepad trên máy tính của mình lên và thêm đoạn code này vào:

(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );

Sau đó bạn cần lưu tệp này dưới dạng floatingbar.js trên máy tính của mình.

Bây giờ dùng phần mềm kết nối FTP và kết nối với máy chủ lưu trữ web của bạn. Đi tới thư mục theme và tìm đến thư mục js. Thường thì đường dẫn sẽ như sau:

/wp-content/themes/your-theme-folder/js

Nếu không có thư mục js trong thư mục theme, bạn cần phải tạo một thư mục js. Bây giờ bạn sẽ tải tệp tin floatingbar.js đã tạo trước đó vào thư mục js bạn vừa tạo. Bước tiếp theo là kích hoạt tệp JavaScript trong chủ đề WordPress của bạn.

Đến đây bạn sẽ phải dán đoạn code này vào file functions.php .

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

Bây giờ bạn có thể load lại trang web WordPress của mình để xem nó sẽ hiển thị thế nào nhé. Load vài lần để xem tính năng hiển thị ngẫu nhiên nha.

Hướng dẫn tạo một Sticky Floating Footer Bar trong WordPress
5 (100%) 1 vote

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *