Cập nhật ngày 15/08/2026: Bài hướng dẫn đầy đủ cách chèn nút liên hệ trong WordPress, vị trí lưu HTML/CSS, cách thay link và biểu tượng, kiểm tra trên điện thoại và hoàn tác khi giao diện bị lỗi.

Nút liên hệ dạng trượt phù hợp khi bạn muốn đặt Messenger, YouTube hoặc LinkedIn cố định bên cạnh màn hình. Khi rê chuột, từng nút mở rộng để hiện tên kênh; khi tải trang, các nút xuất hiện lần lượt.

Góc nhìn NguyenThaiMMO: đoạn code đẹp chưa phải là đoạn code dùng được. Bạn phải biết nó nằm ở đâu, phần nào cần thay, thử trên mobile ra sao và gỡ thế nào khi xung đột theme. Vì vậy bài này tập trung vào một quy trình có thể làm và kiểm tra, không chỉ đưa hai khối code rồi để bạn tự đoán.

Kết quả nút liên hệ sau khi cài

Mẫu này được mình dùng khi làm website cho khách hàng Loco ở Đức. Đây là bối cảnh của bản code gốc; theme, plugin cache và kích thước màn hình trên website của bạn có thể khác nên cần thử trên bản staging hoặc sao lưu trước khi chèn.

Chuẩn bị trước khi chèn code

• Quyền quản trị WordPress.
• Ba URL liên hệ thật, ví dụ Messenger, YouTube và LinkedIn.
• Ba URL icon dạng SVG, PNG hoặc WebP dùng HTTPS.
• Bản sao lưu hoặc điểm khôi phục gần nhất.
• Nếu website có staging, nên thử ở staging trước.

Lưu ý: chỉ chọn một nơi quản lý code. Không đồng thời chèn cùng một đoạn vào WP Extra, theme và một plugin snippet khác vì nút sẽ bị lặp.

Bước 1: Cài WP Extra và xác định nơi lưu code

1. Trong WordPress, vào Plugin → Cài plugin.
2. Tìm WP Extra – One Click Optimize, cài đặt rồi kích hoạt.
3. Mở phần cài đặt WP Extra và tìm khu vực Footer Scripts.
4. Sao chép nội dung hiện có trong Footer Scripts ra một file văn bản để dự phòng.

WP Extra hiện vẫn có trang chính thức trên kho plugin WordPress. Tên menu có thể khác đôi chút theo phiên bản; hãy tìm trường dành cho mã chạy ở cuối trang, không dán CSS vào trường này.

Dấu hiệu đúng: bạn nhìn thấy một ô cho phép lưu HTML/script ở footer và chưa có đoạn nút liên hệ trùng lặp.

Bước 2: Chèn HTML vào Footer Scripts

Dán đoạn dưới đây vào Footer Scripts. Trước khi lưu, thay toàn bộ giá trị Link liên hệ và Link icon bằng URL thật của bạn.

<div class="side-bar-navigation--wrapper" aria-label="Kênh liên hệ">
  <div class="side-bar-navigation">
    <div class="side-bar-navigation--element">
      <a href="Link liên hệ" target="_blank" rel="noopener nofollow">
        <img src="Link icon" alt="Messenger" width="30" height="30">
        <span>Messenger</span>
      </a>
    </div>
    <div class="side-bar-navigation--element">
      <a href="Link liên hệ" target="_blank" rel="noopener nofollow">
        <img src="Link icon" alt="YouTube" width="30" height="30">
        <span>YouTube</span>
      </a>
    </div>
    <div class="side-bar-navigation--element">
      <a href="Link liên hệ" target="_blank" rel="noopener nofollow">
        <img src="Link icon" alt="LinkedIn" width="30" height="30">
        <span>LinkedIn</span>
      </a>
    </div>
  </div>
</div>

Cách thay đúng: link liên hệ phải bắt đầu bằng https://. Link icon cũng phải là URL trực tiếp tới file ảnh, không phải URL của trang Media Library. Nếu muốn thêm Zalo hoặc Telegram, nhân bản trọn một khối side-bar-navigation--element rồi đổi link, icon và nhãn.

Dấu hiệu thành công: sau khi lưu và xóa cache, mã HTML xuất hiện ở cuối mã nguồn trang và không bị WordPress xóa mất.

Bước 3: Chèn CSS vào All Screens

Mở khu vực Custom CSS → All Screens của WP Extra và dán CSS dưới đây. Nếu theme đã có nơi nhập CSS toàn trang, bạn có thể dùng nơi đó nhưng không dán hai lần.

.side-bar-navigation--wrapper {
  position: fixed;
  z-index: 999;
  width: auto;
  left: calc(100% - 45px);
  top: 55vh;
  transform: translateY(-50%);
}

.side-bar-navigation--element {
  background-color: #008080;
  padding: 8px 10px;
  margin-bottom: 2px;
  width: 250px;
  transform: translateX(0);
  transition: transform .35s ease;
  animation: StartFadeIn .8s ease-out both;
}

.side-bar-navigation--element:hover,
.side-bar-navigation--element:focus-within {
  transform: translateX(-200px);
}

.side-bar-navigation--element a {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.side-bar-navigation--element a img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.side-bar-navigation--element a span {
  font-size: 17px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-bar-navigation--element:nth-child(1) { animation-delay: .2s; }
.side-bar-navigation--element:nth-child(2) { animation-delay: .4s; }
.side-bar-navigation--element:nth-child(3) { animation-delay: .6s; }

@keyframes StartFadeIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px) {
  .side-bar-navigation--wrapper {
    left: auto;
    right: 10px;
    top: auto;
    bottom: 90px;
    transform: none;
  }
  .side-bar-navigation--element {
    width: 46px;
    height: 46px;
    padding: 8px;
    border-radius: 50%;
  }
  .side-bar-navigation--element:hover,
  .side-bar-navigation--element:focus-within {
    transform: none;
  }
  .side-bar-navigation--element a span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .side-bar-navigation--element {
    animation: none;
    transition: none;
  }
}

Bản CSS cập nhật giữ hiệu ứng trượt trên máy tính, nhưng thu gọn thành nút tròn trên màn hình nhỏ để không che nội dung. Nó cũng hỗ trợ bàn phím bằng :focus-within và tôn trọng cài đặt giảm chuyển động của người dùng.

Bước 4: Lưu, xóa cache và kiểm tra

1. Lưu Footer Scripts và Custom CSS.
2. Xóa cache của plugin cache, cache máy chủ và CDN nếu có.
3. Mở website trong cửa sổ ẩn danh trên máy tính.
4. Rê chuột vào từng nút và bấm thử từng liên kết.
5. Dùng phím Tab để kiểm tra nút có nhận focus hay không.
6. Mở DevTools hoặc điện thoại thật để kiểm tra ở chiều rộng dưới 768 px.

Đạt yêu cầu khi: nút không che giỏ hàng/nút lên đầu trang, không tạo thanh cuộn ngang, icon tải được, link mở đúng và giao diện mobile chỉ hiện icon.

Cách hoàn tác khi nút bị lỗi

1. Xóa hoặc tạm vô hiệu hóa khối HTML trong Footer Scripts.
2. Xóa khối CSS bắt đầu bằng .side-bar-navigation--wrapper.
3. Lưu lại và xóa cache.
4. Nếu trang vẫn lỗi, khôi phục nội dung Footer Scripts đã sao lưu trước đó.

Không sửa trực tiếp file theme cha chỉ để thêm nút này. Khi theme cập nhật, thay đổi có thể bị mất; lỗi cú pháp PHP còn có thể làm trang trắng.

Lỗi thường gặp và cách sửa

• Không thấy nút: kiểm tra cache và xem HTML có bị plugin lọc hay không.
• Chỉ thấy chữ, không thấy icon: URL icon không phải link ảnh trực tiếp hoặc bị chặn mixed content.
• Nút nằm sau popup: tăng z-index có kiểm soát, tránh đặt giá trị quá lớn khi không cần.
• Mobile bị che nội dung: điều chỉnh bottom: 90px theo thanh điều hướng của theme.
• Rê chuột không mở hết: kiểm tra giá trị chiều rộng 250 px và khoảng dịch 200 px.
• Nút xuất hiện hai lần: code đang được chèn ở nhiều nơi; giữ lại đúng một nguồn.

Hosting và công cụ mình từng đề cập

Các liên kết dưới đây là tài liệu tham khảo. Chính sách, giá và ưu đãi có thể thay đổi; hãy kiểm tra trang đích trước khi đăng ký.

• Hosting nước ngoài
• Vultr
• Vietnix
• iNET
• AZDIGI
• HostingViet
• Tenten

Disclosure affiliate: một số đường dẫn hosting có thể là liên kết giới thiệu. Nếu bạn đăng ký qua link, NguyenThaiMMO có thể nhận hoa hồng mà không làm tăng giá bạn phải trả. Hãy chọn dịch vụ theo nhu cầu kỹ thuật và điều khoản hiện tại, không chỉ dựa vào ưu đãi.

Nguồn và ngày kiểm tra

• WP Extra trên kho plugin WordPress.

Ngày cập nhật: 15/08/2026. Giao diện plugin có thể khác theo phiên bản; hãy kiểm tra trên website thử nghiệm và chuẩn bị cách hoàn tác trước khi áp dụng cho trang đang hoạt động.

Câu hỏi thường gặp

Có thể chèn code mà không dùng WP Extra không?

Có. Bạn có thể dùng một plugin quản lý code snippet hoặc chức năng Custom Code của theme nếu nó hỗ trợ HTML ở footer và CSS toàn trang. Nguyên tắc vẫn giống nhau: HTML và CSS phải nằm đúng nơi, có bản sao lưu và chỉ được chèn một lần. Không nên chỉnh trực tiếp theme cha vì thay đổi có thể mất sau khi cập nhật.

Có nên dùng icon lấy từ website khác không?

Không nên hotlink ảnh từ một website không thuộc quyền kiểm soát của bạn. Chủ website có thể đổi URL, chặn truy cập hoặc thay nội dung. Cách ổn định hơn là tải icon có giấy phép phù hợp lên Media Library của chính website, sao chép URL file rồi điền vào thuộc tính src.

Nút liên hệ có làm website chậm không?

Ba nút HTML/CSS đơn giản thường có tác động nhỏ. Phần dễ gây chậm hơn là icon có dung lượng lớn, tải từ máy chủ bên ngoài hoặc plugin chèn thêm nhiều script. Hãy dùng icon WebP/SVG nhỏ, khai báo kích thước ảnh và kiểm tra lại trang sau khi bật. Nếu chỉ cần ba liên kết, không nên cài thêm một plugin chat nặng chỉ để tạo hiệu ứng tương tự.

Kết luận

Bạn hãy thay ba link liên hệ và ba icon trước, lưu HTML ở Footer Scripts, lưu CSS ở All Screens rồi kiểm tra trên cả desktop lẫn mobile. Nếu nút không đúng vị trí, chỉ điều chỉnh top, bottom và khoảng dịch; đừng chèn lại toàn bộ code ở một vị trí khác.