Chỉnh sửa màu trong menu

Chỉnh sửa màu trong menu

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ác bài viết liên quan:

Cách chỉnh sửa màu trong menu

Bạn có thể dễ dàng chỉnh sửa màu trong menu của mình trực tiếp từ bảng điều khiển quản trị. Nếu bạn chỉ muốn thêm một danh mục, trang mới hoặc một liên kết vào menu của mình, đây là cách thực hiện.

Cách thêm liên kết tùy chỉnh vào menu WordPress

Khi bạn thêm một danh mục hoặc một trang vào menu trang web của mình trong WordPress, bạn không thể thay đổi tên của chúng. Đây có thể là một vấn đề khi bạn có danh mục với tiêu đề dài.

Một giải pháp tuyệt vời cho vấn đề này là tạo một liên kết tùy chỉnh. Bằng cách đó, bạn có thể đặt tiêu đề cho liên kết theo cách bạn muốn.

Chỉnh sửa màu trong menu

Đầu tiên, vào Appearance >> Menus và sau đó chọn Custom Links .

Nhập URL cho liên kết tùy chỉnh, thêm văn bản liên kết và nhấp vào Thêm vào Trình đơn .

Cách thêm danh mục vào menu WordPress

Việc thêm một danh mục hoặc một trang vào menu cũng hoạt động theo cách tương tự.

Chỉnh sửa màu trong menu

Chỉ cần chuyển sang phần Danh mục hoặc Trang. Đánh dấu vào hộp bên cạnh một mục và nhấp vào nút Thêm vào Menu .

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.

Chỉnh sửa màu trong menu

Đâ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.

Chỉnh sửa màu trong menu

Đ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ế.

Chỉnh sửa màu trong menu

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.

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.

Chỉnh sửa màu trong 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;
}

Cách thay đổi phông chữ menu trong WordPress

Bạn cũng có thể thay đổi phông chữ được sử dụng trong menu bằng một phông chữ hoàn toàn khác. Đây là cách nó được thực hiện.

Bước 1: Chọn một Phông chữ của Google

Đầu tiên, hãy truy cập Google Fonts và tìm một phông chữ bạn muốn sử dụng.

Chỉnh sửa màu trong menu

Sau đó, sao chép mã nhúng HTML của nó và các quy tắc CSS.

Bước 2: Nhúng phông chữ

Quay lại bảng điều khiển quản trị WordPress và đi tới Appearance >> Theme Editor .

Chỉnh sửa màu trong menu

Chỉnh sửa tệp Tiêu đề Chủ đề ( header.php ) và dán mã nhúng HTML của phông chữ ngay trước thẻ đóng .

Nhấp Lưu để lưu thay đổi.

Bước 3: Xác định phông chữ menu mới trong CSS

Chỉnh sửa màu trong menu

Bây giờ, hãy chuyển đến Trình tùy chỉnh chủ đề của bạn >> Phần CSS bổ sung . Và sao chép-dán đoạn mã sau để thay đổi phông chữ được sử dụng trong menu.

.menu-item {
font-family: ‘Cinzel’, serif;
}

Đảm bảo tùy chỉnh các quy tắc cho phông chữ với một quy tắc bạn đã sao chép từ trang Phông chữ của Google.

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

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply