Bạn có muốn tạo một sticky floating footer bar trong WordPress? Chúng tôi đã sử dụng các Sticky Floating Footer Bar trên trang web của chúng tôi trong nhiều năm qua bởi vì nó giúp chúng ta giảm tỷ lệ thoát và tăng các trang mà người dùng xem. Rất nhiều người đã hỏi chúng tôi làm thế nào để tạo ra một floating bar tương tự, vì vậy chúng tôi viết bài viết này. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo ra một sticky floating footer bar trong WordPress.

Floating footer bar là gì?

Một “Sticky” Floating Footer Bar cho phép bạn hiển thị nội dung quan trọng của bạn một cách quan trọng với người dùng. Thanh này sẽ luôn hiển thị cho người dùng vì vậy họ có nhiều khả năng nhấp chuột vào nó và khám phá nội dung hữu ích hơn.

Bạn có thể sử dụng floating bar để:

• Thu hút nhiều lượt click hơn vào các bài viết khác
• Xây dựng email list của bạn
• Thu hút sự chú ý đến khuyến mại đặc biệt / bán hàng

Trong bài viết này, chúng tôi sẽ chỉ cho bạn hai phương pháp để thêm một sticky floating footer bar trên trang web WordPress của bạn. Một cách sử dụng một plugin trong khi khác là một phương pháp code mà chúng tôi đang sử dụng trên dieuhau. Bạn có thể chọn một phương pháp mà bạn thấy dễ sử dụng hơn.

Phương pháp 1: Tạo Sticky Floating Footer Bar trong WordPress một cách thủ công

Phương pháp này đòi hỏi bạn phải thêm code vào tập tin WordPress của bạn. Nếu bạn thấy việc thêm code có chút khó khăn, xin vui lòng xem hướng dẫn của chúng tôi về cách dán snippet từ web vào WordPress.

Trước tiên, bạn cần phải kết nối với trang web WordPress của bạn bằng cách sử dụng một ứng dụng FTP hoặc trình quản lý file trong cPanel.

Trong FTP client của bạn, bạn cần phải xác định vị trí các tập tin footer.php trong thư mục theme WordPress và tải nó vào máy tính của bạn. Nó sẽ nằm trong đường dẫn như sau:

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

Tiếp theo, bạn cần phải mở file footer.php trong một trình soạn thảo văn bản đơn giản như Notepad và thêm đoạn code sau ngay trước thẻ body>.

 

Trang thông tin WordPress
Trang chủ WordPress

 

Bạn có thể thêm danh sách các mục bao nhiêu tùy thích. Chúng tôi sẽ cho bạn thấy làm thế nào để xoay ngẫu nhiên chúng trên mỗi trang.

Bước tiếp theo là thêm các CSS style.

Bạn có thể thêm CSS vào tập tin WordPress theme’s style.css của bạn hoặc sử dụng Simple Custom CSS plugin.

/*Diều Hâu Footer Bar*/

.fixedbar {.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 bổ sung thêm các CSS, bạn có thể không thể nhìn thấy những thay đổi trên trang web của bạn. Đó là bởi vì chúng tôi đã thiết lập ẩn các mục trong danh sách của chúng tôi.

Tiếp theo, chúng ta sẽ sử dụng jQuery để hiển thị ngẫu nhiên một mục từ danh sách của chúng tôi trên mỗi trang.

Bạn cần phải mở một trình soạn thảo văn bản đơn giản như Notepad trên máy tính của mình và thêm đoạn code này vào một tập tin trống:

(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 );

Khi đã hoàn thành, bạn cần phải lưu tập tin này là floatingbar.js trên desktop của bạn.

Bây giờ mở FTP client của bạn và kết nối với máy chủ web của bạn. Tới thư mục theme của bạn và xác định vị trí thư mục js. Đường dẫn như sau:

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

Nếu không có thư mục js trong thư mục theme của bạn, thì bạn phải tạo ra một thư mục.
Bây giờ bạn cần phải tải lên tập tin floatingbar.js mà bạn đã tạo trước đó vào thư mục js mà bạn vừa tạo.

Bước tiếp theo là để enqueue (load) tập tin JavaScript trong theme WordPress của bạn.

Dán code sau trong tập tin functions.php của theme của bạn hoặc một site-specific plugin.

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' );

Vậy là xong, bây giờ bạn có thể truy cập trang web của mình để kiểm tra hoạt động của floating footer. Load lại trang một vài lần để xem floating footer hiện ngẫu nhiên các mục khác nhau từ danh sách của bạn.

Lợi ích của việc sử dụng phương pháp này là bạn có được để xoay ngẫu nhiên nhiều liên kết trong floating footer như chúng ta đang làm.

Tuy nhiên khó khăn là bạn cần phải thêm code. Hơn nữa, bạn không thể sử dụng floating footer này cho những thứ khác mà không làm quá nhiều tùy chỉnh CSS.

Cách 2: Sử dụng OptinMontser để Thêm Floating Footer Bar trong WordPress

OptinMonster là thế hệ Plugin hàng đầu hoạt động trên tất cả các trang web. Nó giúp bạn chuyển đổi người truy cập vào website thành người đăng ký và khách hàng.

Một trong những tính năng OptinMonster có một floating header and footer bar mà bạn có thể sử dụng để hiển thị một hình thức optin email cũng như để thúc đẩy single links / offers.

Lợi ích của việc sử dụng phương pháp này là:

• Cài đặt dễ dàng (không cần dùng mã)
• Bạn có thể hiển thị floating bar tùy chỉnh trên các trang / chuyên mục khác nhau của trang web của bạn.
• Bạn có thể sử dụng nó để xây dựng email list cũng như thúc đẩy cung cấp.

Nhược điểm duy nhất là OptinMonster là một dịch vụ phải thanh toán. Tuy nhiên bạn có thể sử dụng mã giảm giá OptinMonster của chúng tôi: WPB10 để được giảm giá 10% trên bất kỳ gói OptinMonster nào
.
Sau khi bạn đã mua OptinMonster (gói Plus hoặc Pro), bạn có thể sử dụng các plugin OptinMonster WordPress API trên trang web của bạn. Để biết thêm chi tiết, xem các bước hướng dẫn chi tiết về làm thế nào để cài đặt một plugin WordPress.

Hoạt động của plugin này là một kết nối giữa trang web WordPress của bạn và OptinMonster.

Sau khi kích hoạt, các plugin sẽ thêm một menu có nhãn OptinMonster mới vào thanh admin WordPress của bạn. Click vào đó sẽ truy cập trang cài đặt plugin.

Bạn sẽ được yêu cầu nhập username API OptinMonster và API key của bạn. Bạn có thể nhận được các key từ tài khoản OptinMonster của bạn.

Sao chép và dán các key vào cài đặt plugin và click vào nút‘Connect to OptinMonster’. Các plugin sẽ kết nối trang web WordPress của bạn vào tài khoản OptinMonster của bạn.

Tiếp theo, bạn cần phải click vào nút “Create New Optin ‘.

Sau đó nó sẽ hiển thị trang ‘Create New Optin’ trên trang web OptinMonster.

Trước tiên, bạn cần đặt một tiêu đề cho Optin Campaign của bạn và chọn một trang web nơi bạn sẽ sử dụng optin này. Nếu trang web của bạn không được liệt kê ra thi click vào liên kết ‘Add a new website’.

Tiếp theo, bạn có thể bấm vào Floating bar ‘Select your optin type’ để sử dụng mẫu có sẵn để sử dụng như một floating bar.

Bạn có thể tùy chỉnh tất cả các mẫu theo ý thích của bạn. Chọn một trong những trông gần gũi nhất so với những gì bạn nghĩ.

Ngay sau khi bạn chọn một mẫu, OptinMonster sẽ khởi động tùy biến thiết kế của họ. Đó là một người xây dựng point-and-click, nơi bạn có thể cấu hình và cài đặt cho optin của bạn.

Khi bạn hoàn tất cài đặt giao diện optin của bạn, hãy chắc chắn nhấp vào nút save.

Trong khi chúng được gọi là optins, chúng không phải lúc nào cũng vậy. Bạn có thể sử dụng tính năng Yes/No để thêm các nút để xem một bài viết trên blog hoặc yêu cầu giảm giá đặc biệt.

Khi bạn lần đầu tiên tạo ra floating bar, nó tạm dừng theo mặc định.

Một khi bạn đã hoàn thành việc cấu hình nó, di chuột qua thanh trạng thái ở menu trên cùng và chọn Campaign Start.

Floating bar bây giờ đã sẵn sàng để được thêm vào trang web WordPress của bạn.

Quay trở lại khu vực admin của trang web WordPress và click OptinMonster »Optins. Bạn sẽ thấy optin của bạn được liệt kê ở đây. Nếu bạn không nhìn thấy nó, nhấn vào nút Refresh Optins và các plugin sẽ hiển thị nó.

Nhấn vào liên kết‘Edit output settings’để tiếp tục.

Trên trang tiếp theo, check vào hộp bên cạnh ‘Enable optin trên trang web’ và sau đó click vào save settings.

Bạn cũng có thể sử dụng các tùy chọn nâng cao để chỉ hiển thị floating bar trên bài viết cụ thể, trang, chuyên mục, và các khu vực khác.

Chúng tôi đã trình bày xong, floating footer bar optin hiện đang hoạt động trên trang web WordPress của bạn.

Chúng tôi hy vọng bài viết này giúp bạn thêm Sticky Floating Footer Bar vào trang web WordPress của bạn. Bạn cũng có thể muốn xem những lời khuyên nhằm để tăng lượng truy cập vào trang web WordPress của bạn.