VietNetwork.Vn

Bạn có muốn làm nổi bật một mục menu trên trang web WordPress của mình không?

Làm nổi bật một mục menu thực sự có thể giúp bạn thu hút sự chú ý của người dùng đến một khu vực cụ thể trên menu của bạn. Điều này có thể tuyệt vời nếu bạn muốn làm nổi bật trang Giá cả hoặc Liên hệ với chúng tôi trên trang web của mình.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng đánh dấu một mục menu trong WordPress bằng mã CSS.

Tại sao bạn nên làm nổi bật một mục menu?

Menu điều hướng là danh sách các liên kết trỏ đến các khu vực quan trọng trên trang web của bạn. Chúng thường được trình bày dưới dạng một thanh ngang ở đầu mỗi trang trên  trang web WordPress.

Menu điều hướng này được tạo bằng cách thêm các mục menu khác nhau. Để biết thêm chi tiết, bạn có thể xem bài viết của chúng tôi về cách thêm menu điều hướng trong WordPress.

Mục menu được đánh dấu có thể là một cách tuyệt vời để thu hút sự chú ý của người dùng đến lời kêu gọi hành động nổi bật nhất của bạn. Đôi mắt của khách truy cập sẽ tự động được thu hút vào mục menu khi họ truy cập trang web của bạn.


Bằng cách thêm tính năng này, bạn có thể tạo một trang web thân thiện với người dùng và đánh dấu các mục menu quan trọng mà bạn muốn người dùng xem qua.

Nói như vậy, hãy xem cách bạn có thể làm nổi bật một mục menu trong WordPress bằng CSS.

• Phương pháp 1. Làm nổi bật một mục menu bằng Trình chỉnh sửa toàn trang
• Phương pháp 2. Làm nổi bật một mục menu bằng Trình tùy chỉnh giao diện
• Tùy chỉnh đánh dấu mục menu của bạn

1. Phương pháp 1. Làm nổi bật một mục menu bằng Trình chỉnh sửa toàn trang

Nếu bạn đang sử dụng giao diện kích hoạt khối thì bạn sẽ có Trình chỉnh sửa toàn trang thay vì Trình tùy chỉnh giao diện cũ hơn. Bạn cũng có thể dễ dàng đánh dấu một mục menu trong đó.

Đầu tiên, hãy đi tới Giao diện »Trình chỉnh sửa từ bảng điều khiển quản trị viên WordPress. Thao tác này sẽ hướng bạn đến trình chỉnh sửa trang web đầy đủ.

Tại đây, chỉ cần nhấp đúp vào mục menu bạn muốn đánh dấu, sau đó nhấp vào biểu tượng bánh răng ở trên cùng. Thao tác này sẽ ngay lập tức mở khối 'Cài đặt' của mục menu cụ thể đó.


Chỉ cần cuộn xuống trong khối 'Cài đặt' đến tab 'Nâng cao' và nhấp vào biểu tượng mũi tên bên cạnh để mở rộng tab.

Thao tác này sẽ mở ra trường 'Lớp CSS bổ sung' mà bạn chỉ cần viết highlighted-menu vào trường này.


Tiếp theo, nhấp vào nút 'Lưu' ở đầu trang để lưu các thay đổi của bạn.

Sau đó, bạn sẽ cần thêm một chút CSS vào giao diện của mình để tạo hiệu ứng nổi bật. Bạn có thể sửa lỗi Trình tùy chỉnh giao diện bị thiếu hoặc bạn có thể sử dụng plugin đoạn mã để thêm mã CSS.

1.1. Cách thêm đoạn mã CSS bằng WPCode

Để thêm CSS vào WordPress, chúng tôi khuyên bạn nên sử dụng WPCode vì đó là cách dễ nhất để thêm bất kỳ mã tùy chỉnh nào vào WordPress.

Trước tiên, bạn cần cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm hướng dẫn, hãy xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy điều hướng đến Đoạn mã »Thêm đoạn mã từ bảng quản trị WordPress của bạn. Bây giờ bấm vào nút 'Thêm Mới'.


Thao tác này sẽ đưa bạn đến trang 'Thêm đoạn mã'.

Tại đây, hãy di chuột qua tùy chọn 'Add Your Custom Code (New Snippet)' và chỉ cần nhấp vào nút 'Use Snippet' bên dưới nó.


Bây giờ bạn đang ở trang 'Tạo đoạn mã tùy chỉnh', hãy bắt đầu bằng cách chọn tên và 'Loại mã' cho đoạn mã CSS của bạn.

Bạn có thể chọn bất kỳ tên nào bạn thích.


Tiếp theo, chỉ cần nhấp vào menu thả xuống bên cạnh tùy chọn 'Loại mã' ở bên phải và sau đó chọn tùy chọn 'Đoạn mã phổ quát'.

Sau đó, sao chép/dán mã CSS sau vào 'Xem trước mã'.
   
<style type="text/css">
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
</style>
Đảm bảo bao gồm các thẻ kiểu, như bạn thấy trên Dòng 1 và 10 bên dưới.


Sau khi dán mã, hãy chuyển đến phần 'Chèn' bằng cách cuộn xuống.

Ở đây chỉ cần chọn chế độ 'Chèn tự động' để mã có thể được tự động thực thi trên toàn bộ trang web của bạn.


Bây giờ, hãy chuyển đến đầu trang và chuyển nút chuyển từ 'Không hoạt động' sang 'Hoạt động'.

Sau đó, chỉ cần nhấp vào nút 'Lưu đoạn mã'.


Bây giờ bạn đã đánh dấu thành công một mục menu trong WordPress bằng trình chỉnh sửa trang đầy đủ.

Đây là giao diện của mục menu sau khi bạn thêm mã CSS.


1.2. Cách truy cập Trình tùy chỉnh giao diện bằng giao diện khối

Nếu bạn muốn sử dụng Công cụ tùy chỉnh giao diện và sử dụng giao diện FSE, thì chỉ cần sao chép và dán URL bên dưới vào trình duyệt của bạn. Đảm bảo thay thế 'example.com' bằng tên miền của trang web của riêng bạn.
   
  Đăng nhập để xem liên kết

Tại đây, bạn chỉ cần nhấp vào tab 'CSS bổ sung'.


Bây giờ, hãy mở rộng trường 'CSS bổ sung', sau đó chỉ cần sao chép/dán đoạn mã sau.
   
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Sau đó, chỉ cần nhấp vào nút 'Xuất bản' ở trên cùng.


Đó là tất cả những gì cần thiết để làm nổi bật một mục menu.

Nó sẽ giống như thế này trên trang web của bạn khi hoàn thành:


2. Phương pháp 2. Làm nổi bật một mục menu bằng Trình tùy chỉnh giao diện

Nếu bạn đang sử dụng giao diện không kích hoạt khối, thì có thể bạn sẽ bật tùy biến giao diện theo mặc định. Làm nổi bật một mục menu trong tùy biến giao diện là một quy trình khá đơn giản.

Trước tiên, chỉ cần truy cập Giao diện »Tùy chỉnh trong bảng điều khiển WordPress của bạn để khởi chạy tùy biến giao diện. Sau khi tùy chỉnh giao diện mở ra, chỉ cần nhấp vào tab 'Menu'.


Khi bạn đang ở trong phần 'Menu', chỉ cần nhấp vào biểu tượng bánh răng ở trên cùng bên phải để hiển thị các thuộc tính nâng cao.

Bây giờ, chỉ cần chọn hộp 'Lớp CSS'.


Sau đó, cuộn xuống phần 'Menu'.

Nếu bạn có nhiều menu trên trang web của mình, chỉ cần nhấp vào menu có các mục menu mà bạn muốn đánh dấu.


Điều này sẽ mở ra một tab mới nơi bạn có thể chọn mục menu mà bạn muốn đánh dấu. Đó có thể là 'Bắt ��đầu' như trong ví dụ của chúng tôi hoặc đó có thể là trang biểu mẫu liên hệ hoặc liên kết đến cửa hàng trực tuyến của bạn.

Chỉ cần nhấp vào mục menu bạn chọn, mục này sẽ mở rộng mục đó để hiển thị một số tùy chọn. Nhấp vào trường 'Lớp CSS'.

Tất cả bạn phải làm là viết 'highlighted-menu'trong lĩnh vực này. Bạn có thể thêm Lớp CSS này vào nhiều mục menu và tất cả chúng sẽ được đánh dấu.


Tiếp theo, chỉ cần chuyển đến tab 'CSS bổ sung' trong tùy biến giao diện.

Bây giờ, chỉ cần sao chép và dán mã CSS sau.
   
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Xin chúc mừng! Bạn đã đánh dấu thành công một mục menu.

Lưu ý: giao diện của bạn có thể không có trường 'CSS bổ sung' trong tùy biến giao diện. Nếu không, hãy kiểm tra cài đặt giao diện để tìm hiểu cách thêm CSS tùy chỉnh. Nếu bạn không thể tìm thấy nó, bạn có thể muốn liên hệ với nhà phát triển hoặc thêm nó bằng cách sử dụng WPCode.


3. Tùy chỉnh đánh dấu mục menu của bạn

Bây giờ bạn đã đánh dấu mục menu, bạn có thể điều chỉnh mã CSS để tùy chỉnh mục menu của mình theo cách bạn muốn.

Ví dụ: bạn có thể thay đổi màu nền của mục menu.


Chỉ cần tìm đoạn mã sau trong đoạn mã CSS mà bạn vừa dán.
   
background: #FFB6C1
Sau khi xác định vị trí của nó, bạn chỉ cần thay thế số mã màu hồng bằng mã hex của bất kỳ màu nào bạn chọn:
   
background: #7FFFD4;
Trên đây là mã hex cho aquamarine.


Bạn có thể xem hướng dẫn của chúng tôi để dễ dàng thêm CSS tùy chỉnh cho các ý tưởng khác về cách tùy chỉnh mục menu được đánh dấu.

Sau khi bạn hài lòng với lựa chọn của mình, chỉ cần nhấp vào nút 'Xuất bản' trong tùy biến giao diện hoặc 'Lưu đoạn trích' trong WPCode để lưu các thay đổi của bạn.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách làm nổi bật biểu tượng menu trong WordPress. Bạn cũng có thể muốn xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách tạo kiểu cho các menu điều hướng WordPress hoặc chuyên gia của chúng tôi chọn các plugin WordPress phải có để phát triển trang web của bạn.