Nút liên hệ là một yếu tố quan trọng giúp người dùng nhanh chóng kết nối với bạn qua Zalo, Facebook Messenger, Email hoặc số điện thoại. Bài viết này sẽ hướng dẫn bạn thêm nút liên hệ đẹp và chuyên nghiệp cho website WordPress mà không cần biết lập trình.
Cách Thêm Nút Liên Hệ Cho Website WordPress
Bước 1: Cài Đặt Plugin Code Snippets
Thay vì chỉnh sửa file theme, chúng ta sẽ sử dụng plugin Code Snippets để chèn mã code an toàn hơn:
- Truy cập Bảng điều khiển WordPress > Plugins > Cài mới.
- Tìm “Code Snippets” và cài đặt.
- Kích hoạt plugin sau khi cài xong.
Bước 2: Thêm Code Chèn Nút Liên Hệ
Sau khi cài đặt plugin, bạn thực hiện theo các bước sau:
- Vào Snippets > Add New.
- Đặt tên snippet là “Nút Liên Hệ”.
- Sao chép và dán đoạn code sau vào khung:
<style>
.phone-mobile {display: none;}
.buianhweb-nav {
position: fixed;
left: 13px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.buianhweb-nav ul {list-style: none;padding: 0;margin: 0;}
.buianhweb-nav ul li {list-style: none!important;}
.buianhweb-nav ul>li a {
border:none;
padding: 3px;
display: block;
border-radius: 5px;
text-align: center;
font-size: 10px;
line-height: 15px;
color: #515151;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.buianhweb-nav ul>li .chat_animation{display:none}
.buianhweb-nav ul>li a i.ticon-heart {
background: url(https://buianhweb.com/wp-content/uploads/2025/02/google-maps.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.buianhweb-nav ul>li a i.ticon-zalo-circle2 {
background: url(https://buianhweb.com/wp-content/uploads/2025/02/Icon_of_Zalo.svg.webp) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.buianhweb-nav li .button {
background: transparent;
}.buianhweb-nav ul>li a i.ticon-angle-up {
background: url(https://buianhweb.com/wp-content/uploads/2025/02/up-arrow.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.buianhweb-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
margin: auto;
}.buianhweb-nav ul li .button .btn_phone_txt {
position: relative; top:35px;
font-size: 10px;
font-weight: bold;
text-transform: none;
}
.buianhweb-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}.buianhweb-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.buianhweb-nav ul>li a i.ticon-messenger {
background: url(https://buianhweb.com/wp-content/uploads/2025/02/messenger.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.buianhweb-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}
.buianhweb-nav ul>li a i.ticon-chat-sms {
background: url(https://buianhweb.com/wp-content/uploads/2025/02/email.png) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.buianhweb-nav ul>li a i.icon-phone-w {
background: url(https://buianhweb.com/wp-content/uploads/2025/02/phone-call.png) no-repeat;
background-size: contain;}
.buianhweb-nav ul li .button .btn_phone_txt {
position: relative;
}
@media only screen and (max-width: 600px){
.buianhweb-nav li .chat_animation{display:block !Important}
.buianhweb-nav li .button .phone_animation {box-shadow: none;
position: absolute;
top: -16px;
left: 50%;
transform: translate(-50%,0);
width: 50px;
height: 50px;
border-radius: 100%;
background: #6cb917;
line-height: 15px;
border: 2px solid white;
}
.buianhweb-nav ul>li a{padding:0; margin:0 auto}
.buianhweb-nav {
background: white;
width: 100%; border-radius:0;
color: #fff;
height: 60px;
line-height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.buianhweb-nav li {
float: left;
width: 20%;
list-style: none;
height: 50px;
}
.phone-mobile{display:block !important}
.to-top-pc {display: none;}
}
</style>
<div class="buianhweb-nav">
<ul>
<li><a href="https://maps.app.goo.gl/ib1d1TQ79KvdYjrf6" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
<li><a href="//zalo.me/0374686626" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
<li class="phone-mobile">
<a href="tel:0374686626" rel="nofollow" class="button">
<span class="phone_animation animation-shadow">
<i class="icon-phone-w" aria-hidden="true"></i>
</span>
<span class="btn_phone_txt">Gọi điện</span>
</a>
</li>
<li><a href="//www.messenger.com/t/buianhweb" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
<li><a href="sms:0374686626" class="chat_animation">
<i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
Nhắn tin SMS</a>
</li>
<li class="to-top-pc">
<a href="#" rel="nofollow">
<i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
</a>
</li>
</ul>
</div>
- Nhấn Lưu và Kích Hoạt.
Kết Luận
Bằng cách làm theo hướng dẫn trên, bạn đã thêm nút liên hệ đẹp cho website WordPress dễ dàng mà không cần biết lập trình. Hãy áp dụng ngay để tăng trải nghiệm người dùng và giúp website chủa bỏ cơ hội tiếp cận khách hàng hiệu quả hơn!
