Cách tạo Thanh chân trang nổi “Cố định” trong WordPress

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 thanh chân trang nổi 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 các trang được người dùng xem. Có nhiều bạn hỏi chúng tôi cách tạo một thanh nổi tương tự, vậy là đâ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.

Other :

Floating Footer Bar

Floating Footer Bar là gì?

Thanh chân trang nổi cố định cho phép bạn hiển thị nổi bật nội dung quan trọng của mình cho người dùng. Thanh này vẫn hiển thị cho người dùng mọi lúc, vì vậy họ có nhiều khả năng nhấp vào thanh này và khám phá nội dung hữu ích hơn.

WPBeginner Footer Bar

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

  • Thúc đẩy nhiều nhấp chuột hơn đến các bài đăng trên blog khác
  • Xây dựng danh sách email của bạn
  • Thu hút sự chú ý đến các ưu đãi / giảm giá đặ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ái sử dụng một plugin trong khi cái kia là một phương pháp mã mà chúng tôi đang sử dụng trên WPBeginner. Bạn có thể chọn cái mà bạn thấy dễ sử dụng hơn.

Phương pháp 1: Tạo thủ công thanh chân trang nổi dính trong WordPress

Phương pháp này yêu cầu bạn thêm mã vào các tệp WordPress của mình. Nếu bạn chưa quen với việc thêm mã, hãy xem hướng dẫn của chúng tôi về cách dán đ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 footer.php trong thư mục chủ đề WordPress của mình và tải xuống máy tính để bàn của bạn. Nó 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 trong một trình soạn thảo văn bản thuần túy như Notepad và thêm mã sau ngay trước </body> .

<div class="fixedbar">
<div class="boxfloat">

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

</div>
</div>

Bạn có thể thêm nhiều mục danh sách như bạn muốn. Chúng tôi sẽ chỉ cho bạn cách xoay chúng ngẫu nhiên trên mỗi lần tải trang.

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

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

/*WPBeginner 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 có thể không thấy các thay đổi trên trang web của mình. Điều này là do chúng tôi đã đặt hiển thị cho các mục trong danh sách của chúng tôi thành không có.

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 lần tải trang.

Bạn cần mở một trình soạn thảo văn bản thuần túy 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. Nó sẽ ở một con đường như thế này:

/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 cần 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ã này 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' );

Đó là tất cả, bây giờ bạn có thể truy cập trang web của mình để xem thanh chân trang nổi đang hoạt động. Tải lại trang một vài lần để xem thanh chân trang 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 thanh chân trang nổi như chúng ta đang làm.

Tuy nhiên khó khăn là bạn cần thêm mã. Hơn nữa, bạn không thể sử dụng thanh 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à một plugin tạo khách hàng tiềm năng phổ biến 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 cáo 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à:

  • Dễ cài đặt (không có mã)
  • Bạn có thể hiển thị các 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ủa mình cũng như quảng bá các ưu đãi.

Nhược điểm duy nhất là OptinMonster là một dịch vụ trả phí. Nhưng bạn có thể sử dụng Phiếu giảm giá OptinMonster: WPB10 của chúng tôi để được giảm giá 10% cho 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 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 của chúng tôi về cách cài đặt plugin WordPress.

Plugin này chỉ hoạt động như một trình kết nối giữa trang web WordPress của bạn và OptinMonster.

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

Connect your WordPress site to OptinMonster

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

OptinMonster API keys

Sao chép và dán các phím vào cài đặt plugin và nhấp vào nút ‘Kết nối với OptinMonster’. Bây giờ 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’.

Create a new optin

Thao tác này sẽ đưa bạn đến trang ‘Tạo Optin Mới’ trên trang web OptinMonster.

Trước tiên, bạn cần cung cấp 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’.

Optin Settings

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

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

Ngay sau khi bạn chọn một mẫu, OptinMonster sẽ khởi chạy công cụ tùy chỉnh thiết kế của họ. Nó là một trình tạo trỏ và nhấp, nơi bạn có thể định cấu hình giao diện và cài đặt cho optin của mình.

Optin customizer

Khi bạn hoàn tất việc định cấu hình giao diện của optin, 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 nút xem bài đăng 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 thanh nổi, thanh này bị 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 của bạn 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à truy cập OptinMonster »Optins . Bạn sẽ thấy optin của mình đượ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.

Optin output settings

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

Bạn cũng có thể sử dụng 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.

Đó là tất cả, optin thanh chân trang nổi hiện đã có trên trang web WordPress của bạn.

Floating bar added with OptinMonster

Chúng tôi hy vọng bài viết này đã giúp bạn thêm thanh chân trang nổi vào trang web WordPress của mình. Bạn cũng có thể muốn xem các mẹo hữu ích này để thúc đẩy lưu lượng truy cập vào trang web WordPress của mình.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Free Download Cách tạo Thanh chân trang nổi “Cố định” trong WordPress :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress