Cách Tạo Một “Sticky” Floating Footer Bar Trong WordPress [NEW]

Bạn có muốn tạo một thanh chân trang nổi dính trong WordPress không? Chúng tôi đã sử dụng Sticky Floating Footer Bar trên trang web của mình trong nhiều năm vì nó giúp chúng tôi giảm tỷ lệ thoát và tăng số 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 thanh nổi tương tự, vì vậy chúng tôi viết bài này. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một thanh chân trang nổi dính trong WordPress.

Thanh chân trang nổi dính

Thanh chân trang nổi là gì?

Thanh chân trang nổi “Cố định” cho phép bạn hiển thị nội dung quan trọng của mình theo cách quan trọng đối với người dùng. Thanh này sẽ luôn hiển thị với người dùng để họ có nhiều khả năng nhấp vào thanh này và khám phá nội dung hữu ích.

Bạn có thể sử dụng thanh nổi để:

  • Nhận được nhiều nhấp chuột hơn vào các bài đăng khác
  • Xây dựng danh sách email của bạn
  • Thu hút sự chú ý đến các ưu đãi / bán hàng đặc biệt

Trong bài viết này, chúng tôi sẽ chỉ cho bạn hai phương pháp để thêm thanh chân trang nổi dính trên trang web WordPress của bạn. Một cách sử dụng plugin trong khi cách còn lại là phương pháp mã hóa 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 Thanh chân trang nổi dính trong WordPress theo cách thủ công

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

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

Trong ứng dụng khách FTP của mình, bạn cần tìm tệp footer.php trong thư mục chủ đề WordPress và tải xuống máy tính của bạn. Nó sẽ nằm trong đường dẫn sau:

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

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

<div class="fixedbar">
<div class="boxfloat">
 
<ul id="tips">
<li><a href="https://dieuhau.com/">Trang thông tin WordPress</a></li>
<li><a href="http://www.wordpress.org/">Trang chủ WordPress</a></li>
</ul>
 
</div>
</div>

Bạn có thể thêm bao nhiêu mục vào danh sách tùy thích. Chúng tôi sẽ hướng dẫn bạn cách xoay chúng ngẫu nhiên trên mỗi trang.

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

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

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

Bạn cần 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 mã này vào một tệp 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 );

Sau khi hoàn tất, bạn cần lưu tệp này dưới dạng floatbar.js trên màn hình của mình.

Bây giờ hãy mở ứng dụng FTP của bạn và kết nối với máy chủ web của bạn. Đi tới thư mục chủ đề của bạn và tìm 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 chủ đề của bạn, thì bạn phải tạo một thư mục.
Bây giờ bạn cần tải lên tệp floatbar.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à xếp hàng (tải) tệp JavaScript trong chủ đề WordPress của bạn.

Dán mã sau vào tệp functions.php của chủ đề của bạn hoặc một plugin dành riêng cho trang web.

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 chân trang nổi đang hoạt động. Tải lại trang một vài lần để xem phần chân trang nổi hiển thị 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ó thể xoay ngẫu nhiên nhiều liên kết trong phần chân trang nổi như chúng ta đang làm.

Tuy nhiên, khó khăn là bạn cần phải thêm mã. Hơn nữa, bạn không thể sử dụng chân trang nổi này cho những việc khác mà không thực hiện quá nhiều tùy chỉnh CSS.

Phương pháp 2: Sử dụng OptinMontser để thêm Thanh chân trang nổi trong WordPress

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

Một trong những tính năng mà OptinMonster có là thanh đầu trang và chân trang nổi mà bạn có thể sử dụng để hiển thị biểu mẫu đăng ký email cũng như để quảng bá các liên kết / ưu đãi đơn lẻ.

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 mã)
  • Bạn có thể hiển thị thanh nổi tùy chỉnh trên các trang / danh mục khác nhau của trang web của mình.
  • Bạn có thể sử dụng nó để xây dựng danh sách email cũng như quảng cáo ưu đãi.

Nhược điểm duy nhất là OptinMonster là một dịch vụ trả phí. 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% cho bất kỳ gói OptinMonster nào
.
Sau khi mua OptinMonster (gói Plus hoặc Pro), bạn có thể sử dụng plugin OptinMonster WordPress API trên trang web của mình. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước chi tiết về cách cài đặt plugin WordPress.

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

Khi kích hoạt, plugin sẽ thêm một menu mới có nhãn OptinMonster vào thanh quản trị WordPress của bạn. Nhấp vào nó sẽ chuyển đến trang cài đặt plugin.

kết nối

Bạn sẽ được yêu cầu nhập tên người dùng API OptinMonster và khóa API của mình. Bạn có thể lấy chìa khóa từ tài khoản OptinMonster của mình.

omapikeys

Sao chép và dán các khóa vào cài đặt plugin và nhấp vào nút ‘Kết nối với OptinMonster’. Plugin sẽ kết nối trang web WordPress của bạn với tài khoản OptinMonster của bạn.

Tiếp theo, bạn cần nhấp vào nút “Tạo Optin Mới ‘.

createnewoptin

Sau đó, nó sẽ hiển thị trang ‘Tạo Optin Mới’ trên trang web OptinMonster.

Trước tiên, bạn cần đặt tiêu đề cho Chiến dịch Optin của mình và chọn một trang web mà bạn sẽ sử dụng optin này. Nếu trang web của bạn không được liệt kê, hãy nhấp vào liên kết ‘Thêm trang web mới’.

optinsettings

Tiếp theo, bạn có thể nhấp vào Thanh nổi ‘Chọn loại optin của bạn’ để sử dụng mẫu tích hợp để sử dụng làm thanh nổi.

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 cái nhìn gần nhất với những gì bạn nghĩ.

Ngay sau khi bạn chọn một mẫu, OptinMonster bắt đầu tùy chỉnh thiết kế của họ. Đó là một trình tạo trỏ và nhấp, nơi bạn có thể định cấu hình và cài đặt optin của mình.

Khi bạn hoàn tất việc thiết lập chủ đề optin của mình, hãy nhớ nhấp vào nút lưu.

Mặc dù chúng được gọi là optins, nhưng 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 Có / Không để thêm các nút xem bài đăng trên blog hoặc yêu cầu giảm giá đặc biệt.

Khi bạn tạo một thanh nổi lần đầu tiên, nó tạm dừng theo mặc định.

Khi bạn đã định cấu hình xong, hãy di chuột qua thanh trạng thái ở menu trên cùng và chọn Bắt đầu Chiến dịch.

Thanh nổi hiện đã sẵn sàng để được thêm vào trang web WordPress của bạn.

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

Nhấp vào liên kết ‘Chỉnh sửa cài đặt đầu ra’ để tiếp tục.

optinoutput

Trên trang tiếp theo, chọn hộp bên cạnh ‘Bật optin trên trang web’ và sau đó nhấp vào lưu cài đặt.

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

Chúng tôi đã đề cập đến, optin thanh chân trang nổi hiện đã có trên trang web WordPress của bạn.

floatbarpreview

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 mình. Bạn cũng có thể muốn xem các mẹo để tăng lưu lượng truy cập vào trang web WordPress của mình.