Khi thiết kế trang web của bạn theo chủ đề khối WordPress, bạn có thể nhận thấy rằng điều hướng chính cho trang web của bạn có các tùy chọn kiểu dáng hạn chế. Ví dụ: khi bạn nhấp vào liên kết trang trong điều hướng chính để truy cập một trang trên trang web của bạn, liên kết cho trang đang hoạt động sẽ không đổi màu bên trong điều hướng chính. Nói cách khác, không có dấu hiệu nào cho người dùng biết họ hiện đang ở trang nào.

Trải nghiệm người dùng tốt cho biết khách truy cập trang web phải luôn có một số dấu hiệu về vị trí của họ trên trang web của bạn – điều đó giúp họ không bị lạc.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tùy chỉnh nhanh chóng điều hướng trang web của bạn trong các chủ đề khối WordPress để hiển thị màu tùy chỉnh cho trang đang hoạt động. Tôi sẽ sử dụng chủ đề Twenty Twenty Four cho phần trình diễn này.

Bước 1: Điều hướng đến Trình chỉnh sửa khối

Từ Bảng điều khiển WordPress của bạn, đi tới Giao diện>Trình chỉnh sửa (mũi tên màu đỏ trong ảnh trên). Thao tác này sẽ đưa bạn đến Trình chỉnh sửa trang.

Nhấp vào khu vực nội dung chính ở bên phải của menu. Thao tác này sẽ đưa bạn vào trong Block Editor.

Bước 2: Thêm CSS tùy chỉnh

Tiếp theo, nhấp vào biểu tượng “Styles” ở góc trên cùng bên phải của Block Editor.

Nhấp vào biểu tượng “Thêm” (biểu tượng ba dấu chấm dọc), sau đó nhấp vào “CSS bổ sung”.

Dán mã CSS sau vào hộp văn bản “CSS bổ sung”:

.current-menu-item {
  color: #e23f1b;
}

Thay thế giá trị giữa ký hiệu “#” và “;” ký hiệu có mã hex cho bất kỳ màu nào bạn muốn sử dụng (bạn có thể nhận các giá trị mã hex màu trong WordPress bằng cách chỉnh sửa bất kỳ thứ gì có giá trị màu hoặc bằng cách sử dụng công cụ màu như HueMint or Coolors).

Nhấp vào nút “Lưu” ở đầu Trình chỉnh sửa khối, sau đó nhấp vào “Lưu” lần nữa.

Bước 3: Xem trang

Sau khi đã lưu các thay đổi, giờ đây bạn có thể nhấp vào biểu tượng “Xem trang” để xem trước trang web của mình với màu mới cho trang đang hoạt động trong điều hướng chính.

Xử lý sự cố

Nếu đoạn mã trên không phù hợp với bạn, có thể bạn đang sử dụng một chủ đề sử dụng các lớp khác nhau cho các mục menu đang hoạt động hoặc bạn có thể đang sử dụng các liên kết tùy chỉnh trong khối điều hướng thay vì liên kết trang.

Chủ đề không chặn hoặc Chủ đề chặn bên thứ ba

Để giải quyết vấn đề trước đây, bạn sẽ phải sử dụng công cụ “kiểm tra” trong trình duyệt của mình và tìm ra lớp nào được sử dụng cho các liên kết trang đang hoạt động trong điều hướng chính của bạn (bạn cũng có thể thử lên Google “Chủ đề ____ sử dụng lớp nào cho hoạt động liên kết trang trong điều hướng chính”).

Đối với vấn đề thứ hai, chỉ cần thay đổi liên kết tùy chỉnh của bạn thành liên kết trang bên trong Trình chỉnh sửa Trang. Để thực hiện việc này từ trong Block Editor, hãy nhấp vào biểu tượng ở góc trên cùng bên trái của trình chỉnh sửa (sẽ là logo WordPress hoặc logo trang web của bạn).

Sau đó, nhấp vào “Điều hướng”. Nhấp vào biểu tượng “Chỉnh sửa” bên cạnh tên menu chính của trang web của bạn.

Bấm vào menu điều hướng để chỉnh sửa nó. Sau đó, nhấp vào “Chuyển đến khối điều hướng gốc” trong Thanh bên Cài đặt khối nếu không được đưa đến đó theo mặc định.

Trong tiêu đề “Menu” trong Thanh bên Cài đặt khối, bạn sẽ thấy danh sách tất cả các trang nằm trong điều hướng chính của bạn. Nếu bạn có bất kỳ trang nào trong trang web trong điều hướng được liệt kê dưới dạng liên kết tùy chỉnh (như mục nhập dưới cùng trong ảnh ví dụ), bạn sẽ phải xóa mục nhập đó và thêm lại mục đó dưới dạng một trang (nếu có thể).

Để thực hiện việc này, hãy nhấp vào biểu tượng “Tùy chọn” bên cạnh mục nhập, sau đó nhấp vào “Xóa ____”. Tiếp theo, nhấp vào biểu tượng “+” ở cuối danh sách trang.

Tiếp theo, nhấp vào “Liên kết trang”, sau đó tìm trang bạn muốn thêm. Sau khi bạn đã thêm trang, hãy nhấp vào “Lưu” và nhấp vào “Lưu” lần nữa. Vấn đề cần được giải quyết.