Code này mình tạo và test chạy tốt trên theme Flatsome, WordPress 4.9.8. Do đó, bài viết sẽ hướng dẫn các bạn thực hiện trên theme Flatsome nhé, những bạn không dùng theme Flatsome thì chỉ cần quan tâm đến file footer.php thôi (Giao diện > Sửa – chọn file footer.php). Về cơ bản, giao diện Float menu sau khi thực hiện xong sẽ như hình ảnh dưới đây:

Bài viết này mình không giải thích quá nhiều vì chủ yếu code HTML và CSS thôi, phần này cơ bản rồi. Do đó, mình chỉ note các bước làm cho cụ thể để ngay cả những ai không biết HTML hoặc CSS cũng có thể chỉ cần copy paste là sử dụng được.

Bước 1: Tắt nút back to top mặc định

Vì trong đoạn code của chúng ta có nút “Lên đầu” nên mình cần tắt nút Back to top mặc định của theme đi. Thực chất thì để cả hai vẫn hoạt động được nhưng nhìn nó trùng nhau nên sẽ rất xấu. Hoặc bạn nào muốn dùng nút Back to top mặc định thì dùng, rồi xóa nút “Lên đầu” trong đoạn code của mình đi.

Đối với các theme khác, tùy theme có hỗ trợ nút Back to top hay không thì mình không rõ, nhưng dối với theme Flatsome, các bạn vào Giao diện > Tùy chỉnh > Footer > Bỏ dấu tick ở Back to top button

Bước 2: Chèn ID đầu trang

Để nút Back to top hoạt động hiệu quả thì mình cần thêm một ID đặt trong đoạn HTML đầu trang. Trong theme Flatsome chúng ta vào Giao diện > Tùy chỉnh > Header > HTML > HTML1

Bên trong HTML 1 các bạn muốn viết gì vào đó cũng được, dùng thẻ <div>, thẻ <span> hoặc thẻ <p> gì cũng được, miễn sao nhét cho mình một cái id=”tên_id” vào đó nhé! Lưu ý: nhớ tên của ID để lát nữa mình đặt trong link của nút “Lên đầu” nhé!

Bước 3: Chèn code tạo Float menu vào giao diện

Đối với các theme khác, bạn vào Quản trị > Giao diện – Sửa – Footer.php và paste đoạn code vào ngay sau thẻ đóng </body>, trước thẻ đóng </html>.

Đối với theme Flatsome, bạn copy và paste đoạn code vào Flatsome – Advanced – Global setting – Footer Scripts.

Thêm nút Call to Action cho website

Về cơ bản thì sau khi cài WordPress bạn có thể cần thêm các plugin hoặc các đoạn code tạo nút Call to Action (kêu gọi hành động) để điều hướng khách hàng click vào các nút dẫn đi tới link mà mình mong muốn. Các nút Call to Action có thể hiểu như nút “Mua ngay“, “Gọi ngay cho chúng tôi” hoặc “Liên hệ tư vấn miễn phí“,… được bố trí ở một số vị trí trong website, ví dụ.

Có nhiều plugin làm được việc này. Tuy nhiên, sử dụng plugin luôn mang lại mối lo ngại về bảo mật và tốc độ. Do đó, các bạn hoàn toàn có thể sử dụng HTML và CSS để tạo các nút Call to Action đẹp mà đơn giản nhé!

Hôm nay mình sẽ hướng dẫn các bạn thêm các nút Call to Action như mẫu trong demo sau: http://nuocgiat.ninhbinhweb.net, http://mica2.ninhbinhweb.net/

Đối với theme Flatsome

Các bạn chỉ cần tuần tự làm theo các bước của mình sẽ Ok nhé!

Bước 1: Copy đoạn code tạo nút Call to Action

Trên thanh Admin Bar đen đen trên cùng có chữ Flatsome, chọn Advanced – Global Setting.Sau đó, copy toàn bộ đoạn code dưới đây bỏ vào Footer Script.

• Màu đỏ: sửa liên kết của nút.
• Màu xanh: Sửa text
• Các bạn cũng có thể tải các icon trên host của ninhbinhweb.net xuống rồi upload lên website của các bạn, sau đó lấy link ảnh thay vào link trong thẻ <img/> nhé!

Bước 2: Thêm CSS  cho giao diện PC

Vào Giao diện – Tùy biến – Style – Tùy chỉnh CSS (Custom CSS) – Custom CSS, sau đó copy toàn bộ đoạn code CSS này vào:

Bước 3: Thêm CSS để ẩn trên giao diện mobile

Các nút Call to Action dùng cho giao diện mobile không đẹp, nên chúng ta có thể ẩn nó đi bằng cách:

Vào Giao diện – Tùy biến – Style – Tùy chỉnh CSS (Custom CSS) – Custom Mobile CSS, sau đó copy đoạn code CSS này vào:

Nhìn hình trên thì các bạn biết chúng ta chuẩn bị làm công việc gì rồi phải không? Hôm nay mình hướng dẫn các bạn làm thanh liên hệ nhanh bao gồm 4 nút: gọi điện, nhắn tin, chat Zalo và chat Messenger nhé!

Tầm quan trọng của các nút Call to Action

Thực chất cái mình chuẩn bị hướng dẫn các bạn làm đây được gọi nôm na là các nút “Call to Action”, nghĩa là kêu gọi hành vi người lướt website click (bấm) vào mục tiêu chúng ta đặt sẵn.

Trong trường hợp này, các nút Call to Action  giúp khách hàng liên hệ nhanh với chúng ta thông qua 4 kênh liên hệ chủ yếu bao gồm: gọi điện, nhắn tin, chat Zalo và chat Messenger.

Đối với những website bán hàng hoặc dịch vụ, các nút liên hệ nhanh này có một vai trò quan trọng và gần như không thể thiếu. Chúng giúp khách hàng tương tác trực tiếp và nhanh nhất với chúng ta.

Đối với một số bạn thì thanh liên hệ nhanh này nhìn có vẻ khá nhàm chán. Tuy nhiên, đối với mình thì mình đánh giá khá cao kiểu hiển thị đơn giản và trực quan như vậy.

Còn bạn thì sao? Nếu bạn cũng thích, bắt tay làm luôn nhé!

Code chèn thanh liên hệ nhanh vào giao diện mobile

Đối với theme Flatsome

Bước 1: Tại thanh Admin Bar đen đen trên cùng, truy cập chữ Flatsome – Advanced – Global Setting – Footer Script

Bước 2: Copy toàn bộ đoạn code dưới đây và paste vào Footer Scipt nhé!

Lưu ý:

• Sửa số điện thoại của bạn để khách gọi tới trong tel:0972939830
• Sửa số điện thoại của bạn để khách nhắn tin đến trong sms:0972939830
• Sửa link trang zalo cá nhân của bạn để khách nhắn tin tới trong href=”http://zaloapp.com/gr/p/3ur778onb9ak“
• Sửa tên user Facebook của bạn để khách nhắn tin tới trong href=”https://messenger.com/t/joseph.thien.75“
• Các bạn có thể tải các icon trên server của ninhbinhweb.net về, upload lên web của các bạn rồi thay các link ảnh vào đoạn code trên nhé!

Bước 3: Lưu lại và hưởng thành quả trên giao diện mobile.

Đối với theme bất kỳ không phải Flatsome

Bước 1: Truy cập  Giao diện – Sửa – chọn theme đang dùng để sửa – Footer.php

Bước 2: Copy toàn bộ đoạn code ở bên trên vào giữa thẻ đóng </body> và </html>

Bước 3: Lưu lại và tận hưởng thành quả trên mobile nhé!

Lời kết

Vậy là các bạn có thể tự làm một thanh liên hệ nhanh trên giao diện mobile của website WordPress rồi phải không? Nếu bạn nào không làm được hoặc gặp sự cố gì, vui lòng comment để anh em trợ giúp nhé!

Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website nhé!

Tạo nút gọi điện, chat Zalo và chat Facebook cho website

Mình gửi các bạn link demo để biết chính xác bài viết này chúng ta sẽ làm gì nha, mời tham khảo: http://bds6.ninhbinhweb.info 

Và chính xác thì chúng ta sẽ thực hiện việc tạo và chèn các nút gọi điện, chat Zalo và chat Facebook nổi ở góc trái cho website WordPress như hình mô tả dưới đây:

Và bây giờ chúng ta bắt tay làm luôn nhé!

Đối với theme Flatsome

Bài viết hướng dẫn được thực hiện trên theme Flatsome. Do đó, các bạn nào sử dụng theme Flatsome thì hoàn toàn có thể làm theo y nguyên nhé!

Bước 1: Copy code HTML và CSS

Trên thanh đen đen trên cùng (Admin Bar) có chữ Flatsome, các bạn rê chuột vào Advanced – Global Setting và tìm đến Footer Script.

u đó, bạn copy toàn bộ đoạn code sau vào Footer Script nhé!