Tạo Float Menu tùy chỉnh đẹp cho website WordPress

Hi chào các bạn hôm nay mình sẽ hướng dẫn tới các bạn tạo Float Menu tùy chỉnh đẹp cho website WordPress.Do mình làm 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 là được nhé.

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.

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


1
<div>::CODECOLORER_BLOCK_1::</div>

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ẻ <style></style> 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ính background 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ẻ <style></style> 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!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *