Bạn có muốn thiết kế menu điều hướng WordPress của mình để thay đổi màu sắc hoặc hình thức của chúng không? Mặc dù chủ đề WordPress của bạn xử lý giao diện của các menu điều hướng, bạn có thể dễ dàng tùy chỉnh nó bằng CSS để đáp ứng yêu cầu của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thiết kế menu điều hướng WordPress trên trang web của bạn.
Chúng tôi sẽ chỉ ra hai phương pháp khác nhau. Phương pháp đầu tiên dành cho người mới bắt đầu vì nó sử dụng plugin và không yêu cầu bất kỳ kiến thức về mã nào. Phương pháp thứ hai dành cho người dùng trung gian DIY thích sử dụng mã CSS thay vì plugin.
phương pháp 1: Thiết kế menu điều hướng WordPress bằng cách sử dụng plugin
Chủ đề WordPress của bạn sử dụng CSS để thiết kế menu điều hướng. Nhiều người mới bắt đầu không thoải mái chỉnh sửa các tệp chủ đề hoặc tự viết mã CSS.
Đó là khi một plugin kiểu WordPress có ích. Nó tiết kiệm cho bạn từ chỉnh sửa tập tin chủ đề hoặc viết bất kỳ mã.
Điều đầu tiên bạn nên làm là cài đặt và kích hoạt plugin CSS Hero. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
CSS Hero là một plugin WordPress cao cấp cho phép bạn thiết kế chủ đề WordPress của riêng bạn mà không cần viết một dòng mã nào (không yêu cầu HTML hoặc CSS). Xem đánh giá CSS Hero của chúng tôi để biết thêm thông tin.
Người dùng WPBeginner có thể sử dụng phiếu giảm giá CSS Hero này để được giảm giá 34% khi mua hàng.
Khi kích hoạt, bạn sẽ được chuyển hướng để lấy khóa giấy phép CSS Hero. Chỉ cần làm theo các hướng dẫn trên màn hình và bạn sẽ được chuyển hướng đến trang web của mình sau vài cú nhấp chuột.
Tiếp theo, bạn cần nhấp vào nút CSS Hero trên thanh công cụ quản trị viên WordPress.
CSS Hero cung cấp trình soạn thảo WYSIWYG (những gì bạn thấy là những gì bạn nhận được). Bằng cách nhấp vào nút, bạn sẽ truy cập trang web của mình bằng thanh công cụ CSS Hero nổi trên màn hình.
Bạn phải nhấp vào biểu tượng màu xanh ở trên cùng để bắt đầu chỉnh sửa.
Sau khi nhấp vào biểu tượng màu xanh, di chuyển chuột vào menu điều hướng của bạn và CSS Hero sẽ làm nổi bật nó bằng cách hiển thị các đường viền xung quanh nó. Khi bạn nhấp vào menu điều hướng được tô sáng, nó sẽ hiển thị cho bạn các mục bạn có thể chỉnh sửa.
Trong ảnh chụp màn hình ở trên, nó cho chúng ta thấy hộp chứa của menu điều hướng trên cùng. Giả sử chúng ta muốn thay đổi màu nền của menu điều hướng. Trong trường hợp đó, chúng tôi sẽ chọn điều hướng hàng đầu ảnh hưởng đến toàn bộ menu của chúng tôi.
CSS Hero bây giờ sẽ hiển thị cho bạn các thuộc tính khác nhau mà bạn có thể chỉnh sửa như văn bản, nền, đường viền, lề, điền, v.v.
Bạn có thể nhấp vào bất kỳ tài sản nào bạn muốn thay đổi. CSS Hero sẽ cho bạn thấy một giao diện đơn giản nơi bạn có thể thực hiện các thay đổi của mình.
Trong ảnh chụp màn hình ở trên, chúng tôi đã chọn nền và nó cho chúng ta thấy một giao diện đẹp để chọn màu nền, độ dốc, hình ảnh và hơn thế nữa.
Khi bạn thực hiện thay đổi, bạn có thể thấy chúng trực tiếp trong bản xem trước chủ đề.
Khi bạn hài lòng với các thay đổi, nhấp vào nút Lưu trên thanh công cụ CSS Hero để lưu các thay đổi.
Điều tốt nhất khi sử dụng phương pháp này là bạn có thể dễ dàng hoàn tác mọi thay đổi bạn thực hiện. CSS Hero duy trì một lịch sử đầy đủ về tất cả các thay đổi của bạn và có thể đến và đi giữa các thay đổi đó.
phương pháp 2: Tự thiết kế menu điều hướng WordPress
Phương pháp này yêu cầu bạn thêm thủ công CSS tùy chỉnh và dành cho người dùng trung gian.
Các menu điều hướng WordPress được hiển thị trong một danh sách không có thứ tự (danh sách dấu đầu dòng).
Thông thường nếu bạn sử dụng thẻ menu mặc định của WordPress, nó sẽ hiển thị một danh sách không có các lớp CSS liên quan.
Danh sách không theo thứ tự của bạn sẽ có tên lớp "menu" với mỗi mục danh sách có lớp CSS riêng.
Điều này có thể hoạt động nếu bạn chỉ có một vị trí menu. Tuy nhiên, hầu hết các chủ đề có nhiều vị trí nơi bạn có thể hiển thị các menu điều hướng.
Chỉ sử dụng lớp CSS mặc định có thể gây ra xung đột với các menu ở các vị trí khác.
Đây là lý do tại sao bạn cần xác định lớp CSS và vị trí menu. Rất có thể, chủ đề WordPress của bạn đã thực hiện điều này bằng cách thêm các menu điều hướng bằng mã như thế này:
