Hướng dẫn tạo Float Menu tùy chỉnh đẹp cho website WordPress
  1. Home
  2. Phần mềm
  3. Hướng dẫn tạo Float Menu tùy chỉnh đẹp cho website WordPress
Nguyễn Văn Luyến Nguyễn Văn Luyến 5 năm trước

Hướng dẫn tạo Float Menu tùy chỉnh đẹp cho website WordPress

Chào các bạn, bữa trước mình có share code tạo các nút hữu ích phía dưới chân trang cho website WordPress rồi phải không? Hôm nay mình tiếp tục chia sẻ một đoạn code khá hay để tạo Float menu (menu nổi) bằng HTML, CSS và JavaScript, mời các bạn cùng theo dõi.

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:

Giuseart.com-Code-tạo-floatmenu-cho-website
Giao diện Float menu sau khi hoạt động

Link xem demo

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

Giuseart.com-Tạo-float-menu-cho-website-wordpress
Bỏ nút Back to top trong theme Flatsome

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

Giuseart.com-Tạo-floatmenu-cho-trang-web-wordpress
Chèn một ID vào HTML của header để nút Back to top có thể hoạt động

Bên trong HTML 1 các bạn muốn viết gì vào đó cũng được, dùng thẻ

, thẻ hoặc thẻ

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ệnSửa Footer.php và paste đoạn code vào ngay sau thẻ đóng , trước thẻ đóng .

Đối với theme Flatsome, bạn copy và paste đoạn code vào Flatsome AdvancedGlobal settingFooter Scripts.

Chèn nut call to action trong theme
Chèn code hiển thị Float menu vào Footer Scripts trong theme Flatsome

Tất cả đoạn code cần chèn vào được tổng hợp tại đây:

Giải thích một chút:

Các bạn chỉ cần biết bên trong các cặp thẻ màu đỏ là đoạn JavaScript để tạo hiệu ứng chuyển động trượt lên mượt mà khi ta ấn nút “Lên đầu”. Còn cụ thể bên trong nó có những thành phần gì thì có lẽ các bạn tự tìm hiểu, mình không nói nhiều kẻo lại khó hiểu.

Bên trong cặp thẻ

là đoạn CSS, dùng để định dạng và trang trí cho Float menu của chúng ta.

Còn lại đoạn bên dưới bên trong cặp thẻ

là đoạn HTML – bộ khung của Float menu.

Về phần các bạn, các bạn có thể thêm sửa hoặc tùy chỉnh thông tin cần thiết trong đoạn HTML, cụ thể như sau:

Giuseart.com-Tạo-Float-menu-cho-wordpress
Màu xanh- sửa link trang; màu vàng – sửa link ảnh; màu đỏ – sửa label

Màu xanh: Sửa liên kết của menu. Ví dụ: ở demo mình để tiêu đề là Bảng giá và có liên kết tới trang Hướng dẫn thanh toán (/huong-dan-thanh-toan).

Riêng nút “Lên đầu”, thẻ của nó phải có liên kết dạnghref=”#tên_id”. Các bạn lấy ID mới tạo ở bước 01 nhập vào đây nhé!

Màu vàng: Sửa liên kết hình ảnh icon. Mặc định các icon mình đang để link tại demo web của NinhBinhWeb.net dẫn sang. Trong một số trường hợp các bạn cài SSL nó báo lỗi không bật xanh https thì chắc chắn do phần này. Các bạn buộc phải tải icon về, upload lên host của các bạn rồi thay sửa link vào phần mình bôi màu vàng đó là được.

Màu đỏ: Chính là tên của các menu tùy chỉnh trên Float menu.

Bước 5: Sửa CSS để trang trí cho Float menu

Mình đã trang trí sẵn cho Float menu cũng khá đẹp rồi. Tuy nhiên, trong một số trường hợp các bạn cần thay đổi màu sắc hoặc kích thước chữ theo nhu cầu riêng, thì các bạn có thể sửa các thuộc tính css trong cặp thẻ

nhé!

Cụ thể, thay đổi màu nền giống nhau cho các items, chỉnh mã màu trong thuộc tínhbackground của.menu-float-right #group ul li{}.

Trường hợp muốn sửa màu của từng items riêng, mình cũng có đặt class riêng cho từng menu items rồi nhé! Chỉnh thoải mái!

Nếu bạn muốn ẩn Float menu trên mobile thì thêm@media(max-width: 767px) {.menu-float-right{display:none}} vào trong cặp thẻ

nhé!

Bước 4: Save all change

Bước cuối cùng sau khi thêm sửa nội dung cho Float menu chính là Save all Change. Lưu lại và ra trang chủ hưởng thụ thành quả thôi các bạn ơi!

14 lượt xem | 0 bình luận
Luôn luôn lắng nghe, lâu lâu mới hiểu

Avatar

Bình luận gần đây

//rongcon.net
Nguyễn Văn Luyến 4 tháng trước
Ưng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...
//rongcon.net
Nguyễn Văn Luyến 5 tháng trước
Chuẩn bị lại lên giá
//rongcon.net
Chuyển Đổi Số 10 tháng trước
Có trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường á
//rongcon.net
Chuyển Đổi Số 10 tháng trước
Mỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!
//rongcon.net
quang tuấn 10 tháng trước
ok cám ơn add
//rongcon.net
Đàm kiên 1 năm trước
sao không thấy hướng dẫn khắc phục lỗi the macro vậy
//rongcon.net
Đàm kiên 1 năm trước
file tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhé
//rongcon.net
Nguyễn Văn Luyến 1 năm trước
Bài viết hay
ZaloMessengerEmail
Đồng ý Cookie
Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi