Có phải bạn đang tìm cách tạo Sticky Floating Footer Bar trong WordPress không?
Sticky Floating Footer Bar là một phần nội dung ở phía dưới màn hình luôn luôn cố định ở vị trí đó cho dù bạn cuộn lên hay xuống. Sử dụng Sticky Floating Footer Bar giúp giảm tỷ lệ thoát trang và tăng số lượt xem trang tổng thể.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một Sticky Floating Footer Bar trong WordPress.
Floating Footer Bar là gì?
Floating Footer Bar (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 đến với người dùng. Thanh này luôn luôn hiển thị trên màn hình của người dùng, họ sẽ có nhiều khả năng nhấp vào và xem các nội dung mà nó dẫn tới hơn.
Bạn có thể sử dụng Floating Footer Bar nổi để:
- Đẩy traffic đến một vài bài viết chính
- Xây dựng danh sách email
- Thu hút sự chú ý đến với các chương trình ư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 để tạo ra Sticky Floating Footer Bar trên website WordPress của bạn. Một phương pháp sử dụng một plugin trong khi phương pháp thứ hai là đoạn mã mà chúng tôi đang sử dụng.
Giới thiệu 2 phương pháp tạo Sticky Floating Footer Bar
Phương pháp 1: Tạo thủ công Sticky Floating Footer Bar trong WordPress
Phương pháp này yêu cầu bạn chèn thêm một vài đoạn mã vào các file của WordPress. Nếu bạn chưa quen với việc này, hãy xem hướng dẫn của chúng tôi về cách dán các đoạn mã từ internet vào WordPress .
Trước tiên, bạn cần kết nối với trang web WordPress của mình bằng ứng dụng FTP client hoặc File Manager của cPanel.
Trong ứng dụng FTP client của mình, bạn cần tìm file footer.phpt trong thư mục chứa theme WordPress đang dùng và tải nó xuống máy tính của bạn. File này sẽ ở trong thư mục /wp-content/themes/your-theme-folder/.
Tiếp theo, bạn cần mở file footer.php trong một trình soạn thảo văn bản như Notepad và thêm đoạn mã sau ngay trước thẻ </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 bao nhiêu tag <ul> tùy thích. Chúng tôi sẽ chỉ cho bạn cách hiển thị chúng xoay vòng một cách ngẫu nhiên trên mỗi lần tải trang.
Bước tiếp theo là trang trí cho chúng bằng CSS .
Bạn có thể thêm CSS vào file style.css của theme đang dùng 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 chèn thêm custom CSS, bạn có thể chưa thấy ngay các thay đổi trên trang web của mình. Điều này là do chúng tôi đã thiết lập display: none cho các mục trong danh sách trên.
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 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 như Notepad và dán vào đó đoạn mã sau
| (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 lưu tệp này dưới dạng floatbar.js trên màn hình ca.
Bây giờ hãy mở ứng dụng FTP client và kết nối với web hosting. Chuyển tới thư mục theme của bạn và tìm thư mục con có tên js ở đường dẫn sau
/wp-content/themes/your-theme-folder/js
Nếu không có thư mục theme bạn đang dùng chưa có thư mục nào tên js, hãy tạo một cái tên như thế.
Bây giờ bạn cần tải lên file floatbar.js mà bạn đã tạo trước đó vào thư mục js bạn vừa tạo.
Bước tiếp theo là enqueue file JavaScript này vào theme WordPress bạn đang dùng.
Để thực hiện việc này, dán đoạn mã sau vào file functions.php của theme bạn đang dùng hoặc một site-specific plugin.
……………………………………………………………………….
Đó 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 thực tế trông như thế nào. Bạn có thể refresh lại trang một vài lần để kiểm tra lại việc thanh chân trang đang hiển thị ngẫu nhiên các mục khác nhau từ danh sách.
Lợi ích của việc sử dụng phương pháp này là bạn có thể xoay vòng ngẫu nhiên nhiều link trong Floating Footer Bar.
Tuy nhiên khó khăn là bạn cần phải đọc hiểu và chèn thêm các đoạn mã. Hơn nữa, việc sử dụng Floating Footer Bar này cho những nhu cầu khác yêu cầu viết khá nhiều mã CSS trang trí.
Phương pháp 2: Sử dụng OptinMonster để thêm Floating Footer Bar vào WordPress
OptinMonster là một plugin tạo lead rất nổi tiếng, giúp bạn tăng tỉ lệ chuyển đổi đối với các khách vãng lai thành những subscriber và khách hàng trung thành.
Một trong những tính năng mà OptinMonster hỗ trợ là thanh header và thanh footer đều có thể được gắn cố định. Bạn có thể sử dụng các tành phần này để hiển thị form đăng ký email cũng như quảng cáo các thông tin quan trọng.
Lợi ích của việc sử dụng phương pháp này là:
- Dễ cài đặt, không cần viết code
- Bạn có thể hiển thị các Floating Footer Bar trên một số trang/category nhất định.
- Bạn có thể sử dụng nó để xây dựng email list cũng như quảng cáo các ưu đãi.
Nhược điểm duy nhất là OptinMonster là một dịch vụ trả phí.
Sau khi đã mua OptinMonster (gói Plus hoặc Pro), bạn sẽ 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 mới có tên OptinMonster vào bảng điều khiển WordPress dashboard, chính là nơi chứa các cài đặt của plugin.
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.
Tiếp theo bạn sao chép và dán các khóa vào phần cài đặt plugin và nhấp vào nút Connect to OptinMonster. Bây giờ plugin sẽ tiến hành kết nối trang web WordPress của bạn với tài khoản OptinMonster.
Tiếp theo, bạn cần nhấp vào nút Create New Optin.
Thao tác này sẽ đưa bạn đến trang Create New Optin trên trang web OptinMonster.
Trước tiên, bạn cần cung cấp tiêu đề cho Optin Campaign 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ê ở đây, hãy nhấp vào liên kết Add a new website.
Tiếp theo, bạn có thể nhấp vào Floating bar bên dưới phần Select your optin type để sử dụng các template được thiết kế sẵn cho Floating Footer Bar.
Bạn có thể chỉnh sửa tất cả các mẫu này theo ý thích riêng. Để tiết kiệm thời gian, hãy chọn một trong những template gần với ý tưởng của bạn nhất.
Ngay sau khi bạn chọn một template, OptinMonster sẽ khởi chạy trình thiết kế của họ. Trình thiết kế này hỗ trợ thao tác kéo thả đơn giản, bạn sẽ không mất quá nhiều thời gian thiết lập giao diện và các cài đặt cơ bản cho optin của mình.
Khi bạn hoàn tất việc cấu hình optin của mình, hãy nhớ nhấp vào nút Save.
Những floating bar này không bắt buộc phải là một optin thu thập email. Bạn có thể sử dụng tính năng Yes/No để thêm nút xem bài viết trên blog hoặc lấy mã giảm giá.
Khi bạn tạo thanh floating bar, thanh này theo mặc định sẽ ở trạng thái Paused.
Khi bạn đã cấu hình xong, hãy di chuột qua thanh trạng thái ở menu trên cùng và chọn Start Campaign.
Thanh Floating Footer Bar của bạn hiện đã sẵn sàng để được chèn vào WordPress.
Bây giờ, quay lại bảng điều khiển WordPress dashboard 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 chưa thấy nó, hãy nhấp vào nút Refresh Optins để cập nhật danh sách mới nhất.
Nhấp vào liên kết Edit output settings để tiếp tục.
Trên trang tiếp theo, hãy tích vào Enable optin on site và sau đó nhấp vào Save settings.
Bạn cũng có thể sử dụng tùy chọn Advanced để thiết lập chỉ hiển thị Floating Bar trên các bài viết, page hoặc category cụ thể.
Giờ thì optin Floating Footer Bar đã hiển thị 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 biết cách tạo Sticky Floating Footer Bar trong WordPress. Bạn cũng có thể muốn xem thêm một số cách để thu hút lượng truy cập vào trang web WordPress của mình .
Nếu thích bài viết này, bạn vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.