Rate this post

Bạn đã tùy chỉnh thiết kế chủ đề WordPress của mình, thay đổi phông chữ, màu sắc, hình ảnh và mọi thứ khác nhưng không thể tìm cách thay đổi màu menu trong WordPress.

Nếu tình huống này nghe có vẻ quen thuộc, bạn không đơn độc. Hầu hết các chủ đề WordPress không cung cấp cho bạn tùy chọn chỉnh sửa màu sắc được sử dụng trong menu. Và đôi khi, nó có thể làm hỏng thương hiệu của toàn bộ thiết kế trang web của bạn.

Rất may, có một cách bạn có thể chỉnh sửa thiết kế menu và thay đổi màu sắc của nó. Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách thực hiện điều đó trong một vài bước đơn giản.

Tốt hơn nữa, chúng tôi thậm chí sẽ chỉ cho bạn cách thêm liên kết vào menu của bạn, thay đổi phông chữ menu và tùy chỉnh menu di động.

Cách thay đổi màu nền menu trong WordPress

Thay đổi màu nền menu đòi hỏi một chút công việc. Bạn cũng sẽ làm việc với một số mã CSS.

Đó là một quá trình đơn giản. Tuy nhiên, để an toàn, chúng tôi khuyên bạn nên sao lưu các tệp chủ đề của mình. Bạn có thể tải xuống các tệp chủ đề qua FTP hoặc sử dụng plugin để sao lưu trang web vào bộ lưu trữ đám mây.

Bước 1: Tìm ID CSS

Bước đầu tiên để chỉnh sửa kiểu cho menu là tìm mã ID CSS cho menu và tiêu đề của chủ đề của bạn.

Để thực hiện việc này, chỉ cần tải trang web của bạn trong Chrome hoặc Firefox. Sau đó di con trỏ chuột đến menu. Bây giờ, nhấp chuột phải và chọn Kiểm tra.

Đây là bạn sẽ có thể thấy một dòng mã giống như Văn bản bên trong dấu ngoặc kép là ID của tiêu đề trang web của bạn.

Trong ví dụ này, chúng tôi đang sử dụng chủ đề WordPress Twenty Twenty mặc định. ID cho tiêu đề và menu sẽ khác nhau giữa chủ đề này với chủ đề khác. Vì vậy, bạn sẽ cần phải tự mình tìm thấy nó. Hoặc liên hệ với nhà phát triển chủ đề của bạn và hỏi họ.

Bước 2: Xác định màu nền menu

Khi bạn tìm thấy ID cho tiêu đề, bạn có thể tiếp tục và tùy chỉnh màu nền.

Để làm điều này, bạn sẽ phải thêm mã CSS tùy chỉnh vào trang web của mình.

Đi tới Giao diện >> Tùy chỉnh và chọn CSS bổ sung, sau đó sao chép và dán đoạn mã sau vào hộp mã CSS.

site-header {
  background-color: #DD33FF;
}

Đảm bảo chỉnh sửa mã ID với ID từ chủ đề của bạn. Và để thay đổi mã màu Hex với màu ưa thích của bạn. Bạn có thể tìm mã màu hex bằng công cụ này .

Bước 3: Thay đổi màu liên kết menu

Bạn sẽ nhận thấy rằng điều này sẽ thay đổi màu sắc cho toàn bộ phần tiêu đề. Đó là cách tốt nhất để thay đổi thiết kế.

Nếu bạn cũng muốn thay đổi màu sắc của các liên kết, hãy sao chép và dán đoạn mã sau vào phần CSS bổ sung của bạn.

site-header li a {
  color: #fff;
}

Tất nhiên, bạn sẽ phải tùy chỉnh mã bằng các thẻ ID mà chủ đề của bạn sử dụng.

Xem thêm Menu Hamburger là gì? 5 Ví dụ về Trang web

Bước 4: Thay đổi màu nền của menu trên thiết bị di động

Bạn cũng sẽ phải thay đổi màu sắc theo cách thủ công cho phiên bản di động của menu.

Làm theo các bước tương tự như trên để tìm mã ID cho menu di động. Nó thường giống như .mobile-menu hoặc .responsive-menu. Và sau đó sử dụng mã sau để thay đổi màu nền.

.mobile-menu {
  background-color: # DD33FF;
}

Xem thêm Plugin font WordPress

Cách cài đặt menu WordPress tùy chỉnh

Nếu bạn muốn một cách tiếp cận dễ dàng hơn và thân thiện với người mới bắt đầu, bạn có thể sử dụng một plugin để thay đổi hoàn toàn thiết kế menu của mình.

Có các plugin miễn phí như Groovy Menu và Max Mega Menu cho phép bạn thiết lập menu tùy chỉnh trong WordPress với một vài cú nhấp chuột.

Chỉnh sửa màu trong menu

Ví dụ: plugin Groovy Menu cho phép bạn dễ dàng tùy chỉnh kiểu dáng của menu và thay đổi màu sắc của nó dễ dàng hơn. Nó dễ dàng hơn nhiều so với việc chỉnh sửa mã chủ đề của bạn.

Ngoài ra còn có nhiều plugin menu cao cấp cung cấp cho bạn nhiều tính năng và thiết kế menu tùy chỉnh hơn để lựa chọn. Bạn có thể tham khảo hướng dẫn cách tạo menu của chúng tôi để được hướng dẫn chi tiết.

Phần kết luận

Đừng bỏ qua tầm quan trọng của việc tạo ra trải nghiệm có thương hiệu cho khán giả của bạn. Chỉnh sửa màu trong menu để thay đổi màu sắc có vẻ là một nhiệm vụ đơn giản, nhưng nó sẽ cần một chặng đường dài để cải thiện trải nghiệm người dùng.

Nếu bạn gặp khó khăn khi cải thiện thiết kế trang web của mình, có lẽ đã đến lúc nâng cấp và chuyển sang một chủ đề đẹp hơn. Kiểm tra gói chủ đề độc quyền của chúng tôi để tải xuống hơn 60 chủ đề WordPress cao cấp với giá của một chủ đề.

Xem thêm: Hướng dẫn sử dụng WordPress

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 *

Contact Me on Zalo
Call now